From 9cf476feaead928387cb0e1fd8bba14ce21291bb Mon Sep 17 00:00:00 2001 From: mr-vara Date: Tue, 30 Jan 2024 18:10:09 +0530 Subject: [PATCH] Reset the customized fonts and colors in SiteGen Preview (#433) * Add Rest button to customize sidebar * Fix issue with updated homepages.data * Fix issues with lint * Fix lint --- .../Customize/DesignColorsPanel/index.js | 563 ++++++++++-------- .../Customize/DesignFontsPanel/index.js | 389 ++++++------ .../Sidebar/components/Customize/Sidebar.js | 11 +- .../SiteGen/Editor/Sidebar/Customize/index.js | 24 +- 4 files changed, 550 insertions(+), 437 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js index 40616e91b..007ee4e87 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignColorsPanel/index.js @@ -1,3 +1,5 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { forwardRef, useImperativeHandle } from 'react'; import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { PanelBody, PanelRow, Button } from '@wordpress/components'; @@ -7,287 +9,358 @@ import CustomColorPalette from './CustomColorPalette'; import './stylesheet.scss'; import { store as nfdOnboardingStore } from '../../../../../store'; import { __ } from '@wordpress/i18n'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { cloneDeep } from 'lodash'; -const DesignColorsPanel = ( { - baseClassName = 'nfd-onboarding-sidebar--customize__design-colors-panel', - heading, -} ) => { - const { currentData, customizeSidebarData } = useSelect( ( select ) => { - return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - customizeSidebarData: - select( nfdOnboardingStore ).getCustomizeSidebarData(), +let defaultGlobalData = null; +const DesignColorsPanel = forwardRef( + ( + { + baseClassName = 'nfd-onboarding-sidebar--customize__design-colors-panel', + heading, + }, + ref + ) => { + const resetToDefaultColors = () => { + if ( isEditingCustomColors ) { + setSelectedPalette( 0 ); + setSelectedColor( colors[ 0 ] ); + setShowCustomColors( false ); + } + const slug = currentData.sitegen?.homepages?.active?.slug; + if ( slug ) { + const defaultDataToReset = defaultGlobalData[ slug ]; + + if ( defaultDataToReset ) { + const updatedData = { + ...currentData, + sitegen: { + ...currentData.sitegen, + homepages: { + ...currentData.sitegen.homepages, + active: { + ...currentData.sitegen.homepages.active, + color: { + ...currentData.sitegen.homepages.active + .color, + palette: [ + ...defaultDataToReset.color.palette, + ], + }, + }, + }, + }, + }; + setSelectedColor( null ); + setSelectedPalette( null ); + setCurrentOnboardingData( updatedData ); + } + } }; - } ); - const colorPalettes = customizeSidebarData?.colorPalettes; - const palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map( - ( [ , color ] ) => ( { - name: __( 'Custom', 'wp-module-onboarding' ), - color, - } ) - ); + useImperativeHandle( ref, () => ( { + resetToDefaultColors, + } ) ); + + const { currentData, customizeSidebarData } = useSelect( ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + customizeSidebarData: + select( nfdOnboardingStore ).getCustomizeSidebarData(), + }; + } ); + + useEffect( () => { + if ( ! defaultGlobalData ) { + defaultGlobalData = cloneDeep( + currentData.sitegen.homepages.data + ); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ currentData ] ); - const palettes = []; + const colorPalettes = customizeSidebarData?.colorPalettes; + const palettePrimaryColors = Object.entries( colorPalettes[ 0 ] ).map( + ( [ , color ] ) => ( { + name: __( 'Custom', 'wp-module-onboarding' ), + color, + } ) + ); - colorPalettes.forEach( ( palette ) => { - palettes.push( { - primary: palette?.primary, - secondary: palette?.secondary || palette?.base, - tertiary: palette?.tertiary || palette?.primary, + const palettes = []; + + colorPalettes.forEach( ( palette ) => { + palettes.push( { + primary: palette?.primary, + secondary: palette?.secondary || palette?.base, + tertiary: palette?.tertiary || palette?.primary, + } ); } ); - } ); - const [ colors ] = useState( palettes ); - const [ selectedColor, setSelectedColor ] = useState( null ); - const [ showCustomColors, setShowCustomColors ] = useState( false ); - const [ isEditingCustomColors, setIsEditingCustomColors ] = - useState( false ); - const [ selectedCustomColors, setSelectedCustomColors ] = useState( false ); - const [ selectedPalette, setSelectedPalette ] = useState( null ); - const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' ); - const [ showColorPicker, setShowColorPicker ] = useState( false ); - const customPaletteId = colors.length - 1; + const [ colors ] = useState( palettes ); + const [ selectedColor, setSelectedColor ] = useState( null ); + const [ showCustomColors, setShowCustomColors ] = useState( false ); + const [ isEditingCustomColors, setIsEditingCustomColors ] = + useState( false ); + const [ selectedCustomColors, setSelectedCustomColors ] = + useState( false ); + const [ selectedPalette, setSelectedPalette ] = useState( null ); + const [ colorPickerCalledBy, setColorPickerCalledBy ] = useState( '' ); + const [ showColorPicker, setShowColorPicker ] = useState( false ); + const customPaletteId = colors.length - 1; - const handleApplyCustomColors = () => { - setSelectedCustomColors( true ); - setIsEditingCustomColors( false ); - setSelectedPalette( customPaletteId ); - colors[ selectedPalette ] = selectedColor; - }; + const handleApplyCustomColors = () => { + setSelectedCustomColors( true ); + setIsEditingCustomColors( false ); + setSelectedPalette( customPaletteId ); + colors[ selectedPalette ] = selectedColor; + }; - const handleEditCustomColors = () => { - setSelectedPalette( customPaletteId ); - setSelectedColor( colors[ customPaletteId ] ); - setIsEditingCustomColors( true ); - }; + const handleEditCustomColors = () => { + setSelectedPalette( customPaletteId ); + setSelectedColor( colors[ customPaletteId ] ); + setIsEditingCustomColors( true ); + }; - const handleColorPickerButton = ( colorType ) => { - setShowColorPicker( ! showColorPicker ); - setColorPickerCalledBy( ! showColorPicker ? colorType : '' ); - }; + const handleColorPickerButton = ( colorType ) => { + setShowColorPicker( ! showColorPicker ); + setColorPickerCalledBy( ! showColorPicker ? colorType : '' ); + }; - const handleColorPicker = ( color ) => { - const updatedColor = { ...selectedColor }; - updatedColor[ colorPickerCalledBy ] = color; - setSelectedColor( updatedColor ); - }; + const handleColorPicker = ( color ) => { + const updatedColor = { ...selectedColor }; + updatedColor[ colorPickerCalledBy ] = color; + setSelectedColor( updatedColor ); + }; - const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); - const convertColorSchema = ( inputObject ) => { - const outputArray = []; + const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + const convertColorSchema = ( inputObject ) => { + const outputArray = []; - for ( const key in inputObject ) { - if ( Object.prototype.hasOwnProperty.call( inputObject, key ) ) { - const slug = key.replace( /_/g, '-' ); - const color = inputObject[ key ]; - const name = key - .split( '_' ) - .map( - ( word ) => - word.charAt( 0 ).toUpperCase() + word.slice( 1 ) - ) - .join( ' ' ); + for ( const key in inputObject ) { + if ( + Object.prototype.hasOwnProperty.call( inputObject, key ) + ) { + const slug = key.replace( /_/g, '-' ); + const color = inputObject[ key ]; + const name = key + .split( '_' ) + .map( + ( word ) => + word.charAt( 0 ).toUpperCase() + word.slice( 1 ) + ) + .join( ' ' ); - outputArray.push( { - slug, - color, - name, - } ); + outputArray.push( { + slug, + color, + name, + } ); + } } - } - return outputArray; - }; + return outputArray; + }; - const handleUpdatePreviewSettings = () => { - const slug = currentData.sitegen?.homepages?.active?.slug; - if ( ! slug ) { - return; - } + const handleUpdatePreviewSettings = () => { + const slug = currentData.sitegen?.homepages?.active?.slug; + if ( ! slug ) { + return; + } - colorPalettes[ selectedPalette ].primary = selectedColor.primary; - if ( colorPalettes[ selectedPalette ].secondary ) { - colorPalettes[ selectedPalette ].secondary = - selectedColor.secondary; - } else { - colorPalettes[ selectedPalette ].base = selectedColor.secondary; - } + colorPalettes[ selectedPalette ].primary = selectedColor.primary; + if ( colorPalettes[ selectedPalette ].secondary ) { + colorPalettes[ selectedPalette ].secondary = + selectedColor.secondary; + } else { + colorPalettes[ selectedPalette ].base = selectedColor.secondary; + } - colorPalettes[ selectedPalette ].tertiary = selectedColor.tertiary; + colorPalettes[ selectedPalette ].tertiary = selectedColor.tertiary; - currentData.sitegen.homepages.data[ slug ].color.palette = - convertColorSchema( colorPalettes[ selectedPalette ] ); - currentData.sitegen.homepages.active.color.palette = convertColorSchema( - colorPalettes[ selectedPalette ] - ); - setCurrentOnboardingData( currentData ); - }; + currentData.sitegen.homepages.data[ slug ].color.palette = + convertColorSchema( colorPalettes[ selectedPalette ] ); + currentData.sitegen.homepages.active.color.palette = + convertColorSchema( colorPalettes[ selectedPalette ] ); + setCurrentOnboardingData( currentData ); + }; - useEffect( () => { - if ( selectedColor !== null && selectedPalette !== null ) { - handleUpdatePreviewSettings(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ selectedColor, selectedPalette ] ); + useEffect( () => { + if ( selectedColor !== null && selectedPalette !== null ) { + handleUpdatePreviewSettings(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ selectedColor, selectedPalette ] ); - const renderCustomColorsPalette = () => { - return ( -
+ const renderCustomColorsPalette = () => { + return (
-
- - { __( 'CUSTOM COLORS', 'wp-module-onboarding' ) } - -
- -
+
+
+ + { __( + 'CUSTOM COLORS', + 'wp-module-onboarding' + ) } + +
+ +
-
- +
+ +
-
- ); - }; + ); + }; - const renderCustomColorPicker = () => { - return ( -
-
- { __( 'CUSTOM COLORS', 'wp-module-onboarding' ) } -
-
- { [ 'primary', 'secondary', 'tertiary' ].map( - ( colorType, index ) => ( - - ) - ) } -
+ const renderCustomColorPicker = () => { + return (
- - -
+ + +
- { showColorPicker && ( - - ) } - - ); - }; + { showColorPicker && ( + + ) } + + ); + }; - const handlePickYourOwnColors = () => { - setSelectedPalette( customPaletteId ); - setSelectedColor( colors[ customPaletteId ] ); - setShowCustomColors( true ); - if ( ! selectedCustomColors ) { - setIsEditingCustomColors( true ); - } - }; + const handlePickYourOwnColors = () => { + setSelectedPalette( customPaletteId ); + setSelectedColor( colors[ customPaletteId ] ); + setShowCustomColors( true ); + if ( ! selectedCustomColors ) { + setIsEditingCustomColors( true ); + } + }; - const handleCancelCustomColors = () => { - if ( ! selectedCustomColors ) { - setShowCustomColors( false ); - } else { - setIsEditingCustomColors( false ); - } - }; + const handleCancelCustomColors = () => { + if ( ! selectedCustomColors ) { + setShowCustomColors( false ); + } else { + setIsEditingCustomColors( false ); + } + }; - return ( - - -
-
-

- { heading } -

+ return ( + + +
- { colors.map( ( elem, idx ) => ( - - ) ) } +

+ { heading } +

+
+ { colors.map( ( elem, idx ) => ( + + ) ) } +
-
- - - { ! showCustomColors && ( -
- -
- ) } - { showCustomColors && - isEditingCustomColors && - renderCustomColorPicker() } - { showCustomColors && - ! isEditingCustomColors && - renderCustomColorsPalette() } - - - ); -}; + + + { ! showCustomColors && ( +
+ +
+ ) } + { showCustomColors && + isEditingCustomColors && + renderCustomColorPicker() } + { showCustomColors && + ! isEditingCustomColors && + renderCustomColorsPalette() } + + + ); + } +); export default DesignColorsPanel; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js index fe7577832..04b991008 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/DesignFontsPanel/index.js @@ -1,3 +1,5 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { forwardRef, useImperativeHandle } from 'react'; import { useState, useEffect } from '@wordpress/element'; import { useSelect, useDispatch } from '@wordpress/data'; import { PanelBody, PanelRow, Button, Dashicon } from '@wordpress/components'; @@ -185,65 +187,28 @@ const CustomFontsDisplay = ( {
); -const DesignFontsPanel = ( { - baseClassName = 'nfd-onboarding-sidebar--customize__design-fonts-panel', -} ) => { - const { currentData, customizeSidebarData } = useSelect( ( select ) => { - return { - customizeSidebarData: - select( nfdOnboardingStore ).getCustomizeSidebarData(), - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), +const DesignFontsPanel = forwardRef( + ( + { + baseClassName = 'nfd-onboarding-sidebar--customize__design-fonts-panel', + }, + ref + ) => { + const resetToDefaultFonts = () => { + setStylesOfCurrentData(); + setSelectedGroup( null ); + setShowCustomFonts( false ); + setSelectedCustomFont( null ); }; - } ); - - const designStyles = customizeSidebarData?.designStyles; - const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); - - 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 ); - const [ customFont, setCustomFont ] = useState( { - headings: '', - body: '', - } ); - const [ selectedCustomFont, setSelectedCustomFont ] = useState( null ); - const [ isEditingCustomFont, setIsEditingCustomFont ] = useState( false ); - - const fontsHeading = designStyles?.map( ( style ) => style.font_heading ); - const fontsContent = designStyles?.map( ( style ) => style.font_content ); - - const handleUpdatePreviewSettings = () => { - const slug = currentData.sitegen?.homepages?.active?.slug; - if ( ! slug ) { - return; - } - - let headings; - let body; - if ( selectedGroup === 'custom' ) { - headings = `var(--wp--preset--font-family--${ customFont.headings })`; - body = `var(--wp--preset--font-family--${ customFont.body })`; - } else { - headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`; - body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].body })`; - } - currentData.sitegen.homepages.data[ slug ] = { - ...currentData.sitegen.homepages.data[ slug ], - styles: { + const setStylesOfCurrentData = ( heading = '', body = '' ) => { + const slug = currentData.sitegen?.homepages?.active?.slug; + const styles = { blocks: [ { 'core/heading': { typography: { - fontFamily: headings, + fontFamily: heading, }, }, 'core/body': { @@ -253,158 +218,208 @@ const DesignFontsPanel = ( { }, }, ], - }, + }; + + if ( slug ) { + currentData.sitegen.homepages.data[ slug ] = { + ...currentData.sitegen.homepages.data[ slug ], + styles, + }; + currentData.sitegen.homepages.active = { + ...currentData.sitegen.homepages.active, + styles, + }; + setCurrentOnboardingData( currentData ); + } }; - currentData.sitegen.homepages.active = { - ...currentData.sitegen.homepages.active, - styles: { - blocks: [ - { - 'core/heading': { - typography: { - fontFamily: headings, - }, - }, - 'core/body': { - typography: { - fontFamily: body, - }, - }, - }, - ], - }, + + useImperativeHandle( ref, () => ( { + resetToDefaultFonts, + } ) ); + + const { currentData, customizeSidebarData } = useSelect( ( select ) => { + return { + customizeSidebarData: + select( nfdOnboardingStore ).getCustomizeSidebarData(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + }; + } ); + + const designStyles = customizeSidebarData?.designStyles; + const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + + 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 ); + const [ customFont, setCustomFont ] = useState( { + headings: '', + body: '', + } ); + const [ selectedCustomFont, setSelectedCustomFont ] = useState( null ); + const [ isEditingCustomFont, setIsEditingCustomFont ] = + useState( false ); + + 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 = `var(--wp--preset--font-family--${ customFont.headings })`; + body = `var(--wp--preset--font-family--${ customFont.body })`; + } else { + headings = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].headings })`; + body = `var(--wp--preset--font-family--${ fontGroups[ selectedGroup ].body })`; + } + setStylesOfCurrentData( headings, body ); }; - setCurrentOnboardingData( currentData ); - }; - useEffect( () => { - if ( selectedGroup !== null && selectedGroup !== undefined ) { - handleUpdatePreviewSettings(); - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [ selectedGroup, customFont ] ); + useEffect( () => { + if ( selectedGroup !== null && selectedGroup !== undefined ) { + handleUpdatePreviewSettings(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [ selectedGroup, customFont ] ); - const fontOptions = [ ...new Set( [ ...fontsHeading, ...fontsContent ] ) ]; + const fontOptions = [ + ...new Set( [ ...fontsHeading, ...fontsContent ] ), + ]; - const handleGroupSelect = ( groupId ) => { - if ( groupId !== 'custom' && selectedCustomFont ) { - setShowCustomFonts( false ); - } - setSelectedGroup( groupId ); - }; + const handleGroupSelect = ( groupId ) => { + if ( groupId !== 'custom' && selectedCustomFont ) { + setShowCustomFonts( false ); + } + setSelectedGroup( groupId ); + }; - const handleSelectYourOwnFonts = () => { - setShowCustomFonts( true ); - if ( ! selectedCustomFont ) { + const handleSelectYourOwnFonts = () => { + setShowCustomFonts( true ); + if ( ! selectedCustomFont ) { + setIsEditingCustomFont( true ); + } + }; + + const handleEditCustomFont = () => { setIsEditingCustomFont( true ); - } - }; + }; - const handleEditCustomFont = () => { - setIsEditingCustomFont( true ); - }; + const handleCancelCustomFonts = () => { + if ( ! selectedCustomFont ) { + setShowCustomFonts( false ); + } else { + setIsEditingCustomFont( false ); + } + }; - const handleCancelCustomFonts = () => { - if ( ! selectedCustomFont ) { - setShowCustomFonts( false ); - } else { + const handleApplyCustomFonts = () => { + setSelectedGroup( null ); + setSelectedCustomFont( customFont ); setIsEditingCustomFont( false ); - } - }; + setSelectedGroup( 'custom' ); + }; - const handleApplyCustomFonts = () => { - setSelectedGroup( null ); - setSelectedCustomFont( customFont ); - setIsEditingCustomFont( false ); - setSelectedGroup( 'custom' ); - }; + const renderFontOptions = () => { + return fontOptions.map( ( font ) => ( + + ) ); + }; - const renderFontOptions = () => { - return fontOptions.map( ( font ) => ( - - ) ); - }; + const renderFontGroups = () => { + return fontGroups.map( ( group ) => ( + + ) ); + }; - const renderFontGroups = () => { - return fontGroups.map( ( group ) => ( - - ) ); - }; + const renderCustomFontsForm = () => { + return ( + + ); + }; - const renderCustomFontsForm = () => { - return ( - - ); - }; + const renderCustomFontsDisplay = () => { + return ( + + ); + }; - const renderCustomFontsDisplay = () => { return ( - - ); - }; - - return ( - - -
-
-

- - { __( 'Fonts', 'wp-module-onboarding' ) } - -

-
-
{ renderFontGroups() }
-
- - - - { ! showCustomFonts && ( + +
- +

+ + { __( 'Fonts', 'wp-module-onboarding' ) } + +

+
+
{ renderFontGroups() }
- ) } - { showCustomFonts && - isEditingCustomFont && - renderCustomFontsForm() } - { showCustomFonts && - ! isEditingCustomFont && - renderCustomFontsDisplay() } - - - ); -}; + + + + { ! showCustomFonts && ( +
+ +
+ ) } + { showCustomFonts && + isEditingCustomFont && + renderCustomFontsForm() } + { showCustomFonts && + ! isEditingCustomFont && + renderCustomFontsDisplay() } + + + ); + } +); export default DesignFontsPanel; diff --git a/src/OnboardingSPA/components/Sidebar/components/Customize/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/Customize/Sidebar.js index beb46f5e9..591d67d38 100644 --- a/src/OnboardingSPA/components/Sidebar/components/Customize/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/Customize/Sidebar.js @@ -1,3 +1,5 @@ +// eslint-disable-next-line import/no-extraneous-dependencies +import { useRef } from 'react'; import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components'; import { Fragment, memo, Suspense } from '@wordpress/element'; import { closeSmall } from '@wordpress/icons'; @@ -9,6 +11,7 @@ import { SIDEBAR_SLOTFILL_PREFIX } from '../../../../../constants'; import SidebarSkeleton from './Skeleton/SidebarSkeleton'; const CustomizeSidebar = () => { + const sidebarRef = useRef(); const { currentStep } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getCurrentStep(), @@ -20,6 +23,11 @@ const CustomizeSidebar = () => { const closeSideBar = () => { setIsSidebarOpened( false ); }; + + const resetCustomization = () => { + sidebarRef.current.resetCustomizationCallback(); + }; + return ( { 'wp-module-onboarding' ) } > +