Layout: Add default fallback gap value in block.json, and set to 2em …

…for Columns blocks (#41098)

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

* Implement in the editor, too

* Try moving the default value to sit under the blockGap key in spacing, updated useCustomSides to support an object

* Update doc comment

* Add explanatory comments

* Add __experimental prefix to default property.

Co-authored-by: Adam Zielinski <adam@adamziel.com>

Co-authored-by: Adam Zielinski <adam@adamziel.com>

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;";
@@ -185,10 +186,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', 'blockGap', '__experimentalDefault' ), '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-editor/src/hooks/dimensions.js

@@ -147,7 +147,7 @@ const useIsDimensionsDisabled = ( props = {} ) => {
 };
 
 /**
- * Custom hook to retrieve which padding/margin is supported
+ * Custom hook to retrieve which padding/margin/blockGap is supported
  * e.g. top, right, bottom or left.
  *
  * Sides are opted into by default. It is only if a specific side is set to
@@ -156,7 +156,7 @@ const useIsDimensionsDisabled = ( props = {} ) => {
  * @param {string} blockName Block name.
  * @param {string} feature   The feature custom sides relate to e.g. padding or margins.
  *
- * @return {Object} Sides supporting custom margin.
+ * @return {?string[]} Strings representing the custom sides available.
  */
 export function useCustomSides( blockName, feature ) {
 	const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
@@ -166,7 +166,15 @@ export function useCustomSides( blockName, feature ) {
 		return;
 	}
 
-	return support[ feature ];
+	// Return if the setting is an array of sides (e.g. `[ 'top', 'bottom' ]`).
+	if ( Array.isArray( support[ feature ] ) ) {
+		return support[ feature ];
+	}
+
+	// Finally, attempt to return `.sides` if the setting is an object.
+	if ( support[ feature ]?.sides ) {
+		return support[ feature ].sides;
+	}
 }
 
 /**

packages/block-editor/src/layouts/flex.js

@@ -11,6 +11,7 @@ import {
 	arrowDown,
 } from '@wordpress/icons';
 import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
+import { getBlockSupport } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -109,14 +110,21 @@ export default {
 	save: function FlexLayoutStyle( { selector, layout, style, blockName } ) {
 		const { orientation = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const fallbackValue =
+			getBlockSupport( blockName, [
+				'spacing',
+				'blockGap',
+				'__experimentalDefault',
+			] ) || '0.5em';
+
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,
 		// don't apply the user-defined value to the styles.
 		const blockGapValue =
 			style?.spacing?.blockGap &&
 			! shouldSkipSerialization( blockName, 'spacing', 'blockGap' )
-				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
-				: 'var( --wp--style--block-gap, 0.5em )';
+				? getGapCSSValue( style?.spacing?.blockGap, fallbackValue )
+				: `var( --wp--style--block-gap, ${ fallbackValue } )`;
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
@@ -143,7 +151,7 @@ export default {
 				${ appendSelectors( selector ) } {
 					display: flex;
 					flex-wrap: ${ flexWrap };
-					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
+					gap: ${ hasBlockGapStylesSupport ? blockGapValue : fallbackValue };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 

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

@@ -28,7 +28,9 @@
 			}
 		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": {
+				"__experimentalDefault": "2em"
+			},
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {