Update cover block min height control to use HeightControl

packages/block-library/src/cover/edit/inspector-controls.js

@@ -12,26 +12,23 @@ import {
 	TextareaControl,
 	ToggleControl,
 	SelectControl,
-	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import {
 	InspectorControls,
-	useSettings,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	HeightControl,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { COVER_MIN_HEIGHT, mediaPosition } from '../shared';
+import { mediaPosition } from '../shared';
 import { unlock } from '../../lock-unlock';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
@@ -42,46 +39,31 @@ function CoverHeightInput( {
 	unit = 'px',
 	value = '',
 } ) {
-	const instanceId = useInstanceId( UnitControl );
-	const inputId = `block-cover-height-input-${ instanceId }`;
-	const isPx = unit === 'px';
-
-	const [ availableUnits ] = useSettings( 'spacing.units' );
-	const units = useCustomUnits( {
-		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
-		defaultValues: { px: 430, '%': 20, em: 20, rem: 20, vw: 20, vh: 50 },
-	} );
-
 	const handleOnChange = ( unprocessedValue ) => {
-		const inputValue =
-			unprocessedValue !== ''
-				? parseFloat( unprocessedValue )
-				: undefined;
+		const parsedQuantityAndUnit =
+			parseQuantityAndUnitFromRawValue( unprocessedValue );
+		const currentValue = parsedQuantityAndUnit[ 0 ];
 
-		if ( isNaN( inputValue ) && inputValue !== undefined ) {
+		if ( isNaN( currentValue ) && currentValue !== undefined ) {
 			return;
 		}
-		onChange( inputValue );
+
+		const currentUnit = parsedQuantityAndUnit[ 1 ];
+
+		onUnitChange( currentUnit );
+		onChange( currentValue );
 	};
 
 	const computedValue = useMemo( () => {
 		const [ parsedQuantity ] = parseQuantityAndUnitFromRawValue( value );
 		return [ parsedQuantity, unit ].join( '' );
 	}, [ unit, value ] );
 
-	const min = isPx ? COVER_MIN_HEIGHT : 0;
-
 	return (
-		<UnitControl
-			label={ __( 'Minimum height of cover' ) }
-			id={ inputId }
-			isResetValueOnUnitChange
-			min={ min }
-			onChange={ handleOnChange }
-			onUnitChange={ onUnitChange }
-			__unstableInputWidth="80px"
-			units={ units }
+		<HeightControl
+			label={ __( 'Minimum height' ) }
 			value={ computedValue }
+			onChange={ handleOnChange }
 		/>
 	);
 }

packages/block-library/src/cover/test/edit.js

@@ -371,13 +371,13 @@ describe( 'Cover block', () => {
 						name: 'Styles',
 					} )
 				);
-				await userEvent.clear(
-					screen.getByLabelText( 'Minimum height of cover' )
-				);
-				await userEvent.type(
-					screen.getByLabelText( 'Minimum height of cover' ),
-					'300'
-				);
+
+				const heightControl = screen.getByRole( 'spinbutton', {
+					name: 'Minimum height',
+				} );
+
+				await userEvent.clear( heightControl );
+				await userEvent.type( heightControl, '300' );
 
 				expect( screen.getByLabelText( 'Block: Cover' ) ).toHaveStyle(
 					'min-height: 300px;'

test/e2e/specs/editor/blocks/cover.spec.js

@@ -156,9 +156,9 @@ test.describe( 'Cover', () => {
 			.getByRole( 'tab', { name: 'Styles' } )
 			.click();
 
-		// Ensure there the default value for the minimum height of cover is undefined.
+		// Ensure there the default value for the Minimum height is undefined.
 		const defaultHeightValue = await coverBlockEditorSettings
-			.getByLabel( 'Minimum height of cover' )
+			.getByRole( 'spinbutton', { name: 'Minimum height' } )
 			.inputValue();
 		expect( defaultHeightValue ).toBeFalsy();