Spacing: Optimize & condense unlinked spacing controls

packages/block-editor/src/components/global-styles/dimensions-panel.js

@@ -488,7 +488,6 @@ export default function DimensionsPanel( {
 							sides={ paddingSides }
 							units={ units }
 							allowReset={ false }
-							splitOnAxis={ isAxialPadding }
 							onMouseOver={ onMouseOverPadding }
 							onMouseOut={ onMouseLeaveControls }
 						/>
@@ -529,7 +528,6 @@ export default function DimensionsPanel( {
 							sides={ marginSides }
 							units={ units }
 							allowReset={ false }
-							splitOnAxis={ isAxialMargin }
 							onMouseOver={ onMouseOverMargin }
 							onMouseOut={ onMouseLeaveControls }
 						/>
@@ -576,10 +574,10 @@ export default function DimensionsPanel( {
 							label={ __( 'Block spacing' ) }
 							min={ 0 }
 							onChange={ setGapValues }
+							showSideInLabel={ false }
 							sides={ isAxialGap ? gapSides : [ 'top' ] } // Use 'top' as the shorthand property in non-axial configurations.
 							values={ gapValues }
 							allowReset={ false }
-							splitOnAxis={ isAxialGap }
 						/>
 					) }
 				</ToolsPanelItem>

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

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../../use-setting';
+
+export default function useSpacingSizes() {
+	const spacingSizes = [
+		{ name: 0, slug: '0', side: 0 },
+		...( useSetting( 'spacing.spacingSizes' ) || [] ),
+	];
+
+	if ( spacingSizes.length > 8 ) {
+		spacingSizes.unshift( {
+			name: __( 'Default' ),
+			slug: 'default',
+			size: undefined,
+		} );
+	}
+
+	return spacingSizes;
+}

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

@@ -1,61 +1,50 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
+import {
+	BaseControl,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
 import { useState } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import { BaseControl } from '@wordpress/components';
+import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
  * 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';
+import AxialInputControls from './input-controls/axial';
+import SeparatedInputControls from './input-controls/separated';
+import SingleInputControl from './input-controls/single';
+import SidesDropdown from './sides-dropdown';
+import useSpacingSizes from './hooks/use-spacing-sizes';
+import {
+	ALL_SIDES,
+	DEFAULT_VALUES,
+	LABELS,
+	VIEWS,
+	getInitialView,
+} from './utils';
 
 export default function SpacingSizesControl( {
 	inputProps,
-	onChange,
-	label = __( 'Spacing Control' ),
-	values,
-	sides,
-	splitOnAxis = false,
-	useSelect,
+	label: labelProp,
 	minimumCustomValue = 0,
-	onMouseOver,
+	onChange,
 	onMouseOut,
+	onMouseOver,
+	showSideInLabel = true,
+	sides = ALL_SIDES,
+	useSelect,
+	values,
 } ) {
-	const spacingSizes = [
-		{ name: 0, slug: '0', size: 0 },
-		...( useSetting( 'spacing.spacingSizes' ) || [] ),
-	];
-
-	if ( spacingSizes.length > 8 ) {
-		spacingSizes.unshift( {
-			name: __( 'Default' ),
-			slug: 'default',
-			size: undefined,
-		} );
-	}
-
+	const spacingSizes = useSpacingSizes();
 	const inputValues = values || DEFAULT_VALUES;
-	const hasInitialValue = isValuesDefined( values );
 	const hasOneSide = sides?.length === 1;
+	const hasOnlyAxialSides =
+		sides?.includes( 'horizontal' ) &&
+		sides?.includes( 'vertical' ) &&
+		sides?.length === 2;
 
-	const [ isLinked, setIsLinked ] = useState(
-		! hasInitialValue || ! isValuesMixed( inputValues, sides ) || hasOneSide
-	);
-
-	const toggleLinked = () => {
-		setIsLinked( ! isLinked );
-	};
+	const [ view, setView ] = useState( getInitialView( inputValues, sides ) );
 
 	const handleOnChange = ( nextValue ) => {
 		const newValues = { ...values, ...nextValue };
@@ -64,43 +53,62 @@ export default function SpacingSizesControl( {
 
 	const inputControlProps = {
 		...inputProps,
+		minimumCustomValue,
 		onChange: handleOnChange,
-		isLinked,
+		onMouseOut,
+		onMouseOver,
 		sides,
-		values: inputValues,
 		spacingSizes,
+		type: labelProp,
 		useSelect,
-		type: label,
-		minimumCustomValue,
-		onMouseOver,
-		onMouseOut,
+		values: inputValues,
 	};
 
-	return (
-		<fieldset
-			className={ classnames( 'component-spacing-sizes-control', {
-				'is-unlinked': ! isLinked,
-			} ) }
-		>
-			<BaseControl.VisualLabel as="legend">
-				{ label }
-			</BaseControl.VisualLabel>
-			{ ! hasOneSide && (
-				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
-			) }
-			{ isLinked && (
-				<AllInputControl
-					aria-label={ label }
-					{ ...inputControlProps }
-				/>
-			) }
+	const renderControls = () => {
+		if ( view === VIEWS.axial ) {
+			return <AxialInputControls { ...inputControlProps } />;
+		}
+		if ( view === VIEWS.custom ) {
+			return <SeparatedInputControls { ...inputControlProps } />;
+		}
+		return <SingleInputControl side={ view } { ...inputControlProps } />;
+	};
+
+	const sideLabel =
+		ALL_SIDES.includes( view ) && showSideInLabel ? LABELS[ view ] : '';
+
+	const label = sprintf(
+		// translators: 2. Type of spacing being modified (Padding, margin, etc). 1: The side of the block being modified (top, bottom, left etc.).
+		__( '%1$s %2$s' ),
+		labelProp,
+		sideLabel
+	);
+
+	const dropdownLabelText = sprintf(
+		// translators: %s: The current spacing property e.g. "Padding", "Margin".
+		_x( '%s options', 'Button label to reveal side configuration options' ),
+		labelProp
+	);
 
-			{ ! isLinked && splitOnAxis && (
-				<AxialInputControls { ...inputControlProps } />
-			) }
-			{ ! isLinked && ! splitOnAxis && (
-				<InputControls { ...inputControlProps } />
-			) }
+	return (
+		<fieldset className="spacing-sizes-control">
+			<HStack className="spacing-sizes-control__header">
+				<BaseControl.VisualLabel
+					as="legend"
+					className="spacing-sizes-control__label"
+				>
+					{ label }
+				</BaseControl.VisualLabel>
+				{ ! hasOneSide && ! hasOnlyAxialSides && (
+					<SidesDropdown
+						label={ dropdownLabelText }
+						onChange={ setView }
+						sides={ sides }
+						value={ view }
+					/>
+				) }
+			</HStack>
+			{ renderControls() }
 		</fieldset>
 	);
 }

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

@@ -2,19 +2,19 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { LABELS } from './utils';
+import { LABELS, ICONS, hasAxisSupport } from '../utils';
 
 const groupedSides = [ 'vertical', 'horizontal' ];
 
 export default function AxialInputControls( {
+	minimumCustomValue,
 	onChange,
-	values,
+	onMouseOut,
+	onMouseOver,
 	sides,
 	spacingSizes,
 	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
+	values,
 } ) {
 	const createHandleOnChange = ( side ) => ( next ) => {
 		if ( ! onChange ) {
@@ -37,7 +37,7 @@ export default function AxialInputControls( {
 
 	// Filter sides if custom configuration provided, maintaining default order.
 	const filteredSides = sides?.length
-		? groupedSides.filter( ( side ) => sides.includes( side ) )
+		? groupedSides.filter( ( side ) => hasAxisSupport( sides, side ) )
 		: groupedSides;
 
 	return (
@@ -47,17 +47,18 @@ export default function AxialInputControls( {
 					side === 'vertical' ? values.top : values.left;
 				return (
 					<SpacingInputControl
-						value={ axisValue }
-						onChange={ createHandleOnChange( side ) }
-						label={ LABELS[ side ] }
 						key={ `spacing-sizes-control-${ side }` }
-						withInputField={ false }
+						icon={ ICONS[ side ] }
+						label={ LABELS[ side ] }
+						minimumCustomValue={ minimumCustomValue }
+						onChange={ createHandleOnChange( side ) }
+						onMouseOut={ onMouseOut }
+						onMouseOver={ onMouseOver }
 						side={ side }
 						spacingSizes={ spacingSizes }
 						type={ type }
-						minimumCustomValue={ minimumCustomValue }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
+						value={ axisValue }
+						withInputField={ false }
 					/>
 				);
 			} ) }

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

@@ -2,17 +2,17 @@
  * Internal dependencies
  */
 import SpacingInputControl from './spacing-input-control';
-import { ALL_SIDES, LABELS } from './utils';
+import { ALL_SIDES, LABELS, ICONS } from '../utils';
 
-export default function BoxInputControls( {
-	values,
-	sides,
+export default function SeparatedInputControls( {
+	minimumCustomValue,
 	onChange,
+	onMouseOut,
+	onMouseOver,
+	sides,
 	spacingSizes,
 	type,
-	minimumCustomValue,
-	onMouseOver,
-	onMouseOut,
+	values,
 } ) {
 	// Filter sides if custom configuration provided, maintaining default order.
 	const filteredSides = sides?.length
@@ -31,17 +31,18 @@ export default function BoxInputControls( {
 			{ filteredSides.map( ( side ) => {
 				return (
 					<SpacingInputControl
-						value={ values[ side ] }
-						label={ LABELS[ side ] }
 						key={ `spacing-sizes-control-${ side }` }
-						withInputField={ false }
-						side={ side }
+						icon={ ICONS[ side ] }
+						label={ LABELS[ side ] }
+						minimumCustomValue={ minimumCustomValue }
 						onChange={ createHandleOnChange( side ) }
+						onMouseOut={ onMouseOut }
+						onMouseOver={ onMouseOver }
+						side={ side }
 						spacingSizes={ spacingSizes }
 						type={ type }
-						minimumCustomValue={ minimumCustomValue }
-						onMouseOver={ onMouseOver }
-						onMouseOut={ onMouseOut }
+						value={ values[ side ] }
+						withInputField={ false }
 					/>
 				);
 			} ) }