Wrap controls in fieldset and add legend.

WordPress · Mar 22, 2023 · 7bb10f9 · 7bb10f9
1 parent b338b73
commit 7bb10f9
Showing 1 changed file with 31 additions and 26 deletions.
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 
 import {
+	BaseControl,
 	Flex,
 	FlexItem,
 	RangeControl,
@@ -135,31 +136,35 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 	};
 
 	return (
-		<Flex>
-			<FlexItem isBlock>
-				<UnitControl
-					label={ __( 'Minimum column width' ) }
-					size={ '__unstable-large' }
-					onChange={ ( newValue ) => {
-						onChange( {
-							...layout,
-							minimumColumnWidth: newValue,
-						} );
-					} }
-					onUnitChange={ handleUnitChange }
-					value={ value }
-					min={ 0 }
-				/>
-			</FlexItem>
-			<FlexItem isBlock>
-				<RangeControl
-					onChange={ handleSliderChange }
-					value={ quantity }
-					min={ 0 }
-					max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
-					withInputField={ false }
-				/>
-			</FlexItem>
-		</Flex>
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Minimum column width' ) }
+			</BaseControl.VisualLabel>
+			<Flex>
+				<FlexItem isBlock>
+					<UnitControl
+						size={ '__unstable-large' }
+						onChange={ ( newValue ) => {
+							onChange( {
+								...layout,
+								minimumColumnWidth: newValue,
+							} );
+						} }
+						onUnitChange={ handleUnitChange }
+						value={ value }
+						min={ 0 }
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<RangeControl
+						onChange={ handleSliderChange }
+						value={ quantity }
+						min={ 0 }
+						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
+						withInputField={ false }
+					/>
+				</FlexItem>
+			</Flex>
+		</fieldset>
 	);
 }