Get handling of custom values working

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

@@ -10,6 +10,7 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalText as Text,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { settings } from '@wordpress/icons';
@@ -26,23 +27,32 @@ export default function SpacingInputControl( {
 	side,
 	onChange,
 } ) {
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+	} );
+
 	const [ valueNow, setValueNow ] = useState( null );
+
+	const [ selectedUnit, setSelectedUnit ] = useState(
+		parseQuantityAndUnitFromRawValue( value )[ 1 ] || units[ 0 ]
+	);
+
 	const [ showCustomValueControl, setShowCustomValueControl ] =
 		useState( false );
-	const customTooltipContent = ( newValue ) => spacingSizes[ newValue ]?.name;
 
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
-	} );
+	const customTooltipContent = ( newValue ) => spacingSizes[ newValue ]?.name;
 
 	const currentValue = ! showCustomValueControl
 		? getSliderValueFromPreset( value, spacingSizes )
-		: '20px';
+		: value;
 
 	const getNewCustomValue = ( newSize ) => {
-		return newSize;
+		const isNumeric = ! isNaN( parseFloat( newSize ) );
+		const nextValue = isNumeric ? newSize : undefined;
+		return nextValue;
 	};
-	const getNewRangeValue = ( newSize ) => {
+
+	const getNewPresetValue = ( newSize ) => {
 		setValueNow( newSize );
 		const size = parseInt( newSize, 10 );
 		if ( size === 0 ) {
@@ -51,6 +61,16 @@ export default function SpacingInputControl( {
 		return `var:preset|spacing|${ spacingSizes[ newSize ]?.slug }`;
 	};
 
+	const handleCustomValueSliderChange = ( next ) => {
+		onChange(
+			next !== undefined ? `${ next }${ selectedUnit }` : undefined
+		);
+	};
+
+	const handleOnUnitChange = ( unit ) => {
+		setSelectedUnit( unit );
+	};
+
 	const currentValueHint = customTooltipContent( currentValue );
 
 	const options = spacingSizes.map( ( size, index ) => ( {
@@ -86,13 +106,13 @@ export default function SpacingInputControl( {
 							( option ) => option.key === valueNow
 						) }
 						onChange={ ( selectedItem ) => {
-							onChange( getNewRangeValue( selectedItem.key ) );
+							onChange( getNewPresetValue( selectedItem.key ) );
 						} }
 						options={ options }
 						onHighlightedIndexChange={ ( index ) => {
 							if ( index.type === '__item_mouse_move__' ) {
 								onChange(
-									getNewRangeValue( index.highlightedIndex )
+									getNewPresetValue( index.highlightedIndex )
 								);
 							}
 						} }
@@ -121,21 +141,23 @@ export default function SpacingInputControl( {
 						}
 						value={ currentValue }
 						units={ units }
+						onUnitChange={ handleOnUnitChange }
 					/>
 
 					<RangeControl
 						value={ value }
 						min={ 0 }
 						max={ 50 }
 						withInputField={ false }
+						onChange={ handleCustomValueSliderChange }
 					/>
 				</HStack>
 			) }
 			{ spacingSizes.length <= 8 && ! showCustomValueControl && (
 				<RangeControl
 					value={ currentValue }
 					onChange={ ( newSize ) =>
-						onChange( getNewRangeValue( newSize ) )
+						onChange( getNewPresetValue( newSize ) )
 					}
 					withInputField={ false }
 					aria-valuenow={ valueNow }

packages/block-editor/src/components/spacing-sizes-control/style.scss

@@ -36,8 +36,6 @@
 		.components-unit-control-wrapper {
 			width: 110px;
 			flex-shrink: 0;
-			margin-bottom: 12px;
-			margin-top: 12px;
 		}
 		.components-range-control {
 			flex: 1;