Changeset 61655 for trunk/src/wp-includes/block-supports/layout.php

Timestamp:

02/16/2026 11:50:37 PM (3 months ago)

Author:

isabel_brison

Message:

Editor: fix grid layout for style variations defining blockGap.

Ensures the grid block columns computation takes into account any blockGap value output by an active block style variation.

Props isabel_brison, mukesh27, westonruter, andrewserong.
Fixes #64624.

File:

• trunk/src/wp-includes/block-supports/layout.php (modified) (2 diffs)

trunk/src/wp-includes/block-supports/layout.php

@@ -6 +6 @@
  * @since 5.8.0
  */
+
+/**
+ * Gets the first style variation name from a className string that matches a registered style.
+ *
+ * @since 7.0.0
+ *
+ * @param string                              $class_name        CSS class string for a block.
+ * @param array<string, array<string, mixed>> $registered_styles Currently registered block styles.
+ * @return string|null The name of the first registered variation, or null if none found.
+ */
+function wp_get_block_style_variation_name_from_registered_style( string $class_name, array $registered_styles = array() ): ?string {
+    if ( ! $class_name ) {
+        return null;
+    }
+
+    $registered_names = array_filter( array_column( $registered_styles, 'name' ) );
+
+    $prefix = 'is-style-';
+    $length = strlen( $prefix );
+
+    foreach ( explode( ' ', $class_name ) as $class ) {
+        if ( str_starts_with( $class, $prefix ) ) {
+            $variation = substr( $class, $length );
+            if ( 'default' !== $variation && in_array( $variation, $registered_names, true ) ) {
+                return $variation;
+            }
+        }
+    }
+
+    return null;
+}
 
 /**
@@ -855 +886 @@
 
         // Get default blockGap value from global styles for use in layouts like grid.
-        // Check block-specific styles first, then fall back to root styles.
+        // Check style variation first, then block-specific styles, then fall back to root styles.
         $block_name = $block['blockName'] ?? '';
         if ( null === $global_styles ) {
             $global_styles = wp_get_global_styles();
         }
-        $global_block_gap_value = $global_styles['blocks'][ $block_name ]['spacing']['blockGap'] ?? ( $global_styles['spacing']['blockGap'] ?? null );
+
+        // Check if the block has an active style variation with a blockGap value.
+        // Only check the registry if the className contains a variation class to avoid unnecessary lookups.
+        $variation_block_gap_value = null;
+        $block_class_name          = $block['attrs']['className'] ?? '';
+        if ( $block_class_name && str_contains( $block_class_name, 'is-style-' ) && $block_name ) {
+            $styles_registry   = WP_Block_Styles_Registry::get_instance();
+            $registered_styles = $styles_registry->get_registered_styles_for_block( $block_name );
+            $variation_name    = wp_get_block_style_variation_name_from_registered_style( $block_class_name, $registered_styles );
+            if ( $variation_name ) {
+                $variation_block_gap_value = $global_styles['blocks'][ $block_name ]['variations'][ $variation_name ]['spacing']['blockGap'] ?? null;
+            }
+        }
+
+        $global_block_gap_value = $variation_block_gap_value ?? $global_styles['blocks'][ $block_name ]['spacing']['blockGap'] ?? $global_styles['spacing']['blockGap'] ?? null;
 
         if ( null !== $global_block_gap_value ) {