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

packages/edit-site/src/components/editor/global-styles-provider.js

@@ -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 ) );
 			},
 		} ),

packages/edit-site/src/components/sidebar/color-panel.js

@@ -7,12 +7,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	BACKGROUND_COLOR,
-	LINK_COLOR,
-	TEXT_COLOR,
-	GRADIENT_COLOR,
-} from '../editor/utils';
+import { LINK_COLOR } from '../editor/utils';
+
+const BACKGROUND_COLOR = 'background-color';
+const GRADIENT_COLOR = 'background';
+const TEXT_COLOR = 'color';
 
 export default ( {
 	context: { supports, name },
@@ -32,55 +31,32 @@ 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 gradientSettings, 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 );
 	}
 	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 +72,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' ),
 		} );
 	}

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
+						)
 					}
 				/>
 			) }