Use NumberControl with stepper

WordPress · Feb 7, 2023 · f22aee7 · f22aee7
1 parent 3dcaab9
commit f22aee7
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 34 deletions.
diff --git a/packages/block-editor/src/hooks/text-columns.js b/packages/block-editor/src/hooks/text-columns.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { hasBlockSupport } from '@wordpress/blocks';
-import { RangeControl } from '@wordpress/components';
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -18,7 +18,7 @@ import { cleanEmptyObject } from './utils';
 export const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 
 const MIN_COLUMNS = 1;
-const MAX_COLUMNS = 5;
+const MAX_COLUMNS = 3;
 
 /**
  * Inspector control containing the text columns option.
@@ -46,12 +46,13 @@ export function TextColumnsEdit( props ) {
 	}
 
 	return (
-		<RangeControl
+		<NumberControl
 			label={ __( 'Text columns' ) }
 			max={ MAX_COLUMNS }
 			min={ MIN_COLUMNS }
 			onChange={ onChange }
 			size="__unstable-large"
+			spinControls="custom"
 			value={ style?.typography?.textColumns }
 			initialPosition={ 1 }
 		/>

diff --git a/packages/block-editor/src/hooks/typography.js b/packages/block-editor/src/hooks/typography.js
@@ -211,6 +211,19 @@ export function TypographyPanel( props ) {
 					<LetterSpacingEdit { ...props } />
 				</ToolsPanelItem>
 			) }
+			{ ! isTextColumnsDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasTextColumnsValue( props ) }
+					label={ __( 'Text columns' ) }
+					onDeselect={ () => resetTextColumns( props ) }
+					isShownByDefault={ defaultControls?.textColumns }
+					resetAllFilter={ createResetAllFilter( 'textColumns' ) }
+					panelId={ clientId }
+				>
+					<TextColumnsEdit { ...props } />
+				</ToolsPanelItem>
+			) }
 			{ ! isTextDecorationDisabled && (
 				<ToolsPanelItem
 					className="single-column"
@@ -237,18 +250,6 @@ export function TypographyPanel( props ) {
 					<TextTransformEdit { ...props } />
 				</ToolsPanelItem>
 			) }
-			{ ! isTextColumnsDisabled && (
-				<ToolsPanelItem
-					hasValue={ () => hasTextColumnsValue( props ) }
-					label={ __( 'Text columns' ) }
-					onDeselect={ () => resetTextColumns( props ) }
-					isShownByDefault={ defaultControls?.textColumns }
-					resetAllFilter={ createResetAllFilter( 'textColumns' ) }
-					panelId={ clientId }
-				>
-					<TextColumnsEdit { ...props } />
-				</ToolsPanelItem>
-			) }
 		</InspectorControls>
 	);
 }

diff --git a/packages/edit-site/src/components/global-styles/typography-panel.js b/packages/edit-site/src/components/global-styles/typography-panel.js
@@ -12,7 +12,7 @@ import {
 } from '@wordpress/block-editor';
 import {
 	FontSizePicker,
-	RangeControl,
+	__experimentalNumberControl as NumberControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -391,6 +391,26 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
+			{ hasTextColumnsControl && (
+				<ToolsPanelItem
+					className="single-column"
+					label={ __( 'Text columns' ) }
+					hasValue={ hasTextColumns }
+					onDeselect={ resetTextColumns }
+					isShownByDefault
+				>
+					<NumberControl
+						label={ __( 'Text columns' ) }
+						max={ MAX_COLUMNS }
+						min={ MIN_COLUMNS }
+						onChange={ setTextColumns }
+						size="__unstable-large"
+						spinControls="custom"
+						value={ textColumns }
+						initialPosition={ 1 }
+					/>
+				</ToolsPanelItem>
+			) }
 			{ hasTextTransformControl && (
 				<ToolsPanelItem
 					label={ __( 'Letter case' ) }
@@ -424,24 +444,6 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasTextColumnsControl && (
-				<ToolsPanelItem
-					label={ __( 'Text columns' ) }
-					hasValue={ hasTextColumns }
-					onDeselect={ resetTextColumns }
-					isShownByDefault
-				>
-					<RangeControl
-						label={ __( 'Text columns' ) }
-						max={ MAX_COLUMNS }
-						min={ MIN_COLUMNS }
-						onChange={ setTextColumns }
-						size="__unstable-large"
-						value={ textColumns }
-						initialPosition={ 1 }
-					/>
-				</ToolsPanelItem>
-			) }
 		</ToolsPanel>
 	);
 }