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..3000e1298397ae 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,13 @@ 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 ) { + return [ value, '' ]; + } + return newValue; + } ); const allValues = parsedQuantitiesAndUnits.map( ( value ) => value[ 0 ] ?? ''