Update global styles renderer for custom named css properties

WordPress · May 10, 2021 · e416d7e · e416d7e
1 parent 51cd73e
commit e416d7e
Showing 1 changed file with 45 additions and 17 deletions.
diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js
@@ -1,7 +1,14 @@
 /**
  * External dependencies
  */
-import { capitalize, get, kebabCase, reduce, startsWith } from 'lodash';
+ import {
+	capitalize,
+	get,
+	kebabCase,
+	reduce,
+	startsWith,
+	isString,
+} from 'lodash';
 
 /**
  * WordPress dependencies
@@ -107,22 +114,43 @@ function getBlockStylesDeclarations( blockStyles = {} ) {
 	return reduce(
 		STYLE_PROPERTY,
 		( declarations, { value, properties }, key ) => {
-			if ( !! properties ) {
-				properties.forEach( ( prop ) => {
-					if ( ! get( blockStyles, [ ...value, prop ], false ) ) {
-						// Do not create a declaration
-						// for sub-properties that don't have any value.
-						return;
-					}
-					const cssProperty = key.startsWith( '--' )
-						? key
-						: kebabCase( `${ key }${ capitalize( prop ) }` );
-					declarations.push(
-						`${ cssProperty }: ${ compileStyleValue(
-							get( blockStyles, [ ...value, prop ] )
-						) }`
-					);
-				} );
+			const styleValue = get( blockStyles, value );
+
+			if ( !! properties && ! isString( styleValue ) ) {
+				if ( Array.isArray( properties ) ) {
+					properties.forEach( ( prop ) => {
+						if ( ! get( styleValue, [ prop ], false ) ) {
+							// Do not create a declaration
+							// for sub-properties that don't have any value.
+							return;
+						}
+						const cssProperty = key.startsWith( '--' )
+							? key
+							: kebabCase( `${ key }${ capitalize( prop ) }` );
+						declarations.push(
+							`${ cssProperty }: ${ compileStyleValue(
+								get( styleValue, [ prop ] )
+							) }`
+						);
+					} );
+				} else {
+					Object.entries( properties ).forEach( ( entry ) => {
+						const [ name, prop ] = entry;
+
+						if ( ! get( styleValue, [ prop ], false ) ) {
+							// Do not create a declaration
+							// for sub-properties that don't have any value.
+							return;
+						}
+
+						const cssProperty = kebabCase( name );
+						declarations.push(
+							`${ cssProperty }: ${ compileStyleValue(
+								get( styleValue, [ prop ] )
+							) }`
+						);
+					} );
+				}
 			} else if ( get( blockStyles, value, false ) ) {
 				const cssProperty = key.startsWith( '--' )
 					? key