Layout: Try adding a default fallback gap value in block.json

Author: andrewserong

lib/block-supports/layout.php

@@ -33,10 +33,11 @@ function gutenberg_register_layout_support( $block_type ) {
  * @param boolean $has_block_gap_support         Whether the theme has support for the block gap.
  * @param string  $gap_value                     The block gap value to apply.
  * @param boolean $should_skip_gap_serialization Whether to skip applying the user-defined value set in the editor.
+ * @param string  $fallback_gap_value            The block gap value to apply.
  *
  * @return string                                CSS style.
  */
-function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false ) {
+function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support = false, $gap_value = null, $should_skip_gap_serialization = false, $fallback_gap_value = '0.5em' ) {
 	$layout_type = isset( $layout['type'] ) ? $layout['type'] : 'default';
 
 	$style = '';
@@ -102,14 +103,14 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		$style .= 'display: flex;';
 		if ( $has_block_gap_support ) {
 			if ( is_array( $gap_value ) ) {
-				$gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : '0.5em';
-				$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : '0.5em';
+				$gap_row    = isset( $gap_value['top'] ) ? $gap_value['top'] : $fallback_gap_value;
+				$gap_column = isset( $gap_value['left'] ) ? $gap_value['left'] : $fallback_gap_value;
 				$gap_value  = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
 			}
-			$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : 'var( --wp--style--block-gap, 0.5em )';
+			$gap_style = $gap_value && ! $should_skip_gap_serialization ? $gap_value : "var( --wp--style--block-gap, $fallback_gap_value )";
 			$style    .= "gap: $gap_style;";
 		} else {
-			$style .= 'gap: 0.5em;';
+			$style .= "gap: $fallback_gap_value;";
 		}
 
 		$style .= "flex-wrap: $flex_wrap;";
@@ -184,10 +185,12 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		$gap_value = $gap_value && preg_match( '%[\\\(&=}]|/\*%', $gap_value ) ? null : $gap_value;
 	}
 
+	$fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', '__experimentalDefaultValues', 'blockGap' ), '0.5em' );
+
 	// If a block's block.json skips serialization for spacing or spacing.blockGap,
 	// don't apply the user-defined value to the styles.
 	$should_skip_gap_serialization = gutenberg_should_skip_block_supports_serialization( $block_type, 'spacing', 'blockGap' );
-	$style                         = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization );
+	$style                         = gutenberg_get_layout_style( ".$class_name", $used_layout, $has_block_gap_support, $gap_value, $should_skip_gap_serialization, $fallback_gap_value );
 	// This assumes the hook only applies to blocks with a single wrapper.
 	// I think this is a reasonable limitation for that particular hook.
 	$content = preg_replace(

packages/block-library/src/columns/block.json

@@ -33,6 +33,9 @@
 			"padding": true,
 			"__experimentalDefaultControls": {
 				"padding": true
+			},
+			"__experimentalDefaultValues": {
+				"blockGap": "2em"
 			}
 		},
 		"__experimentalLayout": {