From ed2b11db69d1530be3b9e301b09ccc2e51a2bead Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 21 Jan 2026 13:20:56 +1100 Subject: [PATCH] Fix blockGap output for block style variations. --- .../block-supports/block-style-variations.php | 9 ++++- src/wp-includes/class-wp-theme-json.php | 37 +++++++++++-------- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/wp-includes/block-supports/block-style-variations.php b/src/wp-includes/block-supports/block-style-variations.php index 62fb04e1a0c86..1b8bb760899e7 100644 --- a/src/wp-includes/block-supports/block-style-variations.php +++ b/src/wp-includes/block-supports/block-style-variations.php @@ -142,8 +142,13 @@ function wp_render_block_style_variation_support_styles( $parsed_block ) { ); $config = array( - 'version' => WP_Theme_JSON::LATEST_SCHEMA, - 'styles' => array( + 'version' => WP_Theme_JSON_Gutenberg::LATEST_SCHEMA, + 'settings' => array( + 'spacing' => array( + 'blockGap' => true, + ), + ), + 'styles' => array( 'elements' => $elements_data, 'blocks' => $blocks_data, ), diff --git a/src/wp-includes/class-wp-theme-json.php b/src/wp-includes/class-wp-theme-json.php index f9965a754989a..61d2c2f71b88a 100644 --- a/src/wp-includes/class-wp-theme-json.php +++ b/src/wp-includes/class-wp-theme-json.php @@ -1615,7 +1615,7 @@ protected function get_layout_styles( $block_metadata, $options = array() ) { $selector = $block_metadata['selector'] ?? ''; $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. @@ -2356,18 +2356,6 @@ protected static function compute_style_properties( $styles, $settings = array() continue; } - /* - * 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 ) { /* @@ -2811,8 +2799,9 @@ public function get_styles_for_block( $block_metadata ) { $is_root_selector = static::ROOT_BLOCK_SELECTOR === $selector; // 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 ) { $style_variation_node = _wp_array_get( $this->theme_json, $style_variation['path'], array() ); @@ -2852,6 +2841,18 @@ static function ( $split_selector ) use ( $clean_style_variation_selector ) { 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, + ); + } } } /* @@ -3004,6 +3005,10 @@ static function ( $pseudo_selector ) use ( $selector ) { // 6. Generate and append the style variation rulesets. 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 ]; } @@ -3079,7 +3084,7 @@ public function get_root_layout_rules( $selector, $block_metadata, $options = ar $css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'; } - // 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' ) ); $css .= ":where(.wp-site-blocks) > * { margin-block-start: $block_gap_value; margin-block-end: 0; }";