From 56152c6037b46ff98de4e0247e5fb9eb91fca85d Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 17 May 2022 15:46:03 +1000 Subject: [PATCH 1/6] Layout: Try adding a default fallback gap value in block.json --- lib/block-supports/layout.php | 15 +++++++++------ packages/block-library/src/columns/block.json | 3 +++ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 2c62af810d969b..6fe78cbbe60420 100644 --- a/lib/block-supports/layout.php +++ b/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( diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 77d5f7d745ce51..95b44634fa702d 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -33,6 +33,9 @@ "padding": true, "__experimentalDefaultControls": { "padding": true + }, + "__experimentalDefaultValues": { + "blockGap": "2em" } }, "__experimentalLayout": { From a9dd741ac29c79af154583051fb7068cc879344e Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 17 May 2022 16:06:20 +1000 Subject: [PATCH 2/6] Implement in the editor, too --- packages/block-editor/src/layouts/flex.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index e4fc39b702189d..4b82f67d056d80 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/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', + '__experimentalDefaultValues', + 'blockGap', + ] ) || '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 } } From a2cc15843c315601feabfeb3bee8dedcac917b9f Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 19 May 2022 10:55:06 +1000 Subject: [PATCH 3/6] Try moving the default value to sit under the blockGap key in spacing, updated useCustomSides to support an object --- lib/block-supports/layout.php | 2 +- packages/block-editor/src/hooks/dimensions.js | 10 ++++++++-- packages/block-editor/src/layouts/flex.js | 2 +- packages/block-library/src/columns/block.json | 7 +++---- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index 6fe78cbbe60420..b3fca703fee595 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -185,7 +185,7 @@ 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' ); + $fallback_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', 'default' ), '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. diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 9252844d8b5764..bfca065c7fbed0 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -162,7 +162,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[]} Sides supporting custom margin. */ export function useCustomSides( blockName, feature ) { const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); @@ -172,7 +172,13 @@ export function useCustomSides( blockName, feature ) { return; } - return support[ feature ]; + if ( Array.isArray( support[ feature ] ) ) { + return support[ feature ]; + } + + if ( support[ feature ]?.sides ) { + return support[ feature ].sides; + } } /** diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 4b82f67d056d80..1c6a9d5e463280 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -113,8 +113,8 @@ export default { const fallbackValue = getBlockSupport( blockName, [ 'spacing', - '__experimentalDefaultValues', 'blockGap', + 'default', ] ) || '0.5em'; const hasBlockGapStylesSupport = blockGapSupport !== null; diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index 95b44634fa702d..d655f4dd5be63a 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -28,14 +28,13 @@ } }, "spacing": { - "blockGap": true, + "blockGap": { + "default": "2em" + }, "margin": [ "top", "bottom" ], "padding": true, "__experimentalDefaultControls": { "padding": true - }, - "__experimentalDefaultValues": { - "blockGap": "2em" } }, "__experimentalLayout": { From 426f67a0ef60326f0a85d455e24ddc6cdf262e99 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 19 May 2022 11:06:01 +1000 Subject: [PATCH 4/6] Update doc comment --- packages/block-editor/src/hooks/dimensions.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index bfca065c7fbed0..a32b35a775189e 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -153,7 +153,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 @@ -162,7 +162,7 @@ const useIsDimensionsDisabled = ( props = {} ) => { * @param {string} blockName Block name. * @param {string} feature The feature custom sides relate to e.g. padding or margins. * - * @return {string[]} Sides supporting custom margin. + * @return {?string[]} Strings representing the custom sides available. */ export function useCustomSides( blockName, feature ) { const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY ); From e779a9ff8f52d550eee6bb2c147f30d10ea0c015 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Thu, 19 May 2022 15:04:47 +1000 Subject: [PATCH 5/6] Add explanatory comments --- packages/block-editor/src/hooks/dimensions.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index a32b35a775189e..e24b39007f6b21 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -172,10 +172,12 @@ export function useCustomSides( blockName, feature ) { return; } + // 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; } From 7774b7ce4bba13eeace06d8306fcf7a5f7e4539e Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 20 May 2022 09:26:16 +1000 Subject: [PATCH 6/6] Add __experimental prefix to default property. Co-authored-by: Adam Zielinski --- lib/block-supports/layout.php | 2 +- packages/block-editor/src/layouts/flex.js | 2 +- packages/block-library/src/columns/block.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php index b3fca703fee595..01e6b9324e5a5d 100644 --- a/lib/block-supports/layout.php +++ b/lib/block-supports/layout.php @@ -185,7 +185,7 @@ 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', 'default' ), '0.5em' ); + $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. diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 1c6a9d5e463280..852e94c8f829a4 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -114,7 +114,7 @@ export default { getBlockSupport( blockName, [ 'spacing', 'blockGap', - 'default', + '__experimentalDefault', ] ) || '0.5em'; const hasBlockGapStylesSupport = blockGapSupport !== null; diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json index d655f4dd5be63a..df0d62d749a12d 100644 --- a/packages/block-library/src/columns/block.json +++ b/packages/block-library/src/columns/block.json @@ -29,7 +29,7 @@ }, "spacing": { "blockGap": { - "default": "2em" + "__experimentalDefault": "2em" }, "margin": [ "top", "bottom" ], "padding": true,