Add spacing presets to the spacer block (#44002)

packages/block-editor/README.md

@@ -517,6 +517,18 @@ _Returns_
 
 -   `string`: returns the cssUnit value in a simple px format.
 
+### getSpacingPresetCssVar
+
+Converts a spacing preset into a custom value.
+
+_Parameters_
+
+-   _value_ `string`: Value to convert.
+
+_Returns_
+
+-   `string | undefined`: CSS var string for given spacing preset value.
+
 ### getTypographyClassesAndStyles
 
 Provides the CSS class names and inline styles for a block's typography support
@@ -570,6 +582,18 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inspector-controls/README.md>
 
+### isValueSpacingPreset
+
+Checks is given value is a spacing preset.
+
+_Parameters_
+
+-   _value_ `string`: Value to check
+
+_Returns_
+
+-   `boolean`: Return true if value is string in format var:preset|spacing|.
+
 ### JustifyContentControl
 
 _Related_

packages/block-editor/src/components/index.js

@@ -92,7 +92,10 @@ export { default as URLPopover } from './url-popover';
 export { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';
 export { default as withColorContext } from './color-palette/with-color-context';
 export { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';
-
+export {
+	getSpacingPresetCssVar,
+	isValueSpacingPreset,
+} from './spacing-sizes-control/utils';
 /*
  * Content Related Components
  */

packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js

@@ -20,6 +20,7 @@ import {
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
+import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -71,6 +72,15 @@ export default function SpacingInputControl( {
 			! isValueSpacingPreset( value )
 	);
 
+	const previousValue = usePrevious( value );
+	if (
+		previousValue !== value &&
+		! isValueSpacingPreset( value ) &&
+		showCustomValueControl !== true
+	) {
+		setShowCustomValueControl( true );
+	}
+
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 	} );

packages/block-editor/src/components/spacing-sizes-control/style.scss

@@ -2,7 +2,7 @@
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	align-items: center;
-	grid-template-rows: 16px auto;
+	grid-template-rows: $grid-unit-30 auto;
 }
 
 .component-spacing-sizes-control {
@@ -19,7 +19,7 @@
 	}
 
 	.components-base-control__label {
-		margin-bottom: 0;
+		margin-bottom: $grid-unit-10;
 		height: $grid-unit-20;
 	}
 
@@ -55,6 +55,7 @@
 		grid-row: 1 / 1;
 		align-self: center;
 		margin-left: $grid-unit-05;
+		margin-bottom: $grid-unit-10;
 	}
 
 	.components-spacing-sizes-control__custom-toggle-all {
@@ -85,20 +86,20 @@
 	.components-spacing-sizes-control__custom-value-range {
 		grid-column: span 2;
 		margin-left: $grid-unit-20;
-		margin-top: 8px;
 	}
 
-	.components-spacing-sizes-control__custom-value-input {
+	.components-base-control.components-spacing-sizes-control__custom-value-input {
 		width: 124px;
-		margin-top: 8px;
 		grid-column: 1;
+		margin-bottom: 0;
 	}
 
-	.components-range-control {
+	.components-base-control.components-range-control {
 		height: 40px;
 		/* Vertically center the RangeControl until it has true 40px height. */
 		display: flex;
 		align-items: center;
+		margin-bottom: 0;
 
 		> .components-base-control__field {
 			/* Fixes RangeControl contents when the outer wrapper is flex */
@@ -108,7 +109,6 @@
 
 	.components-spacing-sizes-control__range-control {
 		grid-column: span 3;
-		margin-top: 8px;
 	}
 
 	.components-range-control__mark {

packages/block-library/src/spacer/controls.js

@@ -2,14 +2,21 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import {
+	InspectorControls,
+	useSetting,
+	__experimentalSpacingSizesControl as SpacingSizesControl,
+	isValueSpacingPreset,
+} from '@wordpress/block-editor';
+import {
+	BaseControl,
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
+import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -18,7 +25,7 @@ import { MIN_SPACER_SIZE } from './constants';
 
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
-
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 	// In most contexts the spacer size cannot meaningfully be set to a
 	// percentage, since this is relative to the parent container. This
 	// unit is disabled from the UI.
@@ -38,28 +45,46 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	} );
 
 	const handleOnChange = ( unprocessedValue ) => {
-		onChange( unprocessedValue );
+		onChange( unprocessedValue.all );
 	};
 
 	// Force the unit to update to `px` when the Spacer is being resized.
 	const [ parsedQuantity, parsedUnit ] =
 		parseQuantityAndUnitFromRawValue( value );
-	const computedValue = [
-		parsedQuantity,
-		isResizing ? 'px' : parsedUnit,
-	].join( '' );
+	const computedValue = isValueSpacingPreset( value )
+		? value
+		: [ parsedQuantity, isResizing ? 'px' : parsedUnit ].join( '' );
 
 	return (
-		<UnitControl
-			label={ label }
-			id={ inputId }
-			isResetValueOnUnitChange
-			min={ MIN_SPACER_SIZE }
-			onChange={ handleOnChange }
-			__unstableInputWidth={ '80px' }
-			value={ computedValue }
-			units={ units }
-		/>
+		<>
+			{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+				<BaseControl label={ label } id={ inputId }>
+					<UnitControl
+						id={ inputId }
+						isResetValueOnUnitChange
+						min={ MIN_SPACER_SIZE }
+						onChange={ handleOnChange }
+						style={ { maxWidth: 80 } }
+						value={ computedValue }
+						units={ units }
+					/>
+				</BaseControl>
+			) }
+
+			{ spacingSizes?.length > 0 && (
+				<View className="tools-panel-item-spacing">
+					<SpacingSizesControl
+						values={ { all: computedValue } }
+						onChange={ handleOnChange }
+						label={ label }
+						sides={ [ 'all' ] }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ false }
+					/>
+				</View>
+			) }
+		</>
 	);
 }
 

packages/block-library/src/spacer/edit.js

@@ -6,10 +6,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	getSpacingPresetCssVar,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { View } from '@wordpress/primitives';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -79,7 +84,12 @@ const SpacerEdit = ( {
 	toggleSelection,
 	context,
 	__unstableParentLayout: parentLayout,
+	className,
 } ) => {
+	const disableCustomSpacingSizes = useSelect( ( select ) => {
+		const editorSettings = select( blockEditorStore ).getSettings();
+		return editorSettings?.disableCustomSpacingSizes;
+	} );
 	const { orientation } = context;
 	const { orientation: parentOrientation, type } = parentLayout || {};
 	// If the spacer is inside a flex container, it should either inherit the orientation
@@ -114,10 +124,12 @@ const SpacerEdit = ( {
 		height:
 			inheritedOrientation === 'horizontal'
 				? 24
-				: temporaryHeight || height || undefined,
+				: temporaryHeight ||
+				  getSpacingPresetCssVar( height ) ||
+				  undefined,
 		width:
 			inheritedOrientation === 'horizontal'
-				? temporaryWidth || width || undefined
+				? temporaryWidth || getSpacingPresetCssVar( width ) || undefined
 				: undefined,
 		// In vertical flex containers, the spacer shrinks to nothing without a minimum width.
 		minWidth:
@@ -189,7 +201,14 @@ const SpacerEdit = ( {
 
 	return (
 		<>
-			<View { ...useBlockProps( { style } ) }>
+			<View
+				{ ...useBlockProps( {
+					style,
+					className: classnames( className, {
+						'custom-sizes-disabled': disableCustomSpacingSizes,
+					} ),
+				} ) }
+			>
 				{ resizableBoxWithOrientation( inheritedOrientation ) }
 			</View>
 			<SpacerControls

packages/block-library/src/spacer/editor.scss

@@ -17,7 +17,8 @@
 }
 
 .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
-.block-library-spacer__resize-container.has-show-handle {
+.block-library-spacer__resize-container.has-show-handle,
+.wp-block-spacer.is-selected.custom-sizes-disabled {
 	background: rgba($black, 0.1);
 
 	.is-dark-theme & {

packages/block-library/src/spacer/save.js

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, getSpacingPresetCssVar } from '@wordpress/block-editor';
 
 export default function save( { attributes: { height, width } } ) {
 	return (
 		<div
 			{ ...useBlockProps.save( {
 				style: {
-					height,
-					width,
+					height: getSpacingPresetCssVar( height ),
+					width: getSpacingPresetCssVar( width ),
 				},
 				'aria-hidden': true,
 			} ) }