Allow more columns in manual grid layout and change toggle order (Wor…

…dPress#59116) Co-authored-by: tellthemachines <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: noisysocks <[email protected]>
zenaul · Feb 19, 2024 · 99bbbe5 · 99bbbe5
1 parent f1b41e5
commit 99bbbe5
Showing 1 changed file with 53 additions and 17 deletions.
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
@@ -8,6 +8,7 @@ import {
 	Flex,
 	FlexItem,
 	RangeControl,
+	__experimentalNumberControl as NumberControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
@@ -200,6 +201,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 						value={ value }
 						units={ units }
 						min={ 0 }
+						label={ __( 'Minimum column width' ) }
+						hideLabelFromVision
 					/>
 				</FlexItem>
 				<FlexItem isBlock>
@@ -209,6 +212,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 						min={ 0 }
 						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
 						withInputField={ false }
+						label={ __( 'Minimum column width' ) }
+						hideLabelFromVision
 					/>
 				</FlexItem>
 			</Flex>
@@ -221,18 +226,49 @@ function GridLayoutColumnsControl( { layout, onChange } ) {
 	const { columnCount = 3 } = layout;
 
 	return (
-		<RangeControl
-			label={ __( 'Columns' ) }
-			value={ columnCount }
-			onChange={ ( value ) =>
-				onChange( {
-					...layout,
-					columnCount: value,
-				} )
-			}
-			min={ 1 }
-			max={ 6 }
-		/>
+		<fieldset>
+			<BaseControl.VisualLabel as="legend">
+				{ __( 'Columns' ) }
+			</BaseControl.VisualLabel>
+			<Flex gap={ 4 }>
+				<FlexItem isBlock>
+					<NumberControl
+						size={ '__unstable-large' }
+						onChange={ ( value ) => {
+							/**
+							 * If the input is cleared, avoid switching
+							 * back to "Auto" by setting a value of "1".
+							 */
+							const validValue = value !== '' ? value : '1';
+							onChange( {
+								...layout,
+								columnCount: validValue,
+							} );
+						} }
+						value={ columnCount }
+						min={ 1 }
+						label={ __( 'Columns' ) }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+				<FlexItem isBlock>
+					<RangeControl
+						value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
+						onChange={ ( value ) =>
+							onChange( {
+								...layout,
+								columnCount: value,
+							} )
+						}
+						min={ 1 }
+						max={ 16 }
+						withInputField={ false }
+						label={ __( 'Columns' ) }
+						hideLabelFromVision
+					/>
+				</FlexItem>
+			</Flex>
+		</fieldset>
 	);
 }
 
@@ -275,16 +311,16 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 			onChange={ onChangeType }
 			isBlock={ true }
 		>
-			<ToggleGroupControlOption
-				key={ 'manual' }
-				value="manual"
-				label={ __( 'Manual' ) }
-			/>
 			<ToggleGroupControlOption
 				key={ 'auto' }
 				value="auto"
 				label={ __( 'Auto' ) }
 			/>
+			<ToggleGroupControlOption
+				key={ 'manual' }
+				value="manual"
+				label={ __( 'Manual' ) }
+			/>
 		</ToggleGroupControl>
 	);
 }