Use UnitControl instead of RangeControl for column width

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,85 @@
+/**
+ * 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,
+			},
+		},
+		isEligible( attributes ) {
+			return attributes.width && 'string' !== typeof attributes.width;
+		},
+		save( { attributes } ) {
+			attributes.width = attributes.width.toString() + '%';
+			const { verticalAlignment, width } = attributes;
+
+			const wrapperClasses = classnames( {
+				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+			} );
+
+			let style;
+			if ( width ) {
+				style = { flexBasis: width };
+			}
+
+			return (
+				<div className={ wrapperClasses } style={ style }>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+	},
+	{
+		attributes: {
+			verticalAlignment: {
+				type: 'string',
+			},
+			width: {
+				type: 'string',
+			},
+		},
+		isEligible( attributes ) {
+			return attributes.width && ! isNaN( attributes.width );
+		},
+		migrate( attributes ) {
+			return {
+				...attributes,
+				width: `${ attributes.width }%`,
+			};
+		},
+		save( { attributes } ) {
+			const { verticalAlignment, width } = attributes;
+
+			const wrapperClasses = classnames( {
+				[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
+			} );
+
+			let style;
+			if ( 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,7 @@ import {
 	InspectorControls,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
-import { PanelBody, RangeControl } from '@wordpress/components';
+import { PanelBody, TextControl, Notice } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -51,7 +51,63 @@ function ColumnEdit( {
 		} );
 	};
 
-	const hasWidth = Number.isFinite( width );
+	const hasWidth = ( isNaN( width ) && width ) || Number.isFinite( width );
+
+	const isWidthValid = () => {
+		const validUnits = [
+			'fr',
+			'rem',
+			'em',
+			'ex',
+			'%',
+			'px',
+			'cm',
+			'mm',
+			'in',
+			'pt',
+			'pc',
+			'ch',
+			'vh',
+			'vw',
+			'vmin',
+			'vmax',
+		];
+
+		// Return true for values that can be passed-on as-is.
+		if (
+			! width ||
+			'' === width ||
+			0 === width ||
+			'0' === width ||
+			'auto' === width ||
+			'inherit' === width ||
+			'initial' === width
+		) {
+			return true;
+		}
+
+		// Skip checking if calc() or val().
+		if (
+			( 0 <= width.indexOf( 'calc(' ) && 0 <= width.indexOf( ')' ) ) ||
+			( 0 <= width.indexOf( 'var(--' ) && 0 <= width.indexOf( ')' ) )
+		) {
+			return true;
+		}
+
+		// Get the numeric value.
+		const numericValue = parseFloat( width );
+
+		// Get the unit
+		const unit = width.replace( numericValue, '' );
+
+		// Do not allow unitless.
+		if ( ! unit ) {
+			return false;
+		}
+
+		// Check the validity of the numeric value and units.
+		return ! isNaN( numericValue ) && -1 !== validUnits.indexOf( unit );
+	};
 
 	return (
 		<>
@@ -63,21 +119,23 @@ function ColumnEdit( {
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Column settings' ) }>
-					<RangeControl
-						label={ __( 'Percentage width' ) }
+					<TextControl
+						label={ __( 'Width' ) }
 						value={ width || '' }
 						onChange={ ( nextWidth ) => {
 							setAttributes( { width: nextWidth } );
 						} }
-						min={ 0 }
-						max={ 100 }
-						step={ 0.1 }
-						required
-						allowReset
 						placeholder={
 							width === undefined ? __( 'Auto' ) : undefined
 						}
 					/>
+					{ ! isWidthValid() && (
+						<Notice status="warning" isDismissible={ false }>
+							{ __(
+								'Invalid CSS value. Values should include a number and a unit. Example: 30%, 100px, 20em etc.'
+							) }
+						</Notice>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			<InnerBlocks
@@ -90,7 +148,7 @@ function ColumnEdit( {
 				__experimentalTagName={ Block.div }
 				__experimentalPassedProps={ {
 					className: classes,
-					style: hasWidth ? { flexBasis: width + '%' } : undefined,
+					style: hasWidth ? { flexBasis: width } : undefined,
 				} }
 			/>
 		</>

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' ],
 	},