Spacing presets: add editor UI support

lib/compat/wordpress-6.1/block-editor-settings.php

@@ -154,7 +154,7 @@ function gutenberg_get_block_editor_settings( $settings ) {
 		unset( $settings['__experimentalFeatures']['spacing']['padding'] );
 	}
 	if ( isset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] ) ) {
-		$settings['disableCustomSpacingSize'] = ! $settings['__experimentalFeatures']['spacing']['customSpacingSize'];
+		$settings['disableCustomSpacingSizes'] = ! $settings['__experimentalFeatures']['spacing']['customSpacingSize'];
 		unset( $settings['__experimentalFeatures']['spacing']['customSpacingSize'] );
 	}
 

lib/compat/wordpress-6.1/theme.json

@@ -269,12 +269,12 @@
 			"blockGap": null,
 			"margin": false,
 			"padding": false,
-			"customSpacingSizes": true,
+			"customSpacingSize": true,
 			"units": [ "px", "em", "rem", "vh", "vw", "%" ],
 			"spacingScale": {
 				"operator": "*",
 				"increment": 1.5,
-				"steps": 10,
+				"steps": 7,
 				"mediumStep": 1.5,
 				"unit": "rem"
 			}

lib/experimental/class-wp-rest-block-editor-settings-controller.php

@@ -297,6 +297,11 @@ public function get_item_schema() {
 					'type'        => 'array',
 					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
 				),
+				'disableCustomSpacingSizes'              => array(
+					'description' => __( 'Disables custom spacing sizes.', 'gutenberg' ),
+					'type'        => 'boolean',
+					'context'     => array( 'post-editor', 'site-editor', 'widgets-editor' ),
+				),
 			),
 		);
 

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

@@ -93,6 +93,7 @@ export { default as URLInputButton } from './url-input/button';
 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';
 
 /*
  * Content Related Components

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

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalApplyValueToSides as applyValueToSides } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { getAllRawValue, isValuesMixed, isValuesDefined } from './utils';
+
+export default function AllInputControl( {
+	onChange,
+	values,
+	sides,
+	spacingSizes,
+	type,
+} ) {
+	const allValue = getAllRawValue( values );
+	const hasValues = isValuesDefined( values );
+	const isMixed = hasValues && isValuesMixed( values );
+
+	const handleOnChange = ( next ) => {
+		const nextValues = applyValueToSides( values, next, sides );
+		onChange( nextValues );
+	};
+
+	return (
+		<SpacingInputControl
+			value={ allValue }
+			onChange={ handleOnChange }
+			side={ 'all' }
+			spacingSizes={ spacingSizes }
+			isMixed={ isMixed }
+			type={ type }
+		/>
+	);
+}

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

@@ -0,0 +1,60 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { LABELS } from './utils';
+
+const groupedSides = [ 'vertical', 'horizontal' ];
+
+export default function AxialInputControls( {
+	onChange,
+	values,
+	sides,
+	spacingSizes,
+	type,
+} ) {
+	const createHandleOnChange = ( side ) => ( next ) => {
+		if ( ! onChange ) {
+			return;
+		}
+		const nextValues = { ...values };
+
+		if ( side === 'vertical' ) {
+			nextValues.top = next;
+			nextValues.bottom = next;
+		}
+
+		if ( side === 'horizontal' ) {
+			nextValues.left = next;
+			nextValues.right = next;
+		}
+
+		onChange( nextValues );
+	};
+
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? groupedSides.filter( ( side ) => sides.includes( side ) )
+		: groupedSides;
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				const axisValue =
+					side === 'vertical' ? values.top : values.left;
+				return (
+					<SpacingInputControl
+						value={ axisValue }
+						onChange={ createHandleOnChange( side ) }
+						label={ LABELS[ side ] }
+						key={ `spacing-sizes-control-${ side }` }
+						withInputField={ false }
+						side={ side }
+						spacingSizes={ spacingSizes }
+						type={ type }
+					/>
+				);
+			} ) }
+		</>
+	);
+}

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

@@ -0,0 +1,89 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import AllInputControl from './all-input-control';
+import InputControls from './input-controls';
+import AxialInputControls from './axial-input-controls';
+import LinkedButton from './linked-button';
+import { DEFAULT_VALUES, isValuesMixed, isValuesDefined } from './utils';
+import useSetting from '../use-setting';
+
+export default function SpacingSizesControl( {
+	inputProps,
+	onChange,
+	label = __( 'Spacing Control' ),
+	values,
+	sides,
+	splitOnAxis = false,
+	useSelect,
+} ) {
+	const spacingSizes = [
+		{ name: 0, slug: '0', size: 0 },
+		...useSetting( 'spacing.spacingSizes' ),
+	];
+
+	if ( spacingSizes.length > 8 ) {
+		spacingSizes.unshift( {
+			name: __( 'Inherit' ),
+			slug: 'default',
+			size: undefined,
+		} );
+	}
+
+	const inputValues = values || DEFAULT_VALUES;
+	const hasInitialValue = isValuesDefined( values );
+	const hasOneSide = sides?.length === 1;
+
+	const [ isLinked, setIsLinked ] = useState(
+		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
+	);
+
+	const toggleLinked = () => {
+		setIsLinked( ! isLinked );
+	};
+
+	const handleOnChange = ( nextValue ) => {
+		const newValues = { ...values, ...nextValue };
+		onChange( newValues );
+	};
+
+	const inputControlProps = {
+		...inputProps,
+		onChange: handleOnChange,
+		isLinked,
+		sides,
+		values: inputValues,
+		spacingSizes,
+		useSelect,
+		type: label,
+	};
+
+	return (
+		<fieldset role="region" className="component-spacing-sizes-control">
+			<Text as="legend">{ label }</Text>
+			{ ! hasOneSide && (
+				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
+			) }
+			{ isLinked && (
+				<AllInputControl
+					aria-label={ label }
+					{ ...inputControlProps }
+				/>
+			) }
+
+			{ ! isLinked && splitOnAxis && (
+				<AxialInputControls { ...inputControlProps } />
+			) }
+			{ ! isLinked && ! splitOnAxis && (
+				<InputControls { ...inputControlProps } />
+			) }
+		</fieldset>
+	);
+}

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

@@ -0,0 +1,44 @@
+/**
+ * Internal dependencies
+ */
+import SpacingInputControl from './spacing-input-control';
+import { ALL_SIDES, LABELS } from './utils';
+
+export default function BoxInputControls( {
+	values,
+	sides,
+	onChange,
+	spacingSizes,
+	type,
+} ) {
+	// Filter sides if custom configuration provided, maintaining default order.
+	const filteredSides = sides?.length
+		? ALL_SIDES.filter( ( side ) => sides.includes( side ) )
+		: ALL_SIDES;
+
+	const createHandleOnChange = ( side ) => ( next ) => {
+		const nextValues = { ...values };
+		nextValues[ side ] = next;
+
+		onChange( nextValues );
+	};
+
+	return (
+		<>
+			{ filteredSides.map( ( side ) => {
+				return (
+					<SpacingInputControl
+						value={ values[ side ] }
+						label={ LABELS[ side ] }
+						key={ `spacing-sizes-control-${ side }` }
+						withInputField={ false }
+						side={ side }
+						onChange={ createHandleOnChange( side ) }
+						spacingSizes={ spacingSizes }
+						type={ type }
+					/>
+				);
+			} ) }
+		</>
+	);
+}

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

@@ -0,0 +1,25 @@
+/**
+ * WordPress dependencies
+ */
+import { link, linkOff } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+import { Button, Tooltip } from '@wordpress/components';
+
+export default function LinkedButton( { isLinked, onClick } ) {
+	const label = isLinked ? __( 'Unlink Sides' ) : __( 'Link Sides' );
+
+	return (
+		<Tooltip text={ label }>
+			<span className="component-spacing-sizes-control__linked-button">
+				<Button
+					variant={ isLinked ? 'primary' : 'secondary' }
+					isSmall
+					icon={ isLinked ? link : linkOff }
+					iconSize={ 16 }
+					aria-label={ label }
+					onClick={ onClick }
+				/>
+			</span>
+		</Tooltip>
+	);
+}