Skip to content

Commit

Permalink
Layout: Add default fallback gap value in block.json, and set to 2em …
Browse files Browse the repository at this point in the history 
…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 <[email protected]>

Co-authored-by: Adam Zielinski <[email protected]>
  • Loading branch information
@andrewserong @adamziel
andrewserong and adamziel authored May 20, 2022
1 parent 0da4e25 commit 51db4bf
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 13 deletions.
15 changes: 9 additions & 6 deletions lib/block-supports/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '';
Expand Down Expand Up @@ -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;";
Expand Down Expand Up @@ -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', '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(
Expand Down
14 changes: 11 additions & 3 deletions packages/block-editor/src/hooks/dimensions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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[]} Strings representing the custom sides available.
*/
export function useCustomSides( blockName, feature ) {
const support = getBlockSupport( blockName, SPACING_SUPPORT_KEY );
Expand All @@ -172,7 +172,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;
}
}

/**
Expand Down
14 changes: 11 additions & 3 deletions packages/block-editor/src/layouts/flex.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
arrowDown,
} from '@wordpress/icons';
import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
import { getBlockSupport } from '@wordpress/blocks';

/**
* Internal dependencies
Expand Down Expand Up @@ -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;
Expand All @@ -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 }
}
Expand Down
4 changes: 3 additions & 1 deletion packages/block-library/src/columns/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@
}
},
"spacing": {
"blockGap": true,
"blockGap": {
"__experimentalDefault": "2em"
},
"margin": [ "top", "bottom" ],
"padding": true,
"__experimentalDefaultControls": {
Expand Down

0 comments on commit 51db4bf

Please sign in to comment.