Use UnitControl instead of RangeControl for column width (#24711)

Co-authored-by: Nik Tsekouras <ntsekouras@outlook.com>
Co-authored-by: Jon Q <hello@jonquach.com>

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-fpgvlo-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>"`;
+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-d6hrbz-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>"`;

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

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

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

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+const deprecated = [
+	{
+		attributes: {
+			verticalAlignment: {
+				type: 'string',
+			},
+			width: {
+				type: 'number',
+				min: 0,
+				max: 100,
+			},
+		},
+		migrate( attributes ) {
+			return {
+				...attributes,
+				width: `${ attributes.width }%`,
+			};
+		},
+		save( { attributes } ) {
+			const { verticalAlignment, width } = attributes;
+
+			const wrapperClasses = classnames( {
+				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+			} );
+
+			let style;
+			if ( Number.isFinite( width ) ) {
+				style = { flexBasis: width + '%' };
+			}
+
+			return (
+				<div className={ wrapperClasses } style={ style }>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+	},
+];
+
+export default deprecated;

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

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

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

@@ -7,6 +7,7 @@ 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';
@@ -21,4 +22,5 @@ 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 ( Number.isFinite( width ) ) {
-		style = { flexBasis: width + '%' };
+	if ( 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,6 +56,7 @@ 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,17 +205,26 @@ 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 }
 	}
 `;