diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js
index 8b6ec65898ee4f..63550254e1be0a 100644
--- a/packages/block-library/src/spacer/controls.js
+++ b/packages/block-library/src/spacer/controls.js
@@ -8,9 +8,9 @@ import {
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
-import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,8 +18,6 @@ import { useState } from '@wordpress/element';
 import { MAX_SPACER_SIZE } from './edit';
 
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
-	const [ temporaryInput, setTemporaryInput ] = useState( null );
-
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
 
 	// In most contexts the spacer size cannot meaningfully be set to a
@@ -41,17 +39,17 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	} );
 
 	const handleOnChange = ( unprocessedValue ) => {
-		setTemporaryInput( null );
 		onChange( unprocessedValue );
 	};
 
-	const handleOnBlur = () => {
-		if ( temporaryInput !== null ) {
-			setTemporaryInput( null );
-		}
-	};
-
-	const inputValue = temporaryInput !== null ? temporaryInput : value;
+	// Force the unit to update to `px` when the Spacer is being resized.
+	const [ parsedQuantity, parsedUnit ] = parseQuantityAndUnitFromRawValue(
+		value
+	);
+	const computedValue = [
+		parsedQuantity,
+		isResizing ? 'px' : parsedUnit,
+	].join( '' );
 
 	return (
 		<BaseControl label={ label } id={ inputId }>
@@ -60,13 +58,10 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 				isResetValueOnUnitChange
 				min={ 0 }
 				max={ MAX_SPACER_SIZE }
-				onBlur={ handleOnBlur }
 				onChange={ handleOnChange }
 				style={ { maxWidth: 80 } }
-				value={ inputValue }
+				value={ computedValue }
 				units={ units }
-				// Force the unit to update to `px` when the Spacer is being resized.
-				unit={ isResizing ? 'px' : undefined }
 			/>
 		</BaseControl>
 	);