From 790d98d5a9adcee1721b0e3cc7461ba3aea97663 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 29 Nov 2023 16:13:59 +1300 Subject: [PATCH 1/9] Keep custom CSS when changing style variations --- .../components/global-styles/style-variations-container.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 6cc8b53b800d3a..607323119d303e 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -44,7 +44,10 @@ function Variation( { variation } ) { setUserConfig( () => { return { settings: variation.settings, - styles: variation.styles, + styles: { + ...variation.styles, + ...( user?.styles?.css ? { css: user.styles.css } : {} ), + }, }; } ); }; From 5b1496272eb6b7f886da5da3cb2d69bd91d52b90 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 29 Nov 2023 16:39:50 +1300 Subject: [PATCH 2/9] Include block custom CSS --- .../global-styles/style-variations-container.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 607323119d303e..3286153007f78c 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -41,12 +41,27 @@ function Variation( { variation } ) { }, [ variation, base ] ); const selectVariation = () => { + const blockCSS = {}; + if ( user?.styles?.blocks ) { + Object.keys( user.styles.blocks ).forEach( ( blockName ) => { + if ( user.styles.blocks[ blockName ].css ) { + blockCSS[ blockName ] = { + css: user.styles.blocks[ blockName ].css, + }; + } + } ); + } + setUserConfig( () => { return { settings: variation.settings, styles: { ...variation.styles, ...( user?.styles?.css ? { css: user.styles.css } : {} ), + blocks: { + ...variation.styles.blocks, + ...blockCSS, + }, }, }; } ); From ffd7b605cf149399ba8baa5c4774bcb18eae912c Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 29 Nov 2023 17:20:44 +1300 Subject: [PATCH 3/9] Fix merging of block styles --- .../global-styles/style-variations-container.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 3286153007f78c..bdbbff48b9a33e 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -41,11 +41,15 @@ function Variation( { variation } ) { }, [ variation, base ] ); const selectVariation = () => { - const blockCSS = {}; + const blockStyles = {}; if ( user?.styles?.blocks ) { Object.keys( user.styles.blocks ).forEach( ( blockName ) => { if ( user.styles.blocks[ blockName ].css ) { - blockCSS[ blockName ] = { + blockStyles[ blockName ] = { + ...( variation?.styles?.blocks && + variation.styles.blocks[ blockName ] + ? variation.styles.blocks[ blockName ] + : {} ), css: user.styles.blocks[ blockName ].css, }; } @@ -59,8 +63,7 @@ function Variation( { variation } ) { ...variation.styles, ...( user?.styles?.css ? { css: user.styles.css } : {} ), blocks: { - ...variation.styles.blocks, - ...blockCSS, + ...blockStyles, }, }, }; From 1355979a2a2d1d32bdd49cd772e2ba5e23bc4822 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 29 Nov 2023 17:26:51 +1300 Subject: [PATCH 4/9] another fix of block styles merging --- .../components/global-styles/style-variations-container.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index bdbbff48b9a33e..d4e3402201a367 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -41,14 +41,13 @@ function Variation( { variation } ) { }, [ variation, base ] ); const selectVariation = () => { - const blockStyles = {}; + const blockStyles = variation?.styles?.blocks || {}; if ( user?.styles?.blocks ) { Object.keys( user.styles.blocks ).forEach( ( blockName ) => { if ( user.styles.blocks[ blockName ].css ) { blockStyles[ blockName ] = { - ...( variation?.styles?.blocks && - variation.styles.blocks[ blockName ] - ? variation.styles.blocks[ blockName ] + ...( blockStyles[ blockName ] + ? blockStyles[ blockName ] : {} ), css: user.styles.blocks[ blockName ].css, }; From 253ef561f71aabbb509d69e1a3035b187e099508 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 30 Nov 2023 11:26:34 +1300 Subject: [PATCH 5/9] Add toggle to specify if css should be preserved or not --- .../style-variations-container.js | 60 ++++++++++++++----- .../sidebar-navigation-screen/style.scss | 4 ++ 2 files changed, 48 insertions(+), 16 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index d4e3402201a367..09bf6ca4c63b6f 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -10,7 +10,10 @@ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; import { useMemo, useContext, useState } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; -import { __experimentalGrid as Grid } from '@wordpress/components'; +import { + __experimentalGrid as Grid, + ToggleControl, +} from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; @@ -25,7 +28,7 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); -function Variation( { variation } ) { +function Variation( { variation, preserveAdditionalCSS } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); const context = useMemo( () => { @@ -54,17 +57,19 @@ function Variation( { variation } ) { } } ); } - - setUserConfig( () => { - return { - settings: variation.settings, - styles: { + const styles = preserveAdditionalCSS + ? { ...variation.styles, ...( user?.styles?.css ? { css: user.styles.css } : {} ), blocks: { ...blockStyles, }, - }, + } + : variation.styles; + setUserConfig( () => { + return { + settings: variation.settings, + styles, }; } ); }; @@ -121,6 +126,9 @@ function Variation( { variation } ) { } export default function StyleVariationsContainer() { + const [ preserveAdditionalCSS, setPreserveAdditionalCSS ] = + useState( true ); + const variations = useSelect( ( select ) => { return select( coreStore @@ -143,13 +151,33 @@ export default function StyleVariationsContainer() { }, [ variations ] ); return ( - - { withEmptyVariation.map( ( variation, index ) => ( - - ) ) } - + <> + + { withEmptyVariation.map( ( variation, index ) => ( + + ) ) } + + + { + setPreserveAdditionalCSS( + preserveAdditionalCSS ? false : true + ); + } } + /> + ); } diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index b856837b7c6b6a..cd1ec9499128eb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -104,6 +104,10 @@ } } +.edit-site-global-styles-style-variations-preserve-css { + margin-top: $grid-unit-20; +} + .edit-site-sidebar-navigation-screen__footer { position: sticky; bottom: 0; From a61b82432da602895dbc393dee23bc35e44b95c7 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 30 Nov 2023 12:40:53 +1300 Subject: [PATCH 6/9] only check for user block css if preserve toggled on --- .../src/components/global-styles/style-variations-container.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 09bf6ca4c63b6f..c4fcd37fbc0105 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -45,7 +45,7 @@ function Variation( { variation, preserveAdditionalCSS } ) { const selectVariation = () => { const blockStyles = variation?.styles?.blocks || {}; - if ( user?.styles?.blocks ) { + if ( user?.styles?.blocks && preserveAdditionalCSS ) { Object.keys( user.styles.blocks ).forEach( ( blockName ) => { if ( user.styles.blocks[ blockName ].css ) { blockStyles[ blockName ] = { From 5e0be71b270ed8a2e32e91d5df91f214deabfda7 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 30 Nov 2023 15:03:54 +1300 Subject: [PATCH 7/9] Fix issue with block styles not being removed --- .../src/components/global-styles/style-variations-container.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index c4fcd37fbc0105..5dc9849be04ae4 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -44,7 +44,7 @@ function Variation( { variation, preserveAdditionalCSS } ) { }, [ variation, base ] ); const selectVariation = () => { - const blockStyles = variation?.styles?.blocks || {}; + const blockStyles = { ...variation?.styles?.blocks } || {}; if ( user?.styles?.blocks && preserveAdditionalCSS ) { Object.keys( user.styles.blocks ).forEach( ( blockName ) => { if ( user.styles.blocks[ blockName ].css ) { @@ -66,6 +66,7 @@ function Variation( { variation, preserveAdditionalCSS } ) { }, } : variation.styles; + setUserConfig( () => { return { settings: variation.settings, From fbdd11aa34acf064bd3440c9e221608dc0b97b71 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 30 Nov 2023 16:27:17 +1300 Subject: [PATCH 8/9] Move the setting of user styles into parent --- .../style-variations-container.js | 93 ++++++++++++------- 1 file changed, 62 insertions(+), 31 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index 5dc9849be04ae4..a379779fa34248 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -28,7 +28,7 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); -function Variation( { variation, preserveAdditionalCSS } ) { +function Variation( { variation } ) { const [ isFocused, setIsFocused ] = useState( false ); const { base, user, setUserConfig } = useContext( GlobalStylesContext ); const context = useMemo( () => { @@ -44,33 +44,10 @@ function Variation( { variation, preserveAdditionalCSS } ) { }, [ variation, base ] ); const selectVariation = () => { - const blockStyles = { ...variation?.styles?.blocks } || {}; - if ( user?.styles?.blocks && preserveAdditionalCSS ) { - Object.keys( user.styles.blocks ).forEach( ( blockName ) => { - if ( user.styles.blocks[ blockName ].css ) { - blockStyles[ blockName ] = { - ...( blockStyles[ blockName ] - ? blockStyles[ blockName ] - : {} ), - css: user.styles.blocks[ blockName ].css, - }; - } - } ); - } - const styles = preserveAdditionalCSS - ? { - ...variation.styles, - ...( user?.styles?.css ? { css: user.styles.css } : {} ), - blocks: { - ...blockStyles, - }, - } - : variation.styles; - setUserConfig( () => { return { settings: variation.settings, - styles, + styles: variation.styles, }; } ); }; @@ -127,6 +104,9 @@ function Variation( { variation, preserveAdditionalCSS } ) { } export default function StyleVariationsContainer() { + const { user } = useContext( GlobalStylesContext ); + const [ currentUserStyles ] = useState( { ...user } ); + const [ preserveAdditionalCSS, setPreserveAdditionalCSS ] = useState( true ); @@ -143,13 +123,64 @@ export default function StyleVariationsContainer() { settings: {}, styles: {}, }, - ...( variations ?? [] ).map( ( variation ) => ( { - ...variation, - settings: variation.settings ?? {}, - styles: variation.styles ?? {}, - } ) ), + ...( variations ?? [] ).map( ( variation ) => { + const blockStyles = { ...variation?.styles?.blocks } || {}; + if ( + currentUserStyles?.styles?.blocks && + preserveAdditionalCSS + ) { + Object.keys( currentUserStyles.styles.blocks ).forEach( + ( blockName ) => { + if ( + currentUserStyles.styles.blocks[ blockName ].css + ) { + blockStyles[ blockName ] = { + ...( blockStyles[ blockName ] + ? blockStyles[ blockName ] + : {} ), + css: `${ + blockStyles[ blockName ]?.css || '' + } ${ + currentUserStyles.styles.blocks[ + blockName + ].css + }`, + }; + } + } + ); + } + + const styles = preserveAdditionalCSS + ? { + ...variation.styles, + ...( currentUserStyles?.styles?.css || + variation?.styles?.css + ? { + css: `${ + variation.styles?.css || '' + } ${ currentUserStyles.styles.css }`, + } + : {} ), + blocks: { + ...blockStyles, + }, + } + : variation.styles; + + return { + ...variation, + settings: variation.settings ?? {}, + styles: styles ?? {}, + }; + } ), ]; - }, [ variations ] ); + }, [ + variations, + currentUserStyles.styles.blocks, + currentUserStyles.styles.css, + preserveAdditionalCSS, + ] ); return ( <> From 88861814ee2b3d5bed81f17f1fce7ad4520b9d77 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 30 Nov 2023 16:51:20 +1300 Subject: [PATCH 9/9] Make toggle work update preview canvas --- .../style-variations-container.js | 35 +++++++++++++------ 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js index a379779fa34248..8ab9c1725454b1 100644 --- a/packages/edit-site/src/components/global-styles/style-variations-container.js +++ b/packages/edit-site/src/components/global-styles/style-variations-container.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; -import { useMemo, useContext, useState } from '@wordpress/element'; +import { useMemo, useContext, useState, useEffect } from '@wordpress/element'; import { ENTER } from '@wordpress/keycodes'; import { __experimentalGrid as Grid, @@ -28,9 +28,9 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( blockEditorPrivateApis ); -function Variation( { variation } ) { +function Variation( { variation, setCurrentVariation, variationId } ) { const [ isFocused, setIsFocused ] = useState( false ); - const { base, user, setUserConfig } = useContext( GlobalStylesContext ); + const { base, user } = useContext( GlobalStylesContext ); const context = useMemo( () => { return { user: { @@ -44,12 +44,7 @@ function Variation( { variation } ) { }, [ variation, base ] ); const selectVariation = () => { - setUserConfig( () => { - return { - settings: variation.settings, - styles: variation.styles, - }; - } ); + setCurrentVariation( variationId ); }; const selectOnEnter = ( event ) => { @@ -104,8 +99,9 @@ function Variation( { variation } ) { } export default function StyleVariationsContainer() { - const { user } = useContext( GlobalStylesContext ); + const { user, setUserConfig } = useContext( GlobalStylesContext ); const [ currentUserStyles ] = useState( { ...user } ); + const [ currentVariation, setCurrentVariation ] = useState(); const [ preserveAdditionalCSS, setPreserveAdditionalCSS ] = useState( true ); @@ -182,6 +178,22 @@ export default function StyleVariationsContainer() { preserveAdditionalCSS, ] ); + useEffect( () => { + if ( currentVariation ) { + setUserConfig( () => { + return { + settings: withEmptyVariation[ currentVariation ]?.settings, + styles: withEmptyVariation[ currentVariation ]?.styles, + }; + } ); + } + }, [ + currentVariation, + preserveAdditionalCSS, + setUserConfig, + withEmptyVariation, + ] ); + return ( <> ) ) }