Changeset 61564

Timestamp:

01/30/2026 02:09:32 AM (3 weeks ago)

Author:

isabel_brison

Message:

Editor: fix blockGap styles in block style variations.

Ensures that when a block style variation declares a blockGap value, the correct layout styles are output for the variation.

Props isabel_brison, aaronrobertshaw.
Fixes #64533.

Location:

trunk

Files:

• src/wp-includes/block-supports/block-style-variations.php (modified) (1 diff)
• src/wp-includes/class-wp-theme-json.php (modified) (6 diffs)
• tests/phpunit/tests/theme/wpThemeJson.php (modified) (1 diff)

trunk/src/wp-includes/block-supports/block-style-variations.php

@@ -143 +143 @@
 
     $config = array(
-        'version' => WP_Theme_JSON::LATEST_SCHEMA,
-        'styles'  => array(
+        'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+        'settings' => array(
+            'spacing' => array(
+                'blockGap' => true,
+            ),
+        ),
+        'styles'   => array(
             'elements' => $elements_data,
             'blocks'   => $blocks_data,

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

@@ -1616 +1616 @@
         $has_block_gap_support    = isset( $this->theme_json['settings']['spacing']['blockGap'] );
         $has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
-        $node                     = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
+        $node                     = $options['node'] ?? _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
         $layout_definitions       = wp_get_layout_definitions();
         $layout_selector_pattern  = '/^[a-zA-Z0-9\-\.\,\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
@@ -2357 +2357 @@
             }
 
-            /*
-             * Look up protected properties, keyed by value path.
-             * Skip protected properties that are explicitly set to `null`.
-             */
-            $path_string = implode( '.', $value_path );
-            if (
-                isset( static::PROTECTED_PROPERTIES[ $path_string ] ) &&
-                _wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
-            ) {
-                continue;
-            }
-
             // Calculates fluid typography rules where available.
             if ( 'font-size' === $css_property ) {
@@ -2812 +2800 @@
 
         // If there are style variations, generate the declarations for them, including any feature selectors the block may have.
-        $style_variation_declarations = array();
-        $style_variation_custom_css   = array();
+        $style_variation_declarations    = array();
+        $style_variation_custom_css      = array();
+        $style_variation_layout_metadata = array();
         if ( ! empty( $block_metadata['variations'] ) ) {
             foreach ( $block_metadata['variations'] as $style_variation ) {
@@ -2852 +2841 @@
                 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'] );
+                }
+
+                // Store variation metadata and node for layout styles generation.
+                // Only store if the variation has blockGap defined.
+                if ( isset( $style_variation_node['spacing']['blockGap'] ) ) {
+                    // Append block selector to the variation selector for proper targeting.
+                    $variation_metadata_with_selector                                = $style_variation;
+                    $variation_metadata_with_selector['selector']                    = $style_variation['selector'] . $block_metadata['css'];
+                    $style_variation_layout_metadata[ $style_variation['selector'] ] = array(
+                        'metadata' => $variation_metadata_with_selector,
+                        'node'     => $style_variation_node,
+                    );
                 }
             }
@@ -3005 +3006 @@
         foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
             $block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
+            if ( isset( $style_variation_layout_metadata[ $style_variation_selector ] ) ) {
+                $variation_data = $style_variation_layout_metadata[ $style_variation_selector ];
+                $block_rules   .= $this->get_layout_styles( $variation_data['metadata'], array( 'node' => $variation_data['node'] ) );
+            }
             if ( isset( $style_variation_custom_css[ $style_variation_selector ] ) ) {
                 $block_rules .= $style_variation_custom_css[ $style_variation_selector ];
@@ -3080 +3085 @@
         }
 
-        // Block gap styles will be output unless explicitly set to `null`. See static::PROTECTED_PROPERTIES.
+        // Block gap styles will be output unless explicitly set to `null`.
         if ( isset( $this->theme_json['settings']['spacing']['blockGap'] ) ) {
             $block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );

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

@@ -4732 +4732 @@
     }
 
+    /**
+     * Tests that block style variations with blockGap generate proper layout styles.
+     *
+     * @ticket 64533
+     */
+    public function test_get_styles_for_block_with_style_variations_and_block_gap() {
+        register_block_style(
+            'core/group',
+            array(
+                'name'  => 'withGap',
+                'label' => 'With Gap',
+            )
+        );
+
+        $theme_json = new WP_Theme_JSON(
+            array(
+                'version'  => WP_Theme_JSON::LATEST_SCHEMA,
+                'settings' => array(
+                    'spacing' => array(
+                        'blockGap' => true,
+                    ),
+                ),
+                'styles'   => array(
+                    'blocks' => array(
+                        'core/group' => array(
+                            'variations' => array(
+                                'withGap' => array(
+                                    'color'   => array(
+                                        'background' => 'tomato',
+                                    ),
+                                    'spacing' => array(
+                                        'blockGap' => '5rem',
+                                    ),
+                                ),
+                            ),
+                        ),
+                    ),
+                ),
+            )
+        );
+
+        $metadata = array(
+            'name'       => 'core/group',
+            'path'       => array( 'styles', 'blocks', 'core/group' ),
+            'selector'   => '.wp-block-group',
+            'css'        => '.wp-block-group',
+            'variations' => array(
+                array(
+                    'path'     => array( 'styles', 'blocks', 'core/group', 'variations', 'withGap' ),
+                    'selector' => '.is-style-withGap.wp-block-group',
+                ),
+            ),
+        );
+
+        $actual_styles = $theme_json->get_styles_for_block( $metadata );
+
+        unregister_block_style( 'core/group', 'withGap' );
+
+        $expected = ':root :where(.is-style-withGap.wp-block-group){background-color: tomato;}:root :where(.is-style-withGap.wp-block-group.wp-block-group-is-layout-flow) > :first-child{margin-block-start: 0;}:root :where(.is-style-withGap.wp-block-group.wp-block-group-is-layout-flow) > :last-child{margin-block-end: 0;}:root :where(.is-style-withGap.wp-block-group.wp-block-group-is-layout-flow) > *{margin-block-start: 5rem;margin-block-end: 0;}:root :where(.is-style-withGap.wp-block-group.wp-block-group-is-layout-constrained) > :first-child{margin-block-start: 0;}:root :where(.is-style-withGap.wp-block-group.wp-block-group-is-layout-constrained) > :last-child{margin-block-end: 0;}:root :where(.is-style-withGap.wp-block-group.wp-block-group-is-layout-constrained) > *{margin-block-start: 5rem;margin-block-end: 0;}:root :where(.is-style-withGap.wp-block-group.wp-block-group-is-layout-flex){gap: 5rem;}:root :where(.is-style-withGap.wp-block-group.wp-block-group-is-layout-grid){gap: 5rem;}';
+        $this->assertSame( $expected, $actual_styles );
+    }
+
     public function test_block_style_variations() {
         wp_set_current_user( static::$administrator_id );