Update: Set property to change one property accept all lodash paths. (#…

…25159) Co-authored-by: Andrés <[email protected]>
WordPress · Sep 9, 2020 · dd252e2 · dd252e2
1 parent a3a31d5
commit dd252e2
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 53 deletions.
diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js
@@ -22,7 +22,7 @@ import getGlobalStyles from './global-styles-renderer';
 const GlobalStylesContext = createContext( {
 	/* eslint-disable no-unused-vars */
 	getProperty: ( context, path ) => {},
-	setProperty: ( context, newValues ) => {},
+	setProperty: ( context, path, newValue ) => {},
 	globalContext: {},
 	/* eslint-enable no-unused-vars */
 } );
@@ -46,15 +46,14 @@ export default ( { children, baseStyles, contexts } ) => {
 			contexts,
 			getProperty: ( context, path ) =>
 				get( userStyles?.[ context ]?.styles, path ),
-			setProperty: ( context, newValues ) => {
+			setProperty: ( context, path, newValue ) => {
 				const newContent = { ...userStyles };
-				Object.keys( newValues ).forEach( ( key ) => {
-					set(
-						newContent,
-						`${ context }.styles.${ key }`,
-						newValues[ key ]
-					);
-				} );
+				let contextStyles = newContent?.[ context ]?.styles;
+				if ( ! contextStyles ) {
+					contextStyles = {};
+					set( newContent, [ context, 'styles' ], contextStyles );
+				}
+				set( contextStyles, path, newValue );
 				setContent( JSON.stringify( newContent ) );
 			},
 		} ),

diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js
@@ -9,9 +9,9 @@ import { __ } from '@wordpress/i18n';
  */
 import {
 	BACKGROUND_COLOR,
+	GRADIENT_COLOR,
 	LINK_COLOR,
 	TEXT_COLOR,
-	GRADIENT_COLOR,
 } from '../editor/utils';
 
 export default ( {
@@ -32,55 +32,29 @@ export default ( {
 
 	if ( supports.includes( TEXT_COLOR ) ) {
 		settings.push( {
-			colorValue: getProperty( name, 'color.text' ),
+			colorValue: getProperty( name, [ 'color', 'text' ] ),
 			onColorChange: ( value ) =>
-				setProperty( name, { 'color.text': value } ),
+				setProperty( name, [ 'color', 'text' ], value ),
 			label: __( 'Text color' ),
 		} );
 	}
 
-	/*
-	 * We want to send the entities API both colors
-	 * in a single request. This is to avod race conditions
-	 * that override the previous callback.
-	 */
-	let setBackground;
-	let backgroundSettings;
-	const backgroundPromise = new Promise(
-		( resolve ) => ( setBackground = ( value ) => resolve( value ) )
-	);
-	let setGradient;
-	let gradientSettings;
-	const gradientPromise = new Promise(
-		( resolve ) => ( setGradient = ( value ) => resolve( value ) )
-	);
-	Promise.all( [ backgroundPromise, gradientPromise ] ).then( ( values ) => {
-		setProperty( name, { ...values[ 0 ], ...values[ 1 ] } );
-	} );
+	let backgroundSettings = {};
 	if ( supports.includes( BACKGROUND_COLOR ) ) {
 		backgroundSettings = {
-			colorValue: getProperty( name, 'color.background' ),
+			colorValue: getProperty( name, [ 'color', 'background' ] ),
 			onColorChange: ( value ) =>
-				setBackground( { 'color.background': value } ),
+				setProperty( name, [ 'color', 'background' ], value ),
 		};
-	} else {
-		backgroundSettings = {};
-		// Resolve the background promise, as to fire the setProperty
-		// callback when the gradient promise is resolved.
-		setBackground( undefined );
 	}
+
+	let gradientSettings = {};
 	if ( supports.includes( GRADIENT_COLOR ) ) {
 		gradientSettings = {
-			gradientValue: getProperty( name, 'color.gradient' ),
+			gradientValue: getProperty( name, [ 'color', 'gradient' ] ),
 			onGradientChange: ( value ) =>
-				setGradient( { 'color.gradient': value } ),
-			disableCustomGradients: true,
+				setProperty( name, [ 'color', 'gradient' ], value ),
 		};
-	} else {
-		gradientSettings = {};
-		// Resolve the gradient promise, as to fire the setProperty
-		// callback when the background promise is resolved.
-		setGradient( undefined );
 	}
 
 	if (
@@ -96,9 +70,9 @@ export default ( {
 
 	if ( supports.includes( LINK_COLOR ) ) {
 		settings.push( {
-			colorValue: getProperty( name, 'color.link' ),
+			colorValue: getProperty( name, [ 'color', 'link' ] ),
 			onColorChange: ( value ) =>
-				setProperty( name, { 'color.link': value } ),
+				setProperty( name, [ 'color', 'link' ], value ),
 			label: __( 'Link color' ),
 		} );
 	}

diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js
@@ -30,20 +30,29 @@ export default ( {
 			{ supports.includes( FONT_SIZE ) && (
 				<FontSizePicker
 					value={ fromPx(
-						getProperty( name, 'typography.fontSize' )
+						getProperty( name, [ 'typography', 'fontSize' ] )
 					) }
 					onChange={ ( value ) =>
-						setProperty( name, {
-							'typography.fontSize': toPx( value ),
-						} )
+						setProperty(
+							name,
+							[ 'typography', 'fontSize' ],
+							toPx( value )
+						)
 					}
 				/>
 			) }
 			{ supports.includes( LINE_HEIGHT ) && (
 				<LineHeightControl
-					value={ getProperty( name, 'typography.lineHeight' ) }
+					value={ getProperty( name, [
+						'typography',
+						'lineHeight',
+					] ) }
 					onChange={ ( value ) =>
-						setProperty( name, { 'typography.lineHeight': value } )
+						setProperty(
+							name,
+							[ 'typography', 'lineHeight' ],
+							value
+						)
 					}
 				/>
 			) }