Skip to content

Commit fa417fc

Browse files
Editor: Fix bumped specificity for layout styles in non-iframed editor.
Fixes a regression introduced in [58241] which inadvertently bumped the specificity in a non-iframed editor for `.editor-styles-wrapper .is-layout-flow > *` from (0,1,0) to (0,2,0). This fix restores theme.json spacing rules taking precedence over the implicit spacing rules in a non-iframed editor. **The What** When the block editor is not iframed (which can happen when Custom Fields are active, or blocks that use and older `apiVersion` are present), style rules are processed using post css to append the `.editor-styles-wrapper` class name. This has the effect of scoping the the style rules to ensure they don't affect the editor chrome or admin. With [58241], one of the rules was changed to `.is-layout-flow > *`. In a iframed editor, the specificity of this rule is okay (0,1,0), but in a non-iframed editor it becomes `.editor-styles-wrapper .is-layout-flow > *`, a specificity of (0,2,0). Comparing this to before [58241], the same rule was `.editor-styles-wrapper :where(body .is-layout-flow) > *` (specificity 0,1,0). This is a regression in specificity that has caused some issues. Notably themes can no longer properly override the spacing for blocks using theme.json and have the results correctly shown in the non-iframed editor. **The How** This changeset modifies the selector to `:root :where(.is-layout-flow) > *` (still specificity 0,1,0). `transformStyles` handles 'root' selectors a little differently, it'll instead replace the `:root` part so it becomes `.editor-styles-wrapper where(.is-layout-flow) > *` (keeping the specificity at 0,1,0). The other layout selector that this affects is the `:first-child` `:last-child` selectors that are responsible for resetting margin at the start and end of a block list. They traditionally have a 0,2,0 specificity so that they can override both the above rule and any rules in the theme.json. Those selectors are also maintained at 0,2,0 with this change, they become something like `:root :where(.is-layout-flow) > :first-child`. **References:** * PHP changes from [WordPress/gutenberg#64076 Gutenberg PR 64076]. Follow-up to [58241], [58228], [55956], [54162]. Props talldanwp, aaronrobertshaw, andrewserong, markhowellsmead, ramonopoly, hellofromTonya. Fixes #61829. git-svn-id: https://develop.svn.wordpress.org/trunk@58890 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 3476790 commit fa417fc

File tree

2 files changed

+11
-6
lines changed

2 files changed

+11
-6
lines changed

src/wp-includes/class-wp-theme-json.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1692,7 +1692,7 @@ protected function get_layout_styles( $block_metadata, $types = array() ) {
16921692
$spacing_rule['selector']
16931693
);
16941694
} else {
1695-
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s';
1695+
$format = static::ROOT_BLOCK_SELECTOR === $selector ? ':root :where(.%2$s)%3$s' : ':root :where(%1$s-%2$s)%3$s';
16961696
$layout_selector = sprintf(
16971697
$format,
16981698
$selector,

0 commit comments

Comments
 (0)