Export applyValueToSides util function from BoxControl

This could avoid some code duplication for new components around spacing size presets.

Author: aaronrobertshaw

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

@@ -3,8 +3,8 @@
  */
 import UnitControl from './unit-control';
 import {
-	ALL_SIDES,
 	LABELS,
+	applyValueToSides,
 	getAllValue,
 	isValuesMixed,
 	isValuesDefined,
@@ -32,42 +32,18 @@ export default function AllInputControl( {
 		onFocus( event, { side: 'all' } );
 	};
 
-	// Applies a value to an object representing top, right, bottom and left
-	// sides while taking into account any custom side configuration.
-	const applyValueToSides = ( currentValues, newValue ) => {
-		const newValues = { ...currentValues };
-
-		if ( sides?.length ) {
-			sides.forEach( ( side ) => {
-				if ( side === 'vertical' ) {
-					newValues.top = newValue;
-					newValues.bottom = newValue;
-				} else if ( side === 'horizontal' ) {
-					newValues.left = newValue;
-					newValues.right = newValue;
-				} else {
-					newValues[ side ] = newValue;
-				}
-			} );
-		} else {
-			ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
-		}
-
-		return newValues;
-	};
-
 	const handleOnChange = ( next ) => {
 		const isNumeric = ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : undefined;
-		const nextValues = applyValueToSides( values, nextValue );
+		const nextValues = applyValueToSides( values, nextValue, sides );
 
 		onChange( nextValues );
 	};
 
 	// Set selected unit so it can be used as fallback by unlinked controls
 	// when individual sides do not have a value containing a unit.
 	const handleOnUnitChange = ( unit ) => {
-		const newUnits = applyValueToSides( selectedUnits, unit );
+		const newUnits = applyValueToSides( selectedUnits, unit, sides );
 		setSelectedUnits( newUnits );
 	};
 

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

@@ -173,3 +173,5 @@ export default function BoxControl( {
 		</Root>
 	);
 }
+
+export { applyValueToSides } from './utils';

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

@@ -194,3 +194,35 @@ export function normalizeSides( sides ) {
 
 	return filteredSides;
 }
+
+/**
+ * Applies a value to an object representing top, right, bottom and left sides
+ * while taking into account any custom side configuration.
+ *
+ * @param {Object}        currentValues The current values for each side.
+ * @param {string|number} newValue      The value to apply to the sides object.
+ * @param {string[]}      sides         Array defining valid sides.
+ *
+ * @return {Object} Object containing the updated values for each side.
+ */
+export function applyValueToSides( currentValues, newValue, sides ) {
+	const newValues = { ...currentValues };
+
+	if ( sides?.length ) {
+		sides.forEach( ( side ) => {
+			if ( side === 'vertical' ) {
+				newValues.top = newValue;
+				newValues.bottom = newValue;
+			} else if ( side === 'horizontal' ) {
+				newValues.left = newValue;
+				newValues.right = newValue;
+			} else {
+				newValues[ side ] = newValue;
+			}
+		} );
+	} else {
+		ALL_SIDES.forEach( ( side ) => ( newValues[ side ] = newValue ) );
+	}
+
+	return newValues;
+}

packages/components/src/index.js

@@ -30,7 +30,10 @@ export {
 	isEmptyBorder as __experimentalIsEmptyBorder,
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
-export { default as __experimentalBoxControl } from './box-control';
+export {
+	default as __experimentalBoxControl,
+	applyValueToSides as __experimentalApplyValueToSides,
+} from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
 export {