Changeset 62853 for trunk/tests/phpunit/tests/theme/wpThemeJson.php

Timestamp:

07/27/2026 04:09:33 AM (4 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.

File:

• trunk/tests/phpunit/tests/theme/wpThemeJson.php (modified) (4 diffs)

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;}';