Min Height: Add height control component with slider

packages/block-editor/src/components/height-control/index.js

@@ -0,0 +1,94 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import {
+	BaseControl,
+	RangeControl,
+	Flex,
+	FlexItem,
+	__experimentalSpacer as Spacer,
+	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../use-setting';
+
+const CUSTOM_VALUE_SETTINGS = {
+	px: { max: 1000, steps: 1 },
+	'%': { max: 100, steps: 1 },
+	vw: { max: 100, steps: 1 },
+	vh: { max: 100, steps: 1 },
+	em: { max: 50, steps: 0.1 },
+	rm: { max: 50, steps: 0.1 },
+};
+
+export default function HeightControl( {
+	onChange,
+	label = __( 'Height' ),
+	value,
+} ) {
+	const customRangeValue = parseFloat( value );
+
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || [
+			'%',
+			'px',
+			'em',
+			'rem',
+			'vh',
+			'vw',
+		],
+	} );
+
+	const selectedUnit =
+		useMemo(
+			() => parseQuantityAndUnitFromRawValue( value ),
+			[ value ]
+		)[ 1 ] || units[ 0 ].value;
+
+	const handleSliderChange = ( next ) => {
+		onChange( [ next, selectedUnit ].join( '' ) );
+	};
+
+	return (
+		<fieldset className="component-height-control">
+			<BaseControl.VisualLabel as="legend">
+				{ label }
+			</BaseControl.VisualLabel>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						value={ value }
+						units={ units }
+						onChange={ onChange }
+						min={ 0 }
+						size={ '__unstable-large' }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<Spacer marginX={ 2 } marginBottom={ 0 }>
+						<RangeControl
+							value={ customRangeValue }
+							min={ 0 }
+							max={
+								CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.max ?? 10
+							}
+							step={
+								CUSTOM_VALUE_SETTINGS[ selectedUnit ]?.steps ??
+								0.1
+							}
+							withInputField={ false }
+							onChange={ handleSliderChange }
+						/>
+					</Spacer>
+				</FlexItem>
+			</Flex>
+		</fieldset>
+	);
+}

packages/block-editor/src/components/index.js

@@ -53,6 +53,7 @@ export { default as __experimentalColorGradientControl } from './colors-gradient
 export { default as __experimentalColorGradientSettingsDropdown } from './colors-gradients/dropdown';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export { default as __experimentalUseMultipleOriginColorsAndGradients } from './colors-gradients/use-multiple-origin-colors-and-gradients';
+export { default as __experimentalHeightControl } from './height-control';
 export {
 	default as __experimentalImageEditor,
 	ImageEditingProvider as __experimentalImageEditingProvider,

packages/block-editor/src/hooks/dimensions.js

@@ -182,7 +182,6 @@ export function DimensionsPanel( props ) {
 				) }
 				{ ! isMinHeightDisabled && (
 					<ToolsPanelItem
-						className="single-column"
 						hasValue={ () => hasMinHeightValue( props ) }
 						label={ __( 'Min. height' ) }
 						onDeselect={ () => resetMinHeight( props ) }

packages/block-editor/src/hooks/min-height.js

@@ -2,16 +2,13 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import {
-	__experimentalUseCustomUnits as useCustomUnits,
-	__experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useSetting from '../components/use-setting';
+import HeightControl from '../components/height-control';
 import { DIMENSIONS_SUPPORT_KEY } from './dimensions';
 import { cleanEmptyObject } from './utils';
 
@@ -81,17 +78,6 @@ export function MinHeightEdit( props ) {
 		setAttributes,
 	} = props;
 
-	const units = useCustomUnits( {
-		availableUnits: useSetting( 'dimensions.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-			'vh',
-			'vw',
-		],
-	} );
-
 	if ( useIsMinHeightDisabled( props ) ) {
 		return null;
 	}
@@ -109,13 +95,10 @@ export function MinHeightEdit( props ) {
 	};
 
 	return (
-		<UnitControl
+		<HeightControl
 			label={ __( 'Min. height' ) }
 			value={ style?.dimensions?.minHeight }
-			units={ units }
 			onChange={ onChange }
-			min={ 0 }
-			size={ '__unstable-large' }
 		/>
 	);
 }

packages/edit-site/src/components/global-styles/dimensions-panel.js

@@ -18,6 +18,7 @@ import {
 } from '@wordpress/components';
 import {
 	__experimentalUseCustomSides as useCustomSides,
+	__experimentalHeightControl as HeightControl,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
 } from '@wordpress/block-editor';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
@@ -556,19 +557,15 @@ export default function DimensionsPanel( { name } ) {
 			) }
 			{ showMinHeightControl && (
 				<ToolsPanelItem
-					className="single-column"
 					hasValue={ hasMinHeightValue }
 					label={ __( 'Min. height' ) }
 					onDeselect={ resetMinHeightValue }
 					isShownByDefault={ true }
 				>
-					<UnitControl
+					<HeightControl
 						label={ __( 'Min. height' ) }
 						value={ minHeightValue }
 						onChange={ setMinHeightValue }
-						units={ units }
-						min={ 0 }
-						size={ '__unstable-large' }
 					/>
 				</ToolsPanelItem>
 			) }