From 390755df21b8e0f251d183952e380c228598b3a9 Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 1 Feb 2024 16:04:19 +0530 Subject: [PATCH 1/7] Save custom colors in the current data --- .../ColorPaletteIcon/index.js | 16 +++- .../Customize/DesignColorsPanel/index.js | 93 +++++++++++++++---- 2 files changed, 87 insertions(+), 22 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js index b0ddd0d95..58bd5069a 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js @@ -8,13 +8,25 @@ const ColorPaletteIcon = ( { setSelectedColor, colors, setShowCustomColors = null, + customColors, } ) => { - const conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`; + let conicGradient; + if (colors) { + conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`; + } else if ( customColors ) { + conicGradient = `conic-gradient(${ customColors.primary } 90deg, ${ customColors.secondary } 90deg 150deg, ${ customColors.tertiary } 150deg 330deg, ${ customColors.primary } 330deg 360deg)`; + } + const baseClassName = 'nfd-onboarding-sidebar--customize__color-palette-icon'; const handleClick = () => { setSelectedPalette( idx ); - setSelectedColor( colors[ idx ] ); + if ( colors ) { + setSelectedColor( colors[ idx ] ); + } else if ( customColors ) { + setSelectedColor( customColors ); + } + if ( setShowCustomColors ) { setShowCustomColors( false ); } diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 1d16df169..a76df8bb5 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -81,6 +81,16 @@ const DesignColorsPanel = forwardRef( }, [ currentData ] ); const colorPalettes = customizeSidebarData?.colorPalettes; + + useEffect( () => { + if ( ! defaultGlobalData ) { + defaultGlobalData = cloneDeep( + currentData.sitegen.homepages.data + ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ colorPalettes ] ); + const palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map( ( [ , color ] ) => ( { name: __( 'Custom', 'wp-module-onboarding' ), @@ -99,6 +109,7 @@ const DesignColorsPanel = forwardRef( } ); const [ colors ] = useState( palettes ); + const [ customColors, setCustomColors ] = useState( null ); const [ selectedColor, setSelectedColor ] = useState( null ); const [ showCustomColors, setShowCustomColors ] = useState( false ); const [ isEditingCustomColors, setIsEditingCustomColors ] = @@ -108,18 +119,55 @@ const DesignColorsPanel = forwardRef( const [ selectedPalette, setSelectedPalette ] = useState( null ); const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' ); const [ showColorPicker, setShowColorPicker ] = useState( false ); - const customPaletteId = colors.length - 1; + + useEffect(() => { + const slug = currentData.sitegen?.homepages?.active?.slug; + if (slug && !customColors) { + const storedCustomColors = currentData.sitegen.homepages.data[ slug ].color['customColors']; + if (storedCustomColors) { + setCustomColors(storedCustomColors); + } else { + const defaultPalette = currentData.sitegen.homepages.data[ slug ].color.palette; + let defaultCustomColors = { + primary: "", + secondary: "", + tertiary: "", + } + for (const item of defaultPalette) { + switch (item.slug) { + case "primary": + defaultCustomColors.primary = item.color; + break; + case "secondary": + defaultCustomColors.secondary = item.color; + break; + case "tertiary": + defaultCustomColors.tertiary = item.color; + break; + default: + break; + } + } + + if (!defaultCustomColors.secondary) { + defaultCustomColors.secondary = defaultPalette.find(item => item.slug === "base").color; + } + + setCustomColors(defaultCustomColors); + } + } + }, [ currentData ]); const handleApplyCustomColors = () => { setSelectedCustomColors( true ); setIsEditingCustomColors( false ); - setSelectedPalette( customPaletteId ); - colors[ selectedPalette ] = selectedColor; + setSelectedPalette( 'custom' ); + setCustomColors(selectedColor); }; const handleEditCustomColors = () => { - setSelectedPalette( customPaletteId ); - setSelectedColor( colors[ customPaletteId ] ); + setSelectedPalette( 'custom' ); + setSelectedColor( customColors ); setIsEditingCustomColors( true ); }; @@ -168,20 +216,25 @@ const DesignColorsPanel = forwardRef( return; } - colorPalettes[ selectedPalette ].primary = selectedColor.primary; - if ( colorPalettes[ selectedPalette ].secondary ) { - colorPalettes[ selectedPalette ].secondary = + if ( selectedPalette === 'custom' ) { + currentData.sitegen.homepages.data[ slug ].color['customColors'] = selectedColor; + } + + const colorPaletteIndex = selectedPalette === 'custom' ? 0 : selectedPalette + colorPalettes[ colorPaletteIndex ].primary = selectedColor.primary; + if ( colorPalettes[ colorPaletteIndex ].secondary ) { + colorPalettes[ colorPaletteIndex ].secondary = selectedColor.secondary; } else { - colorPalettes[ selectedPalette ].base = selectedColor.secondary; + colorPalettes[ colorPaletteIndex ].base = selectedColor.secondary; } - colorPalettes[ selectedPalette ].tertiary = selectedColor.tertiary; + colorPalettes[ colorPaletteIndex ].tertiary = selectedColor.tertiary; currentData.sitegen.homepages.data[ slug ].color.palette = - convertColorSchema( colorPalettes[ selectedPalette ] ); + convertColorSchema( colorPalettes[ colorPaletteIndex ] ); currentData.sitegen.homepages.active.color.palette = - convertColorSchema( colorPalettes[ selectedPalette ] ); + convertColorSchema( colorPalettes[ colorPaletteIndex ] ); setCurrentOnboardingData( currentData ); }; @@ -215,12 +268,12 @@ const DesignColorsPanel = forwardRef(
@@ -280,8 +333,8 @@ const DesignColorsPanel = forwardRef( }; const handlePickYourOwnColors = () => { - setSelectedPalette( customPaletteId ); - setSelectedColor( colors[ customPaletteId ] ); + setSelectedPalette( 'custom' ); + setSelectedColor( customColors ); setShowCustomColors( true ); if ( ! selectedCustomColors ) { setIsEditingCustomColors( true ); @@ -318,9 +371,9 @@ const DesignColorsPanel = forwardRef( label={ idx === 0 ? __( - 'Default', - 'wp-module-onboarding' - ) + 'Default', + 'wp-module-onboarding' + ) : '' } selectedPalette={ selectedPalette } From ad1bd88a4f85d25c2e4b7b6a0d3f9a1db31361e2 Mon Sep 17 00:00:00 2001 From: Vara Date: Thu, 1 Feb 2024 16:30:12 +0530 Subject: [PATCH 2/7] Store the custom fonts --- .../Customize/DesignFontsPanel/index.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 9d211da7d..fdc08e40f 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -268,12 +268,27 @@ const DesignFontsPanel = forwardRef( ( style ) => style.font_content ); + + useEffect(() => { + const slug = currentData.sitegen?.homepages?.active?.slug; + if (slug && !customFont.headings) { + const storedCustomFonts = currentData.sitegen.homepages.data[ slug ].customFont; + if (storedCustomFonts) { + setCustomFont(storedCustomFonts); + } + } + }, [ currentData ]); + const handleUpdatePreviewSettings = () => { let headings; let body; if ( selectedGroup === 'custom' ) { headings = `var(--wp--preset--font-family--${ customFont.headings })`; body = `var(--wp--preset--font-family--${ customFont.body })`; + const slug = currentData.sitegen?.homepages?.active?.slug; + if (slug) { + currentData.sitegen.homepages.data[ slug ]['customFont'] = customFont; + } } else { headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`; body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].body })`; From 9f66ce794c3c00d3776a7871f07293d0e37ffc58 Mon Sep 17 00:00:00 2001 From: Vara Date: Mon, 5 Feb 2024 09:47:40 +0530 Subject: [PATCH 3/7] Fix lint issues --- .../ColorPaletteIcon/index.js | 2 +- .../Customize/DesignColorsPanel/index.js | 87 +++++++++++-------- .../Customize/DesignFontsPanel/index.js | 20 +++-- 3 files changed, 61 insertions(+), 48 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js index 58bd5069a..71b11711f 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js @@ -11,7 +11,7 @@ const ColorPaletteIcon = ( { customColors, } ) => { let conicGradient; - if (colors) { + if ( colors ) { conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`; } else if ( customColors ) { conicGradient = `conic-gradient(${ customColors.primary } 90deg, ${ customColors.secondary } 90deg 150deg, ${ customColors.tertiary } 150deg 330deg, ${ customColors.primary } 330deg 360deg)`; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index a76df8bb5..d2daa5388 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -120,49 +120,56 @@ const DesignColorsPanel = forwardRef( const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' ); const [ showColorPicker, setShowColorPicker ] = useState( false ); - useEffect(() => { + useEffect( () => { const slug = currentData.sitegen?.homepages?.active?.slug; - if (slug && !customColors) { - const storedCustomColors = currentData.sitegen.homepages.data[ slug ].color['customColors']; - if (storedCustomColors) { - setCustomColors(storedCustomColors); + if ( slug && ! customColors ) { + const storedCustomColors = + currentData.sitegen.homepages.data[ slug ].color + .customColors; + if ( storedCustomColors ) { + setCustomColors( storedCustomColors ); } else { - const defaultPalette = currentData.sitegen.homepages.data[ slug ].color.palette; - let defaultCustomColors = { - primary: "", - secondary: "", - tertiary: "", - } - for (const item of defaultPalette) { - switch (item.slug) { - case "primary": - defaultCustomColors.primary = item.color; - break; - case "secondary": - defaultCustomColors.secondary = item.color; - break; - case "tertiary": - defaultCustomColors.tertiary = item.color; - break; - default: - break; + const defaultPalette = + currentData.sitegen.homepages.data[ slug ].color + .palette; + const defaultCustomColors = { + primary: '', + secondary: '', + tertiary: '', + }; + for ( const item of defaultPalette ) { + switch ( item.slug ) { + case 'primary': + defaultCustomColors.primary = item.color; + break; + case 'secondary': + defaultCustomColors.secondary = item.color; + break; + case 'tertiary': + defaultCustomColors.tertiary = item.color; + break; + default: + break; } - } + } - if (!defaultCustomColors.secondary) { - defaultCustomColors.secondary = defaultPalette.find(item => item.slug === "base").color; - } + if ( ! defaultCustomColors.secondary ) { + defaultCustomColors.secondary = defaultPalette.find( + ( item ) => item.slug === 'base' + ).color; + } - setCustomColors(defaultCustomColors); + setCustomColors( defaultCustomColors ); } } - }, [ currentData ]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ currentData ] ); const handleApplyCustomColors = () => { setSelectedCustomColors( true ); setIsEditingCustomColors( false ); setSelectedPalette( 'custom' ); - setCustomColors(selectedColor); + setCustomColors( selectedColor ); }; const handleEditCustomColors = () => { @@ -217,19 +224,23 @@ const DesignColorsPanel = forwardRef( } if ( selectedPalette === 'custom' ) { - currentData.sitegen.homepages.data[ slug ].color['customColors'] = selectedColor; + currentData.sitegen.homepages.data[ slug ].color.customColors = + selectedColor; } - const colorPaletteIndex = selectedPalette === 'custom' ? 0 : selectedPalette + const colorPaletteIndex = + selectedPalette === 'custom' ? 0 : selectedPalette; colorPalettes[ colorPaletteIndex ].primary = selectedColor.primary; if ( colorPalettes[ colorPaletteIndex ].secondary ) { colorPalettes[ colorPaletteIndex ].secondary = selectedColor.secondary; } else { - colorPalettes[ colorPaletteIndex ].base = selectedColor.secondary; + colorPalettes[ colorPaletteIndex ].base = + selectedColor.secondary; } - colorPalettes[ colorPaletteIndex ].tertiary = selectedColor.tertiary; + colorPalettes[ colorPaletteIndex ].tertiary = + selectedColor.tertiary; currentData.sitegen.homepages.data[ slug ].color.palette = convertColorSchema( colorPalettes[ colorPaletteIndex ] ); @@ -371,9 +382,9 @@ const DesignColorsPanel = forwardRef( label={ idx === 0 ? __( - 'Default', - 'wp-module-onboarding' - ) + 'Default', + 'wp-module-onboarding' + ) : '' } selectedPalette={ selectedPalette } diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index fdc08e40f..2c0c9e3fa 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -268,16 +268,17 @@ const DesignFontsPanel = forwardRef( ( style ) => style.font_content ); - - useEffect(() => { + useEffect( () => { const slug = currentData.sitegen?.homepages?.active?.slug; - if (slug && !customFont.headings) { - const storedCustomFonts = currentData.sitegen.homepages.data[ slug ].customFont; - if (storedCustomFonts) { - setCustomFont(storedCustomFonts); + if ( slug && ! customFont.headings ) { + const storedCustomFonts = + currentData.sitegen.homepages.data[ slug ].customFont; + if ( storedCustomFonts ) { + setCustomFont( storedCustomFonts ); } } - }, [ currentData ]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ currentData ] ); const handleUpdatePreviewSettings = () => { let headings; @@ -286,8 +287,9 @@ const DesignFontsPanel = forwardRef( headings = `var(--wp--preset--font-family--${ customFont.headings })`; body = `var(--wp--preset--font-family--${ customFont.body })`; const slug = currentData.sitegen?.homepages?.active?.slug; - if (slug) { - currentData.sitegen.homepages.data[ slug ]['customFont'] = customFont; + if ( slug ) { + currentData.sitegen.homepages.data[ slug ].customFont = + customFont; } } else { headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`; From d9db3fef2371249ca628fd1eed299629b70c36f9 Mon Sep 17 00:00:00 2001 From: Vara Date: Mon, 5 Feb 2024 09:54:44 +0530 Subject: [PATCH 4/7] Fix lint issues --- .../Sidebar/components/Customize/DesignColorsPanel/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index d2daa5388..2e7a3a948 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -382,9 +382,9 @@ const DesignColorsPanel = forwardRef( label={ idx === 0 ? __( - 'Default', - 'wp-module-onboarding' - ) + 'Default', + 'wp-module-onboarding' + ) : '' } selectedPalette={ selectedPalette } From c2c35fcac95b77aa4ba96c7460fc0eff2124d061 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 6 Feb 2024 10:02:17 +0530 Subject: [PATCH 5/7] Revamp some of the items --- .../ColorPaletteIcon/index.js | 15 +------ .../Customize/DesignColorsPanel/index.js | 42 +------------------ 2 files changed, 4 insertions(+), 53 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js index 71b11711f..de713cf5a 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js @@ -8,25 +8,14 @@ const ColorPaletteIcon = ( { setSelectedColor, colors, setShowCustomColors = null, - customColors, } ) => { - let conicGradient; - if ( colors ) { - conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`; - } else if ( customColors ) { - conicGradient = `conic-gradient(${ customColors.primary } 90deg, ${ customColors.secondary } 90deg 150deg, ${ customColors.tertiary } 150deg 330deg, ${ customColors.primary } 330deg 360deg)`; - } + let conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`; const baseClassName = 'nfd-onboarding-sidebar--customize__color-palette-icon'; const handleClick = () => { setSelectedPalette( idx ); - if ( colors ) { - setSelectedColor( colors[ idx ] ); - } else if ( customColors ) { - setSelectedColor( customColors ); - } - + setSelectedColor( colors[ idx ] ); if ( setShowCustomColors ) { setShowCustomColors( false ); } diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 2e7a3a948..6f41fed9c 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -82,15 +82,6 @@ const DesignColorsPanel = forwardRef( const colorPalettes = customizeSidebarData?.colorPalettes; - useEffect( () => { - if ( ! defaultGlobalData ) { - defaultGlobalData = cloneDeep( - currentData.sitegen.homepages.data - ); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ colorPalettes ] ); - const palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map( ( [ , color ] ) => ( { name: __( 'Custom', 'wp-module-onboarding' ), @@ -129,36 +120,7 @@ const DesignColorsPanel = forwardRef( if ( storedCustomColors ) { setCustomColors( storedCustomColors ); } else { - const defaultPalette = - currentData.sitegen.homepages.data[ slug ].color - .palette; - const defaultCustomColors = { - primary: '', - secondary: '', - tertiary: '', - }; - for ( const item of defaultPalette ) { - switch ( item.slug ) { - case 'primary': - defaultCustomColors.primary = item.color; - break; - case 'secondary': - defaultCustomColors.secondary = item.color; - break; - case 'tertiary': - defaultCustomColors.tertiary = item.color; - break; - default: - break; - } - } - - if ( ! defaultCustomColors.secondary ) { - defaultCustomColors.secondary = defaultPalette.find( - ( item ) => item.slug === 'base' - ).color; - } - + const defaultCustomColors = palettes[0]; setCustomColors( defaultCustomColors ); } } @@ -284,7 +246,7 @@ const DesignColorsPanel = forwardRef( selectedPalette={ selectedPalette } setSelectedPalette={ setSelectedPalette } setSelectedColor={ setSelectedColor } - customColors={ customColors } + colors={ {'custom': customColors} } /> From 2b6f7db9e66c34a3f5750a9ea86f27d28329ca3f Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 6 Feb 2024 10:54:56 +0530 Subject: [PATCH 6/7] Revamp some of the items --- .../Customize/DesignColorsPanel/ColorPaletteIcon/index.js | 2 +- .../Sidebar/components/Customize/DesignColorsPanel/index.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js index de713cf5a..c48dc5175 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js @@ -9,7 +9,7 @@ const ColorPaletteIcon = ( { colors, setShowCustomColors = null, } ) => { - let conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`; + const conicGradient = `conic-gradient(${ colors[ idx ].primary } 90deg, ${ colors[ idx ].secondary } 90deg 150deg, ${ colors[ idx ].tertiary } 150deg 330deg, ${ colors[ idx ].primary } 330deg 360deg)`; const baseClassName = 'nfd-onboarding-sidebar--customize__color-palette-icon'; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 6f41fed9c..5967367da 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -120,7 +120,7 @@ const DesignColorsPanel = forwardRef( if ( storedCustomColors ) { setCustomColors( storedCustomColors ); } else { - const defaultCustomColors = palettes[0]; + const defaultCustomColors = palettes[ 0 ]; setCustomColors( defaultCustomColors ); } } @@ -246,7 +246,7 @@ const DesignColorsPanel = forwardRef( selectedPalette={ selectedPalette } setSelectedPalette={ setSelectedPalette } setSelectedColor={ setSelectedColor } - colors={ {'custom': customColors} } + colors={ { custom: customColors } } /> From f54596fea13c0e413b0614c7ece2c41c1950fb27 Mon Sep 17 00:00:00 2001 From: Vara Date: Tue, 6 Feb 2024 12:48:51 +0530 Subject: [PATCH 7/7] Take custom data from active instead of data[slug] --- .../components/Customize/DesignColorsPanel/index.js | 7 ++++--- .../Sidebar/components/Customize/DesignFontsPanel/index.js | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 5967367da..cf72b0bda 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -112,10 +112,9 @@ const DesignColorsPanel = forwardRef( const [ showColorPicker, setShowColorPicker ] = useState( false ); useEffect( () => { - const slug = currentData.sitegen?.homepages?.active?.slug; - if ( slug && ! customColors ) { + if ( ! customColors ) { const storedCustomColors = - currentData.sitegen.homepages.data[ slug ].color + currentData.sitegen.homepages.active.color .customColors; if ( storedCustomColors ) { setCustomColors( storedCustomColors ); @@ -188,6 +187,8 @@ const DesignColorsPanel = forwardRef( if ( selectedPalette === 'custom' ) { currentData.sitegen.homepages.data[ slug ].color.customColors = selectedColor; + currentData.sitegen.homepages.active.color.customColors = + selectedColor; } const colorPaletteIndex = diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index 2c0c9e3fa..e63a129f1 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -269,10 +269,9 @@ const DesignFontsPanel = forwardRef( ); useEffect( () => { - const slug = currentData.sitegen?.homepages?.active?.slug; - if ( slug && ! customFont.headings ) { + if ( ! customFont.headings ) { const storedCustomFonts = - currentData.sitegen.homepages.data[ slug ].customFont; + currentData.sitegen.homepages.active.customFont; if ( storedCustomFonts ) { setCustomFont( storedCustomFonts ); } @@ -290,6 +289,8 @@ const DesignFontsPanel = forwardRef( if ( slug ) { currentData.sitegen.homepages.data[ slug ].customFont = customFont; + currentData.sitegen.homepages.active.customFont = + customFont; } } else { headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`;