From bffdc641eb6fb946773d65e419004470d6b86489 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 20 Feb 2024 17:26:33 +0530 Subject: [PATCH 1/4] Fix issues with default palette and reset --- .../Customize/DesignColorsPanel/index.js | 96 ++++++++++--------- 1 file changed, 51 insertions(+), 45 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 8e500a593..8421f15d1 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -12,7 +12,6 @@ import { __ } from '@wordpress/i18n'; // eslint-disable-next-line import/no-extraneous-dependencies import { cloneDeep } from 'lodash'; -let defaultGlobalData = null; const DesignColorsPanel = forwardRef( ( { @@ -22,38 +21,9 @@ const DesignColorsPanel = forwardRef( ref ) => { const resetToDefaultColors = () => { - const slug = currentData.sitegen?.homepages?.active?.slug; - if ( ! slug ) { - return; - } - const defaultDataToReset = defaultGlobalData[ slug ]; - if ( ! defaultDataToReset ) { - return; - } - const updatedData = { - ...currentData, - sitegen: { - ...currentData.sitegen, - homepages: { - ...currentData.sitegen.homepages, - active: { - ...currentData.sitegen.homepages.active, - color: { - ...currentData.sitegen.homepages.active.color, - selectedPalette: null, - palette: [ - ...defaultDataToReset.color.palette, - ], - }, - }, - }, - }, - }; - - setSelectedColor( {} ); - setSelectedPalette( null ); + setSelectedPalette( 0 ); + setSelectedColor( colors[ 0 ] ); setShowCustomColors( false ); - setCurrentOnboardingData( updatedData ); }; useImperativeHandle( ref, () => ( { @@ -70,11 +40,22 @@ const DesignColorsPanel = forwardRef( } ); useEffect( () => { - if ( ! defaultGlobalData ) { - defaultGlobalData = cloneDeep( - currentData.sitegen.homepages.data - ); + const slug = currentData.sitegen?.homepages?.active?.slug; + + let defaultPalette = + currentData.sitegen.homepages.active.color.defaultPalette; + if ( defaultPalette ) { + return; } + defaultPalette = cloneDeep( + currentData.sitegen.homepages.active.color.palette + ); + currentData.sitegen.homepages.data[ slug ].color.defaultPalette = + defaultPalette; + currentData.sitegen.homepages.active.color.defaultPalette = + defaultPalette; + setCurrentOnboardingData( currentData ); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [ currentData ] ); @@ -87,15 +68,40 @@ const DesignColorsPanel = forwardRef( } ) ); - const palettes = []; - - colorPalettes.forEach( ( palette ) => { - palettes.push( { - primary: palette?.primary, - secondary: palette?.secondary || palette?.base, - tertiary: palette?.tertiary || palette?.primary, + const definePalettes = () => { + const palettes = []; + const defaultPalette = + currentData?.sitegen?.homepages?.active?.color + ?.defaultPalette || + currentData?.sitegen?.homepages?.active?.color?.palette; + + colorPalettes.forEach( ( palette ) => { + let isDefault = true; + [ 'primary', 'base', 'tertiary' ].forEach( ( key ) => { + const colorInPalette = palette[ key ]; + const colorInDefault = defaultPalette.find( + ( color ) => color.slug === key + )?.color; + if ( colorInPalette !== colorInDefault ) { + isDefault = false; + } + } ); + const paletteObj = { + primary: palette?.primary, + secondary: palette?.secondary || palette?.base, + tertiary: palette?.tertiary || palette?.primary, + isDefault, + }; + if ( isDefault ) { + palettes.unshift( paletteObj ); + } else { + palettes.push( paletteObj ); + } } ); - } ); + + return palettes; + }; + const palettes = definePalettes(); const [ colors ] = useState( palettes ); const [ customColors, setCustomColors ] = useState( null ); @@ -117,7 +123,7 @@ const DesignColorsPanel = forwardRef( setCustomColors( customColorsToSet || palettes[ 0 ] ); } - if ( ! selectedPalette ) { + if ( ! selectedPalette && selectedPalette !== 0 ) { const selectedPaletteToSet = activeColor.selectedPalette; setSelectedPalette( selectedPaletteToSet ); if ( selectedPaletteToSet === 'custom' ) { From 2de367e3edce533363aa2d8faea070e2a27e38e8 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 20 Feb 2024 18:15:26 +0530 Subject: [PATCH 2/4] Fix issues with default palette and reset --- .../Sidebar/components/Customize/DesignColorsPanel/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 8421f15d1..617a3b198 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -124,7 +124,7 @@ const DesignColorsPanel = forwardRef( } if ( ! selectedPalette && selectedPalette !== 0 ) { - const selectedPaletteToSet = activeColor.selectedPalette; + const selectedPaletteToSet = activeColor.selectedPalette || 0; setSelectedPalette( selectedPaletteToSet ); if ( selectedPaletteToSet === 'custom' ) { setShowCustomColors( true ); From 996ab519f8064182553739f3b401474dc505303c Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 21 Feb 2024 14:53:48 +0530 Subject: [PATCH 3/4] Update horizontal scrolling to next line --- .../components/Customize/DesignColorsPanel/stylesheet.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss index ac420271e..74a4d3131 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss @@ -20,7 +20,7 @@ display: flex; gap: 20px; padding: 10px 4px; - overflow-x: auto; + flex-wrap: wrap; max-width: 250px; } From bacf099449dd4445767df9fd9c1eb9fed2dd1f23 Mon Sep 17 00:00:00 2001 From: Vara Date: Wed, 21 Feb 2024 16:22:28 +0530 Subject: [PATCH 4/4] Update palette colors to use theme colors --- .../Customize/DesignColorsPanel/index.js | 39 ++++++++++++------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 617a3b198..f4d57b6e7 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -30,14 +30,19 @@ const DesignColorsPanel = forwardRef( resetToDefaultColors, } ) ); - const { currentData, customizeSidebarData } = useSelect( ( select ) => { - return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - customizeSidebarData: - select( nfdOnboardingStore ).getCustomizeSidebarData(), - }; - } ); + const { currentData, customizeSidebarData, themeColors } = useSelect( + ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + customizeSidebarData: + select( nfdOnboardingStore ).getCustomizeSidebarData(), + themeColors: + select( nfdOnboardingStore ).getPreviewSettings() + .settings.colors, + }; + } + ); useEffect( () => { const slug = currentData.sitegen?.homepages?.active?.slug; @@ -60,13 +65,19 @@ const DesignColorsPanel = forwardRef( }, [ currentData ] ); const colorPalettes = customizeSidebarData?.colorPalettes; + let palettePrimaryColors = themeColors?.map( ( colorObj ) => ( { + name: colorObj.name, + color: colorObj.color, + } ) ); - const palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map( - ( [ , color ] ) => ( { - name: __( 'Custom', 'wp-module-onboarding' ), - color, - } ) - ); + if ( ! palettePrimaryColors ) { + palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map( + ( [ , color ] ) => ( { + name: __( 'Custom', 'wp-module-onboarding' ), + color, + } ) + ); + } const definePalettes = () => { const palettes = [];