From 31b72718cee50e1baf1bc30800870b099a8c45da Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 6 Nov 2025 18:08:35 +1100 Subject: [PATCH 1/2] Enhance getAllValue function to handle complex CSS values and preserve unparseable strings. Added tests for clamp, min, max, and calc values, ensuring correct behavior with mixed and simple values. --- .../border-radius-control/test/utils.js | 90 +++++++++++++++++++ .../components/border-radius-control/utils.js | 11 ++- 2 files changed, 98 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/border-radius-control/test/utils.js b/packages/block-editor/src/components/border-radius-control/test/utils.js index 6365377e4df0ae..7ffd36b239d240 100644 --- a/packages/block-editor/src/components/border-radius-control/test/utils.js +++ b/packages/block-editor/src/components/border-radius-control/test/utils.js @@ -107,6 +107,96 @@ describe( 'getAllValue', () => { expect( getAllValue( undefined ) ).toBe( undefined ); } ); } ); + + describe( 'when provided complex CSS values (clamp, min, max, calc)', () => { + it( 'should preserve clamp values when all corners have the same clamp value', () => { + const clampValue = 'clamp(1rem, 2vw, 3rem)'; + const values = { + bottomLeft: clampValue, + bottomRight: clampValue, + topLeft: clampValue, + topRight: clampValue, + }; + expect( getAllValue( values ) ).toBe( clampValue ); + } ); + + it( 'should preserve min() values when all corners have the same min value', () => { + const minValue = 'min(10px, 5vw)'; + const values = { + bottomLeft: minValue, + bottomRight: minValue, + topLeft: minValue, + topRight: minValue, + }; + expect( getAllValue( values ) ).toBe( minValue ); + } ); + + it( 'should preserve max() values when all corners have the same max value', () => { + const maxValue = 'max(20px, 10vw)'; + const values = { + bottomLeft: maxValue, + bottomRight: maxValue, + topLeft: maxValue, + topRight: maxValue, + }; + expect( getAllValue( values ) ).toBe( maxValue ); + } ); + + it( 'should preserve calc() values when all corners have the same calc value', () => { + const calcValue = 'calc(100% - 20px)'; + const values = { + bottomLeft: calcValue, + bottomRight: calcValue, + topLeft: calcValue, + topRight: calcValue, + }; + expect( getAllValue( values ) ).toBe( calcValue ); + } ); + + it( 'should return undefined when complex CSS values are mixed', () => { + const values = { + bottomLeft: 'clamp(1rem, 2vw, 3rem)', + bottomRight: 'clamp(1rem, 2vw, 3rem)', + topLeft: 'min(10px, 5vw)', + topRight: 'clamp(1rem, 2vw, 3rem)', + }; + expect( getAllValue( values ) ).toBe( undefined ); + } ); + + it( 'should return undefined when complex CSS values are mixed with simple values', () => { + const values = { + bottomLeft: 'clamp(1rem, 2vw, 3rem)', + bottomRight: 'clamp(1rem, 2vw, 3rem)', + topLeft: '2px', + topRight: 'clamp(1rem, 2vw, 3rem)', + }; + expect( getAllValue( values ) ).toBe( undefined ); + } ); + + it( 'should preserve string values that cannot be parsed at all (no numeric prefix)', () => { + // Values with no numeric prefix cannot be parsed, so they should be preserved + const unparseableValue = 'apples'; + const values = { + bottomLeft: unparseableValue, + bottomRight: unparseableValue, + topLeft: unparseableValue, + topRight: unparseableValue, + }; + expect( getAllValue( values ) ).toBe( unparseableValue ); + } ); + + it( 'should parse numeric prefix from partially parseable values', () => { + // Values with numeric prefix get parsed, so "32apples" becomes "32" + const partiallyParseableValue = '32apples'; + const values = { + bottomLeft: partiallyParseableValue, + bottomRight: partiallyParseableValue, + topLeft: partiallyParseableValue, + topRight: partiallyParseableValue, + }; + expect( getAllValue( values ) ).toBe( '32' ); + } ); + } ); } ); describe( 'hasMixedValues', () => { diff --git a/packages/block-editor/src/components/border-radius-control/utils.js b/packages/block-editor/src/components/border-radius-control/utils.js index ad39ebdf0a3b20..9b6b56e2a00659 100644 --- a/packages/block-editor/src/components/border-radius-control/utils.js +++ b/packages/block-editor/src/components/border-radius-control/utils.js @@ -60,9 +60,14 @@ export function getAllValue( values = {} ) { return values; } - const parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) => - parseQuantityAndUnitFromRawValue( value ) - ); + const parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) => { + const newValue = parseQuantityAndUnitFromRawValue( value ); + if ( typeof value === 'string' && newValue[ 0 ] === undefined ) { + // Should we do some string testing here, like the font size picker's `isSimpleCssValue`? + return [ value, '' ]; + } + return newValue; + } ); const allValues = parsedQuantitiesAndUnits.map( ( value ) => value[ 0 ] ?? '' From e324343ee2b80ba57427b0ed2bdd7ffb72e70e5e Mon Sep 17 00:00:00 2001 From: Ramon Date: Thu, 6 Nov 2025 18:16:05 +1100 Subject: [PATCH 2/2] Remove comment --- .../block-editor/src/components/border-radius-control/utils.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/border-radius-control/utils.js b/packages/block-editor/src/components/border-radius-control/utils.js index 9b6b56e2a00659..3000e1298397ae 100644 --- a/packages/block-editor/src/components/border-radius-control/utils.js +++ b/packages/block-editor/src/components/border-radius-control/utils.js @@ -63,7 +63,6 @@ export function getAllValue( values = {} ) { const parsedQuantitiesAndUnits = Object.values( values ).map( ( value ) => { const newValue = parseQuantityAndUnitFromRawValue( value ); if ( typeof value === 'string' && newValue[ 0 ] === undefined ) { - // Should we do some string testing here, like the font size picker's `isSimpleCssValue`? return [ value, '' ]; } return newValue;