Block Supports: Extract reusable preset input control from spacing sizes and border radius controls

packages/block-editor/src/components/border-radius-control/index.js

@@ -16,12 +16,14 @@ import { __ } from '@wordpress/i18n';
  */
 import LinkedButton from './linked-button';
 import { useSettings } from '../use-settings';
-import { hasDefinedValues, hasMixedValues } from './utils';
-import SingleInputControl from './single-input-control';
+import { hasDefinedValues, hasMixedValues, getAllValue } from './utils';
+import PresetInputControl from '../preset-input-control';
 import {
-	DEFAULT_VALUES,
 	RANGE_CONTROL_MAX_SIZE,
 	EMPTY_ARRAY,
+	CORNERS,
+	ICONS,
+	MIN_BORDER_RADIUS_VALUE,
 } from './constants';
 
 function useBorderRadiusSizes( presets ) {
@@ -50,6 +52,110 @@ function useBorderRadiusSizes( presets ) {
 	}, [ customSizes, themeSizes, defaultSizes ] );
 }
 
+/**
+ * Gets the value for a specific corner from the values object.
+ *
+ * @param {Object|string} values Border radius values.
+ * @param {string}        corner Corner name ('all', 'topLeft', etc.).
+ *
+ * @return {string|undefined} The corner value.
+ */
+function getCornerValue( values, corner ) {
+	if ( corner === 'all' ) {
+		return getAllValue( values );
+	}
+
+	// Handle string values (shorthand)
+	if ( typeof values === 'string' ) {
+		return values;
+	}
+
+	// Handle object values (longhand)
+	return values?.[ corner ];
+}
+
+/**
+ * Gets the selected unit for a specific corner.
+ *
+ * @param {Object} selectedUnits Units object.
+ * @param {string} corner        Corner name.
+ *
+ * @return {string} The selected unit.
+ */
+function getCornerUnit( selectedUnits, corner ) {
+	if ( corner === 'all' ) {
+		return selectedUnits.flat;
+	}
+	return selectedUnits[ corner ];
+}
+
+/**
+ * Creates an onChange handler for a specific corner.
+ *
+ * @param {string}   corner   Corner name.
+ * @param {Object}   values   Current values.
+ * @param {Function} onChange Original onChange callback.
+ *
+ * @return {Function} Corner-specific onChange handler.
+ */
+function createCornerChangeHandler( corner, values, onChange ) {
+	return ( newValue ) => {
+		if ( corner === 'all' ) {
+			onChange( {
+				topLeft: newValue,
+				topRight: newValue,
+				bottomLeft: newValue,
+				bottomRight: newValue,
+			} );
+		} else {
+			// For shorthand style & backwards compatibility, handle flat string value.
+			const currentValues =
+				typeof values !== 'string'
+					? values || {}
+					: {
+							topLeft: values,
+							topRight: values,
+							bottomLeft: values,
+							bottomRight: values,
+					  };
+
+			onChange( {
+				...currentValues,
+				[ corner ]: newValue,
+			} );
+		}
+	};
+}
+
+/**
+ * Creates a unit change handler for a specific corner.
+ *
+ * @param {string}   corner           Corner name.
+ * @param {Object}   selectedUnits    Current selected units.
+ * @param {Function} setSelectedUnits Unit setter function.
+ *
+ * @return {Function} Corner-specific unit change handler.
+ */
+function createCornerUnitChangeHandler(
+	corner,
+	selectedUnits,
+	setSelectedUnits
+) {
+	return ( newUnit ) => {
+		const newUnits = { ...selectedUnits };
+		if ( corner === 'all' ) {
+			newUnits.flat = newUnit;
+			newUnits.topLeft = newUnit;
+			newUnits.topRight = newUnit;
+			newUnits.bottomLeft = newUnit;
+			newUnits.bottomRight = newUnit;
+		} else {
+			newUnits[ corner ] = newUnit;
+		}
+		setSelectedUnits( newUnits );
+	};
+}
+
 /**
  * Control to display border radius options.
  *
@@ -97,17 +203,28 @@ export default function BorderRadiusControl( { onChange, values, presets } ) {
 				<LinkedButton onClick={ toggleLinked } isLinked={ isLinked } />
 			</HStack>
 			{ isLinked ? (
-				<>
-					<SingleInputControl
-						onChange={ onChange }
-						selectedUnits={ selectedUnits }
-						setSelectedUnits={ setSelectedUnits }
-						values={ values }
-						units={ units }
-						corner="all"
-						presets={ options }
-					/>
-				</>
+				<PresetInputControl
+					ariaLabel={ CORNERS.all }
+					className="components-border-radius-control"
+					icon={ ICONS.all }
+					minimumCustomValue={ MIN_BORDER_RADIUS_VALUE }
+					onChange={ createCornerChangeHandler(
+						'all',
+						values,
+						onChange
+					) }
+					onUnitChange={ createCornerUnitChangeHandler(
+						'all',
+						selectedUnits,
+						setSelectedUnits
+					) }
+					presets={ options }
+					presetType="border-radius"
+					selectedUnit={ getCornerUnit( selectedUnits, 'all' ) }
+					showTooltip
+					units={ units }
+					value={ getCornerValue( values, 'all' ) }
+				/>
 			) : (
 				<VStack>
 					{ [
@@ -116,15 +233,31 @@ export default function BorderRadiusControl( { onChange, values, presets } ) {
 						'bottomLeft',
 						'bottomRight',
 					].map( ( corner ) => (
-						<SingleInputControl
+						<PresetInputControl
 							key={ corner }
-							onChange={ onChange }
-							selectedUnits={ selectedUnits }
-							setSelectedUnits={ setSelectedUnits }
-							values={ values || DEFAULT_VALUES }
-							units={ units }
-							corner={ corner }
+							ariaLabel={ CORNERS[ corner ] }
+							className="components-border-radius-control"
+							icon={ ICONS[ corner ] }
+							minimumCustomValue={ MIN_BORDER_RADIUS_VALUE }
+							onChange={ createCornerChangeHandler(
+								corner,
+								values,
+								onChange
+							) }
+							onUnitChange={ createCornerUnitChangeHandler(
+								corner,
+								selectedUnits,
+								setSelectedUnits
+							) }
 							presets={ options }
+							presetType="border-radius"
+							selectedUnit={ getCornerUnit(
+								selectedUnits,
+								corner
+							) }
+							showTooltip
+							units={ units }
+							value={ getCornerValue( values, corner ) }
 						/>
 					) ) }
 				</VStack>