Revert "Update HeightControl component to label inputs" (#63839)

This reverts commit 47bde1a.

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

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

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { useInstanceId } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
 import {
 	BaseControl,
@@ -69,10 +68,6 @@ export default function HeightControl( {
 	value,
 } ) {
 	const customRangeValue = parseFloat( value );
-	const id = useInstanceId( HeightControl, 'block-editor-height-control' );
-	const labelId = `${ id }__label`;
-	const inputId = `${ id }__input`;
-	const rangeId = `${ id }__range`;
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
@@ -149,14 +144,13 @@ export default function HeightControl( {
 	};
 
 	return (
-		<div className="block-editor-height-control" id={ id }>
-			<BaseControl.VisualLabel as="label" for={ inputId } id={ labelId }>
+		<fieldset className="block-editor-height-control">
+			<BaseControl.VisualLabel as="legend">
 				{ label }
 			</BaseControl.VisualLabel>
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
-						id={ inputId }
 						value={ value }
 						units={ units }
 						onChange={ onChange }
@@ -170,9 +164,6 @@ export default function HeightControl( {
 				<FlexItem isBlock>
 					<Spacer marginX={ 2 } marginBottom={ 0 }>
 						<RangeControl
-							aria-controls={ inputId }
-							aria-labelledby={ labelId }
-							id={ rangeId }
 							value={ customRangeValue }
 							min={ 0 }
 							max={
@@ -192,6 +183,6 @@ export default function HeightControl( {
 					</Spacer>
 				</FlexItem>
 			</Flex>
-		</div>
+		</fieldset>
 	);
 }

packages/components/CHANGELOG.md

@@ -22,7 +22,6 @@
 -   `CheckboxControl`: Slightly reduced footprint. Make label treatment, focus styles, and spacing consistent with `ToggleControl` and `RadioControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)).
 -   `RadioControl`: Slightly reduced footprint. Make label treatment, focus styles, and spacing consistent with `ToggleControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)).
 -   `FormToggle`: Update spacing and appearance to adhere to 4px baseline, slightly reducing footprint. Make label treatment and focus styles consistent with `RadioControl` and `CheckboxControl`. ([#63490](https://github.com/WordPress/gutenberg/pull/63490)).
--   `RangeControl`: Allow external `id` prop ([#63761](https://github.com/WordPress/gutenberg/pull/63761)).
 
 ### Internal
 

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

@@ -41,15 +41,6 @@ import { space } from '../utils/space';
 
 const noop = () => {};
 
-function useUniqueId( idProp?: string ) {
-	const id = useInstanceId(
-		UnforwardedRangeControl,
-		'inspector-range-control'
-	);
-
-	return idProp || id;
-}
-
 function UnforwardedRangeControl(
 	props: WordPressComponentProps< RangeControlProps, 'input', false >,
 	forwardedRef: ForwardedRef< HTMLInputElement >
@@ -65,7 +56,6 @@ function UnforwardedRangeControl(
 		disabled = false,
 		help,
 		hideLabelFromVision = false,
-		id: idProp,
 		initialPosition,
 		isShiftStepEnabled = true,
 		label,
@@ -133,7 +123,10 @@ function UnforwardedRangeControl(
 		!! marks && 'is-marked'
 	);
 
-	const id = useUniqueId( idProp );
+	const id = useInstanceId(
+		UnforwardedRangeControl,
+		'inspector-range-control'
+	);
 	const describedBy = !! help ? `${ id }__help` : undefined;
 	const enableTooltip = hasTooltip !== false && Number.isFinite( value );