Changeset 58986 for branches/6.6/src/wp-includes/class-wp-theme-json.php

Timestamp:

09/04/2024 02:00:19 PM (4 months ago)

Author:

hellofromTonya

Message:

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 ​Gutenberg PR 64076.

Reviewed by andrewserong.
Merges [58890] to the 6.6 branch.

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

Props talldanwp, aaronrobertshaw, andrewserong, markhowellsmead, ramonopoly, hellofromTonya, munyagu, apmeyer.
Fixes #61829.

Location:

branches/6.6

Files:

• . (modified) (1 prop)
• src/wp-includes/class-wp-theme-json.php (modified) (1 diff)

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

@@ -1682 +1682 @@
                                     );
                                 } 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(
                                         $format,