Changeset 59814

Timestamp:

02/12/2025 03:38:09 AM (6 weeks ago)

Author:

peterwilsoncc

Message:

Editor: Fix complex variation selectors when using selectors API.

Fixes a bug in the manipulation of selectors for block style variations that would result in an incorrect selector and fail to match the appropriate elements on the frontend.

Props aaronrobertshaw, ramonopoly, joemcgill.
Fixes #62471.

Location:

trunk

Files:

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

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

@@ -2851 +2851 @@
                 // Combine selectors with style variation's selector and add to overall style variation declarations.
                 foreach ( $variation_declarations as $current_selector => $new_declarations ) {
-                    // If current selector includes block classname, remove it but leave the whitespace in.
-                    $shortened_selector = str_replace( $block_metadata['selector'] . ' ', ' ', $current_selector );
+                    /*
+                     * Clean up any whitespace between comma separated selectors.
+                     * This prevents these spaces breaking compound selectors such as:
+                     * - `.wp-block-list:not(.wp-block-list .wp-block-list)`
+                     * - `.wp-block-image img, .wp-block-image.my-class img`
+                     */
+                    $clean_current_selector = preg_replace( '/,\s+/', ',', $current_selector );
+                    $shortened_selector     = str_replace( $block_metadata['selector'], '', $clean_current_selector );
 
                     // Prepend the variation selector to the current selector.

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

@@ -4628 +4628 @@
     }
 
+    /**
+     * Tests that block style variation selectors are generated correctly
+     * for block selectors of various structures.
+     *
+     * @ticket 62471
+     */
+    public function test_get_styles_for_block_with_style_variations_and_custom_selectors() {
+        register_block_type(
+            'test/milk',
+            array(
+                'api_version' => 3,
+                'selectors'   => array(
+                    'root'  => '.milk',
+                    'color' => '.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle',
+                ),
+            )
+        );
+
+        register_block_style(
+            'test/milk',
+            array(
+                'name'  => 'chocolate',
+                'label' => 'Chocolate',
+            )
+        );
+
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                'styles'  => array(
+                    'blocks' => array(
+                        'test/milk' => array(
+                            'color'      => array(
+                                'background' => 'white',
+                            ),
+                            'variations' => array(
+                                'chocolate' => array(
+                                    'color' => array(
+                                        'background' => '#35281E',
+                                    ),
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $metadata = array(
+            'name'       => 'test/milk',
+            'path'       => array( 'styles', 'blocks', 'test/milk' ),
+            'selector'   => '.wp-block-test-milk',
+            'selectors'  => array(
+                'color' => '.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle',
+            ),
+            'variations' => array(
+                'chocolate' => array(
+                    'path'     => array( 'styles', 'blocks', 'test/milk', 'variations', 'chocolate' ),
+                    'selector' => '.is-style-chocolate.wp-block-test-milk',
+                ),
+            ),
+        );
+
+        $actual_styles    = $theme_json->get_styles_for_block( $metadata );
+        $default_styles   = ':root :where(.wp-block-test-milk .liquid, .wp-block-test-milk:not(.spoiled), .wp-block-test-milk.in-bottle){background-color: white;}';
+        $variation_styles = ':root :where(.is-style-chocolate.wp-block-test-milk .liquid,.is-style-chocolate.wp-block-test-milk:not(.spoiled),.is-style-chocolate.wp-block-test-milk.in-bottle){background-color: #35281E;}';
+        $expected         = $default_styles . $variation_styles;
+
+        unregister_block_style( 'test/milk', 'chocolate' );
+        unregister_block_type( 'test/milk' );
+
+        $this->assertSame( $expected, $actual_styles );
+    }
+
     public function test_block_style_variations() {
         wp_set_current_user( static::$administrator_id );