From 98b56b679be18c51c67b3a1a8f85777ae8748333 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 7 Dec 2023 07:42:20 +0530 Subject: [PATCH 1/3] Add Previews Sidebar --- .../SitegenEditorPatterns/Sidebar.js | 321 ++++++++++++++++-- .../SitegenEditorPatterns/stylesheet.scss | 100 ++++++ src/OnboardingSPA/components/Sidebar/index.js | 4 +- .../components/TabPanelHover/index.js | 160 ++++----- src/OnboardingSPA/data/sidebars/index.js | 1 - .../steps/SiteGen/Editor/Header/index.js | 17 +- .../SiteGen/Editor/Header/stylesheet.scss | 1 + .../SiteGen/Editor/Sidebar/Patterns/index.js | 17 - .../steps/SiteGen/Editor/index.js | 14 +- .../steps/SiteGen/Preview/index.js | 8 +- src/OnboardingSPA/styles/app.scss | 1 + 11 files changed, 510 insertions(+), 134 deletions(-) delete mode 100644 src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Patterns/index.js diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js index 9535bcce0..1dd519836 100644 --- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js @@ -1,5 +1,11 @@ import { Fill, PanelBody, PanelHeader, Button } from '@wordpress/components'; -import { Fragment, memo, Suspense } from '@wordpress/element'; +import { + Fragment, + memo, + Suspense, + useState, + useEffect, +} from '@wordpress/element'; import { closeSmall } from '@wordpress/icons'; import { useDispatch, useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -9,47 +15,316 @@ import { SIDEBAR_SITEGEN_EDITOR_PATTERNS, SIDEBAR_SLOTFILL_PREFIX, } from '../../../../../constants'; +import TabPanelHover from '../../../TabPanelHover'; + +import { isEmpty } from 'lodash'; +import { getHomepages } from '../../../../data/sitegen/homepages/homepages'; +import { getColorPalettes } from '../../../../data/sitegen/sitemeta/siteMeta'; +import { getGlobalStyles } from '../../../../utils/api/themes'; +import { LivePreview } from '../../../LivePreview'; + +import { cloneDeep } from 'lodash'; const SitegenEditorPatternsSidebar = () => { - const { currentStep } = useSelect( ( select ) => { + const [ homepages, setHomepages ] = useState(); + const [ activeHomepage, setActiveHomepage ] = useState(); + const [ globalStyles, setGlobalStyles ] = useState( [] ); + const [ activeTab, setActiveTab ] = useState(); + const { currentStep, currentData } = useSelect( ( select ) => { return { currentStep: select( nfdOnboardingStore ).getCurrentStep(), + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), }; } ); - const { setIsSidebarOpened } = useDispatch( nfdOnboardingStore ); + const { setIsSidebarOpened, setCurrentOnboardingData } = + useDispatch( nfdOnboardingStore ); const closeSideBar = () => { setIsSidebarOpened( false ); }; + + const handlePreview = ( slug ) => { + if ( ! ( slug in homepages ) ) { + return false; + } + const homepagesCopy = { ...homepages }; + homepagesCopy[ slug ].active = ! homepagesCopy[ slug ].active; + currentData.sitegen.homepages.active = homepagesCopy[ slug ]; + setActiveHomepage( homepagesCopy[ slug ] ); + setHomepages( homepagesCopy ); + setCurrentOnboardingData( currentData ); + }; + + const handleFavorite = ( slug ) => { + if ( ! ( slug in homepages ) ) { + return false; + } + + const homepagesCopy = { ...homepages }; + + homepagesCopy[ slug ].favorite = ! homepagesCopy[ slug ].favorite; + setHomepages( homepagesCopy ); + currentData.sitegen.homepages.data = homepagesCopy; + setCurrentOnboardingData( currentData ); + }; + + const loadData = async () => { + let homepagesObject = {}; + if ( isEmpty( currentData.sitegen.homepages.data ) ) { + const homepagesResponse = getHomepages(); + const colorsResponse = getColorPalettes(); + homepagesResponse.forEach( ( homepage, index ) => { + if ( ! homepage?.color ) { + const paletteKeys = Object.keys( colorsResponse ); + const paletteIndex = + paletteKeys[ index % paletteKeys.length ]; + homepage.color = { + slug: paletteIndex, + palette: colorsResponse[ paletteIndex ], + }; + } + } ); + currentData.sitegen.homepages.data = homepagesResponse; + setCurrentOnboardingData( currentData ); + + homepagesResponse.forEach( ( homepage ) => { + homepagesObject[ homepage.slug ] = homepage; + } ); + } else { + homepagesObject = currentData.sitegen.homepages.data; + } + const globalStyles = await getGlobalStyles(); + setGlobalStyles( globalStyles.body ); + setHomepages( homepagesObject ); + setActiveHomepage( currentData.sitegen.homepages.active ); + }; + + useEffect( () => { + loadData(); + }, [] ); + + useEffect( () => { + setActiveTab( { + name: 'All Versions', + title: ( +
+

All Versions

+
+ ), + content: + activeTab && + homepages && + activeHomepage && + Object.keys( homepages ).map( ( homepage ) => { + const data = homepages[ homepage ]; + const newPreviewSettings = cloneDeep( globalStyles[ 0 ] ); + newPreviewSettings.settings.color.palette = + data.color.palette; + return ( +
handlePreview( data.slug ) } + > + +
+
+ handleFavorite( data.slug ) + } + >
+

+ { data.title } +

+
+
+ ); + } ), + } ); + }, [ homepages, activeHomepage ] ); + return ( - + - }> - + }> +
- + +

All Versions

+
+ ), + content: + activeTab && + homepages && + activeHomepage && + Object.keys( homepages ).map( + ( homepage ) => { + const data = + homepages[ homepage ]; + const newPreviewSettings = + cloneDeep( + globalStyles[ 0 ] + ); + newPreviewSettings.settings.color.palette = + data.color.palette; + return ( +
+ handlePreview( + data.slug + ) + } + > + +
+
+ handleFavorite( + data.slug + ) + } + >
+

+ { + data.title + } +

+
+
+ ); + } + ), + }, + { + name: 'Favorites', + title: ( +
+
+

+ Favorites +

+ +
+ ), + content: + activeTab && + homepages && + activeHomepage && + Object.keys( homepages ).map( + ( homepage ) => { + const data = + homepages[ homepage ]; + if ( ! data.favorite ) { + return; + } + const newPreviewSettings = + cloneDeep( + globalStyles[ 0 ] + ); + newPreviewSettings.settings.color.palette = + data.color.palette; + return ( +
+ handlePreview( + data.slug + ) + } + > + +

+ { data.title } +

+
+ ); + } + ), + }, + ] } + callback={ setActiveTab } + > - { currentStep?.sidebars?.LearnMore && - currentStep?.sidebars?.LearnMore.SidebarComponents.map( - ( SidebarComponent, index ) => { - return ( - - - - ); - } - ) } + { activeTab && + homepages && + activeHomepage && + activeTab.content } diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss index e69de29bb..fc6be9ca4 100644 --- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss +++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss @@ -0,0 +1,100 @@ +.nfd-onboarding-sidebar { + &--sitegen-editor-patterns { + .components-panel__header { + padding: 0px; + } + padding: 0 !important; + border: none; + overflow-y: auto; + width: 100%; + height: 100%; + + background-color: #fff; + + &__header { + + &__icon { + width: 24px; + height: 24px; + display: flex; + align-items: center; + justify-content: center; + margin-left: 20px; + } + + &__tab-panel { + font-size: 13px; + width: 300px; + &__favorites-tab { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &__icon { + background-image: var(--sitegen-favorite-filled); + width: 20px; + height: 21px; + + margin-right: 8px; + } + } + + &__versions-tab { + font-size: 13px; + &__preview-container { + height: 175px; + margin: 24px; + + .live-preview { + + &__container { + + &-custom { + width: 100%; + overflow: hidden; + height: 140px; + border-radius: 8px; + cursor: pointer; + border: 1px solid #cccccc; + + &__highlighted { + width: 100%; + overflow: hidden; + height: 140px; + border-radius: 8px; + cursor: pointer; + border: 3px solid #0060F0; + } + } + } + } + + &__context { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + color: #000; + + &__icon { + background-image: var(--sitegen-favorite); + height: 21px; + width: 20px; + margin-right: 12px; + cursor: pointer; + + &__fill { + background-image: var(--sitegen-favorite-filled); + } + } + } + } + } + + } + } + } +} + + diff --git a/src/OnboardingSPA/components/Sidebar/index.js b/src/OnboardingSPA/components/Sidebar/index.js index d2f17ee60..8e69732c1 100644 --- a/src/OnboardingSPA/components/Sidebar/index.js +++ b/src/OnboardingSPA/components/Sidebar/index.js @@ -23,8 +23,8 @@ const Sidebar = () => { { sidebars.map( ( sidebar ) => { return ( - - + { sidebar?.sidebar && } + { sidebar?.menu && } ); } ) } diff --git a/src/OnboardingSPA/components/TabPanelHover/index.js b/src/OnboardingSPA/components/TabPanelHover/index.js index 18fde34e1..0d01337d1 100644 --- a/src/OnboardingSPA/components/TabPanelHover/index.js +++ b/src/OnboardingSPA/components/TabPanelHover/index.js @@ -16,87 +16,93 @@ import { useInstanceId } from '@wordpress/compose'; import { NavigableMenu } from './navigableContainer'; import { Button } from '@wordpress/components'; -const noop = () => { }; +const noop = () => {}; -const TabButton = ({ tabId, onClick, children, selected, ...rest }) => ( - +const TabButton = ( { tabId, onClick, children, selected, ...rest } ) => ( + ); -export default function TabPanelHover({ - className, - children, - tabs, - initialTabName, - orientation = 'horizontal', - activeClass = 'is-active', - notActiveClass = 'is-not-active', - onSelect = noop, -}) { - const instanceId = useInstanceId(TabPanelHover, 'tab-panel'); - const [selected, setSelected] = useState(null); +export default function TabPanelHover( { + className, + children, + tabs, + initialTabName, + orientation = 'horizontal', + activeClass = 'is-active', + notActiveClass = 'is-not-active', + callback, + onSelect = noop, +} ) { + const instanceId = useInstanceId( TabPanelHover, 'tab-panel' ); + const [ selected, setSelected ] = useState( null ); - const handleMouseOver = (tabKey) => { - setSelected(tabKey); - onSelect(tabKey); - }; + const handleMouseOver = ( tabKey ) => { + setSelected( tabKey ); + onSelect( tabKey ); + const selectedTab = find( tabs, { name: tabKey } ); + if ( typeof callback === 'function' ) { + callback( selectedTab ); + } + }; - const onNavigate = (childIndex, child) => { - child.click(); - }; - const selectedTab = find(tabs, { name: selected }); - const selectedId = `${instanceId}-${selectedTab?.name ?? 'none'}`; + const onNavigate = ( childIndex, child ) => { + child.click(); + }; + const selectedTab = find( tabs, { name: selected } ); + const selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`; - useEffect(() => { - const newSelectedTab = find(tabs, { name: selected }); - if (!newSelectedTab) { - setSelected( - initialTabName || (tabs.length > 0 ? tabs[0].name : null) - ); - } - }, [tabs]); + useEffect( () => { + const newSelectedTab = find( tabs, { name: selected } ); + if ( ! newSelectedTab ) { + setSelected( + initialTabName || ( tabs.length > 0 ? tabs[ 0 ].name : null ) + ); + } + }, [ tabs ] ); - return ( -
- - {tabs.map((tab) => ( - - {tab.title} - - ))} - - {selectedTab && ( -
- {children(selectedTab)} -
- )} -
- ); -} \ No newline at end of file + return ( +
+ + { tabs.map( ( tab ) => ( + + { tab.title } + + ) ) } + + { selectedTab && ( +
+ { children && children( selectedTab ) } +
+ ) } +
+ ); +} diff --git a/src/OnboardingSPA/data/sidebars/index.js b/src/OnboardingSPA/data/sidebars/index.js index f45973fc9..49fca537f 100644 --- a/src/OnboardingSPA/data/sidebars/index.js +++ b/src/OnboardingSPA/data/sidebars/index.js @@ -27,7 +27,6 @@ export const sidebars = [ }, { id: SIDEBAR_SITEGEN_EDITOR_PATTERNS, - menu: SitegenEditorPatternsSidebar, sidebar: SitegenEditorPatternsSidebar, enabled: true, }, diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js index 6f55d84fe..c856b61ed 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/index.js @@ -4,6 +4,7 @@ import { HEADER_END, HEADER_SITEGEN, HEADER_START, + SIDEBAR_SITEGEN_EDITOR_PATTERNS, } from '../../../../../constants'; import { Icon, chevronDown, chevronRight, home } from '@wordpress/icons'; import { store as nfdOnboardingStore } from '../../../../store'; @@ -16,7 +17,11 @@ import { getRandom } from '../../../../data/sitegen/homepages/homepages'; const StepSiteGenEditorHeader = () => { const [ homepage, setHomepage ] = useState(); - const { setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); + const { + setCurrentOnboardingData, + setSidebarActiveView, + setIsSidebarOpened, + } = useDispatch( nfdOnboardingStore ); const { currentData } = useSelect( ( select ) => { return { currentData: @@ -38,6 +43,11 @@ const StepSiteGenEditorHeader = () => { setCurrentOnboardingData( currentData ); }; + const handleViewAll = () => { + setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS ); + setIsSidebarOpened( true ); + }; + const generateChildThemes = () => {}; useEffect( () => { @@ -100,7 +110,10 @@ const StepSiteGenEditorHeader = () => {

Rename

-

+

View All

diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss index c068666e5..24f241eb1 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Editor/Header/stylesheet.scss @@ -69,6 +69,7 @@ padding: 0px 9px 0px 9px; width: 240px; color: var(--nfd-onboarding-secondary); + cursor: pointer; } &__view-all { diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Patterns/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Patterns/index.js deleted file mode 100644 index 821ce88b4..000000000 --- a/src/OnboardingSPA/steps/SiteGen/Editor/Sidebar/Patterns/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import { useDispatch } from '@wordpress/data'; - -import { useEffect } from '@wordpress/element'; - -import { store as nfdOnboardingStore } from '../../../../../store'; -import { SIDEBAR_SITEGEN_EDITOR_PATTERNS } from '../../../../../../constants'; - -const Patterns = () => { - const { setSidebarActiveView } = useDispatch( nfdOnboardingStore ) - - useEffect(() => { - setSidebarActiveView( SIDEBAR_SITEGEN_EDITOR_PATTERNS ); - }, []) - return
Hello World
-} - -export default Patterns; \ No newline at end of file diff --git a/src/OnboardingSPA/steps/SiteGen/Editor/index.js b/src/OnboardingSPA/steps/SiteGen/Editor/index.js index 04d91cb2d..39b1725b4 100644 --- a/src/OnboardingSPA/steps/SiteGen/Editor/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Editor/index.js @@ -4,7 +4,10 @@ import { useEffect, useState } from '@wordpress/element'; import { useDispatch, useSelect } from '@wordpress/data'; import { store as nfdOnboardingStore } from '../../../store'; -import { HEADER_SITEGEN } from '../../../../constants'; +import { + HEADER_SITEGEN, + SIDEBAR_SITEGEN_EDITOR_PATTERNS, +} from '../../../../constants'; import { LivePreview } from '../../../components/LivePreview'; import { getGlobalStyles } from '../../../utils/api/themes'; @@ -16,12 +19,8 @@ const StepSiteGenEditor = () => { const [ colorPalette, setColorPalette ] = useState(); const [ globalStyles, setGlobalStyles ] = useState( [] ); const [ reRender, setReRender ] = useState( false ); - const { - setIsHeaderEnabled, - setSidebarActiveView, - setHeaderActiveView, - setDrawerActiveView, - } = useDispatch( nfdOnboardingStore ); + const { setIsHeaderEnabled, setHeaderActiveView, setDrawerActiveView } = + useDispatch( nfdOnboardingStore ); const { currentData } = useSelect( ( select ) => { return { @@ -32,7 +31,6 @@ const StepSiteGenEditor = () => { const loadData = async () => { setIsHeaderEnabled( true ); - setSidebarActiveView( false ); setHeaderActiveView( HEADER_SITEGEN ); setDrawerActiveView( false ); const homepage = currentData.sitegen.homepages.active; diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index 0fdea5b0b..2a667695d 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -42,10 +42,6 @@ const SiteGenPreview = () => { } ); const loadData = async () => { - setIsHeaderEnabled( true ); - setSidebarActiveView( false ); - setHeaderActiveView( HEADER_SITEGEN ); - setDrawerActiveView( false ); let homepagesObject = {}; if ( isEmpty( currentData.sitegen.homepages.data ) ) { const homepagesResponse = getHomepages(); @@ -76,6 +72,10 @@ const SiteGenPreview = () => { }; useEffect( () => { + setIsHeaderEnabled( true ); + setSidebarActiveView( false ); + setHeaderActiveView( HEADER_SITEGEN ); + setDrawerActiveView( false ); loadData(); }, [] ); diff --git a/src/OnboardingSPA/styles/app.scss b/src/OnboardingSPA/styles/app.scss index c99563ad3..9bf0ef0b1 100644 --- a/src/OnboardingSPA/styles/app.scss +++ b/src/OnboardingSPA/styles/app.scss @@ -60,6 +60,7 @@ @import "../components/Loaders/SiteGenLoader/stylesheet"; @import "../components/Footer/stylesheet"; @import "../components/LivePreview/SiteGenCard/stylesheet.scss"; +@import "../components/Sidebar/components/SitegenEditorPatterns/stylesheet.scss"; // CSS for Pages @import "../steps/BasicInfo/stylesheet"; From e0bf252749db0eea34917fc8c19f6dec4639f685 Mon Sep 17 00:00:00 2001 From: arunshenoy99 Date: Thu, 7 Dec 2023 12:31:36 +0530 Subject: [PATCH 2/3] Lint Fixes --- .../SitegenEditorPatterns/Sidebar.js | 62 +++++- .../SitegenEditorPatterns/stylesheet.scss | 198 +++++++++--------- .../components/TabPanelHover/index.js | 3 +- .../steps/SiteGen/Editor/Header/index.js | 10 +- .../steps/SiteGen/Editor/index.js | 5 +- src/OnboardingSPA/styles/app.scss | 4 +- 6 files changed, 165 insertions(+), 117 deletions(-) diff --git a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js index 259e71841..0ac5b4e3e 100644 --- a/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js +++ b/src/OnboardingSPA/components/Sidebar/components/SitegenEditorPatterns/Sidebar.js @@ -17,22 +17,20 @@ import { } from '../../../../../constants'; import TabPanelHover from '../../../TabPanelHover'; -import { isEmpty } from 'lodash'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { cloneDeep, isEmpty } from 'lodash'; import { getHomepages } from '../../../../data/sitegen/homepages/homepages'; import { getColorPalettes } from '../../../../data/sitegen/sitemeta/siteMeta'; import { getGlobalStyles } from '../../../../utils/api/themes'; import { LivePreview } from '../../../LivePreview'; -import { cloneDeep } from 'lodash'; - const SitegenEditorPatternsSidebar = () => { const [ homepages, setHomepages ] = useState(); const [ activeHomepage, setActiveHomepage ] = useState(); const [ globalStyles, setGlobalStyles ] = useState( [] ); const [ activeTab, setActiveTab ] = useState(); - const { currentStep, currentData } = useSelect( ( select ) => { + const { currentData } = useSelect( ( select ) => { return { - currentStep: select( nfdOnboardingStore ).getCurrentStep(), currentData: select( nfdOnboardingStore ).getCurrentOnboardingData(), }; @@ -95,8 +93,8 @@ const SitegenEditorPatternsSidebar = () => { } else { homepagesObject = currentData.sitegen.homepages.data; } - const globalStyles = await getGlobalStyles(); - setGlobalStyles( globalStyles.body ); + const globalStylesResponse = await getGlobalStyles(); + setGlobalStyles( globalStylesResponse.body ); setHomepages( homepagesObject ); setActiveHomepage( currentData.sitegen.homepages.active ); }; @@ -110,7 +108,7 @@ const SitegenEditorPatternsSidebar = () => { name: 'All Versions', title: (
-

All Versions

+

{ __( 'All Versions', 'wp-module-onboarding' ) }

), content: @@ -126,6 +124,10 @@ const SitegenEditorPatternsSidebar = () => {
handlePreview( data.slug ) } + role="button" + tabIndex={ 0 } + onKeyDown={ () => handlePreview( data.slug ) } + key={ data.slug } > { data.favorite && 'nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon__fill' }` } + role="button" + tabIndex={ 0 } onClick={ () => handleFavorite( data.slug ) } + onKeyDown={ () => + handleFavorite( data.slug ) + } >

{ data.title } @@ -178,7 +185,12 @@ const SitegenEditorPatternsSidebar = () => { name: 'All Versions', title: (

-

All Versions

+

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

), content: @@ -198,6 +210,14 @@ const SitegenEditorPatternsSidebar = () => { return (
+ handlePreview( + data.slug + ) + } onClick={ () => handlePreview( data.slug @@ -230,6 +250,15 @@ const SitegenEditorPatternsSidebar = () => { data.favorite && 'nfd-onboarding-sidebar--sitegen-editor-patterns__header__tab-panel__versions-tab__preview-container__context__icon__fill' }` } + role="button" + tabIndex={ + 0 + } + onKeyDown={ () => + handleFavorite( + data.slug + ) + } onClick={ () => handleFavorite( data.slug @@ -253,7 +282,10 @@ const SitegenEditorPatternsSidebar = () => {

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

-
+
handleRegenerate() } + onKeyDown={ () => handleRegenerate() } + >
handleRegenerate() } - onKeyDown={ () => handleRegenerate() } >
{ const [ activeHomepage, setActiveHomepage ] = useState(); const [ globalStyles, setGlobalStyles ] = useState( [] ); const [ activeTab, setActiveTab ] = useState(); - const { currentData } = useSelect( ( select ) => { - return { - currentData: - select( nfdOnboardingStore ).getCurrentOnboardingData(), - }; - } ); + const { currentData, isSidebarOpened, sideBarView } = useSelect( + ( select ) => { + return { + currentData: + select( nfdOnboardingStore ).getCurrentOnboardingData(), + isSidebarOpened: select( nfdOnboardingStore ).isSidebarOpened(), + sideBarView: select( nfdOnboardingStore ).getSidebarView(), + }; + } + ); const { setIsSidebarOpened, setCurrentOnboardingData } = useDispatch( nfdOnboardingStore ); @@ -84,12 +88,11 @@ const SitegenEditorPatternsSidebar = () => { }; } } ); - currentData.sitegen.homepages.data = homepagesResponse; - setCurrentOnboardingData( currentData ); - homepagesResponse.forEach( ( homepage ) => { homepagesObject[ homepage.slug ] = homepage; } ); + currentData.sitegen.homepages.data = homepagesObject; + setCurrentOnboardingData( currentData ); } else { homepagesObject = currentData.sitegen.homepages.data; } @@ -100,19 +103,23 @@ const SitegenEditorPatternsSidebar = () => { }; useEffect( () => { - loadData(); - }, [] ); + if ( + SIDEBAR_SITEGEN_EDITOR_PATTERNS === sideBarView && + isSidebarOpened + ) { + loadData(); + } + }, [ sideBarView, isSidebarOpened ] ); useEffect( () => { setActiveTab( { - name: 'All Versions', + name: __( 'All Versions', 'wp-module-onboarding' ), title: (

{ __( 'All Versions', 'wp-module-onboarding' ) }

), content: - activeTab && homepages && activeHomepage && Object.keys( homepages ).map( ( homepage ) => { @@ -123,23 +130,28 @@ const SitegenEditorPatternsSidebar = () => { return (
handlePreview( data.slug ) } - role="button" - tabIndex={ 0 } - onKeyDown={ () => handlePreview( data.slug ) } key={ data.slug } > - +
handlePreview( data.slug ) } + role="button" + tabIndex={ 0 } + onKeyDown={ () => handlePreview( data.slug ) } + > + +
+
{ } tabs={ [ { - name: 'All Versions', + name: __( + 'All Versions', + 'wp-module-onboarding' + ), title: (

diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/index.js b/src/OnboardingSPA/steps/SiteGen/Preview/index.js index ec2b09391..2db283565 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/index.js +++ b/src/OnboardingSPA/steps/SiteGen/Preview/index.js @@ -58,11 +58,11 @@ const SiteGenPreview = () => { }; } } ); - currentData.sitegen.homepages.data = homepagesResponse; - setCurrentOnboardingData( currentData ); homepagesResponse.forEach( ( homepage ) => { homepagesObject[ homepage.slug ] = homepage; } ); + currentData.sitegen.homepages.data = homepagesObject; + setCurrentOnboardingData( currentData ); } else { homepagesObject = currentData.sitegen.homepages.data; } diff --git a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss index 825c9aa2f..27a3ea8c7 100644 --- a/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss +++ b/src/OnboardingSPA/steps/SiteGen/Preview/stylesheet.scss @@ -13,7 +13,7 @@ color: var(--nfd-onboarding-primary); display: flex; flex-direction: column; - width: 450px; + width: 420px; justify-content: center; align-items: center; margin: 16px 0;