Fixed Input Unit Block: Unit jumps to px when set to 0

packages/block-editor/src/components/child-layout-control/index.js

@@ -187,6 +187,7 @@ function FlexControls( {
 							flexSize: value,
 						} );
 					} }
+					shouldPreserveUnit
 					value={ flexSize }
 					label={ flexResetLabel }
 					hideLabelFromVision

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

@@ -234,6 +234,7 @@ export default function SpacingInputControl( {
 						hideLabelFromVision
 						className="spacing-sizes-control__custom-value-input"
 						size="__unstable-large"
+						shouldPreserveUnit
 						onDragStart={ () => {
 							if ( value?.charAt( 0 ) === '-' ) {
 								setMinValue( 0 );

packages/components/src/unit-control/index.tsx

@@ -57,6 +57,7 @@ function UnforwardedUnitControl(
 		value: valueProp,
 		onFocus: onFocusProp,
 		__shouldNotWarnDeprecated36pxSize,
+		shouldPreserveUnit = false,
 		...props
 	} = useDeprecated36pxDefaultSizeProp( unitControlProps );
 
@@ -136,6 +137,12 @@ function UnforwardedUnitControl(
 			typeof nextQuantityValue === 'undefined' ||
 			nextQuantityValue === null
 		) {
+			// Add a check if we should preserve the unit when the quantity is empty.
+			if ( shouldPreserveUnit ) {
+				onChangeProp?.( `0${ unit }`, changeProps );
+				return;
+			}
+
 			onChangeProp?.( '', changeProps );
 			return;
 		}

packages/components/src/unit-control/types.ts

@@ -114,4 +114,10 @@ export type UnitControlProps = Pick< InputControlProps, 'size' > &
 		 * @ignore
 		 */
 		__shouldNotWarnDeprecated36pxSize?: boolean;
+		/**
+		 * Whether to preserve the unit when the value is empty.
+		 *
+		 * @default false
+		 */
+		shouldPreserveUnit?: boolean;
 	};