Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

try(edit-site): lazy load navigator screens #56940

Closed
wants to merge 1 commit into from
Closed

try(edit-site): lazy load navigator screens #56940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 0 additions & 35 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { __ } from '@wordpress/i18n';
import { edit, seen } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
import { useViewportMatch } from '@wordpress/compose';
import { BlockEditorProvider } from '@wordpress/block-editor';
import { useCallback } from '@wordpress/element';
Expand All @@ -18,46 +17,12 @@ import StyleVariationsContainer from '../global-styles/style-variations-containe
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import SidebarButton from '../sidebar-button';
import SidebarNavigationItem from '../sidebar-navigation-item';
import StyleBook from '../style-book';
import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions';
import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer';

const noop = () => {};

export function SidebarNavigationItemGlobalStyles( props ) {
const { openGeneralSidebar } = useDispatch( editSiteStore );
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );

const hasGlobalStyleVariations = useSelect(
( select ) =>
!! select(
coreStore
).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
[]
);
if ( hasGlobalStyleVariations ) {
return (
<NavigatorButton
{ ...props }
as={ SidebarNavigationItem }
path="/wp_global_styles"
/>
);
}
return (
<SidebarNavigationItem
{ ...props }
onClick={ () => {
// Switch to edit mode.
setCanvasMode( 'edit' );
// Open global styles sidebar.
openGeneralSidebar( 'edit-site/global-styles' );
} }
/>
);
}

function SidebarNavigationScreenGlobalStylesContent() {
const { storedSettings } = useSelect( ( select ) => {
const { getSettings } = unlock( select( editSiteStore ) );
Expand Down
46 changes: 46 additions & 0 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/navigation-item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import SidebarNavigationItem from '../sidebar-navigation-item';

export function SidebarNavigationItemGlobalStyles( props ) {
const { openGeneralSidebar } = useDispatch( editSiteStore );
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );

const hasGlobalStyleVariations = useSelect(
( select ) =>
!! select(
coreStore
).__experimentalGetCurrentThemeGlobalStylesVariations()?.length,
[]
);
if ( hasGlobalStyleVariations ) {
return (
<NavigatorButton
{ ...props }
as={ SidebarNavigationItem }
path="/wp_global_styles"
/>
);
}
return (
<SidebarNavigationItem
{ ...props }
onClick={ () => {
// Switch to edit mode.
setCanvasMode( 'edit' );
// Open global styles sidebar.
openGeneralSidebar( 'edit-site/global-styles' );
} }
/>
);
}
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/sidebar-navigation-screen-main/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import { useEffect } from '@wordpress/element';
*/
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import SidebarNavigationItem from '../sidebar-navigation-item';
import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles';
import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles/navigation-item';
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import TemplatePartHint from './template-part-hint';
Expand Down
172 changes: 113 additions & 59 deletions packages/edit-site/src/components/sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/**
* WordPress dependencies
*/
import { memo, useRef } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { memo, useRef, lazy, Suspense, Fragment } from '@wordpress/element';
import {
__experimentalNavigatorProvider as NavigatorProvider,
__experimentalNavigatorScreen as NavigatorScreen,
Expand All @@ -12,75 +11,130 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
/**
* Internal dependencies
*/
import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main';
import SidebarNavigationScreenTemplates from '../sidebar-navigation-screen-templates';
import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns';
import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
import useSyncPathWithURL, {
getPathFromURL,
} from '../sync-state-with-url/use-sync-path-with-url';
import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu';
import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
// import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles';
import SaveHub from '../save-hub';
import { unlock } from '../../lock-unlock';
import SidebarNavigationScreenPages from '../sidebar-navigation-screen-pages';
import SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
import SidebarNavigationScreen from '../sidebar-navigation-screen';
import DataViewsSidebarContent from '../sidebar-dataviews';

const { useLocation } = unlock( routerPrivateApis );

function lazyScreen( cb ) {
// eslint-disable-next-line @wordpress/no-unused-vars-before-return
const Load = lazy( cb );
return function Screen( props ) {
return <Load { ...props } />;
};
}

const screens = [
{
path: '/',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-main" */ '../sidebar-navigation-screen-main'
),
},
{
path: '/navigation',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-navigation-menus" */ '../sidebar-navigation-screen-navigation-menus'
),
},
{
path: '/navigation/:postType/:postId',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-navigation-menu" */ '../sidebar-navigation-screen-navigation-menu'
),
},
{
path: '/wp_global_styles',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-global-styles" */ '../sidebar-navigation-screen-global-styles'
),
},
{
path: '/page',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-pages" */ '../sidebar-navigation-screen-pages'
),
},
{
path: '/page/:postId',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-page" */ '../sidebar-navigation-screen-page'
),
},
{
path: '/pages',
condition: () => window?.__experimentalAdminViews,
component: () =>
import(
/* webpackChunkName: "sidebar-screen-dataviews" */ '../sidebar-dataviews'
),
},
{
path: '/:postType(wp_template)',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-templates" */ '../sidebar-navigation-screen-templates'
),
},
{
path: '/patterns',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-patterns" */ '../sidebar-navigation-screen-patterns'
),
},
{
path: '/:postType(wp_template|wp_template_part)/all',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-templates-browse" */ '../sidebar-navigation-screen-templates-browse'
),
},
{
path: '/:postType(wp_template_part|wp_block)/:postId',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-pattern" */ '../sidebar-navigation-screen-pattern'
),
},
{
path: '/:postType(wp_template)/:postId',
component: () =>
import(
/* webpackChunkName: "sidebar-screen-template" */ '../sidebar-navigation-screen-template'
),
},
];

function SidebarScreens() {
useSyncPathWithURL();

return (
<>
<NavigatorScreen path="/">
<SidebarNavigationScreenMain />
</NavigatorScreen>
<NavigatorScreen path="/navigation">
<SidebarNavigationScreenNavigationMenus />
</NavigatorScreen>
<NavigatorScreen path="/navigation/:postType/:postId">
<SidebarNavigationScreenNavigationMenu />
</NavigatorScreen>
<NavigatorScreen path="/wp_global_styles">
<SidebarNavigationScreenGlobalStyles />
</NavigatorScreen>
<NavigatorScreen path="/page">
<SidebarNavigationScreenPages />
</NavigatorScreen>
<NavigatorScreen path="/page/:postId">
<SidebarNavigationScreenPage />
</NavigatorScreen>
{ window?.__experimentalAdminViews && (
<NavigatorScreen path="/pages">
<SidebarNavigationScreen
title={ __( 'Pages' ) }
backPath="/page"
content={ <DataViewsSidebarContent /> }
/>
</NavigatorScreen>
) }
<NavigatorScreen path="/:postType(wp_template)">
<SidebarNavigationScreenTemplates />
</NavigatorScreen>
<NavigatorScreen path="/patterns">
<SidebarNavigationScreenPatterns />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template|wp_template_part)/all">
<SidebarNavigationScreenTemplatesBrowse />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template_part|wp_block)/:postId">
<SidebarNavigationScreenPattern />
</NavigatorScreen>
<NavigatorScreen path="/:postType(wp_template)/:postId">
<SidebarNavigationScreenTemplate />
</NavigatorScreen>
</>
<Suspense fallback={ null }>
{ screens.map( ( { path, component, condition } ) => {
if ( condition !== undefined && ! condition?.() ) {
return null;
}

const Screen = lazyScreen( component );

return (
<NavigatorScreen key={ path } path={ path }>
<Screen />
</NavigatorScreen>
);
} ) }
</Suspense>
);
}

Expand Down
Loading