Customize Sidebar Fixes

src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js

@@ -26,34 +26,25 @@
 		};
 	} );
 
-	const design = customizeSidebarData?.design;
 	const colorPalettes = customizeSidebarData?.colorPalettes;
-	const palettePrimaryColors = Object.entries( design?.color_palette ).map(
+	const palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map(
 		( [ , color ] ) => ( {
 			name: __( 'Custom', 'wp-module-onboarding' ),
 			color,
 		} )
 	);
 
-	const defaultColors = {
-		primary: design?.color_palette.primary,
-		secondary:
-			design?.color_palette.secondary || design?.color_palette.primary,
-		tertiary:
-			design?.color_palette.tertiary || design?.color_palette.primary,
-	};
-
 	const palettes = [];
 
-	colorPalettes.slice( 1, 5 ).forEach( ( palette ) => {
+	colorPalettes.forEach( ( palette ) => {
 		palettes.push( {
 			primary: palette?.primary,
-			secondary: palette?.secondary || palette?.primary,
+			secondary: palette?.secondary || palette?.base,
 			tertiary: palette?.tertiary || palette?.primary,
 		} );
 	} );
 
-	const [ colors ] = useState( [ defaultColors, ...palettes ] );
+	const [ colors ] = useState( palettes );
 	const [ selectedColor, setSelectedColor ] = useState( null );
 	const [ showCustomColors, setShowCustomColors ] = useState( false );
 	const [ isEditingCustomColors, setIsEditingCustomColors ] =
@@ -128,20 +119,33 @@
 
 	const handleUpdatePreviewSettings = () => {
 		colorPalettes[ selectedPalette ].primary = selectedColor.primary;
-		colorPalettes[ selectedPalette ].secondary = selectedColor.secondary;
+		if ( colorPalettes[ selectedPalette ].secondary ) {
+			colorPalettes[ selectedPalette ].secondary =
+				selectedColor.secondary;
+		} else {
+			colorPalettes[ selectedPalette ].base = selectedColor.secondary;
+		}
+
 		colorPalettes[ selectedPalette ].tertiary = selectedColor.tertiary;
 		const slug = currentData.sitegen?.homepages?.active?.slug;
 		if ( slug ) {
-			currentData.sitegen.homepages.data[ slug ].color.palette =
-				convertColorSchema( colorPalettes[ selectedPalette ] );
+			currentData.sitegen.homepages.data =
+				currentData.sitegen.homepages?.data?.map( ( ele ) => {
+					if ( ele.slug === slug ) {
+						ele.color.palette = convertColorSchema(
+							colorPalettes[ selectedPalette ]
+						);
+					}
+					return ele;
+				} );
 			currentData.sitegen.homepages.active.color.palette =
 				convertColorSchema( colorPalettes[ selectedPalette ] );
 			setCurrentOnboardingData( currentData );
 		}
 	};
 
 	useEffect( () => {
-		if ( selectedColor && selectedPalette ) {
+		if ( selectedColor !== null && selectedPalette !== null ) {
 			handleUpdatePreviewSettings();
 		}
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -260,16 +264,16 @@
 						<div
 							className={ `${ baseClassName }__container__color__palette__icon` }
 						>
-							{ colors.slice( 0, 4 ).map( ( elem, idx ) => (
+							{ colors.map( ( elem, idx ) => (
 								<ColorPaletteIcon
 									key={ idx }
 									idx={ idx }
 									label={
 										idx === 0
 											? __(
 													'Default',
 													'wp-module-onboarding'
 											  )
 											: ''
 									}
 									selectedPalette={ selectedPalette }

src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/stylesheet.scss

@@ -18,8 +18,10 @@
 
 			&__color__palette__icon {
 				display: flex;
-				justify-content: space-around;
 				gap: 20px;
+				padding: 10px 4px;
+				overflow-x: auto;
+				max-width: 250px;
 			}
 
 			&__icon {

src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js

@@ -206,32 +206,16 @@ const DesignFontsPanel = ( {
 		};
 	} );
 
-	const design = customizeSidebarData?.design;
 	const designStyles = customizeSidebarData?.designStyles;
 	const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore );
 
-	const fontGroups = [
-		{
-			id: 0,
-			headings: design?.style?.fonts_heading,
-			body: design?.style?.fonts_content,
-		},
-		{
-			id: 1,
-			headings: designStyles[ 1 ]?.fonts_heading,
-			body: designStyles[ 1 ]?.fonts_content,
-		},
-		{
-			id: 2,
-			headings: designStyles[ 2 ]?.fonts_heading,
-			body: designStyles[ 2 ]?.fonts_content,
-		},
-		{
-			id: 3,
-			headings: designStyles[ 3 ]?.fonts_heading,
-			body: designStyles[ 3 ]?.fonts_content,
-		},
-	];
+	const fontGroups = designStyles.map( ( style, index ) => ( {
+		id: index,
+		headings: style.font_heading_name || style.font_heading,
+		body: style.font_content_name || style.font_content,
+		headingsSlug: style.font_heading,
+		bodySlug: style.font_content,
+	} ) );
 
 	const [ selectedGroup, setSelectedGroup ] = useState( null );
 	const [ showCustomFonts, setShowCustomFonts ] = useState( false );
@@ -242,18 +226,18 @@ const DesignFontsPanel = ( {
 	const [ selectedCustomFont, setSelectedCustomFont ] = useState( null );
 	const [ isEditingCustomFont, setIsEditingCustomFont ] = useState( false );
 
-	const fontsHeading = designStyles?.map( ( style ) => style.fonts_heading );
-	const fontsContent = designStyles?.map( ( style ) => style.fonts_content );
+	const fontsHeading = designStyles?.map( ( style ) => style.font_heading );
+	const fontsContent = designStyles?.map( ( style ) => style.font_content );
 
 	const handleUpdatePreviewSettings = () => {
 		let headings;
 		let body;
 		if ( selectedGroup === 'custom' ) {
-			headings = customFont.headings;
-			body = customFont.body;
+			headings = `var(--wp--preset--font-family--${ customFont.headings })`;
+			body = `var(--wp--preset--font-family--${ customFont.body })`;
 		} else {
-			headings = fontGroups[ selectedGroup ].headings;
-			body = fontGroups[ selectedGroup ].body;
+			headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`;
+			body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].body })`;
 		}
 		const slug = currentData.sitegen?.homepages?.active?.slug;