From 1252fbd782126f7233cfc173079ec5117981d0fd Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 8 May 2023 17:46:10 +0530 Subject: [PATCH 1/3] optimize global style calculations and whenever possible, live previews as well --- .../Drawer/DrawerPanel/DesignColors.js | 110 ++++++---- .../Drawer/DrawerPanel/DesignHeaderMenu.js | 71 ++++--- .../DrawerPanel/DesignThemeStylesPreview.js | 58 ++--- .../Drawer/DrawerPanel/DesignTypography.js | 3 + .../LivePreview/BlockPreview/auto.js | 198 ++++++++++-------- .../LivePreview/BlockPreview/index.js | 31 +-- .../LivePreview/GlobalStylesProvider/index.js | 12 +- .../LivePreview/LivePreviewSkeleton/index.js | 2 - .../pages/Steps/DesignColors/index.js | 14 +- .../pages/Steps/DesignHeaderMenu/index.js | 1 - .../pages/Steps/DesignHomepageMenu/index.js | 38 ++-- .../Steps/DesignThemeStyles/Menu/index.js | 4 +- .../Steps/DesignThemeStyles/Preview/index.js | 1 - .../pages/Steps/DesignTypography/index.js | 1 - .../pages/Steps/SitePages/index.js | 22 +- 15 files changed, 308 insertions(+), 258 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js index d42e6e8ea..cba375ba6 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignColors.js @@ -6,7 +6,6 @@ import { useState, useEffect, useRef } from '@wordpress/element'; import { store as nfdOnboardingStore } from '../../../store'; import { getGlobalStyles, getThemeColors } from '../../../utils/api/themes'; import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-styles-output'; -import { GlobalStylesProvider } from '../../LivePreview'; import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants'; import Animate from '../../Animate'; @@ -42,10 +41,10 @@ const DesignColors = () => { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); - function stateToLocal( selectedColors ) { - if ( selectedColors ) { + function stateToLocal( selectedColorPalette ) { + if ( selectedColorPalette ) { const selectedColorsLocalTemp = {}; - selectedColors?.color?.forEach( ( color ) => { + selectedColorPalette?.color?.forEach( ( color ) => { selectedColorsLocalTemp[ color.slug ] = color.color; } ); @@ -85,6 +84,9 @@ const DesignColors = () => { selectedColorsLocalTemp = selectedColors, globalStylesTemp = storedPreviewSettings ) { + if ( selectedColors?.slug === colorStyle ) { + return true; + } const isCustomStyle = colorStyle === 'custom'; const selectedGlobalStyle = globalStylesTemp; const selectedThemeColorPalette = @@ -94,8 +96,8 @@ const DesignColors = () => { const slug = selectedThemeColorPalette[ idx ]?.slug; if ( isCustomStyle && - selectedColorsLocalTemp?.[ slug ] != '' && - selectedColorsLocalTemp?.[ slug ] != undefined + selectedColorsLocalTemp?.[ slug ] !== '' && + selectedColorsLocalTemp?.[ slug ] !== undefined ) selectedThemeColorPalette[ idx ].color = selectedColorsLocalTemp[ slug ]; @@ -118,6 +120,7 @@ const DesignColors = () => { selectedGlobalStyle.settings.color.palette = selectedThemeColorPalette; updatePreviewSettings( + // eslint-disable-next-line react-hooks/rules-of-hooks useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings @@ -128,13 +131,9 @@ const DesignColors = () => { } } - function findInCustomColors( - slugName, - colorPickerCalledBy, - storedPreviewSettingsTemp = storedPreviewSettings - ) { + function findInCustomColors( slugName ) { const selectedThemeColorPalette = - storedPreviewSettingsTemp?.settings?.color?.palette; + storedPreviewSettings?.settings?.color?.palette; const res = selectedThemeColorPalette.findIndex( ( { slug } ) => slug === slugName ); @@ -170,10 +169,7 @@ const DesignColors = () => { customColors[ colorPickerCalledBy ] !== undefined ) { selectedThemeColorPalette[ - findInCustomColors( - variant, - colorPickerCalledBy - ) + findInCustomColors( variant ) ].color = customColors[ colorPickerCalledBy ]; } } ); @@ -183,6 +179,7 @@ const DesignColors = () => { selectedGlobalStyle.settings.color.palette = selectedThemeColorPalette; updatePreviewSettings( + // eslint-disable-next-line react-hooks/rules-of-hooks useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings @@ -193,35 +190,37 @@ const DesignColors = () => { const getColorStylesAndPatterns = async () => { const globalStyles = await getGlobalStyles(); - const colorPalettes = await getThemeColors(); - if ( colorPalettes?.error ) { + const colorPaletteResponse = await getThemeColors(); + if ( colorPaletteResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } if ( globalStyles?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setColorPalettes( colorPalettes?.body.tailored ); - setCustomColorsMap( colorPalettes?.body[ 'custom-picker-grouping' ] ); - let selectedColors; - let selectedColorsLocal; + setColorPalettes( colorPaletteResponse?.body.tailored ); + setCustomColorsMap( + colorPaletteResponse?.body[ 'custom-picker-grouping' ] + ); + let selectedColorsTemp; + let selectedColorsLocalTemp; if ( ! currentData?.data?.palette?.slug === '' ) { - selectedColors = currentData.data.palette; - selectedColorsLocal = stateToLocal( selectedColors ); + selectedColorsTemp = currentData.data.palette; + selectedColorsLocalTemp = stateToLocal( selectedColors ); setCustomColors( selectedColorsLocal ); setCurrentOnboardingData( currentData ); } else { - selectedColors = currentData.data.palette; - selectedColorsLocal = stateToLocal( selectedColors ); + selectedColorsTemp = currentData.data.palette; + selectedColorsLocalTemp = stateToLocal( selectedColors ); - if ( selectedColors.slug === 'custom' ) { + if ( selectedColorsTemp.slug === 'custom' ) { setCustomColors( selectedColorsLocal ); } } - setSelectedColors( selectedColors ); + setSelectedColors( selectedColorsTemp ); saveThemeColorPalette( currentData?.data?.palette.slug, colorPalettes?.body.tailored, - selectedColorsLocal, + selectedColorsLocalTemp, globalStyles?.body[ 0 ] ); setIsLoaded( true ); @@ -288,6 +287,7 @@ const DesignColors = () => { selectedGlobalStyle = globalStyles.body[ 0 ]; } updatePreviewSettings( + // eslint-disable-next-line react-hooks/rules-of-hooks useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) ); selectedColors.slug = ''; @@ -302,17 +302,19 @@ const DesignColors = () => { } function buildPalettes() { - const paletteRenderedList = []; - for ( const colorStyle in colorPalettes ) { - paletteRenderedList.push( + return Object.keys( colorPalettes ).map( ( colorStyle, idx ) => { + return (
handleClick( colorStyle ) } + role="button" + tabIndex={ idx + 1 } + onClick={ () => handleClick( colorStyle ) } + onKeyDown={ () => handleClick( colorStyle ) } >
{
); - } - - return paletteRenderedList; + } ); } function isCustomColorActive() { for ( const custom in customColors ) - if ( customColors[ custom ] != '' ) return true; + if ( customColors[ custom ] !== '' ) return true; return false; } @@ -366,12 +366,18 @@ const DesignColors = () => { customColors && customColors?.tertiary !== '' ? customColors?.tertiary : selectedColorsLocal?.tertiary ?? defaultColor; + const paletteCount = Object.keys( colorPalettes ).length; return (
+ role="button" + tabIndex={ 0 } + onClick={ () => + setIsAccordionClosed( ! isAccordionClosed ) + } + onKeyDown={ () => setIsAccordionClosed( ! isAccordionClosed ) } > @@ -397,7 +403,10 @@ const DesignColors = () => { >
selectCustomColor( 'base' ) } + onClick={ () => selectCustomColor( 'base' ) } + onKeyDown={ () => selectCustomColor( 'base' ) } + role="button" + tabIndex={ paletteCount + 1 } >
{
selectCustomColor( 'primary' ) } + onClick={ () => selectCustomColor( 'primary' ) } + onKeyDown={ () => selectCustomColor( 'primary' ) } + role="button" + tabIndex={ paletteCount + 2 } >
{
selectCustomColor( 'secondary' ) } + onClick={ () => selectCustomColor( 'secondary' ) } + onKeyDown={ () => selectCustomColor( 'secondary' ) } + role="button" + tabIndex={ paletteCount + 3 } >
{
selectCustomColor( 'tertiary' ) } + onClick={ () => selectCustomColor( 'tertiary' ) } + onKeyDown={ () => selectCustomColor( 'tertiary' ) } + role="button" + tabIndex={ paletteCount + 4 } >
{
Reset
@@ -490,6 +511,9 @@ const DesignColors = () => {
setShowColorPicker( false ) } + role="button" + tabIndex={ 0 } + onKeyDown={ () => setShowColorPicker( false ) } > X
diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 821655848..75250d800 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -3,13 +3,13 @@ import { useState, useEffect } from '@wordpress/element'; import { useLocation } from 'react-router-dom'; import { store as nfdOnboardingStore } from '../../../store'; import { getPatterns } from '../../../utils/api/patterns'; -import { LivePreviewSkeleton, LivePreviewSelectableCard } from '../../../components/LivePreview'; +import { + LivePreviewSkeleton, + LivePreviewSelectableCard, +} from '../../../components/LivePreview'; import { setFlow } from '../../../utils/api/flow'; -import { - THEME_STATUS_ACTIVE, - THEME_STATUS_INIT, -} from '../../../../constants'; +import { THEME_STATUS_ACTIVE, THEME_STATUS_INIT } from '../../../../constants'; const DesignHeaderMenu = () => { const headerMenuSlugs = [ @@ -28,28 +28,39 @@ const DesignHeaderMenu = () => { const [ selectedPattern, setSelectedPattern ] = useState( '' ); const location = useLocation(); - const { currentStep, currentData, themeStatus, storedPreviewSettings } = useSelect( ( select ) => { - return { - currentStep: select( nfdOnboardingStore ).getStepFromPath( - location.pathname - ), - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - themeStatus: select( nfdOnboardingStore ).getThemeStatus(), - storedPreviewSettings: select( nfdOnboardingStore ).getStepPreviewData(), - }; - }, [] ); - - const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = useDispatch( nfdOnboardingStore ); + const { currentStep, currentData, themeStatus, storedPreviewSettings } = + useSelect( ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getStepFromPath( + location.pathname + ), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + storedPreviewSettings: + select( nfdOnboardingStore ).getStepPreviewData(), + }; + }, [] ); + + const { setCurrentOnboardingData, updateThemeStatus, setHeaderMenuData } = + useDispatch( nfdOnboardingStore ); const getPatternsData = async () => { + if ( + ! currentData.data.partHeader || + currentData.data.partHeader === '' + ) { + currentData.data.partHeader = headerMenuSlugs[ 0 ]; + setCurrentOnboardingData( currentData ); + } + setSelectedPattern( currentData.data.partHeader ); + const headerMenuPreviewResponse = await getPatterns( currentStep.patternId ); if ( headerMenuPreviewResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setHeaderMenuPreviewData( headerMenuPreviewResponse.body ); const headerMenuPatterns = []; headerMenuPreviewResponse?.body.forEach( ( pageParts ) => { @@ -57,16 +68,9 @@ const DesignHeaderMenu = () => { headerMenuPatterns.push( pageParts ); } } ); - setPatterns( headerMenuPatterns ); - if ( - ! currentData.data.partHeader || - currentData.data.partHeader === '' - ) { - currentData.data.partHeader = headerMenuSlugs[ 0 ]; - setCurrentOnboardingData( currentData ); - } - setSelectedPattern( currentData.data.partHeader ); + setHeaderMenuPreviewData( headerMenuPreviewResponse.body ); + setPatterns( headerMenuPatterns ); let [ pageContent, headerContent, pagePreview ] = [ '', '', '' ]; headerMenuPreviewResponse.body.forEach( ( pageParts ) => { @@ -89,7 +93,8 @@ const DesignHeaderMenu = () => { const handleClick = async ( idx ) => { if ( document.getElementsByClassName( 'nfd-onboard-content' ) ) { - document.getElementsByClassName( 'nfd-onboard-content' )[ 0 ] + document + .getElementsByClassName( 'nfd-onboard-content' )[ 0 ] .scrollIntoView( { behavior: 'smooth', } ); @@ -120,7 +125,9 @@ const DesignHeaderMenu = () => { return ( { return ( { updateThemeStatus, } = useDispatch( nfdOnboardingStore ); - const getStylesAndPatterns = async () => { - const patternResponse = await getPatterns( - currentStep.patternId, - true - ); - if ( patternResponse?.error ) { - return updateThemeStatus( THEME_STATUS_INIT ); + const scrollSelectionIntoView = () => { + if ( + document.getElementsByClassName( + 'theme-styles-preview--drawer__list__item__title-bar--selected' + ) + ) { + document + .getElementsByClassName( + 'theme-styles-preview--drawer__list__item__title-bar--selected' + )[ 0 ] + .scrollIntoView( { + behavior: 'smooth', + block: 'center', + } ); } + }; + + const getStylesAndPatterns = async () => { const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setPattern( patternResponse?.body ); - setGlobalStyles( globalStylesResponse?.body ); let selectedGlobalStyle; if ( currentData.data.theme.variation ) { selectedGlobalStyle = currentData.data.theme.variation; @@ -66,20 +71,18 @@ const DesignThemeStylesPreview = () => { setCurrentOnboardingData( currentData ); } setSelectedStyle( selectedGlobalStyle ); - if ( - document.getElementsByClassName( - 'theme-styles-preview--drawer__list__item__title-bar--selected' - ) - ) { - document - .getElementsByClassName( - 'theme-styles-preview--drawer__list__item__title-bar--selected' - )[ 0 ] - .scrollIntoView( { - behavior: 'smooth', - block: 'center', - } ); + + const patternResponse = await getPatterns( + currentStep.patternId, + true + ); + if ( patternResponse?.error ) { + return updateThemeStatus( THEME_STATUS_INIT ); } + + setPattern( patternResponse?.body ); + setGlobalStyles( globalStylesResponse?.body ); + scrollSelectionIntoView(); }; useEffect( () => { @@ -90,6 +93,9 @@ const DesignThemeStylesPreview = () => { const handleClick = ( idx ) => { const selectedGlobalStyle = globalStyles[ idx ]; + if ( selectedStyle === selectedGlobalStyle.title ) { + return true; + } updatePreviewSettings( // eslint-disable-next-line react-hooks/rules-of-hooks useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js index 8f5813473..01cf6889a 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignTypography.js @@ -67,6 +67,9 @@ const DesignTypography = () => { }, [ isLoaded, themeStatus ] ); const handleClick = async ( fontStyle ) => { + if ( selectedFont === fontStyle ) { + return true; + } setSelectedFont( fontStyle ); // Changes the Global Styles to Recompute css properties diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/auto.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/auto.js index f522e43dc..3e61e98cb 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/auto.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/auto.js @@ -1,23 +1,32 @@ import { Disabled } from '@wordpress/components'; import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose'; -import { BlockList } from '@wordpress/block-editor'; -import { __unstableIframe as Iframe } from '@wordpress/block-editor'; -import { __unstableEditorStyles as EditorStyles } from '@wordpress/block-editor'; -import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '@wordpress/block-editor'; +import { useMemo } from '@wordpress/element'; +import { + BlockList, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __unstableIframe as Iframe, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __unstableEditorStyles as EditorStyles, + // eslint-disable-next-line @wordpress/no-unsafe-wp-apis + __unstablePresetDuotoneFilter as PresetDuotoneFilter, +} from '@wordpress/block-editor'; // This is used to avoid rendering the block list if the sizes change. let MemoizedBlockList; const MAX_HEIGHT = 6000; -function AutoBlockPreview( { +function ScaledBlockPreview( { viewportWidth, - __experimentalPadding, - __experimentalMinHeight, settings, + containerWidth, + minHeight, + additionalStyles = [], } ) { - const [ containerResizeListener, { width: containerWidth } ] = - useResizeObserver(); + if ( ! viewportWidth ) { + viewportWidth = containerWidth; + } + const [ contentResizeListener, { height: contentHeight } ] = useResizeObserver(); const { styles, assets, duotone } = { @@ -27,95 +36,108 @@ function AutoBlockPreview( { }; // Avoid scrollbars for pattern previews. - let editorStyles; - if ( styles ) { - editorStyles = [ - ...styles, - { - css: 'body{height:auto;overflow:hidden;}', - __unstableType: 'presets', - }, - ]; - } else { - editorStyles = styles; - } + const editorStyles = useMemo( () => { + if ( styles ) { + return [ + ...styles, + { + css: 'body{height:auto;overflow:hidden;border:none;padding:0;}', + __unstableType: 'presets', + }, + ...additionalStyles, + ]; + } + + return styles; + }, [ styles, additionalStyles ] ); - const svgFilters = [ - ...( duotone?.default ?? [] ), - ...( duotone?.theme ?? [] ), - ]; + const svgFilters = useMemo( () => { + return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ]; + }, [ duotone ] ); // Initialize on render instead of module top level, to avoid circular dependency issues. MemoizedBlockList = MemoizedBlockList || pure( BlockList ); const scale = containerWidth / viewportWidth; return ( -
- { containerResizeListener } - MAX_HEIGHT ? MAX_HEIGHT * scale : undefined, + minHeight, + } } + > + - -
+ { contentResizeListener } + { + /* Filters need to be rendered before children to avoid Safari rendering issues. */ + svgFilters.map( ( preset ) => ( + + ) ) + } + + + ); } -export default AutoBlockPreview; +export default function AutoBlockPreview( props ) { + const [ containerResizeListener, { width: containerWidth } ] = + useResizeObserver(); + + return ( + <> +
+ { containerResizeListener } +
+
+ { containerWidth && ( + + ) } +
+ + ); +} diff --git a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js index 9a3c793d3..7c29930e2 100644 --- a/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js +++ b/src/OnboardingSPA/components/LivePreview/BlockPreview/index.js @@ -8,21 +8,6 @@ import { useGlobalStylesOutput } from '../../../utils/global-styles/use-global-s import { store as nfdOnboardingStore } from '../../../store'; import Animate from '../../Animate'; -/** - * Renders themed WordPress block grammer. - * [Note] Please do not remove any commented code, this will be used later to update our preview - * - * @param root0 - * @param root0.blockGrammer - * @param root0.viewportWidth - * @param root0.styling - * @param root0.previewSettings - * @param root0.setIsLoadingParent - * @param root0.skeletonLoadingTime - * @property {string} blockGrammer WordPress block grammer. - * @property {number} viewportWidth Set viewport width for the AutoHeightBlockPreview component. - * @property {string} styling The type of styling to be applied (small, large, custom). - */ const BlockPreview = ( { blockGrammer, viewportWidth = 1300, @@ -63,7 +48,12 @@ const BlockPreview = ( { useEffect( () => { if ( previewSettings ) { setSettings( - useGlobalStylesOutput( previewSettings, storedPreviewSettings ) + // eslint-disable-next-line react-hooks/rules-of-hooks + useGlobalStylesOutput( + previewSettings, + storedPreviewSettings, + 'block-preview' + ) ); } else { setSettings( storedPreviewSettings ); @@ -71,7 +61,9 @@ const BlockPreview = ( { }, [] ); useEffect( () => { - setBlocks( parse( blockGrammer ) ); + if ( blockGrammer ) { + setBlocks( parse( blockGrammer ) ); + } }, [ blockGrammer ] ); useEffect( () => { @@ -99,7 +91,7 @@ const BlockPreview = ( { return (
{ loading && } - { settings && ( + { blocks && settings && ( { } else if ( globalStyles.body[ 0 ]?.id === 0 ) { selectedGlobalStyle = globalStyles.body[ 0 ]; } + updatePreviewSettings( + // eslint-disable-next-line react-hooks/rules-of-hooks + useGlobalStylesOutput( + selectedGlobalStyle, + storedPreviewSettings + ) + ); } if ( selectedGlobalStyle ) { @@ -65,10 +72,7 @@ const GlobalStylesProvider = ( { children } ) => { } ) ); } - updatePreviewSettings( - // eslint-disable-next-line react-hooks/rules-of-hooks - useGlobalStylesOutput( selectedGlobalStyle, storedPreviewSettings ) - ); + setIsLoaded( true ); }; diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index 037c93240..1c70a8619 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -33,7 +33,6 @@ const LivePreviewSkeleton = ( { dummyPreviews.push( { const location = useLocation(); const [ pattern, setPattern ] = useState(); - const { currentData, currentStep, themeStatus } = useSelect( ( select ) => { + const { currentStep, themeStatus } = useSelect( ( select ) => { return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), currentStep: select( nfdOnboardingStore ).getStepFromPath( location.pathname ), @@ -41,11 +39,14 @@ const StepDesignColors = () => { }, [] ); const getStylesAndPatterns = async () => { - const pattern = await getPatterns( currentStep.patternId, true ); - if ( pattern?.error ) { + const patternResponse = await getPatterns( + currentStep.patternId, + true + ); + if ( patternResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setPattern( pattern?.body ); + setPattern( patternResponse?.body ); }; useEffect( () => { @@ -65,7 +66,6 @@ const StepDesignColors = () => {
{ ! pattern && ( diff --git a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js index 3230f985b..43fd37b22 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHeaderMenu/index.js @@ -48,7 +48,6 @@ const StepDesignHeaderMenu = () => {
{ ! pattern && ( diff --git a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js index 847aee2a8..9d9e11ad9 100644 --- a/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignHomepageMenu/index.js @@ -48,25 +48,19 @@ const StepDesignHomepageMenu = () => { const [ homepagePattern, setHomepagePattern ] = useState(); const [ selectedHomepage, setSelectedHomepage ] = useState( 0 ); - const { - currentStep, - currentData, - storedPreviewSettings, - themeStatus, - themeVariations, - } = useSelect( ( select ) => { - return { - currentStep: select( nfdOnboardingStore ).getStepFromPath( - location.pathname - ), - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - storedPreviewSettings: - select( nfdOnboardingStore ).getPreviewSettings(), - themeStatus: select( nfdOnboardingStore ).getThemeStatus(), - themeVariations: select( nfdOnboardingStore ).getStepPreviewData(), - }; - }, [] ); + const { currentStep, currentData, themeStatus, themeVariations } = + useSelect( ( select ) => { + return { + currentStep: select( nfdOnboardingStore ).getStepFromPath( + location.pathname + ), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + themeStatus: select( nfdOnboardingStore ).getThemeStatus(), + themeVariations: + select( nfdOnboardingStore ).getStepPreviewData(), + }; + }, [] ); const { setDrawerActiveView, @@ -111,12 +105,11 @@ const StepDesignHomepageMenu = () => { async function getHomepagePatternsData() { const homepagePatternDataTemp = await getPatterns( - currentStep.patternId, + currentStep.patternId ); if ( homepagePatternDataTemp?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } - setHomepagePattern( refactorPatterns( homepagePatternDataTemp ) ); if ( currentData?.data.sitePages.homepage !== '' ) { setSelectedHomepage( @@ -131,6 +124,8 @@ const StepDesignHomepageMenu = () => { }; setCurrentOnboardingData( currentData ); } + + setHomepagePattern( refactorPatterns( homepagePatternDataTemp ) ); } function saveDataForHomepage( idx ) { @@ -159,7 +154,6 @@ const StepDesignHomepageMenu = () => { blockGrammer={ homepage } viewportWidth={ 1200 } styling={ 'custom' } - previewSettings={ storedPreviewSettings } overlay={ false } onClick={ () => saveDataForHomepage( idx ) } /> diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js index 15fb19a3a..a17c0e0e6 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Menu/index.js @@ -83,13 +83,15 @@ const StepDesignThemeStylesMenu = () => { if ( patternsResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } + const globalStylesResponse = await getGlobalStyles( true ); if ( globalStylesResponse?.error ) { return updateThemeStatus( THEME_STATUS_INIT ); } + + setSelectedStyle( currentData.data.theme.variation ); setPattern( patternsResponse?.body ); setGlobalStyles( globalStylesResponse?.body ); - setSelectedStyle( currentData.data.theme.variation ); }; useEffect( () => { diff --git a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js index 6a62e8179..fdaeb133a 100644 --- a/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignThemeStyles/Preview/index.js @@ -146,7 +146,6 @@ const StepDesignThemeStylesPreview = () => {
{ ! pattern && ( diff --git a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js index 9170603ab..a19e50176 100644 --- a/src/OnboardingSPA/pages/Steps/DesignTypography/index.js +++ b/src/OnboardingSPA/pages/Steps/DesignTypography/index.js @@ -66,7 +66,6 @@ const StepDesignTypography = () => {
{ ! pattern && ( diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index abe22d73e..45af27333 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -56,7 +56,6 @@ const StepSitePages = () => { return updateThemeStatus( THEME_STATUS_INIT ); } if ( sitePagesResponse?.body ) { - setSitePages( sitePagesResponse.body ); if ( currentData.data.sitePages?.other ) { if ( currentData.data.sitePages.other === false ) { setCheckedPages( [] ); @@ -65,23 +64,24 @@ const StepSitePages = () => { flowDataToState( currentData.data.sitePages.other ) ); } else { - const checkedPages = sitePagesResponse.body.reduce( - ( checkedPages, sitePage ) => { + const selectedPages = sitePagesResponse.body.reduce( + ( pages, sitePage ) => { return sitePage?.selected && sitePage.selected - ? checkedPages.concat( sitePage.slug ) - : checkedPages; + ? pages.concat( sitePage.slug ) + : pages; }, [] ); - handleCheckedPages( checkedPages, sitePagesResponse.body ); + handleCheckedPages( selectedPages, sitePagesResponse.body ); } } + setSitePages( sitePagesResponse.body ); } }; - const stateToFlowData = ( selectedPages, sitePages ) => { - return sitePages !== false - ? sitePages?.reduce( ( newSitePages, sitePage ) => { + const stateToFlowData = ( selectedPages, pages ) => { + return pages !== false + ? pages?.reduce( ( newSitePages, sitePage ) => { return selectedPages.includes( sitePage.slug ) ? newSitePages.concat( { slug: sitePage.slug, @@ -98,11 +98,11 @@ const StepSitePages = () => { } ); }; - const handleCheckedPages = ( selectedPages, sitePages = false ) => { + const handleCheckedPages = ( selectedPages, pages = false ) => { setCheckedPages( selectedPages ); currentData.data.sitePages.other = selectedPages.length !== 0 - ? stateToFlowData( selectedPages, sitePages ) + ? stateToFlowData( selectedPages, pages ) : false; setCurrentOnboardingData( currentData ); }; From bc36d84f32b1ed6dacbc3e49d666b3044fd5a07e Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Mon, 8 May 2023 17:55:55 +0530 Subject: [PATCH 2/3] fix lint --- .../LivePreview/LivePreviewSkeleton/index.js | 62 ++++++++++++------- 1 file changed, 39 insertions(+), 23 deletions(-) diff --git a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js index 1c70a8619..06f32f1c9 100644 --- a/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js +++ b/src/OnboardingSPA/components/LivePreview/LivePreviewSkeleton/index.js @@ -1,16 +1,21 @@ import { useState, useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; -import { LivePreviewSelectableCard, LivePreviewSelectableCardWithInfo } from '..'; +import { + LivePreviewSelectableCard, + LivePreviewSelectableCardWithInfo, +} from '..'; /** * Renders Skeletons for Live Previews. * - * @property {number} count The number of Live Previews to be shown - * @property {number} watch The variable to be awaited for - * @property {string} callback The Render function in parent to be called - * @property {string} className The class name for the Live Preview - * @property {number} viewportWidth Viewport Width for the Live Preview - * + * @param {Object} root0 Props. + * @param {number} root0.count The number of Live Previews to be shown + * @param {number} root0.watch The variable to be awaited for + * @param {string} root0.callback The Render function in parent to be called + * @param {string} root0.className The class name for the Live Preview + * @param {number} root0.viewportWidth Viewport Width for the Live Preview + * @param {boolean} root0.isWithCard Whether the skeleton is a Card */ const LivePreviewSkeleton = ( { count, @@ -20,11 +25,10 @@ const LivePreviewSkeleton = ( { viewportWidth, isWithCard = false, } ) => { - const MAX_ANIMATION_TIME = 600000; - const [rerender, doRerender] = useState(0); + const [ rerender, doRerender ] = useState( 0 ); - useEffect(() => doRerender(1), [watch]); + useEffect( () => doRerender( 1 ), [ watch ] ); const buildDummyPreviews = () => { const dummyPreviews = []; @@ -46,26 +50,38 @@ const LivePreviewSkeleton = ( { const buildDummyPreviewsWithInfo = () => { const dummyPreviews = []; - for (let i = 0; i < count; i++) { + for ( let i = 0; i < count; i++ ) { dummyPreviews.push( + key={ i } + className={ className } + viewportWidth={ 1200 } + styling={ 'custom' } + title={ __( 'Loading…', 'wp-module-onboarding' ) } + description={ __( 'Loading…', 'wp-module-onboarding' ) } + /> ); } return dummyPreviews; }; - return !watch ? (isWithCard ? buildDummyPreviewsWithInfo() : buildDummyPreviews()) : - <> - {watch ?
{rerender}
: null} - {callback()} - ; + const build = () => { + if ( isWithCard ) { + return buildDummyPreviewsWithInfo(); + } + return buildDummyPreviews(); + }; + + return ! watch ? ( + build() + ) : ( + <> + { watch ? ( +
{ rerender }
+ ) : null } + { callback() } + + ); }; export default LivePreviewSkeleton; From c091354386568e54cf0de5e784e9e9001f92f2f6 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Fri, 12 May 2023 15:06:21 +0530 Subject: [PATCH 3/3] remove unnecessary check in site pages, add extra check before scrolling into view, prevent header menu API call when same selection made --- .../components/Drawer/DrawerPanel/DesignHeaderMenu.js | 4 ++++ .../Drawer/DrawerPanel/DesignThemeStylesPreview.js | 5 ++++- src/OnboardingSPA/pages/Steps/SitePages/index.js | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js index 75250d800..ba020515a 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignHeaderMenu.js @@ -102,6 +102,10 @@ const DesignHeaderMenu = () => { const chosenPattern = patterns[ idx ]; + if ( chosenPattern.slug === selectedPattern ) { + return true; + } + setSelectedPattern( chosenPattern.slug ); currentData.data.partHeader = chosenPattern.slug; setCurrentOnboardingData( currentData ); diff --git a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js index b0833b2e4..580d3abc4 100644 --- a/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js +++ b/src/OnboardingSPA/components/Drawer/DrawerPanel/DesignThemeStylesPreview.js @@ -44,7 +44,10 @@ const DesignThemeStylesPreview = () => { if ( document.getElementsByClassName( 'theme-styles-preview--drawer__list__item__title-bar--selected' - ) + ) && + document.getElementsByClassName( + 'theme-styles-preview--drawer__list__item__title-bar--selected' + )[ 0 ] ) { document .getElementsByClassName( diff --git a/src/OnboardingSPA/pages/Steps/SitePages/index.js b/src/OnboardingSPA/pages/Steps/SitePages/index.js index 45af27333..f8266ebf8 100644 --- a/src/OnboardingSPA/pages/Steps/SitePages/index.js +++ b/src/OnboardingSPA/pages/Steps/SitePages/index.js @@ -66,7 +66,7 @@ const StepSitePages = () => { } else { const selectedPages = sitePagesResponse.body.reduce( ( pages, sitePage ) => { - return sitePage?.selected && sitePage.selected + return sitePage?.selected ? pages.concat( sitePage.slug ) : pages; },