From e40691ba5ae373df27db32669e905436cc2217d0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 20 Nov 2024 13:57:05 +0100 Subject: [PATCH] Posts DataViews: Refactor the router to use route registration --- .../src/components/posts-app-routes/home.js | 36 ++++++++++ .../src/components/posts-app-routes/index.js | 36 ++++++++++ .../components/posts-app-routes/posts-edit.js | 31 +++++++++ .../posts-list-view-quick-edit.js | 52 ++++++++++++++ .../posts-app-routes/posts-list-view.js | 40 +++++++++++ .../posts-app-routes/posts-view-quick-edit.js | 49 +++++++++++++ .../components/posts-app-routes/posts-view.js | 35 ++++++++++ .../src/components/posts-app/index.js | 4 +- .../src/components/posts-app/router.js | 69 ------------------- 9 files changed, 282 insertions(+), 70 deletions(-) create mode 100644 packages/edit-site/src/components/posts-app-routes/home.js create mode 100644 packages/edit-site/src/components/posts-app-routes/index.js create mode 100644 packages/edit-site/src/components/posts-app-routes/posts-edit.js create mode 100644 packages/edit-site/src/components/posts-app-routes/posts-list-view-quick-edit.js create mode 100644 packages/edit-site/src/components/posts-app-routes/posts-list-view.js create mode 100644 packages/edit-site/src/components/posts-app-routes/posts-view-quick-edit.js create mode 100644 packages/edit-site/src/components/posts-app-routes/posts-view.js delete mode 100644 packages/edit-site/src/components/posts-app/router.js diff --git a/packages/edit-site/src/components/posts-app-routes/home.js b/packages/edit-site/src/components/posts-app-routes/home.js new file mode 100644 index 0000000000000..ec99cbd8899f1 --- /dev/null +++ b/packages/edit-site/src/components/posts-app-routes/home.js @@ -0,0 +1,36 @@ +/** + * WordPress dependencies + */ +import { privateApis as routerPrivateApis } from '@wordpress/router'; + +/** + * Internal dependencies + */ +import Editor from '../editor'; +import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; +import { unlock } from '../../lock-unlock'; + +const { useLocation } = unlock( routerPrivateApis ); + +function HomeMobileView() { + const { params = {} } = useLocation(); + const { canvas = 'view' } = params; + + return canvas === 'edit' ? ( + + ) : ( + + ); +} + +export const homeRoute = { + name: 'home', + match: () => { + return true; + }, + areas: { + sidebar: , + preview: , + mobile: HomeMobileView, + }, +}; diff --git a/packages/edit-site/src/components/posts-app-routes/index.js b/packages/edit-site/src/components/posts-app-routes/index.js new file mode 100644 index 0000000000000..e850bbd382200 --- /dev/null +++ b/packages/edit-site/src/components/posts-app-routes/index.js @@ -0,0 +1,36 @@ +/** + * 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 { homeRoute } from './home'; +import { postsListViewQuickEditRoute } from './posts-list-view-quick-edit'; +import { postsListViewRoute } from './posts-list-view'; +import { postsViewQuickEditRoute } from './posts-view-quick-edit'; +import { postsViewRoute } from './posts-view'; +import { postsEditRoute } from './posts-edit'; + +const routes = [ + postsListViewQuickEditRoute, + postsListViewRoute, + postsViewQuickEditRoute, + postsViewRoute, + postsEditRoute, + homeRoute, +]; + +export function useRegisterPostsAppRoutes() { + const registry = useRegistry(); + const { registerRoute } = unlock( useDispatch( siteEditorStore ) ); + useEffect( () => { + registry.batch( () => { + routes.forEach( registerRoute ); + } ); + }, [ registry, registerRoute ] ); +} diff --git a/packages/edit-site/src/components/posts-app-routes/posts-edit.js b/packages/edit-site/src/components/posts-app-routes/posts-edit.js new file mode 100644 index 0000000000000..d395824559541 --- /dev/null +++ b/packages/edit-site/src/components/posts-app-routes/posts-edit.js @@ -0,0 +1,31 @@ +/** + * 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'; + +export const postsEditRoute = { + name: 'posts-edit', + match: ( params ) => { + return params.postType === 'post' && params.canvas === 'edit'; + }, + areas: { + sidebar: ( + } + /> + ), + content: , + mobile: , + preview: , + }, +}; diff --git a/packages/edit-site/src/components/posts-app-routes/posts-list-view-quick-edit.js b/packages/edit-site/src/components/posts-app-routes/posts-list-view-quick-edit.js new file mode 100644 index 0000000000000..d2434b390ffd9 --- /dev/null +++ b/packages/edit-site/src/components/posts-app-routes/posts-list-view-quick-edit.js @@ -0,0 +1,52 @@ +/** + * 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 PostQuickEdit() { + const { params } = useLocation(); + return ; +} + +export const postsListViewQuickEditRoute = { + name: 'posts-list-view-quick-edit', + match: ( params ) => { + return ( + params.isCustom !== 'true' && + ( params.layout ?? 'list' ) === 'list' && + !! params.quickEdit && + params.postType === 'post' && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + } + /> + ), + content: , + mobile: , + preview: , + edit: , + }, + widths: { + content: 380, + edit: 380, + }, +}; diff --git a/packages/edit-site/src/components/posts-app-routes/posts-list-view.js b/packages/edit-site/src/components/posts-app-routes/posts-list-view.js new file mode 100644 index 0000000000000..68aa86c7fb239 --- /dev/null +++ b/packages/edit-site/src/components/posts-app-routes/posts-list-view.js @@ -0,0 +1,40 @@ +/** + * 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'; + +export const postsListViewRoute = { + name: 'posts-list-view', + match: ( params ) => { + return ( + params.isCustom !== 'true' && + ( params.layout ?? 'list' ) === 'list' && + ! params.quickEdit && + params.postType === 'post' && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + } + /> + ), + content: , + preview: , + mobile: , + }, + widths: { + content: 380, + }, +}; diff --git a/packages/edit-site/src/components/posts-app-routes/posts-view-quick-edit.js b/packages/edit-site/src/components/posts-app-routes/posts-view-quick-edit.js new file mode 100644 index 0000000000000..52e6f9a2d26ef --- /dev/null +++ b/packages/edit-site/src/components/posts-app-routes/posts-view-quick-edit.js @@ -0,0 +1,49 @@ +/** + * 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 PostQuickEdit() { + const { params } = useLocation(); + return ; +} + +export const postsViewQuickEditRoute = { + name: 'posts-view-quick-edit', + match: ( params ) => { + return ( + ( params.isCustom === 'true' || + ( params.layout ?? 'list' ) !== 'list' ) && + !! params.quickEdit && + params.postType === 'post' && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + } + /> + ), + content: , + mobile: , + edit: , + }, + widths: { + edit: 380, + }, +}; diff --git a/packages/edit-site/src/components/posts-app-routes/posts-view.js b/packages/edit-site/src/components/posts-app-routes/posts-view.js new file mode 100644 index 0000000000000..6559991475d27 --- /dev/null +++ b/packages/edit-site/src/components/posts-app-routes/posts-view.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'; + +export const postsViewRoute = { + name: 'posts-view', + match: ( params ) => { + return ( + ( params.isCustom === 'true' || + ( params.layout ?? 'list' ) !== 'list' ) && + ! params.quickEdit && + params.postType === 'post' && + params.canvas !== 'edit' + ); + }, + areas: { + sidebar: ( + } + /> + ), + content: , + mobile: , + }, +}; diff --git a/packages/edit-site/src/components/posts-app/index.js b/packages/edit-site/src/components/posts-app/index.js index 80d2c1c7eba86..72e5b1eb99749 100644 --- a/packages/edit-site/src/components/posts-app/index.js +++ b/packages/edit-site/src/components/posts-app/index.js @@ -11,13 +11,15 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; * Internal dependencies */ import Layout from '../layout'; -import useActiveRoute from './router'; +import { useRegisterPostsAppRoutes } from '../posts-app-routes'; import { unlock } from '../../lock-unlock'; +import useActiveRoute from '../layout/router'; const { RouterProvider } = unlock( routerPrivateApis ); const { GlobalStylesProvider } = unlock( editorPrivateApis ); function PostsLayout() { + useRegisterPostsAppRoutes(); 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 deleted file mode 100644 index de89567b26209..0000000000000 --- a/packages/edit-site/src/components/posts-app/router.js +++ /dev/null @@ -1,69 +0,0 @@ -/** - * WordPress dependencies - */ -import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { useSelect } from '@wordpress/data'; -import { store as coreStore } from '@wordpress/core-data'; - -/** - * Internal dependencies - */ -import { unlock } from '../../lock-unlock'; -import Editor from '../editor'; -import SidebarNavigationScreen from '../sidebar-navigation-screen'; -import SidebarNavigationScreenMain from '../sidebar-navigation-screen-main'; -import DataViewsSidebarContent from '../sidebar-dataviews'; -import PostList from '../post-list'; - -const { useLocation } = unlock( routerPrivateApis ); - -export default function useActiveRoute() { - const { params = {} } = useLocation(); - const { postType, layout, canvas } = params; - const labels = useSelect( - ( select ) => { - return select( coreStore ).getPostType( postType )?.labels; - }, - [ postType ] - ); - - // Posts list. - if ( [ 'post' ].includes( postType ) ) { - const isListLayout = layout === 'list' || ! layout; - return { - name: 'posts-list', - areas: { - sidebar: ( - } - /> - ), - content: , - preview: ( isListLayout || canvas === 'edit' ) && ( - - ), - mobile: - canvas === 'edit' ? ( - - ) : ( - - ), - }, - widths: { - content: isListLayout ? 380 : undefined, - }, - }; - } - - // Fallback shows the home page preview - return { - name: 'default', - areas: { - sidebar: , - preview: , - mobile: canvas === 'edit' && , - }, - }; -}