From 28fb8761160a3688f66640f1b929b2f344efee0f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 23 Jul 2024 12:43:41 +0200
Subject: [PATCH] Revert "Update HeightControl component to label inputs"
 (#63839)

This reverts commit 47bde1a7696ceae94557dde3fa57cde3cfc9d84e.

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
---
 .../src/components/height-control/index.js        | 15 +++------------
 packages/components/CHANGELOG.md                  |  1 -
 packages/components/src/range-control/index.tsx   | 15 ++++-----------
 3 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/packages/block-editor/src/components/height-control/index.js b/packages/block-editor/src/components/height-control/index.js
index 4f5e17381728b..71753a67beb02 100644
--- a/packages/block-editor/src/components/height-control/index.js
+++ b/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>
 	);
 }
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index d7585353acb45..f6ac03e45d813 100644
--- a/packages/components/CHANGELOG.md
+++ b/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
 
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index d12c1ca913612..b5fff9f56b80d 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/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 );