Changeset 64340

Timestamp:

10/14/2026 05:12:04 AM (5 days ago)

Author:

isabel_brison

Message:

Editor: fix block style variation custom CSS selector

Ensures block style variations use the feature selector for custom CSS if the block defines one.

Props isabel_brison, andrewserong.
Fixes #66297.

Location:

trunk

Files:

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

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

@@ -3917 +3917 @@
                 $responsive_media_queries = static::get_viewport_media_queries( $settings['viewport'] ?? null );
 
+                $css_feature_selector = $block_metadata['selectors']['css'] ?? null;
+                if ( is_array( $css_feature_selector ) ) {
+                        $css_feature_selector = $css_feature_selector['root'] ?? null;
+                }
+                if ( ! is_string( $css_feature_selector ) ) {
+                        $css_feature_selector = null;
+                }
+
                 // Update text indent selector for paragraph blocks based on the textIndent setting.
                 $block_name           = $block_metadata['name'] ?? null;
@@ -3966 +3974 @@
                                 $style_variation_declarations  = array_merge( $style_variation_declarations, $variation_pseudo_declarations );
 
+                                // Custom CSS targets the block's `css` feature selector, if any.
+                                $variation_css_selector = null !== $css_feature_selector
+                                        ? static::get_block_style_variation_feature_selector( $style_variation, $css_feature_selector )
+                                        : $style_variation['selector'];
+
                                 // Store custom CSS for the style variation.
                                 if ( isset( $style_variation_node['css'] ) ) {
-                                        $style_variation_custom_css[ $style_variation['selector'] ] = $this->process_blocks_custom_css( $style_variation_node['css'], $style_variation['selector'] );
+                                        $style_variation_custom_css[ $style_variation['selector'] ] = $this->process_blocks_custom_css( $style_variation_node['css'], $variation_css_selector );
                                 }
 
@@ -4034 +4047 @@
                                         // Process custom CSS for this breakpoint.
                                         if ( isset( $breakpoint_node['css'] ) ) {
-                                                $breakpoint_custom_css     = static::process_blocks_custom_css( $breakpoint_node['css'], $style_variation['selector'] );
+                                                $breakpoint_custom_css     = static::process_blocks_custom_css( $breakpoint_node['css'], $variation_css_selector );
                                                 $variation_responsive_css .= $breakpoint_media . '{' . $breakpoint_custom_css . '}';
                                         }
@@ -4278 +4291 @@
                 // 7. Generate and append any custom CSS rules.
                 if ( isset( $node['css'] ) && ! $is_root_selector ) {
-                        $css_feature_selector = $block_metadata['selectors']['css'] ?? null;
-                        if ( is_array( $css_feature_selector ) ) {
-                                $css_feature_selector = $css_feature_selector['root'] ?? null;
-                        }
-                        $css_selector = is_string( $css_feature_selector ) ? $css_feature_selector : $selector;
+                        $css_selector = $css_feature_selector ?? $selector;
                         $block_rules .= $this->process_blocks_custom_css( $node['css'], $css_selector );
                 }

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

@@ -9555 +9555 @@
                 );
         }
+
+        /**
+         * Tests that block style variation custom CSS, including breakpoint custom
+         * CSS, uses the block's css feature selector when defined.
+         *
+         * @ticket 66297
+         *
+         */
+        public function test_get_styles_for_block_variation_custom_css_uses_css_feature_selector() {
+                register_block_style(
+                        'core/paragraph',
+                        array(
+                                'name'  => 'fancy',
+                                'label' => 'Fancy',
+                        )
+                );
+
+                $theme_json = new WP_Theme_JSON(
+                        array(
+                                'version' => WP_Theme_JSON::LATEST_SCHEMA,
+                                'styles'  => array(
+                                        'blocks' => array(
+                                                'core/paragraph' => array(
+                                                        'variations' => array(
+                                                                'fancy' => array(
+                                                                        'css'     => 'color:red;',
+                                                                        '@tablet' => array(
+                                                                                'css' => 'color:blue;',
+                                                                        ),
+                                                                ),
+                                                        ),
+                                                ),
+                                        ),
+                                ),
+                        )
+                );
+
+                $paragraph_node = array(
+                        'name'       => 'core/paragraph',
+                        'path'       => array( 'styles', 'blocks', 'core/paragraph' ),
+                        'selector'   => 'p',
+                        'selectors'  => array(
+                                'root' => 'p',
+                                'css'  => '.custom-p',
+                        ),
+                        'variations' => array(
+                                array(
+                                        'path'     => array( 'styles', 'blocks', 'core/paragraph', 'variations', 'fancy' ),
+                                        'selector' => 'p.is-style-fancy',
+                                ),
+                        ),
+                );
+
+                $actual = $theme_json->get_styles_for_block( $paragraph_node );
+
+                unregister_block_style( 'core/paragraph', 'fancy' );
+
+                $this->assertStringContainsString( ':root :where(.custom-p.is-style-fancy){color:red;}', $actual );
+                $this->assertStringContainsString( '{:root :where(.custom-p.is-style-fancy){color:blue;}}', $actual );
+                $this->assertStringNotContainsString( ':root :where(p.is-style-fancy){color:', $actual );
+        }
 }