From 52d0b99df9cc1e6e0380e11053ea2ed2575492aa Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 17 Oct 2024 13:57:43 +0100 Subject: [PATCH] Site Editor: Prepare route registration by refactoring the site editor router (#66030) Co-authored-by: youknowriad Co-authored-by: ramonjd Co-authored-by: jsnajdr Co-authored-by: mcsf Co-authored-by: kevin940726 --- .../edit-site/src/components/app/index.js | 6 +- .../edit-site/src/components/layout/index.js | 4 +- .../edit-site/src/components/layout/router.js | 151 +++--------------- .../src/components/posts-app/index.js | 4 +- .../src/components/posts-app/router.js | 6 +- .../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 ++ 27 files changed, 615 insertions(+), 142 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..133a376c9c246d 100644 --- a/packages/edit-site/src/components/app/index.js +++ b/packages/edit-site/src/components/app/index.js @@ -20,8 +20,9 @@ import { unlock } from '../../lock-unlock'; import { useCommonCommands } from '../../hooks/commands/use-common-commands'; 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 useActiveRoute 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,7 +33,8 @@ function AppLayout() { useEditModeCommands(); useCommonCommands(); useSetCommandContext(); - const route = useLayoutAreas(); + useRegisterSiteEditorRoutes(); + const route = useActiveRoute(); return ; } diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 2619f7c96dcf74..d02f2905f24d85 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -68,9 +68,9 @@ export default function Layout( { route } ) { const isEditorLoading = useIsSiteEditorLoading(); const [ isResizableFrameOversized, setIsResizableFrameOversized ] = useState( false ); - const { key: routeKey, areas, widths } = route; + const { name: routeKey, areas, widths } = route; const animationRef = useMovingAnimation( { - triggerAnimationOnChange: canvasMode + '__' + routeKey, + triggerAnimationOnChange: canvasMode, } ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js index 3fd0cc560d9433..912a837555e0d1 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 { useEffect, useMemo } 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 ); @@ -73,129 +61,26 @@ function useRedirectOldPaths() { }, [ history, params ] ); } -export default function useLayoutAreas() { +export default function useActiveRoute() { 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 ) { + const routes = useSelect( ( select ) => { + return unlock( select( editSiteStore ) ).getRoutes(); + }, [] ); + return useMemo( () => { + const matchedRoute = routes.find( ( route ) => route.match( params ) ); + if ( ! matchedRoute ) { return { - key: 'navigation', - areas: { - sidebar: ( - - ), - preview: , - mobile: hasEditCanvasMode && , - }, + key: 404, + areas: {}, + widths: {}, }; } + return { - key: 'navigation', - areas: { - sidebar: ( - - ), - preview: , - mobile: hasEditCanvasMode && , - }, + name: matchedRoute.name, + areas: matchedRoute.areas, + widths: matchedRoute.widths, }; - } - - // Fallback shows the home page preview - return { - key: 'default', - areas: { - sidebar: , - preview: , - mobile: hasEditCanvasMode && , - }, - }; + }, [ routes, params ] ); } diff --git a/packages/edit-site/src/components/posts-app/index.js b/packages/edit-site/src/components/posts-app/index.js index 12bdf33711031c..8b5377bb2e65bd 100644 --- a/packages/edit-site/src/components/posts-app/index.js +++ b/packages/edit-site/src/components/posts-app/index.js @@ -12,7 +12,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; */ import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import Layout from '../layout'; -import useLayoutAreas from './router'; +import useActiveRoute from './router'; import { unlock } from '../../lock-unlock'; const { RouterProvider } = unlock( routerPrivateApis ); @@ -21,7 +21,7 @@ const { GlobalStylesProvider } = unlock( editorPrivateApis ); function PostsLayout() { // This ensures the edited entity id and type are initialized properly. useInitEditedEntityFromURL(); - const route = useLayoutAreas(); + const route = useActiveRoute(); return ; } diff --git a/packages/edit-site/src/components/posts-app/router.js b/packages/edit-site/src/components/posts-app/router.js index 5ffbe1831f2a24..de89567b262094 100644 --- a/packages/edit-site/src/components/posts-app/router.js +++ b/packages/edit-site/src/components/posts-app/router.js @@ -17,7 +17,7 @@ import PostList from '../post-list'; const { useLocation } = unlock( routerPrivateApis ); -export default function useLayoutAreas() { +export default function useActiveRoute() { const { params = {} } = useLocation(); const { postType, layout, canvas } = params; const labels = useSelect( @@ -31,7 +31,7 @@ export default function useLayoutAreas() { if ( [ 'post' ].includes( postType ) ) { const isListLayout = layout === 'list' || ! layout; return { - key: 'posts-list', + name: 'posts-list', areas: { sidebar: ( , preview: , 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..ddc37b353885c1 --- /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.forEach( 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..9eb33e05a99bb0 --- /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: , + }, + widths: { + 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..74b39848e83f2b --- /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: , + }, + widths: { + 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..907054364c8a93 --- /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: , + }, + widths: { + 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 94bcc490b6fd60..1c5924a292765b 100644 --- a/packages/edit-site/src/store/private-actions.js +++ b/packages/edit-site/src/store/private-actions.js @@ -90,3 +90,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, } );