Skip to content

Editor stylesheet CSS specificity issues #10067

@brettsmason

Description

@brettsmason

Describe the bug
Editor stylesheet CSS specificity issues.

To Reproduce

  1. Add editor stylesheet as per the documentation.
  2. Add a basic heading tag eg h2
  3. An example of the generated style I'm using which works fine:
.editor-block-list__block h2 {
   font-size: 2rem;
   line-height: 1.16666667;
}
  1. The line-height rule is being overruled by a few rules in core with higher specificity:
.wp-block-heading h1.editor-rich-text__tinymce, .wp-block-heading h2.editor-rich-text__tinymce, .wp-block-heading h3.editor-rich-text__tinymce {
   line-height: 1.4;
}

.editor-rich-text__tinymce.mce-content-body {
    line-height: 1.8;
}

Expected behavior
Core styles should have less specificity to allow for an easier time adding a comprehensive custom editor stylesheet.

Could the above rules not be written like:

.wp-block-heading h1, .wp-block-heading h2, .wp-block-heading h3 {
   line-height: 1.4;
}

.editor-rich-text__tinymce {
    line-height: 1.8;
}

This allows the editor stylesheet to correctly trump the core styles.
This is only a brief example, but I'm sure there are others. I'd be happy to list all problematic styles that I find if it helps.

Additional context
Gutenberg 3.8 and WordPress 4.9.8

Metadata

Metadata

Assignees

No one assigned

    Labels

    CSS StylingRelated to editor and front end styles, CSS-specific issues.CustomizationIssues related to Phase 2: Customization effortsGood First IssueAn issue that's suitable for someone looking to contribute for the first time[Feature] Custom Editor StylesFunctionality for adding custom editor styles[Status] In ProgressTracking issues with work in progress[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions