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 [https://github.com/WordPress/gutenberg/pull/64076 Gutenberg PR 64076].

Follow-up to [58241], [58228], [55956], [54162].

Props talldanwp, aaronrobertshaw, andrewserong, markhowellsmead, ramonopoly, hellofromTonya.
Fixes #61829.
Built from https://develop.svn.wordpress.org/trunk@58890


git-svn-id: http://core.svn.wordpress.org/trunk@58286 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
hellofromTonya 2024-08-13 17:45:18 +00:00
parent 6eebb7cd54
commit 30cd5e4ea0
2 changed files with 2 additions and 2 deletions

View File

@ -1692,7 +1692,7 @@ class WP_Theme_JSON {
$spacing_rule['selector'] $spacing_rule['selector']
); );
} else { } else {
$format = static::ROOT_BLOCK_SELECTOR === $selector ? '.%2$s %3$s' : '%1$s-%2$s %3$s'; $format = static::ROOT_BLOCK_SELECTOR === $selector ? ':root :where(.%2$s)%3$s' : ':root :where(%1$s-%2$s)%3$s';
$layout_selector = sprintf( $layout_selector = sprintf(
$format, $format,
$selector, $selector,

View File

@ -16,7 +16,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '6.7-alpha-58889'; $wp_version = '6.7-alpha-58890';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.