Revert "Use UnitControl instead of RangeControl for column width (#…

…24711)"

This reverts commit 1cad0e1.

packages/block-editor/src/components/responsive-block-control/test/__snapshots__/index.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><div class=\\"components-flex components-select-control e1cr7zh10 css-xnuudl-Flex-Root eboqfv50\\"><div class=\\"components-flex__item e1cr7zh14 css-d373l0-Item-LabelWrapper eboqfv51\\"><label for=\\"inspector-select-control-0\\" class=\\"components-input-control__label css-za86g6-Text-BaseLabel e1cr7zh13\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label></div><div class=\\"components-input-control__container css-nj8rmx-Container e1cr7zh11\\"><select class=\\"components-select-control__input css-hwcz8s-Select e12x0a390\\" id=\\"inspector-select-control-0\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select><span class=\\"components-input-control__suffix css-1lym30p-Suffix e1cr7zh17\\"><div class=\\"css-s55r1c-DownArrowWrapper e12x0a391\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z\\"></path></svg></div></span><div aria-hidden=\\"true\\" class=\\"components-input-control__backdrop css-1s1n1to-BackdropUI e1cr7zh15\\"></div></div></div></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;
+exports[`Basic rendering should render with required props 1`] = `"<fieldset class=\\"block-editor-responsive-block-control\\"><legend class=\\"block-editor-responsive-block-control__title\\">Padding</legend><div class=\\"block-editor-responsive-block-control__inner\\"><div class=\\"components-base-control components-toggle-control block-editor-responsive-block-control__toggle\\"><div class=\\"components-base-control__field\\"><span class=\\"components-form-toggle is-checked\\"><input class=\\"components-form-toggle__input\\" id=\\"inspector-toggle-control-0\\" type=\\"checkbox\\" aria-describedby=\\"inspector-toggle-control-0__help\\" checked=\\"\\"><span class=\\"components-form-toggle__track\\"></span><span class=\\"components-form-toggle__thumb\\"></span></span><label for=\\"inspector-toggle-control-0\\" class=\\"components-toggle-control__label\\">Use the same padding on all screensizes.</label></div><p id=\\"inspector-toggle-control-0__help\\" class=\\"components-base-control__help\\">Toggle between using the same value for all screen sizes or using a unique value per screen size.</p></div><div class=\\"block-editor-responsive-block-control__group\\"><div class=\\"components-base-control\\"><div class=\\"components-base-control__field\\"><div class=\\"components-flex components-select-control e1cr7zh10 css-lq1t5i-Flex-Root eboqfv50\\"><div class=\\"components-flex__item e1cr7zh14 css-d373l0-Item-LabelWrapper eboqfv51\\"><label for=\\"inspector-select-control-0\\" class=\\"components-input-control__label css-5z2l8i-Text-BaseLabel e1cr7zh13\\"><span aria-describedby=\\"rbc-desc-0\\">All</span><span class=\\"components-visually-hidden\\" id=\\"rbc-desc-0\\">Controls the padding property for All viewports.</span></label></div><div class=\\"components-input-control__container css-15pg4e7-Container e1cr7zh11\\"><select class=\\"components-select-control__input css-hwcz8s-Select e12x0a390\\" id=\\"inspector-select-control-0\\"><option value=\\"\\">Please select</option><option value=\\"small\\">Small</option><option value=\\"medium\\">Medium</option><option value=\\"large\\">Large</option></select><span class=\\"components-input-control__suffix css-1lym30p-Suffix e1cr7zh17\\"><div class=\\"css-s55r1c-DownArrowWrapper e12x0a391\\"><svg viewBox=\\"0 0 24 24\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"18\\" height=\\"18\\" role=\\"img\\" aria-hidden=\\"true\\" focusable=\\"false\\"><path d=\\"M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z\\"></path></svg></div></span><div aria-hidden=\\"true\\" class=\\"components-input-control__backdrop css-1b1hwt4-BackdropUI e1cr7zh15\\"></div></div></div></div></div><p id=\\"all\\">All is used here for testing purposes to ensure we have access to details about the device.</p></div></div></fieldset>"`;

packages/block-library/src/column/block.json

@@ -10,7 +10,9 @@
 			"type": "string"
 		},
 		"width": {
-			"type": "string"
+			"type": "number",
+			"min": 0,
+			"max": 100
 		}
 	},
 	"supports": {

packages/block-library/src/column/edit.js

@@ -14,10 +14,7 @@ import {
 	useBlockProps,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 } from '@wordpress/block-editor';
-import {
-	PanelBody,
-	__experimentalUnitControl as UnitControl,
-} from '@wordpress/components';
+import { PanelBody, RangeControl } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -55,9 +52,10 @@ function ColumnEdit( {
 		} );
 	};
 
+	const hasWidth = Number.isFinite( width );
 	const blockProps = useBlockProps( {
 		className: classes,
-		style: width ? { flexBasis: width } : undefined,
+		style: hasWidth ? { flexBasis: width + '%' } : undefined,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		templateLock: false,
@@ -76,23 +74,20 @@ function ColumnEdit( {
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Column settings' ) }>
-					<UnitControl
-						label={ __( 'Width' ) }
-						labelPosition="edge"
-						__unstableInputWidth="80px"
+					<RangeControl
+						label={ __( 'Percentage width' ) }
 						value={ width || '' }
 						onChange={ ( nextWidth ) => {
-							nextWidth =
-								0 > parseFloat( nextWidth ) ? '0' : nextWidth;
 							setAttributes( { width: nextWidth } );
 						} }
-						units={ [
-							{ value: '%', label: '%', default: '' },
-							{ value: 'px', label: 'px', default: '' },
-							{ value: 'em', label: 'em', default: '' },
-							{ value: 'rem', label: 'rem', default: '' },
-							{ value: 'vw', label: 'vw', default: '' },
-						] }
+						min={ 0 }
+						max={ 100 }
+						step={ 0.1 }
+						required
+						allowReset
+						placeholder={
+							width === undefined ? __( 'Auto' ) : undefined
+						}
 					/>
 				</PanelBody>
 			</InspectorControls>

packages/block-library/src/column/index.js

@@ -7,7 +7,6 @@ import { column as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -22,5 +21,4 @@ export const settings = {
 	description: __( 'A single column within a columns block.' ),
 	edit,
 	save,
-	deprecated,
 };

packages/block-library/src/column/save.js

@@ -16,8 +16,8 @@ export default function save( { attributes } ) {
 	} );
 
 	let style;
-	if ( width ) {
-		style = { flexBasis: width };
+	if ( Number.isFinite( width ) ) {
+		style = { flexBasis: width + '%' };
 	}
 
 	return (

packages/block-library/src/columns/variations.js

@@ -53,8 +53,8 @@ const variations = [
 			</SVG>
 		),
 		innerBlocks: [
-			[ 'core/column', { width: '33.33%' } ],
-			[ 'core/column', { width: '66.66%' } ],
+			[ 'core/column', { width: 33.33 } ],
+			[ 'core/column', { width: 66.66 } ],
 		],
 		scope: [ 'block' ],
 	},
@@ -77,8 +77,8 @@ const variations = [
 			</SVG>
 		),
 		innerBlocks: [
-			[ 'core/column', { width: '66.66%' } ],
-			[ 'core/column', { width: '33.33%' } ],
+			[ 'core/column', { width: 66.66 } ],
+			[ 'core/column', { width: 33.33 } ],
 		],
 		scope: [ 'block' ],
 	},
@@ -124,9 +124,9 @@ const variations = [
 			</SVG>
 		),
 		innerBlocks: [
-			[ 'core/column', { width: '25%' } ],
-			[ 'core/column', { width: '50%' } ],
-			[ 'core/column', { width: '25%' } ],
+			[ 'core/column', { width: 25 } ],
+			[ 'core/column', { width: 50 } ],
+			[ 'core/column', { width: 25 } ],
 		],
 		scope: [ 'block' ],
 	},

packages/components/src/input-control/input-base.js

@@ -56,7 +56,6 @@ export function InputBase(
 				<Label
 					className="components-input-control__label"
 					hideLabelFromVision={ hideLabelFromVision }
-					labelPosition={ labelPosition }
 					htmlFor={ id }
 					size={ size }
 				>

packages/components/src/input-control/styles/input-control-styles.js

@@ -205,26 +205,17 @@ const labelTruncation = () => {
 	`;
 };
 
-const labelPadding = ( { labelPosition } ) => {
-	let paddingBottom = 4;
-
-	if ( labelPosition === 'edge' || labelPosition === 'side' ) {
-		paddingBottom = 0;
-	}
-
-	return css( { paddingTop: 0, paddingBottom } );
-};
-
 const BaseLabel = styled( Text )`
 	&&& {
 		box-sizing: border-box;
 		color: currentColor;
 		display: block;
 		margin: 0;
 		max-width: 100%;
+		padding-bottom: 4px;
+		padding-top: 0;
 		z-index: 1;
 
-		${ labelPadding }
 		${ labelTruncation }
 	}
 `;