Editor styles: scope without adding specificity#56564
Conversation
|
Size Change: +109 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in eecacc1. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7007483129
|
@michalczaplinski It did or it didn't? I checked your video and it seems to work after you check out the branch at the end? |
|
Or did you mean before you added the commit? :) |
andrewserong
left a comment
There was a problem hiding this comment.
Thanks @ellatrix and @michalczaplinski, this is testing great for me!
To reproduce, I edited my theme's theme.json to set a couple of the fontSizes to use slugs that match these default rules for normal and huge font sizes.
| Before (defaults override theme.json styles) | After (theme.json rules win out) |
|---|---|
![]() |
![]() |
Looks like the rules are all still output (with lower specificity) for the backwards compatibility / fallback cases.
LGTM! ✨
|
Awesome! |
Yeah, exactly. Sorry, I didn't phrase it super clearly 🙂 |


What?
This should fix #56293, but I'm not familiar enough to understand how to test. Would appreciate testing.
Why?
Editor styles with hardcoded and unconditional scoping (.editor-styles-wrapper) add extra CSS specificity, which causes unscoped CSS to be overridden.
How?
Using
:where(.editor-styles-wrapper)should remove this specificity.Testing Instructions
Testing Instructions for Keyboard
Screenshots or screencast