diff --git a/packages/edit-site/src/components/global-styles/test/utils.spec.js b/packages/edit-site/src/components/global-styles/test/utils.spec.js index 1498621df5d15..5855da1b2154c 100644 --- a/packages/edit-site/src/components/global-styles/test/utils.spec.js +++ b/packages/edit-site/src/components/global-styles/test/utils.spec.js @@ -20,7 +20,7 @@ const colorFormats = { // invalidColor1: 'invalid', // invalidColor2: 'hwb(0, 0%, 0%)', }; -const shadowFormats = { +const validShadowFormats = { xy: '{x} {y}', xyInset: '{x} {y} inset', insetXY: 'inset {x} {y}', @@ -64,10 +64,13 @@ const shadowFormats = { insetColorXYBlurSpread: 'inset {color} {x} {y} {blur} {spread}', multipleSpaces: '{x} {y} {blur} {spread}', +}; - // invalidShadow1: '{x}', +const invalidShadowFormats = { + invalidShadow1: '{x}', // invalidShadow2: '{x} {color} {y}', // invalidShadow3: '{x} {y} {color} {blur}', + // invalidShadow4: '{x} {y} {blur} {spread} {color} 5px', }; const combinedShadows = { @@ -84,19 +87,36 @@ const shadowUnits = { halfRem: '0.5rem', percent: '1%', halfPercent: '0.5%', + ex: '1ex', + inch: '1in', + cm: '1cm', + mm: '1mm', + pt: '1pt', + pc: '1pc', + vh: '1vh', + vw: '1vw', + vmin: '1vmin', + vmax: '1vmax', + ch: '1ch', + lh: '1lh', zero: '0', }; // Data helper functions -function getShadowString( format, parts ) { - return format.replace( /{([^}]+)}/g, ( match, key ) => parts[ key ] ); +function getShadowString( formatString, values ) { + return formatString.replace( /\{(\w+)\}/g, ( match, placeholder ) => { + if ( values.hasOwnProperty( placeholder ) ) { + return values[ placeholder ]; + } + return match; + } ); } function getCombinedShadowString( format, parts ) { - return format.replace( /{(\d+)}/g, ( match, index ) => parts[ index - 1 ] ); + return format.replace( /{(\d+)}/g, ( _, index ) => parts[ index - 1 ] ); } describe( 'getShadowParts', () => { - Object.entries( shadowFormats ).forEach( ( [ shadowKey, shadow ] ) => { + Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => { describe( `test shadow format: ${ shadowKey }`, () => { Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => { Object.entries( combinedShadows ).forEach( @@ -132,9 +152,16 @@ describe( 'getShadowParts', () => { } ); describe( 'shadowStringToObject', () => { - const defaultColor = '#000'; - - Object.entries( shadowFormats ).forEach( ( [ shadowKey, shadow ] ) => { + const defaultShadow = { + x: '0', + y: '0', + blur: '0', + spread: '0', + color: '#000', + inset: false, + }; + + Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => { describe( `test shadow format: ${ shadowKey }`, () => { Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => { const hasX = shadow.includes( '{x}' ); @@ -145,20 +172,20 @@ describe( 'shadowStringToObject', () => { const hasInset = shadow.includes( 'inset' ); const shadowString = getShadowString( shadow, { - ...( hasX ? { x: shadowUnits.px } : {} ), - ...( hasY ? { y: shadowUnits.px } : {} ), - ...( hasBlur ? { blur: shadowUnits.px } : {} ), - ...( hasSpread ? { spread: shadowUnits.px } : {} ), + x: shadowUnits.px, + y: shadowUnits.px, + blur: shadowUnits.px, + spread: shadowUnits.px, color, } ); const input = shadowString; const output = { - x: hasX ? shadowUnits.px : '0', - y: hasY ? shadowUnits.px : '0', - blur: hasBlur ? shadowUnits.px : '0', - spread: hasSpread ? shadowUnits.px : '0', - color: hasColor ? color : defaultColor, + x: hasX ? shadowUnits.px : defaultShadow.x, + y: hasY ? shadowUnits.px : defaultShadow.y, + blur: hasBlur ? shadowUnits.px : defaultShadow.blur, + spread: hasSpread ? shadowUnits.px : defaultShadow.spread, + color: hasColor ? color : defaultShadow.color, inset: hasInset, }; @@ -169,4 +196,57 @@ describe( 'shadowStringToObject', () => { } ); } ); } ); + + describe( `test invalid shadow formats`, () => { + const color = colorFormats.hex; + Object.entries( invalidShadowFormats ).forEach( + ( [ shadowKey, shadow ] ) => { + const shadowString = getShadowString( shadow, { + x: shadowUnits.px, + y: shadowUnits.px, + blur: shadowUnits.px, + spread: shadowUnits.px, + color, + } ); + + const input = shadowString; + const output = defaultShadow; + + it( `should return default shadow object for ${ shadowKey }`, () => { + const shadowObj = shadowStringToObject( input ); + expect( shadowObj ).toEqual( output ); + } ); + } + ); + } ); + + describe( `test shadow with all units`, () => { + const shadow = validShadowFormats.xyBlurSpreadColor; + const color = colorFormats.hex; + + Object.entries( shadowUnits ).forEach( ( [ unitKey, unit ] ) => { + const shadowString = getShadowString( shadow, { + x: unit, + y: unit, + blur: unit, + spread: unit, + color, + } ); + + const input = shadowString; + const output = { + x: unit, + y: unit, + blur: unit, + spread: unit, + color, + inset: false, + }; + + it( `should return shadow object for the unit: ${ unitKey }`, () => { + const shadowObj = shadowStringToObject( input ); + expect( shadowObj ).toEqual( output ); + } ); + } ); + } ); } ); diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index 9f0ba558654da..4910bb5e23c28 100644 --- a/packages/edit-site/src/components/global-styles/utils.js +++ b/packages/edit-site/src/components/global-styles/utils.js @@ -68,13 +68,13 @@ export function shadowStringToObject( shadowValue ) { return defaultShadow; } - // Step 2: Extract length values + // Step 2: Extract length values (x, y, blur, spread) from shadow string const lengthsRegex = /(?:^|\s)(-?\d*\.?\d+(?:px|%|in|cm|mm|em|rem|ex|pt|pc|vh|vw|vmin|vmax|ch|lh)?)(?=\s|$)(?![^(]*\))/g; const matches = shadowValue.match( lengthsRegex ) || []; const lengths = matches.slice( 0, 4 ); - // Step 3: Check if there are at least 2 length values + // Step 3: Check if there are at least 2 length values (x, y are required for string to be valid shadow) if ( lengths.length < 2 ) { return defaultShadow; } @@ -93,10 +93,10 @@ export function shadowStringToObject( shadowValue ) { return { x: x?.trim(), y: y?.trim(), - blur: blur?.trim() || '0', - spread: spread?.trim() || '0', + blur: blur?.trim() || defaultShadow.blur, + spread: spread?.trim() || defaultShadow.spread, inset, - color: colorString || `#000`, + color: colorString || defaultShadow.color, }; }