BoxControl: Add support for grouped directions (vertical and horizontal controls)

packages/components/src/box-control/README.md

@@ -105,6 +105,14 @@ If this property is true, a button to reset the box control is rendered.
 - Required: No
 - Default: `true`
 
+### isGroupedDirections
+
+If this property is true, when the box control is unlinked, vertical and horizontal controls can be used instead of updating individual sides.
+
+- Type: `Boolean`
+- Required: No
+- Default: `false`
+
 ### inputProps
 
 Props for the internal [InputControl](../input-control) components.

packages/components/src/box-control/all-input-control.js

@@ -29,11 +29,24 @@ export default function AllInputControl( {
 
 	const handleOnChange = ( next ) => {
 		const nextValues = { ...values };
-		const selectedSides = sides?.length
-			? sides
-			: [ 'top', 'right', 'bottom', 'left' ];
 
-		selectedSides.forEach( ( side ) => ( nextValues[ side ] = next ) );
+		if ( sides?.length ) {
+			sides.forEach( ( side ) => {
+				if ( side === 'vertical' ) {
+					nextValues.top = next;
+					nextValues.bottom = next;
+				} else if ( side === 'horizontal' ) {
+					nextValues.left = next;
+					nextValues.right = next;
+				} else {
+					nextValues[ side ] = next;
+				}
+			} );
+		} else {
+			[ 'top', 'right', 'bottom', 'left' ].forEach(
+				( side ) => ( nextValues[ side ] = next )
+			);
+		}
 
 		onChange( nextValues );
 	};

packages/components/src/box-control/icon.js

@@ -29,10 +29,10 @@ export default function BoxControlIcon( {
 		return side === 'all' || side === value;
 	};
 
-	const top = getSide( 'top' );
-	const right = getSide( 'right' );
-	const bottom = getSide( 'bottom' );
-	const left = getSide( 'left' );
+	const top = getSide( 'top' ) || getSide( 'vertical' );
+	const right = getSide( 'right' ) || getSide( 'horizontal' );
+	const bottom = getSide( 'bottom' ) || getSide( 'vertical' );
+	const left = getSide( 'left' ) || getSide( 'horizontal' );
 
 	// Simulates SVG Icon scaling
 	const scale = size / BASE_ICON_SIZE;

packages/components/src/box-control/index.js

@@ -17,6 +17,7 @@ import Button from '../button';
 import { FlexItem, FlexBlock } from '../flex';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
+import VerticalHorizontalInputControls from './vertical-horizontal-input-controls';
 import BoxControlIcon from './icon';
 import { Text } from '../text';
 import LinkedButton from './linked-button';
@@ -29,6 +30,7 @@ import {
 import {
 	DEFAULT_VALUES,
 	DEFAULT_VISUALIZER_VALUES,
+	getInitialSide,
 	isValuesMixed,
 	isValuesDefined,
 } from './utils';
@@ -52,6 +54,7 @@ export default function BoxControl( {
 	values: valuesProp,
 	units,
 	sides,
+	isGroupedDirections = false,
 	allowReset = true,
 	resetValues = DEFAULT_VALUES,
 } ) {
@@ -67,14 +70,16 @@ export default function BoxControl( {
 		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
 	);
 
-	const [ side, setSide ] = useState( isLinked ? 'all' : 'top' );
+	const [ side, setSide ] = useState(
+		getInitialSide( isLinked, isGroupedDirections )
+	);
 
 	const id = useUniqueId( idProp );
 	const headingId = `${ id }-heading`;
 
 	const toggleLinked = () => {
 		setIsLinked( ! isLinked );
-		setSide( ! isLinked ? 'all' : 'top' );
+		setSide( getInitialSide( ! isLinked, isGroupedDirections ) );
 	};
 
 	const handleOnFocus = ( event, { side: nextSide } ) => {
@@ -150,6 +155,13 @@ export default function BoxControl( {
 						/>
 					</FlexBlock>
 				) }
+				{ ! isLinked && isGroupedDirections && (
+					<FlexBlock>
+						<VerticalHorizontalInputControls
+							{ ...inputControlProps }
+						/>
+					</FlexBlock>
+				) }
 				{ ! hasOneSide && (
 					<FlexItem>
 						<LinkedButton
@@ -159,7 +171,9 @@ export default function BoxControl( {
 					</FlexItem>
 				) }
 			</HeaderControlWrapper>
-			{ ! isLinked && <InputControls { ...inputControlProps } /> }
+			{ ! isLinked && ! isGroupedDirections && (
+				<InputControls { ...inputControlProps } />
+			) }
 		</Root>
 	);
 }

packages/components/src/box-control/stories/index.js

@@ -27,7 +27,11 @@ const defaultSideValues = {
 	left: '10px',
 };
 
-function DemoExample( { sides, defaultValues = defaultSideValues } ) {
+function DemoExample( {
+	sides,
+	defaultValues = defaultSideValues,
+	isGroupedDirections = false,
+} ) {
 	const [ values, setValues ] = useState( defaultValues );
 	const [ showVisualizer, setShowVisualizer ] = useState( {} );
 
@@ -41,6 +45,7 @@ function DemoExample( { sides, defaultValues = defaultSideValues } ) {
 						sides={ sides }
 						onChange={ setValues }
 						onChangeShowVisualizer={ setShowVisualizer }
+						isGroupedDirections={ isGroupedDirections }
 					/>
 				</Content>
 			</FlexBlock>
@@ -82,6 +87,20 @@ export const singleSide = () => {
 	);
 };
 
+export const groupedDirections = () => {
+	return <DemoExample isGroupedDirections={ true } />;
+};
+
+export const groupedDirectionsWithSingleSide = () => {
+	return (
+		<DemoExample
+			sides={ [ 'horizontal' ] }
+			defaultValues={ { left: '10px', right: '10px' } }
+			isGroupedDirections={ true }
+		/>
+	);
+};
+
 const Container = styled( Flex )`
 	max-width: 780px;
 `;

packages/components/src/box-control/styles/box-control-styles.js

@@ -24,6 +24,7 @@ export const Header = styled( Flex )`
 
 export const HeaderControlWrapper = styled( Flex )`
 	min-height: 30px;
+	gap: 0;
 `;
 
 export const UnitControlWrapper = styled.div`
@@ -59,8 +60,8 @@ const unitControlBorderRadiusStyles = ( { isFirst, isLast, isOnly } ) => {
 	} );
 };
 
-const unitControlMarginStyles = ( { isFirst } ) => {
-	const marginLeft = isFirst ? 0 : -1;
+const unitControlMarginStyles = ( { isFirst, isOnly } ) => {
+	const marginLeft = isFirst || isOnly ? 0 : -1;
 
 	return rtl( { marginLeft } )();
 };

packages/components/src/box-control/utils.js

@@ -20,6 +20,8 @@ export const LABELS = {
 	left: __( 'Left' ),
 	right: __( 'Right' ),
 	mixed: __( 'Mixed' ),
+	vertical: __( 'Vertical' ),
+	horizontal: __( 'Horizontal' ),
 };
 
 export const DEFAULT_VALUES = {
@@ -119,3 +121,21 @@ export function isValuesDefined( values ) {
 		)
 	);
 }
+
+/**
+ * Get initial selected side, factoring in whether the sides are linked,
+ * and whether or not the vertical / horizontal directions are grouped.
+ *
+ * @param {boolean} isLinked
+ * @param {boolean} isGroupedDirections
+ * @return {string} The initial side.
+ */
+export function getInitialSide( isLinked, isGroupedDirections ) {
+	let initialSide = 'all';
+
+	if ( ! isLinked ) {
+		initialSide = isGroupedDirections ? 'vertical' : 'top';
+	}
+
+	return initialSide;
+}

packages/components/src/box-control/vertical-horizontal-input-controls.js

@@ -0,0 +1,103 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import UnitControl from './unit-control';
+import { LABELS } from './utils';
+import { Layout } from './styles/box-control-styles';
+
+const groupedSides = [ 'vertical', 'horizontal' ];
+
+export default function VerticalHorizontalInputControls( {
+	onChange = noop,
+	onFocus = noop,
+	onHoverOn = noop,
+	onHoverOff = noop,
+	values,
+	sides,
+	...props
+} ) {
+	const createHandleOnFocus = ( side ) => ( event ) => {
+		onFocus( event, { side } );
+	};
+
+	const createHandleOnHoverOn = ( side ) => () => {
+		if ( side === 'vertical' ) {
+			onHoverOn( {
+				top: true,
+				bottom: true,
+			} );
+		} else {
+			onHoverOn( {
+				left: true,
+				right: true,
+			} );
+		}
+	};
+
+	const createHandleOnHoverOff = ( side ) => () => {
+		if ( side === 'vertical' ) {
+			onHoverOff( {
+				top: false,
+				bottom: false,
+			} );
+		} else {
+			onHoverOff( {
+				left: false,
+				right: false,
+			} );
+		}
+	};
+
+	const createHandleOnChange = ( side ) => ( next ) => {
+		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;
+
+	const first = filteredSides[ 0 ];
+	const last = filteredSides[ filteredSides.length - 1 ];
+	const only = first === last && first;
+
+	return (
+		<Layout
+			gap={ 0 }
+			align="top"
+			className="component-box-control__vertical-horizontal-input-controls"
+		>
+			{ filteredSides.map( ( side ) => (
+				<UnitControl
+					{ ...props }
+					isFirst={ first === side }
+					isLast={ last === side }
+					isOnly={ only === side }
+					value={ 'vertical' === side ? values.top : values.left }
+					onChange={ createHandleOnChange( side ) }
+					onFocus={ createHandleOnFocus( side ) }
+					onHoverOn={ createHandleOnHoverOn( side ) }
+					onHoverOff={ createHandleOnHoverOff( side ) }
+					label={ LABELS[ side ] }
+					key={ `box-control-${ side }` }
+				/>
+			) ) }
+		</Layout>
+	);
+}