From c35c544f2c4186e7b3e2c050d717387d6248043a Mon Sep 17 00:00:00 2001 From: Jorge Date: Tue, 8 Sep 2020 16:33:49 +0100 Subject: [PATCH 1/5] Update: Set property to change on property at a time and accept all lodash paths. --- .../editor/global-styles-provider.js | 15 +++--- .../src/components/sidebar/color-panel.js | 54 ++++++------------- .../components/sidebar/typography-panel.js | 21 +++++--- 3 files changed, 37 insertions(+), 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 index b5a85074e0c085..c0e4930f4da2a5 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/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 ) ); }, } ), diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 4a5348f9e027e1..b92423e2889769 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/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' ), } ); } diff --git a/packages/edit-site/src/components/sidebar/typography-panel.js b/packages/edit-site/src/components/sidebar/typography-panel.js index b2375a87593eb2..dece15e0e94f22 100644 --- 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 ) && ( - setProperty( name, { - 'typography.fontSize': toPx( value ), - } ) + setProperty( + name, + [ 'typography', 'fontSize' ], + toPx( value ) + ) } /> ) } { supports.includes( LINE_HEIGHT ) && ( - setProperty( name, { 'typography.lineHeight': value } ) + setProperty( + name, + [ 'typography', 'lineHeight' ], + value + ) } /> ) } From 19cbd8fac077ad4918a949415972c6460aab0fea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 9 Sep 2020 10:12:00 +0200 Subject: [PATCH 2/5] Simplify --- .../edit-site/src/components/sidebar/color-panel.js | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index b92423e2889769..25c35f2d6544ac 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -37,26 +37,23 @@ export default ( { label: __( 'Text color' ), } ); } - - let gradientSettings, backgroundSettings; - + + let backgroundSettings = {}; if ( supports.includes( BACKGROUND_COLOR ) ) { backgroundSettings = { colorValue: getProperty( name, [ 'color', 'background' ] ), onColorChange: ( value ) => - setProperty( name, [ 'color', 'background' ], value ), + setProperty( name, [ 'color', 'background' ], value ), }; - } else { - backgroundSettings = {}; } + + let gradientSettings = {}; if ( supports.includes( GRADIENT_COLOR ) ) { gradientSettings = { gradientValue: getProperty( name, [ 'color', 'gradient' ] ), onGradientChange: ( value ) => setProperty( name, [ 'color', 'gradient' ], value ), }; - } else { - gradientSettings = {}; } if ( From 8955e0f76dce217dcc73fea49fd55396b597064a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 9 Sep 2020 10:12:55 +0200 Subject: [PATCH 3/5] prettify --- packages/edit-site/src/components/sidebar/color-panel.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 25c35f2d6544ac..957fbe816cc558 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -37,13 +37,13 @@ export default ( { label: __( 'Text color' ), } ); } - + let backgroundSettings = {}; if ( supports.includes( BACKGROUND_COLOR ) ) { backgroundSettings = { colorValue: getProperty( name, [ 'color', 'background' ] ), onColorChange: ( value ) => - setProperty( name, [ 'color', 'background' ], value ), + setProperty( name, [ 'color', 'background' ], value ), }; } From 913ab0ac5d253f7198b4b3e5d2d95624df896d1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 9 Sep 2020 10:13:11 +0200 Subject: [PATCH 4/5] Fix function signature --- .../edit-site/src/components/editor/global-styles-provider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-provider.js b/packages/edit-site/src/components/editor/global-styles-provider.js index c0e4930f4da2a5..4ba01ca35a24fe 100644 --- 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 */ } ); From 9d97c99e04841fde202b9be1ad723cbbdfa57aa4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 9 Sep 2020 10:14:13 +0200 Subject: [PATCH 5/5] Use from utils --- .../edit-site/src/components/sidebar/color-panel.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/sidebar/color-panel.js b/packages/edit-site/src/components/sidebar/color-panel.js index 957fbe816cc558..2bd1202f7bd8fc 100644 --- a/packages/edit-site/src/components/sidebar/color-panel.js +++ b/packages/edit-site/src/components/sidebar/color-panel.js @@ -7,11 +7,12 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import { LINK_COLOR } from '../editor/utils'; - -const BACKGROUND_COLOR = 'background-color'; -const GRADIENT_COLOR = 'background'; -const TEXT_COLOR = 'color'; +import { + BACKGROUND_COLOR, + GRADIENT_COLOR, + LINK_COLOR, + TEXT_COLOR, +} from '../editor/utils'; export default ( { context: { supports, name },