Repository navigation
CSS nesting is broken in the fallback div.editor-styles-wrapper version of the editor. #65172
Description
Description
When the editor falls back to the editor div rather than the new iframe, the .editor-styles-wrapper class scoping breaks CSS nesting, which is now supported in all major, modern browsers.
In the new iframe, for instance, I could write the following, which gets output exactly as it is written here, which works in modern browsers:
.some-parent {
.some-child {
color: purple;
}
}
However, when this gets loaded into the .editor-styles-wrapper div and add_editor_style adds the scoping class, the result is this:
.editor-styles-wrapper .some-parent {
.editor-styles-wrapper .some-child {
color: purple;
}
}
The child should not receive a scope, since .some-parent does not contain an element called .editor-styles-wrapper.
Step-by-step reproduction instructions
- Create a CSS file, e.g.
css-nesting.cssat the root of your theme. - Add the following in that file:
.some-parent {
.some-child {
color: purple;
}
}
- Add the following to
functions.php.
add_action( 'after_setup_theme', function() {
add_theme_support( 'editor-styles' );
add_editor_style( '/css-nesting.css' );
} );
- Load a page that uses the old div.editor-styles-wrapper and view the source: you'll see the broken nesting in the <style> tag that gets created for scoping.
Note I'm not 100% sure how to force the old div.editor-styles-wrapper version to be used, but I've heard having a block registered with apiVersion equal to 2 in the blocks.json will trigger this behavior.
Screenshots, screen recording, code snippet
No response
Environment info
- WordPress 6.6.1.
- Basic Underscores theme.
- No plugins active.
Please confirm that you have searched existing issues in the repo.
- Yes
Please confirm that you have tested with all plugins deactivated except Gutenberg.
- Yes
Activity
kubiqsk commentedon Jul 24, 2025
Hi,
did you find some tricky way how to fix this?
I see it's almost 1 year and there is no reaction in here, despite it's a pretty serious bug...
tcmulder commentedon Jul 25, 2025
I think this has been fixed. I now get:
in WordPress 6.8.1. That works.
Also, it's much more common for the new iframe to load rather than the legacy div system these days, since far fewer block.json files for blocks are below version 3.
kubiqsk commentedon Jul 25, 2025
Not really, for me it's still not working, that's why I commented this thread in here...
I had to do
@import()in main CSS file to trick it, so it will not add any:where(.editor-styles-wrapper)anywhere...Eg.
will be
and that will not work for the
.imageclass of coursekubiqsk commentedon Jul 25, 2025
Can you reopen this issue please? Or should I create a new one? Because it's really not solved...
tcmulder commentedon Jul 25, 2025
Ah, you're right: my build tool was compiling the problem away. With my previous example, I'm now getting:
which is slightly different than before, but still problematic. I've not found a workaround beyond implementing a build tool (I'm using @wordpress/scripts) if my theme needs to support version 2 of block.json.
USERSATOSHI commentedon Jul 30, 2025
Reproduction Report
Description
This report validates whether the issue can be reproduced.
Environment
Actual Results
Supplemental Artifacts