Changeset 62853

Timestamp:

07/27/2026 04:09:33 AM (2 weeks ago)

Author:

ramonopoly

Message:

Theme JSON: Level block-level preset class specificity with :where()

Block-level preset classes are now wrapped in :where() so they keep the same 0-1-0 specificity as root-level preset classes.

A palette defined at block level (via the wp_theme_json_data_theme filter or settings.blocks) emits p.has-x-color at 0-1-1 specificity, while a root-level palette emits .has-x-color at 0-1-0. Responsive style states emit their rules at 0-1-0. Both use !important, so specificity decides the winner: the block-level preset out-ranks the state rule, and a Desktop palette colour overrides the Mobile colour at every viewport width.

Wrapping the block selector in :where() contributes zero specificity while keeping the same scoping, so the preset ties the state rule and loses on source order, matching root-level behaviour. Palette values are unaffected because they flow through the scoped --wp--preset--color--* variable, not the class.

Developed in: ​https://github.com/WordPress/wordpress-develop/pull/12705(​https://github.com/WordPress/wordpress-develop/pull/12705)

Props awetz583, ramonopoly, andrewserong.

Fixes #65724.

Location:

trunk

Files:

• src/wp-includes/class-wp-theme-json.php (modified) (3 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (4 diffs)

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

@@ -2433 +2433 @@
          *   }
          *
-         *   p.has-value-gradient-background {
+         *   :where(p).has-value-gradient-background {
          *     background: value;
          *   }
@@ -2614 +2614 @@
          * @since 5.9.0 Added the `$origins` parameter.
          * @since 6.6.0 Added check for root CSS properties selector.
+         * @since 7.1.0 Wraps block-level preset classes in `:where()` to match root-level specificity.
          *
          * @param array    $settings Settings to process.
@@ -2640 +2641 @@
                                         $class_name = static::replace_slug_in_string( $class, $slug );
 
-                                        // $selector is often empty, so we can save ourselves the `append_to_selector()` call then.
-                                        $new_selector = '' === $selector ? $class_name : static::append_to_selector( $selector, $class_name );
+                                        /*
+                                         * $selector is often empty (root-level presets), in which case the
+                                         * bare class is used. For block-level presets the block selector is
+                                         * wrapped in `:where()` so the class keeps the same 0-1-0 specificity
+                                         * as a root-level preset. Without this, block-level palette rules
+                                         * (e.g. `p.has-x-color`) out-rank equally-important rules that also
+                                         * target the same property at 0-1-0, such as per-instance responsive
+                                         * state styles.
+                                         */
+                                        $new_selector = '' === $selector ? $class_name : ':where(' . $selector . ')' . $class_name;
                                         $stylesheet  .= static::to_ruleset(
                                                 $new_selector,

trunk/tests/phpunit/tests/theme/wpThemeJson.php

@@ -806 +806 @@
          * @ticket 52991
          * @ticket 54336
+         * @ticket 65724
          */
         public function test_get_stylesheet_preset_classes_work_with_compounded_selectors() {
@@ -829 +830 @@
 
                 $this->assertSame(
-                        '.wp-block-heading.has-white-color{color: var(--wp--preset--color--white) !important;}.wp-block-heading.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.wp-block-heading.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}',
+                        ':where(.wp-block-heading).has-white-color{color: var(--wp--preset--color--white) !important;}:where(.wp-block-heading).has-white-background-color{background-color: var(--wp--preset--color--white) !important;}:where(.wp-block-heading).has-white-border-color{border-color: var(--wp--preset--color--white) !important;}',
                         $theme_json->get_stylesheet( array( 'presets' ) )
                 );
@@ -895 +896 @@
          * @ticket 60936
          * @ticket 61165
+         * @ticket 65724
          */
         public function test_get_stylesheet_preset_rules_come_after_block_rules() {
@@ -927 +929 @@
 
                 $styles    = ':root :where(.wp-block-group){color: red;}';
-                $presets   = '.wp-block-group.has-grey-color{color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}.wp-block-group.has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}';
+                $presets   = ':where(.wp-block-group).has-grey-color{color: var(--wp--preset--color--grey) !important;}:where(.wp-block-group).has-grey-background-color{background-color: var(--wp--preset--color--grey) !important;}:where(.wp-block-group).has-grey-border-color{border-color: var(--wp--preset--color--grey) !important;}';
                 $variables = '.wp-block-group{--wp--preset--color--grey: grey;}';