From aa897749b4a65e40cc087f6469ac79db67b45bce Mon Sep 17 00:00:00 2001 From: Jorge Date: Fri, 2 Oct 2020 16:27:39 +0100 Subject: [PATCH 1/5] Edit: Pass editor features dynamically --- .../editor/global-styles-provider.js | 50 ++++++++++++++----- .../editor/global-styles-renderer.js | 19 ++++--- packages/edit-site/src/store/actions.js | 14 ++++++ 3 files changed, 64 insertions(+), 19 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 746c46fbf0a172..43b78fac33162d 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { set, get } from 'lodash'; +import { set, get, mapValues } from 'lodash'; /** * WordPress dependencies @@ -15,16 +15,21 @@ import { } from '@wordpress/element'; import { useEntityProp } from '@wordpress/core-data'; import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '@wordpress/blocks'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies */ -import getGlobalStyles from './global-styles-renderer'; +import { + default as getGlobalStyles, + mergeTrees, +} from './global-styles-renderer'; const EMPTY_CONTENT = '{}'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ + mergedStyles: {}, getSetting: ( context, path ) => {}, setSetting: ( context, path, newValue ) => {}, getStyleProperty: ( context, propertyName ) => {}, @@ -48,17 +53,25 @@ export const useGlobalStylesReset = () => { ]; }; -export default ( { children, baseStyles, contexts } ) => { +export default function GlobalStylesProvider( { + children, + baseStyles, + contexts, +} ) { const [ content, setContent ] = useGlobalStylesEntityContent(); - const userStyles = useMemo( - () => ( content ? JSON.parse( content ) : {} ), - [ content ] - ); + const { userStyles, mergedStyles } = useMemo( () => { + const parsedContent = content ? JSON.parse( content ) : {}; + return { + userStyles: parsedContent, + mergedStyles: mergeTrees( baseStyles, parsedContent ), + }; + }, [ content ] ); const nextValue = useMemo( () => ( { contexts, + mergedStyles, getSetting: ( context, path ) => get( userStyles?.[ context ]?.settings, path ), setSetting: ( context, path, newValue ) => { @@ -110,16 +123,27 @@ export default ( { children, baseStyles, contexts } ) => { .appendChild( styleNode ); } - styleNode.innerText = getGlobalStyles( - contexts, - baseStyles, - userStyles - ); + styleNode.innerText = getGlobalStyles( contexts, mergedStyles ); }, [ contexts, baseStyles, content ] ); + const settings = useSelect( ( select ) => + select( 'core/edit-site' ).getSettings() + ); + const { updateSettings } = useDispatch( 'core/edit-site' ); + + useEffect( () => { + updateSettings( { + ...settings, + __experimentalFeatures: mapValues( + mergedStyles, + ( value ) => value.settings || {} + ), + } ); + }, [ mergedStyles ] ); + return ( { children } ); -}; +} diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 23de8d4876b8d7..a77a283bc3b86f 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -13,7 +13,7 @@ import { __EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY } from '@wordpress/bloc */ import { PRESET_CATEGORIES, LINK_COLOR_DECLARATION } from './utils'; -const mergeTrees = ( baseData, userData ) => { +export const mergeTrees = ( baseData, userData ) => { // Deep clone from base data. // // We don't use cloneDeep from lodash here @@ -21,31 +21,38 @@ const mergeTrees = ( baseData, userData ) => { // see https://github.com/lodash/lodash/issues/1984 const mergedTree = JSON.parse( JSON.stringify( baseData ) ); - const styleKeys = [ 'typography', 'color' ]; + const styleKeys = [ 'typography', 'color', 'custom', 'spacing' ]; Object.keys( userData ).forEach( ( context ) => { styleKeys.forEach( ( key ) => { - // Normalize object shape: make sure the key exists under styles. + // Normalize object shape: make sure the key exists under styles and settings. if ( ! mergedTree[ context ].styles?.[ key ] ) { mergedTree[ context ].styles[ key ] = {}; } + if ( ! mergedTree[ context ].settings?.[ key ] ) { + mergedTree[ context ].settings[ key ] = {}; + } + // Merge data: base + user. mergedTree[ context ].styles[ key ] = { ...mergedTree[ context ].styles[ key ], ...userData[ context ]?.styles?.[ key ], }; + + mergedTree[ context ].settings[ key ] = { + ...mergedTree[ context ].settings[ key ], + ...userData[ context ]?.settings?.[ key ], + }; } ); } ); return mergedTree; }; - -export default ( blockData, baseTree, userTree ) => { +export default ( blockData, tree ) => { const styles = []; // Can this be converted to a context, as the global context? // See comment in the server. styles.push( LINK_COLOR_DECLARATION ); - const tree = mergeTrees( baseTree, userTree ); /** * Transform given style tree into a set of style declarations. diff --git a/packages/edit-site/src/store/actions.js b/packages/edit-site/src/store/actions.js index 5e6f676c2997a3..2272278608fc3e 100644 --- a/packages/edit-site/src/store/actions.js +++ b/packages/edit-site/src/store/actions.js @@ -211,3 +211,17 @@ export function setIsInserterOpened( isOpen ) { isOpen, }; } + +/** + * Returns an action object used to update the settings. + * + * @param {Object} settings New settings. + * + * @return {Object} Action object. + */ +export function updateSettings( settings ) { + return { + type: 'UPDATE_SETTINGS', + settings, + }; +} From 68760dcba91e10a863bf2a5c2dcf62f51f7e5158 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Thu, 15 Oct 2020 21:06:12 +0100 Subject: [PATCH 2/5] Update packages/edit-site/src/components/editor/global-styles-provider.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: O André --- .../edit-site/src/components/editor/global-styles-provider.js | 1 - 1 file changed, 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 43b78fac33162d..88a9190c572f5b 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -29,7 +29,6 @@ const EMPTY_CONTENT = '{}'; const GlobalStylesContext = createContext( { /* eslint-disable no-unused-vars */ - mergedStyles: {}, getSetting: ( context, path ) => {}, setSetting: ( context, path, newValue ) => {}, getStyleProperty: ( context, propertyName ) => {}, From 8d1789a1afbf0edb2d79e926991824a73a7890e7 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Thu, 15 Oct 2020 21:06:21 +0100 Subject: [PATCH 3/5] Update packages/edit-site/src/components/editor/global-styles-provider.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: O André --- .../edit-site/src/components/editor/global-styles-provider.js | 1 - .../edit-site/src/components/editor/global-styles-renderer.js | 4 ++-- 2 files changed, 2 insertions(+), 3 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 88a9190c572f5b..0a1ef42b0026fd 100644 --- a/packages/edit-site/src/components/editor/global-styles-provider.js +++ b/packages/edit-site/src/components/editor/global-styles-provider.js @@ -70,7 +70,6 @@ export default function GlobalStylesProvider( { const nextValue = useMemo( () => ( { contexts, - mergedStyles, getSetting: ( context, path ) => get( userStyles?.[ context ]?.settings, path ), setSetting: ( context, path, newValue ) => { diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index a77a283bc3b86f..a6cc972e3810c2 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -21,9 +21,9 @@ export const mergeTrees = ( baseData, userData ) => { // see https://github.com/lodash/lodash/issues/1984 const mergedTree = JSON.parse( JSON.stringify( baseData ) ); - const styleKeys = [ 'typography', 'color', 'custom', 'spacing' ]; + const validMergeKeys = [ 'typography', 'color', 'custom', 'spacing' ]; Object.keys( userData ).forEach( ( context ) => { - styleKeys.forEach( ( key ) => { + validMergeKeys.forEach( ( key ) => { // Normalize object shape: make sure the key exists under styles and settings. if ( ! mergedTree[ context ].styles?.[ key ] ) { mergedTree[ context ].styles[ key ] = {}; From 6652d280f03cae43824148a3ad481a05b369e899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 16 Oct 2020 09:09:37 +0200 Subject: [PATCH 4/5] Separate style and setting keys --- .../editor/global-styles-renderer.js | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 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 index a6cc972e3810c2..96acd4d901c028 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -21,24 +21,26 @@ export const mergeTrees = ( baseData, userData ) => { // see https://github.com/lodash/lodash/issues/1984 const mergedTree = JSON.parse( JSON.stringify( baseData ) ); - const validMergeKeys = [ 'typography', 'color', 'custom', 'spacing' ]; + const styleKeys = [ 'typography', 'color' ]; + const settingKeys = [ 'typography', 'color', 'custom', 'spacing' ]; Object.keys( userData ).forEach( ( context ) => { - validMergeKeys.forEach( ( key ) => { - // Normalize object shape: make sure the key exists under styles and settings. + styleKeys.forEach( ( key ) => { + // Normalize object shape. if ( ! mergedTree[ context ].styles?.[ key ] ) { mergedTree[ context ].styles[ key ] = {}; } - - if ( ! mergedTree[ context ].settings?.[ key ] ) { - mergedTree[ context ].settings[ key ] = {}; - } - - // Merge data: base + user. + // Merge base + user data. mergedTree[ context ].styles[ key ] = { ...mergedTree[ context ].styles[ key ], ...userData[ context ]?.styles?.[ key ], }; - + } ); + settingKeys.forEach( ( key ) => { + // Normalize object shape. + if ( ! mergedTree[ context ].settings?.[ key ] ) { + mergedTree[ context ].settings[ key ] = {}; + } + // Merge base + user data. mergedTree[ context ].settings[ key ] = { ...mergedTree[ context ].settings[ key ], ...userData[ context ]?.settings?.[ key ], @@ -48,6 +50,7 @@ export const mergeTrees = ( baseData, userData ) => { return mergedTree; }; + export default ( blockData, tree ) => { const styles = []; // Can this be converted to a context, as the global context? From 701a6a23a3b8da655c1ed1d4073e8d577e4e22c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 16 Oct 2020 10:15:54 +0200 Subject: [PATCH 5/5] Protect against undefined data --- .../edit-site/src/components/editor/global-styles-renderer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/editor/global-styles-renderer.js b/packages/edit-site/src/components/editor/global-styles-renderer.js index 96acd4d901c028..d17c9459249923 100644 --- a/packages/edit-site/src/components/editor/global-styles-renderer.js +++ b/packages/edit-site/src/components/editor/global-styles-renderer.js @@ -19,7 +19,7 @@ export const mergeTrees = ( baseData, userData ) => { // We don't use cloneDeep from lodash here // because we know the data is JSON compatible, // see https://github.com/lodash/lodash/issues/1984 - const mergedTree = JSON.parse( JSON.stringify( baseData ) ); + const mergedTree = baseData ? JSON.parse( JSON.stringify( baseData ) ) : {}; const styleKeys = [ 'typography', 'color' ]; const settingKeys = [ 'typography', 'color', 'custom', 'spacing' ];