Block Validation: Allow unitless zero CSS lengths (#28501)

Props @aristath for suggesting to use `parseFloat` rather than an allowlist of CSS units.

packages/blocks/src/api/test/validation.js

@@ -8,6 +8,7 @@ import {
 	getTextWithCollapsedWhitespace,
 	getMeaningfulAttributePairs,
 	isEquivalentTextTokens,
+	getNormalizedLength,
 	getNormalizedStyleValue,
 	getStyleProperties,
 	isEqualAttributesOfName,
@@ -161,6 +162,32 @@ describe( 'validation', () => {
 		} );
 	} );
 
+	describe( 'getNormalizedLength()', () => {
+		it( 'omits unit from zero px length', () => {
+			const normalizedLength = getNormalizedLength( '0px' );
+
+			expect( normalizedLength ).toBe( '0' );
+		} );
+
+		it( 'retains unit in non-zero px length', () => {
+			const normalizedLength = getNormalizedLength( '50px' );
+
+			expect( normalizedLength ).toBe( '50px' );
+		} );
+
+		it( 'omits unit from zero percentage', () => {
+			const normalizedLength = getNormalizedLength( '0%' );
+
+			expect( normalizedLength ).toBe( '0' );
+		} );
+
+		it( 'retains unit in non-zero percentage', () => {
+			const normalizedLength = getNormalizedLength( '50%' );
+
+			expect( normalizedLength ).toBe( '50%' );
+		} );
+	} );
+
 	describe( 'getNormalizedStyleValue()', () => {
 		it( 'omits whitespace and quotes from url value', () => {
 			const normalizedValue = getNormalizedStyleValue(
@@ -171,6 +198,22 @@ describe( 'validation', () => {
 				'url(https://wordpress.org/img.png)'
 			);
 		} );
+
+		it( 'omits length units from zero values', () => {
+			const normalizedValue = getNormalizedStyleValue(
+				'44% 0% 18em 0em'
+			);
+
+			expect( normalizedValue ).toBe( '44% 0 18em 0' );
+		} );
+
+		it( 'leaves zero values in calc() expressions alone', () => {
+			const normalizedValue = getNormalizedStyleValue(
+				'calc(0em + 5px)'
+			);
+
+			expect( normalizedValue ).toBe( 'calc(0em + 5px)' );
+		} );
 	} );
 
 	describe( 'getStyleProperties()', () => {

packages/blocks/src/api/validation/index.js

@@ -325,6 +325,18 @@ export function isEquivalentTextTokens(
 	return false;
 }
 
+/**
+ * Given a CSS length value, returns a normalized CSS length value for strict equality
+ * comparison.
+ *
+ * @param {string} value CSS length value.
+ *
+ * @return {string} Normalized CSS length value.
+ */
+export function getNormalizedLength( value ) {
+	return 0 === parseFloat( value ) ? '0' : value;
+}
+
 /**
  * Given a style value, returns a normalized style value for strict equality
  * comparison.
@@ -334,8 +346,12 @@ export function isEquivalentTextTokens(
  * @return {string} Normalized style value.
  */
 export function getNormalizedStyleValue( value ) {
+	const textPieces = getTextPiecesSplitOnWhitespace( value );
+	const normalizedPieces = textPieces.map( getNormalizedLength );
+	const result = normalizedPieces.join( ' ' );
+
 	return (
-		value
+		result
 			// Normalize URL type to omit whitespace or quotes
 			.replace( REGEXP_STYLE_URL_TYPE, 'url($1)' )
 	);