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

Timestamp:

10/07/2026 10:53:31 PM (24 hours ago)

Author:

isabel_brison

Message:

Editor: normalize block gap values in layout and fix grid axial gap.

Ensures incorrect gap values don’t cause errors, fixes grid responsive column sizing when different vertical and horizontal gap values are present and ensures layouts that don’t support axial gap still get correct values.

Props isabel_brison, andrewserong.
Fixes #66263.

File:

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

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

@@ -81 +81 @@
  * @since 7.1.0
  *
- * @param string|array|null $gap_value Block gap value.
- * @return string|array|null Sanitized block gap value.
+ * Numeric zero is converted to a string because it is valid CSS without a unit.
+ * Other non-string values are rejected.
+ *
+ * @param mixed $gap_value Block gap value.
+ * @return string|string[]|null Sanitized block gap value.
  */
 function wp_sanitize_block_gap_value( $gap_value ) {
         if ( is_array( $gap_value ) ) {
                 foreach ( $gap_value as $key => $value ) {
-                        $gap_value[ $key ] = ! is_scalar( $value ) || ( $value && preg_match( '%[\\\(&=}]|/\*%', (string) $value ) ) ? null : $value;
-                }
-
-                return $gap_value;
+                        $sanitized_value = wp_sanitize_block_gap_value( $value );
+                        if ( ! is_string( $sanitized_value ) ) {
+                                unset( $gap_value[ $key ] );
+                                continue;
+                        }
+                        $gap_value[ $key ] = $sanitized_value;
+                }
+
+                return empty( $gap_value ) ? null : $gap_value;
+        }
+
+        if ( ( is_int( $gap_value ) || is_float( $gap_value ) ) && 0.0 === (float) $gap_value ) {
+                return '0';
+        }
+
+        if ( ! is_string( $gap_value ) ) {
+                return null;
+        }
+
+        if ( '' === trim( $gap_value ) ) {
+                return null;
         }
 
@@ -491 +511 @@
  * @access private
  *
- * @param string               $selector                      CSS selector.
- * @param array                $layout                        Layout object. The one that is passed has already checked
- *                                                            the existence of default block layout.
- * @param bool                 $has_block_gap_support         Optional. Whether the theme has support for the block gap. Default false.
- * @param string|string[]|null $gap_value                     Optional. The block gap value to apply. Default null.
- * @param bool                 $should_skip_gap_serialization Optional. Whether to skip applying the user-defined value set in the editor. Default false.
- * @param string|array         $fallback_gap_value            Optional. The block gap value to apply. If it's an array expected properties are "top" and/or "left". Default '0.5em'.
- * @param array|null           $block_spacing                 Optional. Custom spacing set on the block. Default null.
- * @param array                $options                       {
+ * @param string                         $selector                      CSS selector.
+ * @param array                          $layout                        Layout object. The one that is passed has already checked
+ *                                                                       the existence of default block layout.
+ * @param bool                           $has_block_gap_support         Optional. Whether the theme has support for the block gap. Default false.
+ * @param string|string[]|int|float|null $gap_value                     Optional. The block gap value to apply. Only zero is accepted as a
+ *                                                                       numeric value. Default null.
+ * @param bool                           $should_skip_gap_serialization Optional. Whether to skip applying the user-defined value set in the
+ *                                                                       editor. Default false.
+ * @param string|string[]|int|float|null $fallback_gap_value            Optional. The fallback block gap value to apply. Only zero is accepted
+ *                                                                       as a numeric value. Default '0.5em'.
+ * @param array|null                     $block_spacing                 Optional. Custom spacing set on the block. Default null.
+ * @param array                          $options                       {
  *     Optional. Extra options for internal callers. Default empty array.
  *
@@ -510 +533 @@
  */
 function wp_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em', $block_spacing = null, $options = array() ) {
+        // Normalize here as well as at external data boundaries because this function has direct callers.
+        $gap_value          = wp_sanitize_block_gap_value( $gap_value );
+        $fallback_gap_value = wp_sanitize_block_gap_value( $fallback_gap_value ) ?? '0.5em';
+
         $base_layout             = is_array( $layout ) ? $layout : array();
         $viewport_overrides      = $options['viewport_overrides'] ?? null;
@@ -858 +885 @@
 
                 /*
-                 * If the gap value is an array, we use the "left" value because it represents the vertical gap, which
+                 * If the gap value is an array, we use the "left" value because it represents the horizontal gap, which
                  * is the relevant one for computation of responsive grid columns.
                  */
@@ -887 +914 @@
                                         $process_value   = "var(--wp--preset--spacing--$slug)";
                                 }
+                                if ( ! is_array( $gap_value ) || 'left' === $gap_side ) {
+                                        $responsive_gap_value = $process_value;
+                                }
                                 $combined_gap_value .= "$process_value ";
                         }
-                        $gap_value            = trim( $combined_gap_value );
-                        $responsive_gap_value = $gap_value;
+                        $gap_value = trim( $combined_gap_value );
                 }
 
@@ -1197 +1226 @@
 
                 $gap_value          = wp_sanitize_block_gap_value( $style_attr['spacing']['blockGap'] ?? null );
-                $fallback_gap_value = $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ?? '0.5em';
+                $fallback_gap_value = wp_sanitize_block_gap_value(
+                        $block_type->supports['spacing']['blockGap']['__experimentalDefault'] ?? null
+                ) ?? '0.5em';
                 $block_spacing      = $style_attr['spacing'] ?? null;
 
@@ -1231 +1262 @@
                 }
 
-                $global_block_gap_value = $variation_block_gap_value ?? $global_styles['blocks'][ $block_name ]['spacing']['blockGap'] ?? $global_styles['spacing']['blockGap'] ?? null;
+                $global_block_gap_candidates = array(
+                        $variation_block_gap_value,
+                        $global_styles['blocks'][ $block_name ]['spacing']['blockGap'] ?? null,
+                        $global_styles['spacing']['blockGap'] ?? null,
+                );
+                $global_block_gap_value      = null;
+                foreach ( $global_block_gap_candidates as $candidate_gap_value ) {
+                        $candidate_gap_value = wp_sanitize_block_gap_value( $candidate_gap_value );
+                        if ( null !== $candidate_gap_value ) {
+                                $global_block_gap_value = $candidate_gap_value;
+                                break;
+                        }
+                }
 
                 if ( null !== $global_block_gap_value ) {