Try using spacing controls for block gap values

WordPress · Aug 23, 2022 · f994ee5 · f994ee5
1 parent 1d944a1
commit f994ee5
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 41 deletions.
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
@@ -79,15 +79,16 @@ export function DimensionsPanel( props ) {
 		},
 	} );
 
+	const spacingClassnames = classnames( {
+		'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,
+	} );
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="dimensions">
 				{ ! isPaddingDisabled && (
 					<ToolsPanelItem
-						className={ classnames( {
-							'tools-panel-item-spacing':
-								spacingSizes && spacingSizes.length > 0,
-						} ) }
+						className={ spacingClassnames }
 						hasValue={ () => hasPaddingValue( props ) }
 						label={ __( 'Padding' ) }
 						onDeselect={ () => resetPadding( props ) }
@@ -100,10 +101,7 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isMarginDisabled && (
 					<ToolsPanelItem
-						className={ classnames( {
-							'tools-panel-item-spacing':
-								spacingSizes && spacingSizes.length > 0,
-						} ) }
+						className={ spacingClassnames }
 						hasValue={ () => hasMarginValue( props ) }
 						label={ __( 'Margin' ) }
 						onDeselect={ () => resetMargin( props ) }
@@ -116,6 +114,7 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isGapDisabled && (
 					<ToolsPanelItem
+						className={ spacingClassnames }
 						hasValue={ () => hasGapValue( props ) }
 						label={ __( 'Block spacing' ) }
 						onDeselect={ () => resetGap( props ) }

diff --git a/packages/block-editor/src/hooks/gap.js b/packages/block-editor/src/hooks/gap.js
@@ -15,6 +15,7 @@ import {
  */
 import { __unstableUseBlockRef as useBlockRef } from '../components/block-list/use-block-props/use-block-refs';
 import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
+import SpacingSizesControl from '../components/spacing-sizes-control';
 import useSetting from '../components/use-setting';
 import { AXIAL_SIDES, SPACING_SUPPORT_KEY, useCustomSides } from './dimensions';
 import { cleanEmptyObject } from './utils';
@@ -55,12 +56,8 @@ export function getGapBoxControlValueFromStyle( blockGapValue ) {
 
 	const isValueString = typeof blockGapValue === 'string';
 	return {
-		top: isValueString
-			? getSpacingPresetCssVar( blockGapValue )
-			: getSpacingPresetCssVar( blockGapValue?.top ),
-		left: isValueString
-			? getSpacingPresetCssVar( blockGapValue )
-			: getSpacingPresetCssVar( blockGapValue?.left ),
+		top: isValueString ? blockGapValue : blockGapValue?.top,
+		left: isValueString ? blockGapValue : blockGapValue?.left,
 	};
 }
 
@@ -78,8 +75,10 @@ export function getGapCSSValue( blockGapValue, defaultValue = '0' ) {
 		return null;
 	}
 
-	const row = blockGapBoxControlValue?.top || defaultValue;
-	const column = blockGapBoxControlValue?.left || defaultValue;
+	const row =
+		getSpacingPresetCssVar( blockGapBoxControlValue?.top ) || defaultValue;
+	const column =
+		getSpacingPresetCssVar( blockGapBoxControlValue?.left ) || defaultValue;
 
 	return row === column ? row : `${ row } ${ column }`;
 }
@@ -132,6 +131,8 @@ export function GapEdit( props ) {
 		setAttributes,
 	} = props;
 
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [
 			'%',
@@ -157,6 +158,8 @@ export function GapEdit( props ) {
 		// If splitOnAxis activated we need to return a BoxControl object to the BoxControl component.
 		if ( !! next && splitOnAxis ) {
 			blockGap = { ...getGapBoxControlValueFromStyle( next ) };
+		} else if ( !! next && next.hasOwnProperty( 'all' ) ) {
+			blockGap = next.all;
 		}
 
 		const newStyle = {
@@ -200,27 +203,39 @@ export function GapEdit( props ) {
 	return Platform.select( {
 		web: (
 			<>
-				{ splitOnAxis ? (
-					<BoxControl
-						label={ __( 'Block spacing' ) }
-						min={ 0 }
+				{ ( ! spacingSizes || spacingSizes?.length === 0 ) &&
+					( splitOnAxis ? (
+						<BoxControl
+							label={ __( 'Block spacing' ) }
+							min={ 0 }
+							onChange={ onChange }
+							units={ units }
+							sides={ sides }
+							values={ boxControlGapValue }
+							allowReset={ false }
+							splitOnAxis={ splitOnAxis }
+						/>
+					) : (
+						<UnitControl
+							label={ __( 'Block spacing' ) }
+							__unstableInputWidth="80px"
+							min={ 0 }
+							onChange={ onChange }
+							units={ units }
+							// Default to `row` for combined values.
+							value={ boxControlGapValue }
+						/>
+					) ) }
+				{ spacingSizes?.length > 0 && (
+					<SpacingSizesControl
+						values={ boxControlGapValue }
 						onChange={ onChange }
+						label={ __( 'Block spacing' ) }
+						sides={ splitOnAxis ? sides : [ 'all' ] }
 						units={ units }
-						sides={ sides }
-						values={ boxControlGapValue }
 						allowReset={ false }
 						splitOnAxis={ splitOnAxis }
 					/>
-				) : (
-					<UnitControl
-						label={ __( 'Block spacing' ) }
-						__unstableInputWidth="80px"
-						min={ 0 }
-						onChange={ onChange }
-						units={ units }
-						// Default to `row` for combined values.
-						value={ boxControlGapValue }
-					/>
 				) }
 			</>
 		),

diff --git a/packages/block-editor/src/hooks/test/gap.js b/packages/block-editor/src/hooks/test/gap.js
@@ -84,5 +84,20 @@ describe( 'gap', () => {
 				'88px 1px'
 			);
 		} );
+
+		it( 'should unwrap var: values from a string into a CSS var() function', () => {
+			expect(
+				getGapBoxControlValueFromStyle( 'var:preset|spacing|60' )
+			).toEqual( 'var(--wp--preset--spacing--60)' );
+		} );
+		it( 'should unwrap var: values from an object into a CSS var() function and return shorthand values', () => {
+			const blockGapValue = {
+				top: 'var:preset|spacing|20',
+				left: 'var:preset|spacing|60',
+			};
+			expect( getGapBoxControlValueFromStyle( blockGapValue ) ).toEqual(
+				'var(--wp--preset--spacing--20) var(--wp--preset--spacing--60)'
+			);
+		} );
 	} );
 } );
diff --git a/packages/block-editor/src/layouts/constrained.js b/packages/block-editor/src/layouts/constrained.js
@@ -15,7 +15,7 @@ import { getCSSRules } from '@wordpress/style-engine';
  */
 import useSetting from '../components/use-setting';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
-import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
@@ -117,9 +117,7 @@ export default {
 		layoutDefinitions,
 	} ) {
 		const { contentSize, wideSize } = layout;
-		const blockGapStyleValue = getGapBoxControlValueFromStyle(
-			style?.spacing?.blockGap
-		);
+		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
 		// 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 =

diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
@@ -6,9 +6,8 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-
 import { getBlockGapCSS, getAlignmentsInfo } from './utils';
-import { getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 
 export default {
@@ -27,9 +26,8 @@ export default {
 		hasBlockGapSupport,
 		layoutDefinitions,
 	} ) {
-		const blockGapStyleValue = getGapBoxControlValueFromStyle(
-			style?.spacing?.blockGap
-		);
+		const blockGapStyleValue = getGapCSSValue( style?.spacing?.blockGap );
+
 		// 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 =