Site Editor: Prepare route registration by refactoring the site editor router

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 <Layout route={ route } />;

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' );

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: (
-					<SidebarNavigationScreen
-						title={ __( 'Pages' ) }
-						backPath={ {} }
-						content={ <DataViewsSidebarContent /> }
-					/>
-				),
-				content: <PostList postType={ postType } />,
-				preview: ! showQuickEdit &&
-					( isListLayout || hasEditCanvasMode ) && <Editor />,
-				mobile: hasEditCanvasMode ? (
-					<Editor />
-				) : (
-					<PostList postType={ postType } />
-				),
-				edit: showQuickEdit && (
-					<PostEdit postType={ postType } postId={ postId } />
-				),
-			},
-			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: (
-					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
-				),
-				content: <PageTemplates />,
-				preview: ( isListLayout || hasEditCanvasMode ) && <Editor />,
-				mobile: hasEditCanvasMode ? <Editor /> : <PageTemplates />,
-			},
-			widths: {
-				content: isListLayout ? 380 : undefined,
-			},
-		};
-	}
-
-	// Patterns
-	if (
-		[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType )
-	) {
-		return {
-			key: 'patterns',
-			areas: {
-				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
-				content: <PagePatterns />,
-				mobile: hasEditCanvasMode ? <Editor /> : <PagePatterns />,
-				preview: hasEditCanvasMode && <Editor />,
-			},
-		};
-	}
-
-	// Styles
-	if ( path === '/wp_global_styles' ) {
-		return {
-			key: 'styles',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreenGlobalStyles backPath={ {} } />
-				),
-				preview: <Editor />,
-				mobile: hasEditCanvasMode && <Editor />,
-			},
-		};
-	}
-
-	// 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: (
-						<SidebarNavigationScreenNavigationMenu
-							backPath={ { postType: NAVIGATION_POST_TYPE } }
-						/>
-					),
-					preview: <Editor />,
-					mobile: hasEditCanvasMode && <Editor />,
-				},
+				key: 404,
+				areas: {},
+				widths: {},
 			};
 		}
+
 		return {
-			key: 'navigation',
-			areas: {
-				sidebar: (
-					<SidebarNavigationScreenNavigationMenus backPath={ {} } />
-				),
-				preview: <Editor />,
-				mobile: hasEditCanvasMode && <Editor />,
-			},
+			key: matchedRoute.name,
+			areas: matchedRoute.areas,
+			widths: matchedRoute.widths,
 		};
-	}
-
-	// Fallback shows the home page preview
-	return {
-		key: 'default',
-		areas: {
-			sidebar: <SidebarNavigationScreenMain />,
-			preview: <Editor />,
-			mobile: hasEditCanvasMode && <Editor />,
-		},
-	};
+	}, [ routes, params ] );
 }

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: <SidebarNavigationScreenMain />,
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

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: <SidebarNavigationScreenMain />,
+		preview: <Editor />,
+	},
+};

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 ] );
+}

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: <SidebarNavigationScreenNavigationMenus backPath={ {} } />,
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

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: (
+			<SidebarNavigationScreenNavigationMenu
+				backPath={ { postType: NAVIGATION_POST_TYPE } }
+			/>
+		),
+		preview: <Editor />,
+		mobile: <Editor />,
+	},
+};

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: (
+			<SidebarNavigationScreenNavigationMenu
+				backPath={ { postType: NAVIGATION_POST_TYPE } }
+			/>
+		),
+		preview: <Editor />,
+	},
+};

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: <SidebarNavigationScreenNavigationMenus backPath={ {} } />,
+		preview: <Editor />,
+	},
+};