Problem/Motivation
CKEditor5 module's off-canvas CSS reset styles override link colors from my theme's ckeditor5-stylesheets stylesheets. This happens, for example, when adding a block with wysiwyg-enabled field in Layout Builder.
Here's an example from a Drupal 11.1.1. This screenshot shows a CKEditor5-enabled wysiwyg field in Layout Builder, which is an off-canvas context:
Steps to reproduce
Apply this code change to Drupal core. Its goal is to make links green in CKEditor5 instances for Olivero theme (the default theme in standard profile).
diff --git a/core/themes/olivero/css/ckeditor-new.css b/core/themes/olivero/css/ckeditor-new.css new file mode 100644 index 00000000000..9d5fee4d26a --- /dev/null +++ b/core/themes/olivero/css/ckeditor-new.css @@ -0,0 +1,3 @@ +.ck-content a { + color: green; +} \ No newline at end of file diff --git a/core/themes/olivero/olivero.info.yml b/core/themes/olivero/olivero.info.yml index 1f330d094c0..0c28f16a6ce 100644 --- a/core/themes/olivero/olivero.info.yml +++ b/core/themes/olivero/olivero.info.yml @@ -19,6 +19,8 @@ package: Core version: VERSION libraries: - olivero/global-styling +ckeditor5-stylesheets: + - css/ckeditor-new.css regions: header: Header primary_menu: Primary menu
Steps to reproduce:
- Install Drupal 11.1 with Standard profile.
- Enable Layout Builder module.
- Enable per-entity layout overrides for "Basic page" content type.
- Create a "Basic page" content.
- Click "Layout" to go to its Layout Builder interface.
- Add a block.
- Choose "Create a content block"
- Add a link in the block's wysiwyg-enabled "Body" field.
- Inspect the link in the browser's developer tools.
- Notice that the link's color is not green, but is overridden by the reset (see above screenshot).
Here are the styles that are overriding:
<style id="ckeditor5-off-canvas-reset"> #drupal-off-canvas-wrapper [data-drupal-ck-style-fence] .ck.ck-content {display:revert;background:revert;color:initial;padding:revert;} #drupal-off-canvas-wrapper [data-drupal-ck-style-fence] .ck.ck-content li {display:list-item} #drupal-off-canvas-wrapper [data-drupal-ck-style-fence] .ck.ck-content ol li {list-style-type: decimal} </style>
Proposed resolution
The CKEditor5 docs (https://www.drupal.org/node/3259165) indicate that any CSS rules with .ck-content in their selectors will be prefixed so that the reset does not affect them. However, this is not true in my experience here. Instead, I need to also include class ck. This change seems to make the fix the issue:
.ck.ck-content a {
color: green;
}
Two proposals/ideas:
1. Update the CSS reset to not affect font colors.
2. Update the documentation (if any other than the change record exist) to require rule .ck.ck-content for rules to overrule the CSS reset.
Is the CSS reset behaving as expected? If not, what are some good ways to address this unexpected behavior?