Fix/column width units (#26757)

* Fix issues with different units in column widths

* Columns with fixed width should keep width on recalculation

* Address review feedback

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

@@ -55,9 +55,10 @@ function ColumnEdit( {
 		} );
 	};
 
+	const widthWithUnit = Number.isFinite( width ) ? width + '%' : width;
 	const blockProps = useBlockProps( {
 		className: classes,
-		style: width ? { flexBasis: width } : undefined,
+		style: widthWithUnit ? { flexBasis: widthWithUnit } : undefined,
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		templateLock,

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

@@ -16,8 +16,10 @@ export default function save( { attributes } ) {
 	} );
 
 	let style;
+
 	if ( width ) {
-		style = { flexBasis: width };
+		// Numbers are handled for backward compatibility as they can be still provided with templates.
+		style = { flexBasis: Number.isFinite( width ) ? width + '%' : width };
 	}
 
 	return (

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

@@ -28,7 +28,7 @@ import {
  * Internal dependencies
  */
 import {
-	hasExplicitColumnWidths,
+	hasExplicitPercentColumnWidths,
 	getMappedColumnWidths,
 	getRedistributedColumnWidths,
 	toWidthPrecision,
@@ -145,7 +145,9 @@ const ColumnsEditContainerWrapper = withDispatch(
 			const { getBlocks } = registry.select( 'core/block-editor' );
 
 			let innerBlocks = getBlocks( clientId );
-			const hasExplicitWidths = hasExplicitColumnWidths( innerBlocks );
+			const hasExplicitWidths = hasExplicitPercentColumnWidths(
+				innerBlocks
+			);
 
 			// Redistribute available width for existing inner blocks.
 			const isAddingColumn = newColumns > previousColumns;

packages/block-library/src/columns/test/utils.js

@@ -7,7 +7,7 @@ import {
 	getTotalColumnsWidth,
 	getColumnWidths,
 	getRedistributedColumnWidths,
-	hasExplicitColumnWidths,
+	hasExplicitPercentColumnWidths,
 	getMappedColumnWidths,
 } from '../utils';
 
@@ -18,6 +18,14 @@ describe( 'toWidthPrecision', () => {
 		expect( value ).toBe( 50.11 );
 	} );
 
+	it( 'should convert a string value with unit to a number', () => {
+		expect( toWidthPrecision( '33.3%' ) ).toBe( 33.3 );
+	} );
+
+	it( 'should return undefined for an invalid string', () => {
+		expect( toWidthPrecision( 'blahblah' ) ).toBe( undefined );
+	} );
+
 	it( 'should return undefined for invalid number', () => {
 		expect( toWidthPrecision( null ) ).toBe( undefined );
 		expect( toWidthPrecision( undefined ) ).toBe( undefined );
@@ -156,19 +164,27 @@ describe( 'getRedistributedColumnWidths', () => {
 	} );
 } );
 
-describe( 'hasExplicitColumnWidths', () => {
+describe( 'hasExplicitPercentColumnWidths', () => {
 	it( 'returns false if no blocks have explicit width', () => {
 		const blocks = [ { attributes: {} } ];
 
-		const result = hasExplicitColumnWidths( blocks );
+		const result = hasExplicitPercentColumnWidths( blocks );
 
 		expect( result ).toBe( false );
 	} );
 
-	it( 'returns true if a block has explicit width', () => {
+	it( 'returns true if a block has explicit width defined as a number', () => {
 		const blocks = [ { attributes: { width: 100 } } ];
 
-		const result = hasExplicitColumnWidths( blocks );
+		const result = hasExplicitPercentColumnWidths( blocks );
+
+		expect( result ).toBe( true );
+	} );
+
+	it( 'returns true if a block has explicit percent width defined as a string', () => {
+		const blocks = [ { attributes: { width: '100%' } } ];
+
+		const result = hasExplicitPercentColumnWidths( blocks );
 
 		expect( result ).toBe( true );
 	} );
@@ -179,7 +195,7 @@ describe( 'hasExplicitColumnWidths', () => {
 			{ attributes: { width: undefined } },
 		];
 
-		const result = hasExplicitColumnWidths( blocks );
+		const result = hasExplicitPercentColumnWidths( blocks );
 
 		expect( result ).toBe( false );
 	} );
@@ -190,10 +206,32 @@ describe( 'hasExplicitColumnWidths', () => {
 			{ attributes: { width: 90 } },
 		];
 
-		const result = hasExplicitColumnWidths( blocks );
+		const result = hasExplicitPercentColumnWidths( blocks );
+
+		expect( result ).toBe( true );
+	} );
+
+	it( 'returns true if blocks have width defined as percent strings and numbers', () => {
+		const blocks = [
+			{ attributes: { width: '10%' } },
+			{ attributes: { width: 90 } },
+		];
+
+		const result = hasExplicitPercentColumnWidths( blocks );
 
 		expect( result ).toBe( true );
 	} );
+
+	it( 'returns false if blocks have width defined as mixed unit strings', () => {
+		const blocks = [
+			{ attributes: { width: '20%' } },
+			{ attributes: { width: '90px' } },
+		];
+
+		const result = hasExplicitPercentColumnWidths( blocks );
+
+		expect( result ).toBe( false );
+	} );
 } );
 
 describe( 'getMappedColumnWidths', () => {

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

@@ -11,9 +11,12 @@ import { sumBy, merge, mapValues } from 'lodash';
  *
  * @return {number} Value rounded to standard precision.
  */
-export const toWidthPrecision = ( value ) =>
-	Number.isFinite( value ) ? parseFloat( value.toFixed( 2 ) ) : undefined;
-
+export const toWidthPrecision = ( value ) => {
+	const unitlessValue = parseFloat( value );
+	return Number.isFinite( unitlessValue )
+		? parseFloat( unitlessValue.toFixed( 2 ) )
+		: undefined;
+};
 /**
  * Returns an effective width for a given block. An effective width is equal to
  * its attribute value if set, or a computed value assuming equal distribution.
@@ -96,10 +99,15 @@ export function getRedistributedColumnWidths(
  *
  * @return {boolean} Whether columns have explicit widths.
  */
-export function hasExplicitColumnWidths( blocks ) {
-	return blocks.every( ( block ) =>
-		Number.isFinite( block.attributes.width )
-	);
+export function hasExplicitPercentColumnWidths( blocks ) {
+	return blocks.every( ( block ) => {
+		const blockWidth = block.attributes.width;
+		return Number.isFinite(
+			blockWidth?.endsWith?.( '%' )
+				? parseFloat( blockWidth )
+				: blockWidth
+		);
+	} );
 }
 
 /**