Merge pull request #452 from newfold-labs/storing-custom-colors-to-trunk

Fix: Custom colors & fonts in the SiteGen customize sidebar is not preserved
newfold-labs · Feb 7, 2024 · e864e89 · e864e89
2 parents 0f9405e + f54596f
commit e864e89
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 20 deletions.
diff --git a/...ngSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js b/...ngSPA/components/Sidebar/components/Customize/DesignColorsPanel/ColorPaletteIcon/index.js
@@ -10,6 +10,7 @@ const ColorPaletteIcon = ( {
 	setShowCustomColors = null,
 } ) => {
 	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';
 	const handleClick = () => {

diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js
@@ -81,6 +81,7 @@ const DesignColorsPanel = forwardRef(
 		}, [ currentData ] );
 
 		const colorPalettes = customizeSidebarData?.colorPalettes;
+
 		const palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map(
 			( [ , color ] ) => ( {
 				name: __( 'Custom', 'wp-module-onboarding' ),
@@ -99,6 +100,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 +110,32 @@ const DesignColorsPanel = forwardRef(
 		const [ selectedPalette, setSelectedPalette ] = useState( null );
 		const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' );
 		const [ showColorPicker, setShowColorPicker ] = useState( false );
-		const customPaletteId = colors.length - 1;
+
+		useEffect( () => {
+			if ( ! customColors ) {
+				const storedCustomColors =
+					currentData.sitegen.homepages.active.color
+						.customColors;
+				if ( storedCustomColors ) {
+					setCustomColors( storedCustomColors );
+				} else {
+					const defaultCustomColors = palettes[ 0 ];
+					setCustomColors( defaultCustomColors );
+				}
+			}
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ 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 +184,31 @@ 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;
+				currentData.sitegen.homepages.active.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 +242,12 @@ const DesignColorsPanel = forwardRef(
 
 					<div style={ { marginLeft: '5px' } }>
 						<ColorPaletteIcon
-							key={ customPaletteId }
-							idx={ customPaletteId }
+							key={ 'custom' }
+							idx={ 'custom' }
 							selectedPalette={ selectedPalette }
 							setSelectedPalette={ setSelectedPalette }
 							setSelectedColor={ setSelectedColor }
-							colors={ colors }
+							colors={ { custom: customColors } }
 						/>
 					</div>
 				</div>
@@ -280,8 +307,8 @@ const DesignColorsPanel = forwardRef(
 		};
 
 		const handlePickYourOwnColors = () => {
-			setSelectedPalette( customPaletteId );
-			setSelectedColor( colors[ customPaletteId ] );
+			setSelectedPalette( 'custom' );
+			setSelectedColor( customColors );
 			setShowCustomColors( true );
 			if ( ! selectedCustomColors ) {
 				setIsEditingCustomColors( true );
@@ -318,9 +345,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
@@ -268,12 +268,30 @@ const DesignFontsPanel = forwardRef(
 			( style ) => style.font_content
 		);
 
+		useEffect( () => {
+			if ( ! customFont.headings ) {
+				const storedCustomFonts =
+					currentData.sitegen.homepages.active.customFont;
+				if ( storedCustomFonts ) {
+					setCustomFont( storedCustomFonts );
+				}
+			}
+			// eslint-disable-next-line react-hooks/exhaustive-deps
+		}, [ 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;
+					currentData.sitegen.homepages.active.customFont =
+					customFont;
+				}
 			} else {
 				headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`;
 				body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].body })`;