Revert "Try ToggleGroupControl for text columns"

This reverts commit 72703988d669f02af227a3db7f9cb053f4a25feb.

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

@@ -47,7 +47,6 @@ export { default as __experimentalDuotoneControl } from './duotone-control';
 export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
-export { default as __experimentalTextColumnsControl } from './text-columns-control';
 export { default as __experimentalTextDecorationControl } from './text-decoration-control';
 export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';

packages/block-editor/src/hooks/text-columns.js

@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { hasBlockSupport } from '@wordpress/blocks';
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import TextColumnsControl from '../components/text-columns-control';
 import useSetting from '../components/use-setting';
 import { cleanEmptyObject } from './utils';
 
@@ -16,6 +17,9 @@ import { cleanEmptyObject } from './utils';
  */
 export const TEXT_COLUMNS_SUPPORT_KEY = 'typography.textColumns';
 
+const MIN_COLUMNS = 1;
+const MAX_COLUMNS = 5;
+
 /**
  * Inspector control containing the text columns option.
  *
@@ -42,9 +46,14 @@ export function TextColumnsEdit( props ) {
 	}
 
 	return (
-		<TextColumnsControl
-			value={ style?.typography?.textColumns }
+		<RangeControl
+			label={ __( 'Text columns' ) }
+			max={ MAX_COLUMNS }
+			min={ MIN_COLUMNS }
 			onChange={ onChange }
+			size="__unstable-large"
+			value={ style?.typography?.textColumns }
+			initialPosition={ 1 }
 		/>
 	);
 }

packages/block-editor/src/hooks/typography.js

@@ -239,7 +239,6 @@ export function TypographyPanel( props ) {
 			) }
 			{ ! isTextColumnsDisabled && (
 				<ToolsPanelItem
-					className="single-column"
 					hasValue={ () => hasTextColumnsValue( props ) }
 					label={ __( 'Text columns' ) }
 					onDeselect={ () => resetTextColumns( props ) }

packages/edit-site/src/components/global-styles/typography-panel.js

@@ -8,11 +8,11 @@ import {
 	__experimentalLetterSpacingControl as LetterSpacingControl,
 	__experimentalTextTransformControl as TextTransformControl,
 	__experimentalTextDecorationControl as TextDecorationControl,
-	__experimentalTextColumnsControl as TextColumnsControl,
 	experiments as blockEditorExperiments,
 } from '@wordpress/block-editor';
 import {
 	FontSizePicker,
+	RangeControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -26,6 +26,9 @@ import { unlock } from '../../experiments';
 
 const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorExperiments );
 
+const MIN_COLUMNS = 1;
+const MAX_COLUMNS = 5;
+
 export function useHasTypographyPanel( name ) {
 	const hasFontFamily = useHasFontFamilyControl( name );
 	const hasLineHeight = useHasLineHeightControl( name );
@@ -388,20 +391,6 @@ export default function TypographyPanel( {
 					/>
 				</ToolsPanelItem>
 			) }
-			{ hasTextColumnsControl && (
-				<ToolsPanelItem
-					className="single-column"
-					label={ __( 'Text columns' ) }
-					hasValue={ hasTextColumns }
-					onDeselect={ resetTextColumns }
-					isShownByDefault
-				>
-					<TextColumnsControl
-						value={ textColumns }
-						onChange={ setTextColumns }
-					/>
-				</ToolsPanelItem>
-			) }
 			{ hasTextTransformControl && (
 				<ToolsPanelItem
 					label={ __( 'Letter case' ) }
@@ -435,6 +424,24 @@ 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>
 	);
 }