diff --git a/includes/Data/Options.php b/includes/Data/Options.php index 07aa59b0d..b216e7f1b 100644 --- a/includes/Data/Options.php +++ b/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', + 'theme_settings' => 'theme_settings', ); protected static $initialization_options = array( diff --git a/includes/RestApi/Themes/ThemeVariationsController.php b/includes/RestApi/Themes/ThemeVariationsController.php index 5504b1412..df0e12aad 100644 --- a/includes/RestApi/Themes/ThemeVariationsController.php +++ b/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 @@ -39,23 +40,66 @@ public function register_routes() { $this->rest_base . $this->rest_extended_base, array( array( - 'methods' => \WP_REST_Server::READABLE, - 'callback' => array( $this, 'get_theme_variations' ), + 'methods' => \WP_REST_Server::READABLE, + 'args' => $this->get_pattern_args(), + 'callback' => array( $this, 'get_theme_variations' ), + 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), + ), + array( + 'methods' => \WP_REST_Server::EDITABLE, + 'args' => $this->set_pattern_args(), + 'callback' => array( $this, 'set_theme_variation' ), 'permission_callback' => array( Permissions::class, 'rest_is_authorized_admin' ), ), ) ); } + public function get_pattern_args() { + // These variable return the orginal numerous variations if true + // Else sends the recently saved theme settings in db + return array( + 'variations' => array( + 'type' => 'boolean', + 'default' => false, + ), + ); + } + + public function set_pattern_args() { + // This is the latest modified Global Style to be saved in the db + return array( + 'title' => array( + 'type' => 'string', + 'required' => true, + ), + 'settings' => array( + 'type' => 'array', + 'required' => true, + ), + ); + } + /** * 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( 'variations' ); + + // If there exists an old Custom Theme then return that + if ( 'false' === $default && false !== \get_option( Options::get_option_name( 'theme_settings' ) ) ) { + return array( + \get_option( Options::get_option_name( 'theme_settings' ) ), + ); + } + $active_variation = \WP_Theme_JSON_Resolver::get_merged_data( 'theme' )->get_raw_data(); $active_variation_global_style = array( - 'title' => 'Default', + 'id' => 0, + 'title' => 'Default', 'version' => $active_variation['version'], 'settings' => $active_variation['settings'], 'styles' => $active_variation['styles'], @@ -67,4 +111,31 @@ 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( 'theme_settings' ), $theme_data ); + + return new \WP_REST_Response( + $theme_data, + 200 + ); + } + + return new \WP_Error( + 500, + 'Missing important parameters', + 'Settings parameter is found to be missing' + ); + } + } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index cf1587994..e477e65ae 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -4,109 +4,140 @@ 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 { GlobalStylesProvider } from '../../LivePreview'; 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); - const [selectedColorsLocal, setSelectedColorsLocal] = useState(); - - const [customColors, setCustomColors] = useState(); - const [colorPalettes, setColorPalettes] = useState(); - const [colorPickerCalledBy, setColorPickerCalledBy] = useState(''); - - const { storedPreviewSettings, currentData } = useSelect( - (select) => { - return { - storedPreviewSettings: - select(nfdOnboardingStore).getPreviewSettings(), - currentData: - select(nfdOnboardingStore).getCurrentOnboardingData(), - }; - }, - [] - ); + const [ isLoaded, setIsLoaded ] = useState( false ); + const [ selectedColors, setSelectedColors ] = useState(); + const [ showColorPicker, setShowColorPicker ] = useState( false ); + const [ isAccordionClosed, setIsAccordionClosed ] = useState( true ); + const [ selectedColorsLocal, setSelectedColorsLocal ] = useState(); + + const [ customColors, setCustomColors ] = useState(); + const [ colorPalettes, setColorPalettes ] = useState(); + const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' ); + + const { storedPreviewSettings, currentData } = useSelect( ( select ) => { + return { + storedPreviewSettings: + select( nfdOnboardingStore ).getPreviewSettings(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + }, [] ); const { updatePreviewSettings, setCurrentOnboardingData } = - useDispatch(nfdOnboardingStore); + useDispatch( nfdOnboardingStore ); - function stateToLocal(selectedColors) { - if (selectedColors) { - let selectedColorsLocalTemp = {}; - selectedColors?.color?.forEach(color => { - selectedColorsLocalTemp[color.slug] = color.color; - }); + function stateToLocal( selectedColors ) { + if ( selectedColors ) { + const selectedColorsLocalTemp = {}; + selectedColors?.color?.forEach( ( color ) => { + selectedColorsLocalTemp[ color.slug ] = color.color; + } ); - setSelectedColorsLocal(selectedColorsLocalTemp); + setSelectedColorsLocal( selectedColorsLocalTemp ); return selectedColorsLocalTemp; } } - function LocalToState(selectedColorsLocalTemp, colorStyle) { - if (selectedColorsLocalTemp && colorStyle) { + function LocalToState( selectedColorsLocalTemp, colorStyle ) { + if ( selectedColorsLocalTemp && colorStyle ) { selectedColors.slug = colorStyle; - selectedColors.name = colorStyle?.charAt(0).toUpperCase() + colorStyle?.slice(1); - - let colorsArray = []; - for (let colorName in selectedColorsLocalTemp) { - colorsArray.push({ - 'slug': colorName, - 'name': colorName?.charAt(0).toUpperCase() + colorName?.slice(1), - 'color': selectedColorsLocalTemp[colorName] - }); + selectedColors.name = + colorStyle?.charAt( 0 ).toUpperCase() + colorStyle?.slice( 1 ); + + const colorsArray = []; + for ( const colorName in selectedColorsLocalTemp ) { + colorsArray.push( { + slug: colorName, + name: + colorName?.charAt( 0 ).toUpperCase() + + colorName?.slice( 1 ), + color: selectedColorsLocalTemp[ colorName ], + } ); } - + selectedColors.color = colorsArray; - setSelectedColors(selectedColors); + setSelectedColors( selectedColors ); currentData.data.palette = selectedColors; - setCurrentOnboardingData(currentData); + setCurrentOnboardingData( currentData ); return selectedColors; } } - 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; - if (colorPalettesTemp && colorStyle && selectedThemeColorPalette) { - for (let idx = 0; idx < selectedThemeColorPalette.length; idx++) { - switch (selectedThemeColorPalette[idx]?.slug) { + const selectedGlobalStyle = globalStylesTemp; + const selectedThemeColorPalette = + selectedGlobalStyle?.settings?.color?.palette?.theme; + if ( colorPalettesTemp && colorStyle && selectedThemeColorPalette ) { + for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) { + switch ( selectedThemeColorPalette[ idx ]?.slug ) { case 'primary': - if (isCustomStyle && selectedColorsLocalTemp?.primary != '') - selectedThemeColorPalette[idx].color = selectedColorsLocalTemp.primary; - else if (!isCustomStyle) - selectedThemeColorPalette[idx].color = colorPalettesTemp[colorStyle].primary; + if ( + isCustomStyle && + selectedColorsLocalTemp?.primary != '' + ) + selectedThemeColorPalette[ idx ].color = + selectedColorsLocalTemp.primary; + else if ( ! isCustomStyle ) + selectedThemeColorPalette[ idx ].color = + colorPalettesTemp[ colorStyle ].primary; break; case 'secondary': - if (isCustomStyle && selectedColorsLocalTemp?.secondary != '') - selectedThemeColorPalette[idx].color = selectedColorsLocalTemp.secondary; - else if (!isCustomStyle) - selectedThemeColorPalette[idx].color = colorPalettesTemp[colorStyle].secondary; + if ( + isCustomStyle && + selectedColorsLocalTemp?.secondary != '' + ) + selectedThemeColorPalette[ idx ].color = + selectedColorsLocalTemp.secondary; + else if ( ! isCustomStyle ) + selectedThemeColorPalette[ idx ].color = + colorPalettesTemp[ colorStyle ].secondary; break; case 'tertiary': - if (isCustomStyle && selectedColorsLocalTemp?.tertiary != '') - selectedThemeColorPalette[idx].color = selectedColorsLocalTemp.tertiary; - else if (!isCustomStyle) - selectedThemeColorPalette[idx].color = colorPalettesTemp[colorStyle].tertiary; + if ( + isCustomStyle && + selectedColorsLocalTemp?.tertiary != '' + ) + selectedThemeColorPalette[ idx ].color = + selectedColorsLocalTemp.tertiary; + else if ( ! isCustomStyle ) + selectedThemeColorPalette[ idx ].color = + colorPalettesTemp[ colorStyle ].tertiary; break; case 'background': - if (isCustomStyle && selectedColorsLocalTemp?.background != '') - selectedThemeColorPalette[idx].color = selectedColorsLocalTemp.background; - else if (!isCustomStyle) - selectedThemeColorPalette[idx].color = '#ffffff'; + if ( + isCustomStyle && + selectedColorsLocalTemp?.background != '' + ) + selectedThemeColorPalette[ idx ].color = + selectedColorsLocalTemp.background; + else if ( ! isCustomStyle ) + selectedThemeColorPalette[ idx ].color = '#ffffff'; break; } } - selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette; - setGlobalStyles(selectedGlobalStyle); + selectedGlobalStyle.settings.color.palette.theme = + selectedThemeColorPalette; updatePreviewSettings( - useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings) + useGlobalStylesOutput( + selectedGlobalStyle, + storedPreviewSettings + ) ); return selectedGlobalStyle; @@ -114,152 +145,180 @@ const DesignColors = () => { } async function saveCustomColors() { - let selectedGlobalStyle = globalStyles; - let selectedThemeColorPalette = selectedGlobalStyle?.settings?.color?.palette?.theme; + const selectedGlobalStyle = storedPreviewSettings; + const selectedThemeColorPalette = + selectedGlobalStyle?.settings?.color?.palette?.theme; - if (selectedThemeColorPalette) { - for (let idx = 0; idx < selectedThemeColorPalette.length; idx++) { - switch (selectedThemeColorPalette[idx]?.slug) { + if ( selectedThemeColorPalette ) { + for ( let idx = 0; idx < selectedThemeColorPalette.length; idx++ ) { + switch ( selectedThemeColorPalette[ idx ]?.slug ) { case 'background': - if (colorPickerCalledBy == 'background' && customColors?.background) - selectedThemeColorPalette[idx].color = customColors?.background; + if ( + colorPickerCalledBy == 'background' && + customColors?.background + ) + selectedThemeColorPalette[ idx ].color = + customColors?.background; break; case 'primary': - if (colorPickerCalledBy == 'primary' && customColors?.primary) - selectedThemeColorPalette[idx].color = customColors?.primary; + if ( + colorPickerCalledBy == 'primary' && + customColors?.primary + ) + selectedThemeColorPalette[ idx ].color = + customColors?.primary; break; case 'secondary': - if (colorPickerCalledBy == 'secondary' && customColors?.secondary) - selectedThemeColorPalette[idx].color = customColors?.secondary; + if ( + colorPickerCalledBy == 'secondary' && + customColors?.secondary + ) + selectedThemeColorPalette[ idx ].color = + customColors?.secondary; break; case 'tertiary': - if (colorPickerCalledBy == 'tertiary' && customColors?.tertiary) - selectedThemeColorPalette[idx].color = customColors?.tertiary; + if ( + colorPickerCalledBy == 'tertiary' && + customColors?.tertiary + ) + selectedThemeColorPalette[ idx ].color = + customColors?.tertiary; break; } } - selectedGlobalStyle.settings.color.palette.theme = selectedThemeColorPalette; - setGlobalStyles(selectedGlobalStyle); + selectedGlobalStyle.settings.color.palette.theme = + selectedThemeColorPalette; updatePreviewSettings( - useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings) + useGlobalStylesOutput( + selectedGlobalStyle, + storedPreviewSettings + ) ); } } 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); + setColorPalettes( colorPalettes?.body ); let selectedColors; let selectedColorsLocal; - if (!currentData?.data?.palette?.slug === '') { + if ( ! currentData?.data?.palette?.slug === '' ) { selectedColors = currentData.data.palette; - selectedColorsLocal = stateToLocal(selectedColors); - setCustomColors(selectedColorsLocal); - setCurrentOnboardingData(currentData); - } - else { + selectedColorsLocal = stateToLocal( selectedColors ); + setCustomColors( selectedColorsLocal ); + setCurrentOnboardingData( currentData ); + } else { selectedColors = currentData.data.palette; - selectedColorsLocal = stateToLocal(selectedColors); + selectedColorsLocal = stateToLocal( selectedColors ); - if(selectedColors.slug === 'custom') { - setCustomColors(selectedColorsLocal); + if ( selectedColors.slug === 'custom' ) { + setCustomColors( selectedColorsLocal ); } - } - setSelectedColors(selectedColors); - saveThemeColorPalette(currentData?.data?.palette['slug'], colorPalettes?.body, selectedColorsLocal, selectedGlobalStyle); - setIsLoaded(true); - + } + setSelectedColors( selectedColors ); + saveThemeColorPalette( + currentData?.data?.palette.slug, + colorPalettes?.body, + selectedColorsLocal, + storedPreviewSettings + ); + setIsLoaded( true ); }; - useEffect(() => { - if (!isLoaded) getColorStylesAndPatterns(); - }, [isLoaded]); + useEffect( () => { + if ( ! isLoaded ) getColorStylesAndPatterns(); + }, [ isLoaded ] ); - const handleClick = (colorStyle) => { + const handleClick = ( colorStyle ) => { + const customColorsTemp = customColors; + for ( const custom in customColorsTemp ) + customColorsTemp[ custom ] = ''; - let customColorsTemp = customColors; - for(let custom in customColorsTemp) - customColorsTemp[custom] = ''; - - setCustomColors(customColorsTemp); - saveThemeColorPalette(colorStyle); - setSelectedColorsLocal(colorPalettes[colorStyle]); - LocalToState(colorPalettes[colorStyle], colorStyle); + setCustomColors( customColorsTemp ); + saveThemeColorPalette( colorStyle ); + setSelectedColorsLocal( colorPalettes[ colorStyle ] ); + LocalToState( colorPalettes[ colorStyle ], colorStyle ); }; - const changeCustomPickerColor = async (color) => { - let selectedColorsLocalCopy = { ...selectedColorsLocal }; - selectedColorsLocalCopy[colorPickerCalledBy] = color; + const changeCustomPickerColor = async ( color ) => { + const selectedColorsLocalCopy = { ...selectedColorsLocal }; + selectedColorsLocalCopy[ colorPickerCalledBy ] = color; saveCustomColors(); - LocalToState(selectedColorsLocalCopy, 'custom'); - setSelectedColorsLocal(selectedColorsLocalCopy); - setCustomColors(selectedColorsLocalCopy); - } + LocalToState( selectedColorsLocalCopy, 'custom' ); + setSelectedColorsLocal( selectedColorsLocalCopy ); + setCustomColors( selectedColorsLocalCopy ); + }; - const selectCustomColor = (colorType) => { - setShowColorPicker(!showColorPicker); + const selectCustomColor = ( colorType ) => { + setShowColorPicker( ! showColorPicker ); - if (!showColorPicker) - setColorPickerCalledBy(colorType); - else - setColorPickerCalledBy(''); - } + if ( ! showColorPicker ) setColorPickerCalledBy( colorType ); + else setColorPickerCalledBy( '' ); + }; async function resetColors() { const globalStyles = await getGlobalStyles(); let selectedGlobalStyle; - if (currentData?.data?.theme?.variation) { + if ( currentData?.data?.theme?.variation ) { selectedGlobalStyle = globalStyles.body.filter( - (globalStyle) => + ( globalStyle ) => globalStyle.title === currentData.data.theme.variation - )[0]; - } else { - selectedGlobalStyle = globalStyles.body[0]; + )[ 0 ]; + } else if ( globalStyles.body[ 0 ]?.id === 0 ) { + selectedGlobalStyle = globalStyles.body[ 0 ]; } - setGlobalStyles(selectedGlobalStyle); updatePreviewSettings( - useGlobalStylesOutput(selectedGlobalStyle, storedPreviewSettings) + useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); selectedColors.slug = ''; selectedColors.name = ''; - for (let colorVal in selectedColors?.color) - selectedColors.color[colorVal].color = ''; - setCustomColors(stateToLocal(selectedColors)); + for ( const colorVal in selectedColors?.color ) + selectedColors.color[ colorVal ].color = ''; + setCustomColors( stateToLocal( selectedColors ) ); currentData.data.palette = selectedColors; - setSelectedColors(selectedColors) - setCurrentOnboardingData(currentData); + setSelectedColors( selectedColors ); + setCurrentOnboardingData( currentData ); } - function buildPalettes () { - let paletteRenderedList = []; - for (const colorStyle in colorPalettes) { + function buildPalettes() { + const paletteRenderedList = []; + for ( const colorStyle in colorPalettes ) { paletteRenderedList.push( -
handleClick(colorStyle)}> -
-
-
-
+
handleClick( colorStyle ) } + > +
+
+
+
-
- {colorStyle?.charAt(0).toUpperCase() + colorStyle?.slice(1) } +
+ { colorStyle?.charAt( 0 ).toUpperCase() + + colorStyle?.slice( 1 ) }
); @@ -268,79 +327,157 @@ const DesignColors = () => { return paletteRenderedList; } - function buildCustomPalette () { - - let primaryColorTemp = customColors && customColors?.primary != '' ? customColors?.primary : selectedColorsLocal?.primary ?? '#fff'; - let secondaryColorTemp = customColors && customColors?.secondary != '' ? customColors?.secondary : selectedColorsLocal?.secondary ?? '#fff'; - let tertiaryColorTemp = customColors && customColors?.tertiary != '' ? customColors?.tertiary : selectedColorsLocal?.tertiary ?? '#fff'; + function buildCustomPalette() { + const primaryColorTemp = + customColors && customColors?.primary != '' + ? customColors?.primary + : selectedColorsLocal?.primary ?? '#fff'; + const secondaryColorTemp = + customColors && customColors?.secondary != '' + ? customColors?.secondary + : selectedColorsLocal?.secondary ?? '#fff'; + const tertiaryColorTemp = + customColors && customColors?.tertiary != '' + ? customColors?.tertiary + : selectedColorsLocal?.tertiary ?? '#fff'; return ( -
-
setIsAccordionClosed(!isAccordionClosed)}> -
SELECT CUSTOM COLORS
- {isAccordionClosed &&
+
} - {!isAccordionClosed &&
-
} +
+
+ setIsAccordionClosed( ! isAccordionClosed ) + } + > +
+ SELECT CUSTOM COLORS +
+ { isAccordionClosed && ( +
+
+ ) } + { ! isAccordionClosed && ( +
-
+ ) }
-
-
selectCustomColor('background')}> -
- {customColors?.background ?
✓
: null} -
-
Background
+
+
selectCustomColor( 'background' ) } + > +
+ { customColors?.background ? ( +
✓
+ ) : null } +
+
+ Background +
-
selectCustomColor('primary')}> -
- {customColors?.primary ? <>✓ : null} +
selectCustomColor( 'primary' ) } + > +
+ { customColors?.primary ? <>✓ : null } +
+
+ Primary
-
Primary
-
selectCustomColor('secondary')}> -
- {customColors?.secondary ? <>✓ : null} -
-
Secondary
+
selectCustomColor( 'secondary' ) } + > +
+ { customColors?.secondary ? <>✓ : null } +
+
+ Secondary +
-
selectCustomColor('tertiary')}> -
- {customColors?.tertiary ? <>✓ : null} -
-
Tertiary
+
selectCustomColor( 'tertiary' ) } + > +
+ { customColors?.tertiary ? <>✓ : null } +
+
+ Tertiary +
- {showColorPicker && ( + { showColorPicker && ( -
setShowColorPicker(false)}>X
+
setShowColorPicker( false ) } + > + X +
- )} + ) }
); } return ( -
-

{__('Color Palettes', 'wp-module-onboarding')}

- {/* {selectedColors?.slug && -
-
Reset Button
-
- } */} - { colorPalettes && buildPalettes() } - { colorPalettes && buildCustomPalette() } -
+ +
+

{ __( 'Color Palettes', 'wp-module-onboarding' ) }

+ { /* {selectedColors?.slug && +
+
Reset Button
+
+ } */ } + { colorPalettes && buildPalettes() } + { colorPalettes && buildCustomPalette() } +
+ ); }; diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index fe817eec7..db972007b 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/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 ); } diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js index 4bce0513f..8a958ae4f 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js @@ -3,6 +3,7 @@ import { useSelect, useDispatch } from '@wordpress/data'; import { useState, useEffect, useRef } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; +import { GlobalStylesProvider } from '../../../components/LivePreview'; 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; @@ -133,10 +114,9 @@ const DesignTypography = () => { ( globalStyle ) => globalStyle.title === currentData.data.theme.variation )[ 0 ]; - } else { + } else if ( globalStyles.body[ 0 ]?.id === 0 ) { selectedGlobalStyle = globalStyles.body[ 0 ]; } - setGlobalStyles( selectedGlobalStyle ); updatePreviewSettings( useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); @@ -222,17 +202,19 @@ const DesignTypography = () => { } return ( -
-

{ __( 'Font Palettes', 'wp-module-onboarding' ) }

- { /* { selectedFont && + +
+

{ __( 'Font Palettes', 'wp-module-onboarding' ) }

+ { /* { selectedFont &&
Reset Button
} */ } - { fontPalettes && buildPalettes() } - { fontPalettes && buildCustomPalette() } -
{ rerender }
-
+ { fontPalettes && buildPalettes() } + { fontPalettes && buildCustomPalette() } +
{ rerender }
+
+ ); }; export default DesignTypography; diff --git a/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js new file mode 100644 index 000000000..436da015f --- /dev/null +++ b/src/OnboardingSPA/components/LivePreview/GlobalStylesProvider/index.js @@ -0,0 +1,68 @@ +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. + * + * @return Global Style Parent + */ + +const GlobalStylesProvider = ( { 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 && storedPreviewSettings?.settings ) + selectedGlobalStyle = storedPreviewSettings; + else if ( currentData.data.theme.variation ) { + selectedGlobalStyle = globalStyles.body.filter( + ( globalStyle ) => + globalStyle.title === currentData.data.theme.variation + )[ 0 ]; + } else if ( globalStyles.body[ 0 ]?.id === 0 ) { + 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 GlobalStylesProvider; diff --git a/src/OnboardingSPA/components/LivePreview/index.js b/src/OnboardingSPA/components/LivePreview/index.js index 545215b0a..5c2acc6e2 100644 --- a/src/OnboardingSPA/components/LivePreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/index.js @@ -1,2 +1,3 @@ export { default as LivePreview } from './BlockPreview'; export { default as LivePreviewSelectableCard } from './SelectableCard'; +export { default as GlobalStylesProvider } from './GlobalStylesProvider'; diff --git a/src/OnboardingSPA/pages/Steps/DesignColors/index.js b/src/OnboardingSPA/pages/Steps/DesignColors/index.js index 72953ddd3..e0dd2de5b 100644 --- a/src/OnboardingSPA/pages/Steps/DesignColors/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignColors/index.js @@ -5,94 +5,83 @@ import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { getPatterns } from '../../../utils/api/patterns'; -import { getGlobalStyles } from '../../../utils/api/themes'; import { store as nfdOnboardingStore } from '../../../store'; -import { LivePreview } from '../../../components/LivePreview'; import CommonLayout from '../../../components/Layouts/Common'; -import { VIEW_DESIGN_COLORS } from '../../../../constants'; import { DesignStateHandler } from '../../../components/StateHandlers'; -import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; +import { + LivePreview, + GlobalStylesProvider, +} from '../../../components/LivePreview'; +import { + THEME_STATUS_NOT_ACTIVE, + VIEW_DESIGN_COLORS, +} from '../../../../constants'; const StepDesignColors = () => { const location = useLocation(); - const [isLoaded, setIsLoaded] = useState(false); - const [pattern, setPattern] = useState(); + const [ isLoaded, setIsLoaded ] = useState( false ); + const [ pattern, setPattern ] = useState(); - const isLargeViewport = useViewportMatch('medium'); - const { - currentStep, - currentData, - storedPreviewSettings, - } = useSelect((select) => { + const isLargeViewport = useViewportMatch( 'medium' ); + const { currentStep } = useSelect( ( select ) => { return { - currentStep: select(nfdOnboardingStore).getStepFromPath( + currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), - currentData: - select(nfdOnboardingStore).getCurrentOnboardingData(), - storedPreviewSettings: - select(nfdOnboardingStore).getPreviewSettings(), }; - }, []); + }, [] ); const { setDrawerActiveView, setIsDrawerOpened, setIsSidebarOpened, setIsDrawerSuppressed, - updatePreviewSettings, - } = useDispatch(nfdOnboardingStore); + } = useDispatch( nfdOnboardingStore ); - useEffect(() => { - if (isLargeViewport) { - setIsDrawerOpened(true); + useEffect( () => { + if ( isLargeViewport ) { + setIsDrawerOpened( true ); } - setIsSidebarOpened(false); - setIsDrawerSuppressed(false); - setDrawerActiveView(VIEW_DESIGN_COLORS); - }, []); + setIsSidebarOpened( false ); + setIsDrawerSuppressed( false ); + setDrawerActiveView( VIEW_DESIGN_COLORS ); + }, [] ); const getStylesAndPatterns = async () => { - const pattern = await getPatterns(currentStep.patternId, true); - const globalStyles = await getGlobalStyles(); - let selectedGlobalStyle; - if (currentData.data.theme.variation) { - selectedGlobalStyle = globalStyles.body.filter( - (globalStyle) => - globalStyle.title === currentData.data.theme.variation - )[0]; - } else { - selectedGlobalStyle = globalStyles.body[0]; + const pattern = await getPatterns( currentStep.patternId, true ); + if ( pattern?.error ) { + return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } - setPattern(pattern?.body); - setIsLoaded(true); + setPattern( pattern?.body ); + setIsLoaded( true ); }; - - useEffect(() => { - if (!isLoaded) getStylesAndPatterns(); - }, [isLoaded]); + useEffect( () => { + if ( ! isLoaded ) getStylesAndPatterns(); + }, [ isLoaded ] ); return ( - -
-
- - - + + +
+
+ + + +
+
+
+ { pattern && ( + + ) }
-
-
- {pattern && ( - - )} -
- + + ); }; diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 08912e579..73667a5ba 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -4,18 +4,20 @@ import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { getPatterns } from '../../../utils/api/patterns'; -import { getGlobalStyles } from '../../../utils/api/themes'; import { store as nfdOnboardingStore } from '../../../store'; import CommonLayout from '../../../components/Layouts/Common'; +import { getGlobalStyles, setGlobalStyles } from '../../../utils/api/themes'; import { VIEW_DESIGN_HOMEPAGE_MENU, THEME_STATUS_ACTIVE, THEME_STATUS_NOT_ACTIVE, } from '../../../../constants'; -import { LivePreviewSelectableCard } from '../../../components/LivePreview'; import HeadingWithSubHeading from '../../../components/HeadingWithSubHeading'; import { DesignStateHandler } from '../../../components/StateHandlers'; -import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; +import { + LivePreviewSelectableCard, + GlobalStylesProvider, +} from '../../../components/LivePreview'; const StepDesignHomepageMenu = () => { const homepagePatternList = [ 'homepage-1', 'homepage-2', 'homepage-3' ]; @@ -40,7 +42,6 @@ const StepDesignHomepageMenu = () => { const location = useLocation(); const [ isLoaded, setisLoaded ] = useState( false ); - const [ globalStyle, setGlobalStyle ] = useState(); const [ homepagePattern, setHomepagePattern ] = useState(); const [ selectedHomepage, setSelectedHomepage ] = useState( 0 ); @@ -103,25 +104,6 @@ const StepDesignHomepageMenu = () => { if ( homepagePatternData?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } - const globalStyles = await getGlobalStyles(); - if ( globalStyles?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - let selectedGlobalStyle; - if ( currentData.data.theme.variation ) { - selectedGlobalStyle = globalStyles.body.filter( - ( globalStyle ) => - globalStyle.title === currentData.data.theme.variation - )[ 0 ]; - } else { - selectedGlobalStyle = globalStyles.body[ 0 ]; - } - updatePreviewSettings( - useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) - ); - if ( selectedGlobalStyle ) { - setGlobalStyle( selectedGlobalStyle ); - } setHomepagePattern( refactorPatterns( homepagePatternData ) ); @@ -167,7 +149,7 @@ const StepDesignHomepageMenu = () => { blockGrammer={ homepage } viewportWidth={ 1200 } styling={ 'custom' } - previewSettings={ globalStyle } + previewSettings={ storedPreviewSettings } overlay={ false } onClick={ () => saveDataForHomepage( idx ) } /> @@ -179,17 +161,19 @@ const StepDesignHomepageMenu = () => { return ( - -
- -
- { globalStyle && buildHomepagePreviews() } + + +
+ +
+ { storedPreviewSettings && buildHomepagePreviews() } +
-
- + + ); }; diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 621514018..e0e5744c3 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -75,7 +75,7 @@ const StepDesignThemeStylesMenu = () => { if ( patternsResponse?.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 ); } diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 6b44e9889..fe7ab7200 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -15,9 +15,8 @@ import { } from '../../../../../constants'; import { store as nfdOnboardingStore } from '../../../../store'; import { getPatterns } from '../../../../utils/api/patterns'; -import { getGlobalStyles } from '../../../../utils/api/themes'; -import { useGlobalStylesOutput } from '../../../../utils/global-styles/use-global-styles-output'; import { conditionalSteps } from '../../../../data/routes/'; +import { GlobalStylesProvider } from '../../../../components/LivePreview'; import { DesignStateHandler } from '../../../../components/StateHandlers'; const StepDesignThemeStylesPreview = () => { @@ -82,22 +81,6 @@ const StepDesignThemeStylesPreview = () => { if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } - const globalStylesResponse = await getGlobalStyles(); - if ( globalStylesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } - let selectedGlobalStyle; - if ( currentData.data.theme.variation ) { - selectedGlobalStyle = globalStylesResponse.body.filter( - ( globalStyle ) => - globalStyle.title === currentData.data.theme.variation - )[ 0 ]; - } else { - selectedGlobalStyle = globalStylesResponse.body[ 0 ]; - } - updatePreviewSettings( - useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) - ); setPattern( patternsResponse?.body ); setIsLoaded( true ); }; @@ -189,46 +172,48 @@ const StepDesignThemeStylesPreview = () => { return ( - -
- - - { __( - 'Customize Colors & Fonts?', - 'wp-module-onboarding' - ) } - + + +
+ + { __( - 'Check to customize in the next few steps (or leave empty and use the Site Editor later)', + 'Customize Colors & Fonts?', 'wp-module-onboarding' ) } + + { __( + 'Check to customize in the next few steps (or leave empty and use the Site Editor later)', + 'wp-module-onboarding' + ) } + - -
- } - checked={ customize } - onChange={ () => handleCheckbox( ! customize ) } - /> -
-
-
- - - -
-
-
- { pattern && ( - + } + checked={ customize } + onChange={ () => handleCheckbox( ! customize ) } /> - ) } -
- +
+
+
+ + + +
+
+
+ { pattern && storedPreviewSettings && ( + + ) } +
+ + ); }; diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 7b2061b03..8da31e330 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -4,14 +4,17 @@ import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { getPatterns } from '../../../utils/api/patterns'; -import { getGlobalStyles } from '../../../utils/api/themes'; import { store as nfdOnboardingStore } from '../../../store'; -import { LivePreview } from '../../../components/LivePreview'; import CommonLayout from '../../../components/Layouts/Common'; import { THEME_STATUS_NOT_ACTIVE, VIEW_DESIGN_TYPOGRAPHY, } from '../../../../constants'; +import { DesignStateHandler } from '../../../components/StateHandlers'; +import { + LivePreview, + GlobalStylesProvider, +} from '../../../components/LivePreview'; const StepDesignTypography = () => { const location = useLocation(); @@ -52,10 +55,6 @@ const StepDesignTypography = () => { if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); } - const globalStylesResponse = await getGlobalStyles(); - if ( globalStylesResponse?.error ) { - return updateThemeStatus( THEME_STATUS_NOT_ACTIVE ); - } setPattern( patternsResponse?.body ); setIsLoaded( true ); }; @@ -65,25 +64,29 @@ const StepDesignTypography = () => { }, [ isLoaded ] ); return ( - -
-
- - - -
-
-
- { pattern && ( - - ) } -
- + + + +
+
+ + + +
+
+
+ { pattern && ( + + ) } +
+ + + ); }; diff --git a/src/OnboardingSPA/utils/api/themes.js b/src/OnboardingSPA/utils/api/themes.js index 0a01ebf44..06abec7d3 100644 --- a/src/OnboardingSPA/utils/api/themes.js +++ b/src/OnboardingSPA/utils/api/themes.js @@ -18,9 +18,23 @@ const init = () => { } ); }; -const getGlobalStyles = async () => { +const getGlobalStyles = async ( variations = false ) => { return await resolve( - apiFetch( { url: onboardingRestURL( 'themes/variations' ) } ).then() + apiFetch( { + url: onboardingRestURL( + 'themes/variations&variations=' + variations + ), + } ).then() + ); +}; + +const setGlobalStyles = async ( data ) => { + return await resolve( + apiFetch( { + url: onboardingRestURL( 'themes/variations' ), + method: 'POST', + data, + } ).then() ); }; @@ -50,4 +64,11 @@ const getThemeColors = async ( theme ) => { ); }; -export { init, getGlobalStyles, getThemeStatus, getThemeColors, getThemeFonts }; +export { + init, + getGlobalStyles, + setGlobalStyles, + getThemeStatus, + getThemeColors, + getThemeFonts, +};