From f52be94e262f11bc8709362a2b82ab3c8ef4bde7 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 10 Oct 2024 19:10:08 +0200 Subject: [PATCH 1/3] Site Editor: Prepare route registration by refactoring the site editor router --- .../edit-site/src/components/app/index.js | 2 + .../edit-site/src/components/layout/router.js | 143 ++---------------- .../site-editor-routes/home-edit.js | 17 +++ .../site-editor-routes/home-view.js | 16 ++ .../components/site-editor-routes/index.js | 60 ++++++++ .../site-editor-routes/navigation-edit.js | 22 +++ .../navigation-item-edit.js | 26 ++++ .../navigation-item-view.js | 25 +++ .../site-editor-routes/navigation-view.js | 21 +++ .../site-editor-routes/pages-edit.js | 35 +++++ .../pages-list-view-quick-edit.js | 56 +++++++ .../site-editor-routes/pages-list-view.js | 44 ++++++ .../pages-view-quick-edit.js | 53 +++++++ .../site-editor-routes/pages-view.js | 39 +++++ .../site-editor-routes/patterns-edit.js | 24 +++ .../site-editor-routes/patterns-view.js | 22 +++ .../site-editor-routes/styles-edit.js | 17 +++ .../site-editor-routes/styles-view.js | 16 ++ .../site-editor-routes/templates-edit.js | 22 +++ .../site-editor-routes/templates-list-view.js | 28 ++++ .../site-editor-routes/templates-view.js | 22 +++ .../edit-site/src/store/private-actions.js | 7 + .../edit-site/src/store/private-selectors.js | 4 + packages/edit-site/src/store/reducer.js | 10 ++ 24 files changed, 601 insertions(+), 130 deletions(-) create mode 100644 packages/edit-site/src/components/site-editor-routes/home-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/home-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/index.js create mode 100644 packages/edit-site/src/components/site-editor-routes/navigation-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/navigation-item-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/navigation-item-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/navigation-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-list-view-quick-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-list-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-view-quick-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/pages-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/patterns-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/patterns-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/styles-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/styles-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/templates-edit.js create mode 100644 packages/edit-site/src/components/site-editor-routes/templates-list-view.js create mode 100644 packages/edit-site/src/components/site-editor-routes/templates-view.js diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js index 452c36014f5db9..8742739d64e67c 100644 --- a/packages/edit-site/src/components/app/index.js +++ b/packages/edit-site/src/components/app/index.js @@ -22,6 +22,7 @@ import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import useLayoutAreas from '../layout/router'; import useSetCommandContext from '../../hooks/commands/use-set-command-context'; +import { useRegisterSiteEditorRoutes } from '../site-editor-routes'; const { RouterProvider } = unlock( routerPrivateApis ); const { GlobalStylesProvider } = unlock( editorPrivateApis ); @@ -32,6 +33,7 @@ function AppLayout() { useEditModeCommands(); useCommonCommands(); useSetCommandContext(); + useRegisterSiteEditorRoutes(); const route = useLayoutAreas(); return ; diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 3fd0cc560d9433..47746a7280c8f9 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -2,31 +2,19 @@ * WordPress dependencies */ import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { __ } from '@wordpress/i18n'; import { useEffect } from '@wordpress/element'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies */ import { unlock } from '../../lock-unlock'; -import Editor from '../editor'; -import PostList from '../post-list'; -import PagePatterns from '../page-patterns'; -import PageTemplates from '../page-templates'; -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles'; -import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; -import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; -import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse'; -import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns'; -import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu'; -import DataViewsSidebarContent from '../sidebar-dataviews'; import { NAVIGATION_POST_TYPE, PATTERN_TYPES, TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE, } from '../../utils/constants'; -import { PostEdit } from '../post-edit'; +import { store as editSiteStore } from '../../store'; const { useLocation, useHistory } = unlock( routerPrivateApis ); @@ -75,127 +63,22 @@ function useRedirectOldPaths() { export default function useLayoutAreas() { const { params } = useLocation(); - const { postType, postId, path, layout, isCustom, canvas, quickEdit } = - params; - const hasEditCanvasMode = canvas === 'edit'; useRedirectOldPaths(); - - // Page list - if ( postType === 'page' ) { - const isListLayout = layout === 'list' || ! layout; - const showQuickEdit = quickEdit && ! isListLayout; - return { - key: 'pages', - areas: { - sidebar: ( - } - /> - ), - content: , - preview: ! showQuickEdit && - ( isListLayout || hasEditCanvasMode ) && , - mobile: hasEditCanvasMode ? ( - - ) : ( - - ), - edit: showQuickEdit && ( - - ), - }, - widths: { - content: isListLayout ? 380 : undefined, - edit: showQuickEdit ? 380 : undefined, - }, - }; - } - - // Templates - if ( postType === TEMPLATE_POST_TYPE ) { - const isListLayout = isCustom !== 'true' && layout === 'list'; - return { - key: 'templates', - areas: { - sidebar: ( - - ), - content: , - preview: ( isListLayout || hasEditCanvasMode ) && , - mobile: hasEditCanvasMode ? : , - }, - widths: { - content: isListLayout ? 380 : undefined, - }, - }; - } - - // Patterns - if ( - [ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType ) - ) { - return { - key: 'patterns', - areas: { - sidebar: , - content: , - mobile: hasEditCanvasMode ? : , - preview: hasEditCanvasMode && , - }, - }; - } - - // Styles - if ( path === '/wp_global_styles' ) { - return { - key: 'styles', - areas: { - sidebar: ( - - ), - preview: , - mobile: hasEditCanvasMode && , - }, - }; - } - - // Navigation - if ( postType === NAVIGATION_POST_TYPE ) { - if ( postId ) { - return { - key: 'navigation', - areas: { - sidebar: ( - - ), - preview: , - mobile: hasEditCanvasMode && , - }, - }; - } + const routes = useSelect( ( select ) => { + return unlock( select( editSiteStore ) ).getRoutes(); + }, [] ); + const matchedRoute = routes.find( ( route ) => route.match( params ) ); + if ( ! matchedRoute ) { return { - key: 'navigation', - areas: { - sidebar: ( - - ), - preview: , - mobile: hasEditCanvasMode && , - }, + key: 404, + areas: {}, + widths: {}, }; } - // Fallback shows the home page preview return { - key: 'default', - areas: { - sidebar: , - preview: , - mobile: hasEditCanvasMode && , - }, + key: matchedRoute.name, + areas: matchedRoute.areas, + widths: matchedRoute.widths, }; } diff --git a/packages/edit-site/src/components/site-editor-routes/home-edit.js b/packages/edit-site/src/components/site-editor-routes/home-edit.js new file mode 100644 index 00000000000000..f6e6499254082f --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/home-edit.js @@ -0,0 +1,17 @@ +/** + * Internal dependencies + */ +import Editor from '../editor'; +import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; + +export const homeEditRoute = { + name: 'home-edit', + match: ( params ) => { + return params.canvas === 'edit'; + }, + areas: { + sidebar: , + preview: , + mobile: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/home-view.js b/packages/edit-site/src/components/site-editor-routes/home-view.js new file mode 100644 index 00000000000000..63d3d021e82083 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/home-view.js @@ -0,0 +1,16 @@ +/** + * Internal dependencies + */ +import Editor from '../editor'; +import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; + +export const homeViewRoute = { + name: 'home-view', + match: ( params ) => { + return params.canvas !== 'edit'; + }, + areas: { + sidebar: , + preview: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/index.js b/packages/edit-site/src/components/site-editor-routes/index.js new file mode 100644 index 00000000000000..53d3df3ea993fd --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/index.js @@ -0,0 +1,60 @@ +/** + * WordPress dependencies + */ +import { useRegistry, useDispatch } from '@wordpress/data'; +import { useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import { store as siteEditorStore } from '../../store'; +import { homeViewRoute } from './home-view'; +import { homeEditRoute } from './home-edit'; +import { navigationViewRoute } from './navigation-view'; +import { navigationEditRoute } from './navigation-edit'; +import { navigationItemEditRoute } from './navigation-item-edit'; +import { navigationItemViewRoute } from './navigation-item-view'; +import { stylesEditRoute } from './styles-edit'; +import { stylesViewRoute } from './styles-view'; +import { patternsEditRoute } from './patterns-edit'; +import { patternsViewRoute } from './patterns-view'; +import { templatesEditRoute } from './templates-edit'; +import { templatesListViewRoute } from './templates-list-view'; +import { templatesViewRoute } from './templates-view'; +import { pagesViewRoute } from './pages-view'; +import { pagesEditRoute } from './pages-edit'; +import { pagesListViewRoute } from './pages-list-view'; +import { pagesListViewQuickEditRoute } from './pages-list-view-quick-edit'; +import { pagesViewQuickEditRoute } from './pages-view-quick-edit'; + +const routes = [ + pagesListViewQuickEditRoute, + pagesListViewRoute, + pagesViewQuickEditRoute, + pagesViewRoute, + pagesEditRoute, + templatesEditRoute, + templatesListViewRoute, + templatesViewRoute, + patternsViewRoute, + patternsEditRoute, + stylesViewRoute, + stylesEditRoute, + navigationItemViewRoute, + navigationItemEditRoute, + navigationViewRoute, + navigationEditRoute, + homeViewRoute, + homeEditRoute, +]; + +export function useRegisterSiteEditorRoutes() { + const registry = useRegistry(); + const { registerRoute } = unlock( useDispatch( siteEditorStore ) ); + useEffect( () => { + registry.batch( () => { + routes.map( registerRoute ); + } ); + }, [ registry, registerRoute ] ); +} diff --git a/packages/edit-site/src/components/site-editor-routes/navigation-edit.js b/packages/edit-site/src/components/site-editor-routes/navigation-edit.js new file mode 100644 index 00000000000000..fdba963c41d0cb --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/navigation-edit.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import { NAVIGATION_POST_TYPE } from '../../utils/constants'; +import Editor from '../editor'; +import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; + +export const navigationEditRoute = { + name: 'navigation-edit', + match: ( params ) => { + return ( + params.postType === NAVIGATION_POST_TYPE && + ! params.postId && + params.canvas === 'edit' + ); + }, + areas: { + sidebar: , + preview: , + mobile: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/navigation-item-edit.js b/packages/edit-site/src/components/site-editor-routes/navigation-item-edit.js new file mode 100644 index 00000000000000..b03cdbd995ac7c --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/navigation-item-edit.js @@ -0,0 +1,26 @@ +/** + * Internal dependencies + */ +import { NAVIGATION_POST_TYPE } from '../../utils/constants'; +import Editor from '../editor'; +import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu'; + +export const navigationItemEditRoute = { + name: 'navigation-item-edit', + match: ( params ) => { + return ( + params.postType === NAVIGATION_POST_TYPE && + !! params.postId && + params.canvas === 'edit' + ); + }, + areas: { + sidebar: ( + + ), + preview: , + mobile: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/navigation-item-view.js b/packages/edit-site/src/components/site-editor-routes/navigation-item-view.js new file mode 100644 index 00000000000000..d04a03a8f9df38 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/navigation-item-view.js @@ -0,0 +1,25 @@ +/** + * Internal dependencies + */ +import { NAVIGATION_POST_TYPE } from '../../utils/constants'; +import Editor from '../editor'; +import SidebarNavigationScreenNavigationMenu from '../sidebar-navigation-screen-navigation-menu'; + +export const navigationItemViewRoute = { + name: 'navigation-item-view', + match: ( params ) => { + return ( + params.postType === NAVIGATION_POST_TYPE && + !! params.postId && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + + ), + preview: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/navigation-view.js b/packages/edit-site/src/components/site-editor-routes/navigation-view.js new file mode 100644 index 00000000000000..59c38a2f1d099a --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/navigation-view.js @@ -0,0 +1,21 @@ +/** + * Internal dependencies + */ +import { NAVIGATION_POST_TYPE } from '../../utils/constants'; +import Editor from '../editor'; +import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus'; + +export const navigationViewRoute = { + name: 'navigation-view', + match: ( params ) => { + return ( + params.postType === NAVIGATION_POST_TYPE && + ! params.postId && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: , + preview: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/pages-edit.js b/packages/edit-site/src/components/site-editor-routes/pages-edit.js new file mode 100644 index 00000000000000..ef4c7efbfb09c2 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/pages-edit.js @@ -0,0 +1,35 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import PostList from '../post-list'; +import DataViewsSidebarContent from '../sidebar-dataviews'; +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import Editor from '../editor'; + +function PageList() { + return ; +} + +export const pagesEditRoute = { + name: 'pages-edit', + match: ( params ) => { + return params.postType === 'page' && params.canvas === 'edit'; + }, + areas: { + sidebar: ( + } + /> + ), + content: , + mobile: , + preview: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/pages-list-view-quick-edit.js b/packages/edit-site/src/components/site-editor-routes/pages-list-view-quick-edit.js new file mode 100644 index 00000000000000..2de76ad8fef04d --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/pages-list-view-quick-edit.js @@ -0,0 +1,56 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; + +/** + * Internal dependencies + */ +import PostList from '../post-list'; +import DataViewsSidebarContent from '../sidebar-dataviews'; +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import { unlock } from '../../lock-unlock'; +import { PostEdit } from '../post-edit'; +import Editor from '../editor'; + +const { useLocation } = unlock( routerPrivateApis ); + +function PageList() { + return ; +} + +function PageQuickEdit() { + const { params } = useLocation(); + return ; +} + +export const pagesListViewQuickEditRoute = { + name: 'pages-list-view-quick-edit', + match: ( params ) => { + return ( + params.isCustom !== 'true' && + ( params.layout ?? 'list' ) === 'list' && + !! params.quickEdit && + params.postType === 'page' && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + } + /> + ), + content: , + mobile: , + preview: , + edit: , + }, + width: { + content: 380, + edit: 380, + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/pages-list-view.js b/packages/edit-site/src/components/site-editor-routes/pages-list-view.js new file mode 100644 index 00000000000000..cdb3a38f0b04fe --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/pages-list-view.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import PostList from '../post-list'; +import DataViewsSidebarContent from '../sidebar-dataviews'; +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import Editor from '../editor'; + +function PageList() { + return ; +} + +export const pagesListViewRoute = { + name: 'pages-list-view', + match: ( params ) => { + return ( + params.isCustom !== 'true' && + ( params.layout ?? 'list' ) === 'list' && + ! params.quickEdit && + params.postType === 'page' && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + } + /> + ), + content: , + preview: , + mobile: , + }, + width: { + content: 380, + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/pages-view-quick-edit.js b/packages/edit-site/src/components/site-editor-routes/pages-view-quick-edit.js new file mode 100644 index 00000000000000..9a535f9a0a7aa6 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/pages-view-quick-edit.js @@ -0,0 +1,53 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; + +/** + * Internal dependencies + */ +import PostList from '../post-list'; +import DataViewsSidebarContent from '../sidebar-dataviews'; +import SidebarNavigationScreen from '../sidebar-navigation-screen'; +import { unlock } from '../../lock-unlock'; +import { PostEdit } from '../post-edit'; + +const { useLocation } = unlock( routerPrivateApis ); + +function PageList() { + return ; +} + +function PageQuickEdit() { + const { params } = useLocation(); + return ; +} + +export const pagesViewQuickEditRoute = { + name: 'pages-view-quick-edit', + match: ( params ) => { + return ( + ( params.isCustom === 'true' || + ( params.layout ?? 'list' ) !== 'list' ) && + !! params.quickEdit && + params.postType === 'page' && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + } + /> + ), + content: , + mobile: , + edit: , + }, + width: { + edit: 380, + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/pages-view.js b/packages/edit-site/src/components/site-editor-routes/pages-view.js new file mode 100644 index 00000000000000..df7e211022cacf --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/pages-view.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import PostList from '../post-list'; +import DataViewsSidebarContent from '../sidebar-dataviews'; +import SidebarNavigationScreen from '../sidebar-navigation-screen'; + +function PageList() { + return ; +} + +export const pagesViewRoute = { + name: 'pages-view', + match: ( params ) => { + return ( + ( params.isCustom === 'true' || + ( params.layout ?? 'list' ) !== 'list' ) && + ! params.quickEdit && + params.postType === 'page' && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + } + /> + ), + content: , + mobile: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/patterns-edit.js b/packages/edit-site/src/components/site-editor-routes/patterns-edit.js new file mode 100644 index 00000000000000..eaf1fd68020181 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/patterns-edit.js @@ -0,0 +1,24 @@ +/** + * Internal dependencies + */ +import Editor from '../editor'; +import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns'; +import PagePatterns from '../page-patterns'; +import { PATTERN_TYPES, TEMPLATE_PART_POST_TYPE } from '../../utils/constants'; + +export const patternsEditRoute = { + name: 'patterns-edit', + match: ( params ) => { + return ( + [ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( + params.postType + ) && params.canvas === 'edit' + ); + }, + areas: { + sidebar: , + content: , + mobile: , + preview: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/patterns-view.js b/packages/edit-site/src/components/site-editor-routes/patterns-view.js new file mode 100644 index 00000000000000..468f7f14abc139 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/patterns-view.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import SidebarNavigationScreenPatterns from '../sidebar-navigation-screen-patterns'; +import PagePatterns from '../page-patterns'; +import { PATTERN_TYPES, TEMPLATE_PART_POST_TYPE } from '../../utils/constants'; + +export const patternsViewRoute = { + name: 'patterns-view', + match: ( params ) => { + return ( + [ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( + params.postType + ) && params.canvas !== 'edit' + ); + }, + areas: { + sidebar: , + content: , + mobile: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/styles-edit.js b/packages/edit-site/src/components/site-editor-routes/styles-edit.js new file mode 100644 index 00000000000000..ff52b957bc3609 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/styles-edit.js @@ -0,0 +1,17 @@ +/** + * Internal dependencies + */ +import Editor from '../editor'; +import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles'; + +export const stylesEditRoute = { + name: 'styles-edit', + match: ( params ) => { + return params.path === '/wp_global_styles' && params.canvas === 'edit'; + }, + areas: { + sidebar: , + preview: , + mobile: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/styles-view.js b/packages/edit-site/src/components/site-editor-routes/styles-view.js new file mode 100644 index 00000000000000..856a610eb23677 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/styles-view.js @@ -0,0 +1,16 @@ +/** + * Internal dependencies + */ +import Editor from '../editor'; +import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles'; + +export const stylesViewRoute = { + name: 'styles-view', + match: ( params ) => { + return params.path === '/wp_global_styles' && params.canvas !== 'edit'; + }, + areas: { + sidebar: , + preview: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/templates-edit.js b/packages/edit-site/src/components/site-editor-routes/templates-edit.js new file mode 100644 index 00000000000000..488e9decc1888c --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/templates-edit.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; +import PageTemplates from '../page-templates'; +import Editor from '../editor'; +import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse'; + +export const templatesEditRoute = { + name: 'templates-edit', + match: ( params ) => { + return ( + params.postType === TEMPLATE_POST_TYPE && params.canvas === 'edit' + ); + }, + areas: { + sidebar: , + content: , + mobile: , + preview: , + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/templates-list-view.js b/packages/edit-site/src/components/site-editor-routes/templates-list-view.js new file mode 100644 index 00000000000000..7cdda1b13c0b47 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/templates-list-view.js @@ -0,0 +1,28 @@ +/** + * Internal dependencies + */ +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; +import PageTemplates from '../page-templates'; +import Editor from '../editor'; +import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse'; + +export const templatesListViewRoute = { + name: 'templates-list-view', + match: ( params ) => { + return ( + params.isCustom !== 'true' && + params.layout === 'list' && + params.postType === TEMPLATE_POST_TYPE && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: , + content: , + mobile: , + preview: , + }, + widths: { + content: 380, + }, +}; diff --git a/packages/edit-site/src/components/site-editor-routes/templates-view.js b/packages/edit-site/src/components/site-editor-routes/templates-view.js new file mode 100644 index 00000000000000..40fd88c0e60a61 --- /dev/null +++ b/packages/edit-site/src/components/site-editor-routes/templates-view.js @@ -0,0 +1,22 @@ +/** + * Internal dependencies + */ +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; +import PageTemplates from '../page-templates'; +import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse'; + +export const templatesViewRoute = { + name: 'templates-view', + match: ( params ) => { + return ( + ( params.isCustom === 'true' || params.layout !== 'list' ) && + params.postType === TEMPLATE_POST_TYPE && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: , + content: , + mobile: , + }, +}; diff --git a/packages/edit-site/src/store/private-actions.js b/packages/edit-site/src/store/private-actions.js index 37164690ed7fca..cde8853016834e 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -93,3 +93,10 @@ export const setEditorCanvasContainerView = view, } ); }; + +export function registerRoute( route ) { + return { + type: 'REGISTER_ROUTE', + route, + }; +} diff --git a/packages/edit-site/src/store/private-selectors.js b/packages/edit-site/src/store/private-selectors.js index 1f1f6e999fdb29..d0f1d3f4196008 100644 --- a/packages/edit-site/src/store/private-selectors.js +++ b/packages/edit-site/src/store/private-selectors.js @@ -19,3 +19,7 @@ export function getCanvasMode( state ) { export function getEditorCanvasContainerView( state ) { return state.editorCanvasContainerView; } + +export function getRoutes( state ) { + return state.routes; +} diff --git a/packages/edit-site/src/store/reducer.js b/packages/edit-site/src/store/reducer.js index 1e3d9c43f0eb34..951f004adc9af5 100644 --- a/packages/edit-site/src/store/reducer.js +++ b/packages/edit-site/src/store/reducer.js @@ -98,10 +98,20 @@ function editorCanvasContainerView( state = undefined, action ) { return state; } +function routes( state = [], action ) { + switch ( action.type ) { + case 'REGISTER_ROUTE': + return [ ...state, action.route ]; + } + + return state; +} + export default combineReducers( { settings, editedPost, saveViewPanel, canvasMode, editorCanvasContainerView, + routes, } ); From da9f6d08e2c52736f8d64edeb7aa9d0200acf64a Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 10 Oct 2024 22:43:37 +0200 Subject: [PATCH 2/3] Better transition --- packages/edit-site/src/components/layout/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 2619f7c96dcf74..a8648edded5c96 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -70,7 +70,7 @@ export default function Layout( { route } ) { useState( false ); const { key: routeKey, areas, widths } = route; const animationRef = useMovingAnimation( { - triggerAnimationOnChange: canvasMode + '__' + routeKey, + triggerAnimationOnChange: canvasMode, } ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); From 3ae6f53bb4f0ed274e8e3c378155f81cda5cedf6 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 11 Oct 2024 07:45:01 +0200 Subject: [PATCH 3/3] Memoize the active route --- .../edit-site/src/components/layout/router.js | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 47746a7280c8f9..ad245d660a4ffb 100644 --- a/packages/edit-site/src/components/layout/router.js +++ b/packages/edit-site/src/components/layout/router.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { useEffect } from '@wordpress/element'; +import { useEffect, useMemo } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -61,24 +61,26 @@ function useRedirectOldPaths() { }, [ history, params ] ); } -export default function useLayoutAreas() { +export default function useActiveRoute() { const { params } = useLocation(); useRedirectOldPaths(); const routes = useSelect( ( select ) => { return unlock( select( editSiteStore ) ).getRoutes(); }, [] ); - const matchedRoute = routes.find( ( route ) => route.match( params ) ); - if ( ! matchedRoute ) { + return useMemo( () => { + const matchedRoute = routes.find( ( route ) => route.match( params ) ); + if ( ! matchedRoute ) { + return { + key: 404, + areas: {}, + widths: {}, + }; + } + return { - key: 404, - areas: {}, - widths: {}, + key: matchedRoute.name, + areas: matchedRoute.areas, + widths: matchedRoute.widths, }; - } - - return { - key: matchedRoute.name, - areas: matchedRoute.areas, - widths: matchedRoute.widths, - }; + }, [ routes, params ] ); }