PRESS2 331 Maintain State for colors and typography steps

includes/Data/Options.php

@@ -38,6 +38,7 @@ final class Options {
 		'site_icon'                     => 'site_icon',
 		'show_on_front'                 => 'show_on_front',
 		'page_on_front'                 => 'page_on_front',
+		'custom_theme_styles'           => 'custom_theme_styles',
 	);
 
 	protected static $initialization_options = array(

includes/RestApi/Themes/ThemeVariationsController.php

@@ -2,6 +2,7 @@
 namespace NewfoldLabs\WP\Module\Onboarding\RestApi\Themes;
 
 use NewfoldLabs\WP\Module\Onboarding\Permissions;
+use NewfoldLabs\WP\Module\Onboarding\Data\Options;
 
 /**
  * Class ThemeVariationsController
@@ -43,16 +44,32 @@ public function register_routes() {
 					'callback' => array( $this, 'get_theme_variations' ),
 					'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ),
 				),
+				array(
+					'methods'  => \WP_REST_Server::EDITABLE,
+					'callback' => array($this, 'set_theme_variation'),
+					'permission_callback' => array(Permissions::class, 'rest_is_authorized_admin'),
+				),
 			)
 		);
 	}
 
 	/**
 	 * Retrieves the active themes variations.
 	 *
-	 * @return \WP_REST_Response|\WP_Error
+	 * @return \array|\WP_Error
 	 */
 	public function get_theme_variations( \WP_REST_Request $request ) {
+
+		$default = $request->get_param('defaultValue');
+
+		// If there exists an old Custom Theme then return that
+		if( 'false' === $default && false !== \get_option(Options::get_option_name('custom_theme_styles')) )
+		{
+			return array(
+				\get_option(Options::get_option_name('custom_theme_styles'))
+			);
+		}
+
 		$active_variation              = \WP_Theme_JSON_Resolver::get_merged_data( 'theme' )->get_raw_data();
 		$active_variation_global_style = array(
             'title'    => 'Default',
@@ -67,4 +84,25 @@ public function get_theme_variations( \WP_REST_Request $request ) {
 		);
 	}
 
+	/**
+	 * Saves the custom active theme variations.
+	 *
+	 * @return \WP_REST_Response|\WP_Error
+	 */
+	public function set_theme_variation(\WP_REST_Request $request)
+	{
+		// The theme data with the new Colors and Fonts
+		$theme_data = json_decode($request->get_body(), true);
+
+		if($theme_data){
+			// Save the new Theme style into the db
+			\update_option(Options::get_option_name('custom_theme_styles'), $theme_data);
+		}
+
+		return new \WP_REST_Response(
+			$theme_data,
+			200
+		);
+	}
+
 }

src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js

@@ -4,13 +4,13 @@ import { useState, useEffect } from '@wordpress/element';
 import { Popover, ColorPicker } from '@wordpress/components';
 
 import { store as nfdOnboardingStore } from '../../../store';
-import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes';
+import { getGlobalStyles, getThemeColors, setGlobalStyles } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
+import GlobalStyleParent from '../../GlobalStyleParent';
 
 const DesignColors = () => {
 
 	const [isLoaded, setIsLoaded] = useState(false);
-	const [globalStyles, setGlobalStyles] = useState();
 	const [selectedColors, setSelectedColors] = useState();
 	const [showColorPicker, setShowColorPicker] = useState(false);
 	const [isAccordionClosed, setIsAccordionClosed] = useState(true);
@@ -69,7 +69,7 @@ const DesignColors = () => {
 		}
 	}
 
-	async function saveThemeColorPalette(colorStyle, colorPalettesTemp = colorPalettes, selectedColorsLocalTemp = selectedColors, globalStylesTemp = globalStyles) {
+	async function saveThemeColorPalette(colorStyle, colorPalettesTemp = colorPalettes, selectedColorsLocalTemp = selectedColors, globalStylesTemp = storedPreviewSettings) {
 		const isCustomStyle = colorStyle === 'custom';
 		let selectedGlobalStyle = globalStylesTemp;
 		let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme;
@@ -104,7 +104,6 @@ const DesignColors = () => {
 			}
 
 			selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette;
-			setGlobalStyles(selectedGlobalStyle);
 			updatePreviewSettings(
 				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
 			);
@@ -114,7 +113,7 @@ const DesignColors = () => {
 	}
 
 	async function saveCustomColors() {
-		let selectedGlobalStyle = globalStyles;
+		let selectedGlobalStyle = storedPreviewSettings;
 		let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme;
 
 		if (selectedThemeColorPalette) {
@@ -140,7 +139,6 @@ const DesignColors = () => {
 			}
 
 			selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette;
-			setGlobalStyles(selectedGlobalStyle);
 			updatePreviewSettings(
 				useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
 			);
@@ -149,18 +147,7 @@ const DesignColors = () => {
 
 	const getColorStylesAndPatterns = async () => {
 		const colorPalettes = await getThemeColors();
-		const globalStyles = await getGlobalStyles();
 		setColorPalettes(colorPalettes?.body);
-		let selectedGlobalStyle;
-		if (currentData?.data?.theme?.variation) {
-			selectedGlobalStyle = globalStyles.body.filter(
-				(globalStyle) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[0];
-		} else {
-			selectedGlobalStyle = globalStyles.body[0];
-		}
-		setGlobalStyles(selectedGlobalStyle);
 		let selectedColors;
 		let selectedColorsLocal;
 		if (!currentData?.data?.palette?.slug === '') {
@@ -178,7 +165,7 @@ const DesignColors = () => {
 			}
 		} 
 		setSelectedColors(selectedColors);
-		saveThemeColorPalette(currentData?.data?.palette['slug'], colorPalettes?.body, selectedColorsLocal, selectedGlobalStyle);
+		saveThemeColorPalette(currentData?.data?.palette['slug'], colorPalettes?.body, selectedColorsLocal, storedPreviewSettings);
 		setIsLoaded(true);
 
 	};
@@ -229,7 +216,6 @@ const DesignColors = () => {
 		} else {
 			selectedGlobalStyle = globalStyles.body[0];
 		}
-		setGlobalStyles(selectedGlobalStyle);
 		updatePreviewSettings(
 			useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
 		);
@@ -331,16 +317,18 @@ const DesignColors = () => {
 	}
 
 	return (
-		<div className='theme-colors--drawer'>
-			<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
-			{/* {selectedColors?.slug && 
-				<div className='theme-colors--drawer--reset' onClick={resetColors}>
-					<div>Reset Button</div>
-				</div>
-			} */}
-			{ colorPalettes && buildPalettes() }
-			{ colorPalettes && buildCustomPalette() }
-		</div>
+		<GlobalStyleParent>
+			<div className='theme-colors--drawer'>
+				<h2>{__('Color Palettes', 'wp-module-onboarding')}</h2>
+				{/* {selectedColors?.slug && 
+					<div className='theme-colors--drawer--reset' onClick={resetColors}>
+						<div>Reset Button</div>
+					</div>
+				} */}
+				{ colorPalettes && buildPalettes() }
+				{ colorPalettes && buildCustomPalette() }
+			</div>
+		</GlobalStyleParent>
 	);
 };
 

src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js

@@ -44,7 +44,7 @@ const DesignThemeStylesPreview = () => {
 		if ( patternResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}
-		const globalStylesResponse = await getGlobalStyles();
+		const globalStylesResponse = await getGlobalStyles(true);
 		if ( globalStylesResponse?.error ) {
 			return updateThemeStatus( THEME_STATUS_NOT_ACTIVE );
 		}

src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js

@@ -2,6 +2,7 @@ import { __ } from '@wordpress/i18n';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState, useEffect, useRef } from '@wordpress/element';
 
+import GlobalStyleParent from '../../GlobalStyleParent';
 import { store as nfdOnboardingStore } from '../../../store';
 import { getGlobalStyles, getThemeFonts } from '../../../utils/api/themes';
 import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output';
@@ -11,7 +12,6 @@ const DesignTypography = () => {
 	const [ rerender, doRerender ] = useState( 0 );
 	const [ isLoaded, setIsLoaded ] = useState( false );
 	const [ selectedFont, setSelectedFont ] = useState();
-	const [ globalStyles, setGlobalStyles ] = useState();
 	const [ fontPalettes, setFontPalettes ] = useState();
 	const [ isAccordionClosed, setIsAccordionClosed ] = useState( true );
 
@@ -29,35 +29,16 @@ const DesignTypography = () => {
 
 	const getFontStylesAndPatterns = async () => {
 		const fontPalettes = await getThemeFonts();
-		const globalStyles = await getGlobalStyles();
 		setFontPalettes( fontPalettes?.body );
 
-		let selectedGlobalStyle;
-		if ( currentData?.data?.theme?.variation ) {
-			selectedGlobalStyle = globalStyles.body.filter(
-				( globalStyle ) =>
-					globalStyle.title === currentData.data.theme.variation
-			)[ 0 ];
-		} else {
-			selectedGlobalStyle = globalStyles.body[ 0 ];
-		}
-		setGlobalStyles( selectedGlobalStyle );
-
 		if ( currentData?.data?.typography?.slug !== '' ) {
 			handleClick(
 				currentData?.data?.typography?.slug,
-				selectedGlobalStyle,
+				storedPreviewSettings,
 				fontPalettes?.body
 			);
-		} else {
-			updatePreviewSettings(
-				useGlobalStylesOutput(
-					selectedGlobalStyle,
-					storedPreviewSettings
-				)
-			);
 		}
-		const stylesCustom = selectedGlobalStyle?.settings?.styles[ 0 ]?.css;
+		const stylesCustom = storedPreviewSettings?.settings?.styles[ 0 ]?.css;
 		if ( stylesCustom ) {
 			// Loads in all CSS variables related to fontFamily
 			const regex = /--wp--preset--font-family.*;/;
@@ -75,20 +56,20 @@ const DesignTypography = () => {
 
 	const handleClick = async (
 		fontStyle,
-		selectedGlobalStyle = globalStyles,
+		selectedGlobalStyle = storedPreviewSettings,
 		fontPalettesCopy = fontPalettes
 	) => {
 		setSelectedFont( fontStyle );
 
 		// Changes the Global Styles to Recompute css properties
 		const globalStylesCopy = selectedGlobalStyle;
-		globalStylesCopy.styles.typography.fontFamily =
-			fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily;
-		globalStylesCopy.styles.blocks[ 'core/heading' ].typography.fontFamily =
-			fontPalettesCopy[ fontStyle ]?.styles.blocks[
-				'core/heading'
-			].typography.fontFamily;
-		setGlobalStyles( globalStylesCopy );
+
+		// globalStylesCopy.styles.typography.fontFamily =
+		// 	fontPalettesCopy[ fontStyle ]?.styles?.typography?.fontFamily;
+		// globalStylesCopy.styles.blocks[ 'core/heading' ].typography.fontFamily =
+		// 	fontPalettesCopy[ fontStyle ]?.styles.blocks[
+		// 		'core/heading'
+		// 	].typography.fontFamily;
 
 		// Saves the data to the Store
 		currentData.data.typography.slug = fontStyle;
@@ -136,7 +117,6 @@ const DesignTypography = () => {
 		} else {
 			selectedGlobalStyle = globalStyles.body[ 0 ];
 		}
-		setGlobalStyles( selectedGlobalStyle );
 		updatePreviewSettings(
 			useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings )
 		);
@@ -222,17 +202,19 @@ const DesignTypography = () => {
 	}
 
 	return (
-		<div ref={ drawerFontOptions } className="theme-fonts--drawer">
-			<h2>{ __( 'Font Palettes', 'wp-module-onboarding' ) }</h2>
-			{ /* { selectedFont && 
+		<GlobalStyleParent>
+			<div ref={drawerFontOptions} className="theme-fonts--drawer">
+				<h2>{__('Font Palettes', 'wp-module-onboarding')}</h2>
+				{ /* { selectedFont && 
 				<div className='theme-fonts--drawer--reset' onClick={resetFonts}>
 					<div>Reset Button</div>
 				</div>
 			} */ }
-			{ fontPalettes && buildPalettes() }
-			{ fontPalettes && buildCustomPalette() }
-			<div className="custom-font-palette--hidden">{ rerender }</div>
-		</div>
+				{fontPalettes && buildPalettes()}
+				{fontPalettes && buildCustomPalette()}
+				<div className="custom-font-palette--hidden">{rerender}</div>
+			</div>
+		</GlobalStyleParent>
 	);
 };
 export default DesignTypography;

src/OnboardingSPA/components/GlobalStyleParent/index.js

@@ -0,0 +1,74 @@
+import { useSelect, useDispatch } from '@wordpress/data'; 
+import { useState, useEffect } from '@wordpress/element'; 
+
+import { store as nfdOnboardingStore } from '../../store';
+import { getGlobalStyles, setGlobalStyles } from '../../utils/api/themes';
+import { useGlobalStylesOutput } from '../../utils/global-styles/use-global-styles-output';
+
+/**
+ * Global Style Parent Component
+ * The Fetching of Global Style Object from either store or API is 
+ * common to a lot many places and this component does the trick import { useState, useEffect } from '@wordpress/element';for us.
+ *
+ * @returns Global Style Parent
+ */
+
+const GlobalStyleParent = ({ children }) => {
+
+    const [isLoaded, setIsLoaded] = useState(false);
+
+    const {
+        currentData,
+        storedPreviewSettings,
+    } = useSelect((select) => {
+        return {
+            currentData:
+                select(nfdOnboardingStore).getCurrentOnboardingData(),
+            storedPreviewSettings:
+                select(nfdOnboardingStore).getPreviewSettings(),
+        };
+    }, []);
+
+    const { updateThemeStatus, updatePreviewSettings } =
+        useDispatch(nfdOnboardingStore);
+
+    const getStylesAndPatterns = async () => {
+        const globalStyles = await getGlobalStyles();
+        if (globalStyles?.error) {
+            return updateThemeStatus(THEME_STATUS_NOT_ACTIVE);
+        }
+        let selectedGlobalStyle;
+        if (storedPreviewSettings?.title)
+            selectedGlobalStyle = storedPreviewSettings;
+        else if (currentData.data.theme.variation) {
+            selectedGlobalStyle = globalStyles.body.filter(
+                (globalStyle) =>
+                    globalStyle.title === currentData.data.theme.variation
+            )[0];
+        } else {
+            selectedGlobalStyle = globalStyles.body[0];
+        }
+
+        if(selectedGlobalStyle)
+            setGlobalStyles({
+                ...selectedGlobalStyle,
+                'title': currentData.data.theme.variation,
+                'version': 2
+            });
+
+        updatePreviewSettings(
+            useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings)
+        );
+        setIsLoaded(true);
+    };
+
+    useEffect(() => {
+        if (!isLoaded) getStylesAndPatterns();
+    }, [isLoaded]);
+
+    return (
+        children
+    );
+};
+
+export default GlobalStyleParent;