Clean empty objects

WordPress · Mar 24, 2020 · dfca58c · dfca58c
1 parent 583f1b2
commit dfca58c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/packages/block-editor/src/hooks/color.js b/packages/block-editor/src/hooks/color.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { pickBy, isEqual, isObject, identity, mapValues } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -28,6 +29,19 @@ import { getBlockDOMNode } from '../utils/dom';
 
 export const COLOR_SUPPORT_KEY = '__experimentalColor';
 
+export const cleanEmptyObject = ( object ) => {
+	if ( ! isObject( object ) ) {
+		return object;
+	}
+	const cleanedNestedObjects = pickBy(
+		mapValues( object, cleanEmptyObject ),
+		identity
+	);
+	return isEqual( cleanedNestedObjects, {} )
+		? undefined
+		: cleanedNestedObjects;
+};
+
 /**
  * Filters registered block settings, extending attributes to include
  * `backgroundColor` and `textColor` attribute.
@@ -186,7 +200,7 @@ export const withBlockControls = createHigherOrderComponent(
 				? colorObject.slug
 				: undefined;
 			props.setAttributes( {
-				style: newStyle,
+				style: cleanEmptyObject( newStyle ),
 				[ attributeName ]: newNamedColor,
 			} );
 		};

diff --git a/packages/block-editor/src/hooks/test/color.js b/packages/block-editor/src/hooks/test/color.js
@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from '../color';
+
+describe( 'cleanEmptyObject', () => {
+	it( 'should remove nested keys', () => {
+		expect( cleanEmptyObject( { color: { text: undefined } } ) ).toEqual(
+			undefined
+		);
+	} );
+} );
diff --git a/packages/block-editor/src/hooks/test/style.js b/packages/block-editor/src/hooks/test/style.js
@@ -14,6 +14,10 @@ describe( 'getCSSVariables', () => {
 		} );
 	} );
 
+	it( 'should omit CSS variables when the provided value is falsy', () => {
+		expect( getCSSVariables( { color: undefined } ) ).toEqual( {} );
+	} );
+
 	it( 'should flatten nested style config', () => {
 		expect(
 			getCSSVariables( {

diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
@@ -30,8 +30,10 @@ export const settings = {
 	example: {
 		attributes: {
 			style: {
-				textColor: '#000000',
-				backgroundColor: '#ffffff',
+				color: {
+					text: '#000000',
+					background: '#ffffff',
+				},
 			},
 		},
 		innerBlocks: [