Site Editor: Remove the details pages (WordPress#61741)

Co-authored-by: youknowriad <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: jsnajdr <[email protected]> Co-authored-by: ellatrix <[email protected]> Co-authored-by: draganescu <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: richtabor <[email protected]>
carstingaxion · May 21, 2024 · e1aaee2 · e1aaee2
1 parent 474fdfd
commit e1aaee2
Show file tree

Hide file tree

Showing 64 changed files with 246 additions and 1,886 deletions.
diff --git a/packages/core-commands/src/site-editor-navigation-commands.js b/packages/core-commands/src/site-editor-navigation-commands.js
@@ -16,7 +16,7 @@ import {
 	navigation,
 } from '@wordpress/icons';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
-import { getQueryArg, addQueryArgs, getPath } from '@wordpress/url';
+import { addQueryArgs, getPath } from '@wordpress/url';
 import { useDebounce } from '@wordpress/compose';
 
 /**
@@ -119,22 +119,14 @@ const getNavigationCommandLoaderPerPostType = ( postType ) =>
 				const isSiteEditor = getPath( window.location.href )?.includes(
 					'site-editor.php'
 				);
-				const extraArgs = isSiteEditor
-					? {
-							canvas: getQueryArg(
-								window.location.href,
-								'canvas'
-							),
-					  }
-					: {};
 
 				return {
 					...command,
 					callback: ( { close } ) => {
 						const args = {
 							postType,
 							postId: record.id,
-							...extraArgs,
+							canvas: 'edit',
 						};
 						const targetUrl = addQueryArgs(
 							'site-editor.php',
@@ -195,15 +187,6 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 			const result = [];
 			result.push(
 				...orderedRecords.map( ( record ) => {
-					const extraArgs = isSiteEditor
-						? {
-								canvas: getQueryArg(
-									window.location.href,
-									'canvas'
-								),
-						  }
-						: {};
-
 					return {
 						name: templateType + '-' + record.id,
 						searchLabel: record.title?.rendered + ' ' + record.id,
@@ -215,7 +198,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 							const args = {
 								postType: templateType,
 								postId: record.id,
-								...extraArgs,
+								canvas: 'edit',
 							};
 							const targetUrl = addQueryArgs(
 								'site-editor.php',
@@ -242,8 +225,7 @@ const getNavigationCommandLoaderPerTemplate = ( templateType ) =>
 					icon: symbolFilled,
 					callback: ( { close } ) => {
 						const args = {
-							path: '/patterns',
-							categoryType: 'wp_template_part',
+							postType: 'wp_template_part',
 							categoryId: 'all-parts',
 						};
 						const targetUrl = addQueryArgs(
@@ -296,7 +278,7 @@ function useSiteEditorBasicNavigationCommands() {
 				icon: navigation,
 				callback: ( { close } ) => {
 					const args = {
-						path: '/navigation',
+						postType: 'wp_navigation',
 					};
 					const targetUrl = addQueryArgs( 'site-editor.php', args );
 					if ( isSiteEditor ) {
@@ -332,7 +314,7 @@ function useSiteEditorBasicNavigationCommands() {
 				icon: page,
 				callback: ( { close } ) => {
 					const args = {
-						path: '/page',
+						post_type: 'page',
 					};
 					const targetUrl = addQueryArgs( 'site-editor.php', args );
 					if ( isSiteEditor ) {
@@ -350,7 +332,7 @@ function useSiteEditorBasicNavigationCommands() {
 				icon: layout,
 				callback: ( { close } ) => {
 					const args = {
-						path: '/wp_template',
+						postType: 'wp_template',
 					};
 					const targetUrl = addQueryArgs( 'site-editor.php', args );
 					if ( isSiteEditor ) {
@@ -370,7 +352,7 @@ function useSiteEditorBasicNavigationCommands() {
 			callback: ( { close } ) => {
 				if ( canCreateTemplate ) {
 					const args = {
-						path: '/patterns',
+						postType: 'wp_block',
 					};
 					const targetUrl = addQueryArgs( 'site-editor.php', args );
 					if ( isSiteEditor ) {

diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -46,14 +46,12 @@ export default function AddNewPattern() {
 		[]
 	);
 
-	function handleCreatePattern( { pattern, categoryId } ) {
+	function handleCreatePattern( { pattern } ) {
 		setShowPatternModal( false );
 
 		history.push( {
 			postId: pattern.id,
 			postType: PATTERN_TYPES.user,
-			categoryType: PATTERN_TYPES.theme,
-			categoryId,
 			canvas: 'edit',
 		} );
 	}
@@ -139,7 +137,7 @@ export default function AddNewPattern() {
 						let currentCategoryId;
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
-						if ( params.categoryType !== TEMPLATE_PART_POST_TYPE ) {
+						if ( params.postType !== TEMPLATE_PART_POST_TYPE ) {
 							const currentCategory = categoryMap
 								.values()
 								.find(
@@ -168,8 +166,7 @@ export default function AddNewPattern() {
 							params.categoryId !== 'my-patterns'
 						) {
 							history.push( {
-								path: `/patterns`,
-								categoryType: PATTERN_TYPES.theme,
+								postType: PATTERN_TYPES.user,
 								categoryId: PATTERN_DEFAULT_CATEGORY,
 							} );
 						}

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -217,10 +217,7 @@ export default function Editor( { isLoading, onClick } ) {
 				case 'move-to-trash':
 					{
 						history.push( {
-							path: '/' + items[ 0 ].type,
-							postId: undefined,
-							postType: undefined,
-							canvas: 'view',
+							postType: items[ 0 ].type,
 						} );
 					}
 					break;
@@ -245,7 +242,6 @@ export default function Editor( { isLoading, onClick } ) {
 										label: __( 'Edit' ),
 										onClick: () => {
 											history.push( {
-												path: undefined,
 												postId: newItem.id,
 												postType: newItem.type,
 												canvas: 'edit',

diff --git a/packages/edit-site/src/components/layout/router.js b/packages/edit-site/src/components/layout/router.js
@@ -17,38 +17,74 @@ 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 SidebarNavigationScreenPage from '../sidebar-navigation-screen-page';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
-import SidebarNavigationScreenTemplate from '../sidebar-navigation-screen-template';
-import SidebarNavigationScreenPattern from '../sidebar-navigation-screen-pattern';
 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';
 
 const { useLocation, useHistory } = unlock( routerPrivateApis );
 
-export default function useLayoutAreas() {
-	const isSiteEditorLoading = useIsSiteEditorLoading();
+function useRedirectOldPaths() {
 	const history = useHistory();
 	const { params } = useLocation();
-	const { postType, postId, path, layout, isCustom, canvas } = params;
-
 	useEffect( () => {
-		// `/wp_template_part/all` path is no longer used and redirects to
-		// Patterns page for backward compatibility.
+		const { postType, path, categoryType, ...rest } = params;
+
 		if ( path === '/wp_template_part/all' ) {
-			history.replace( { path: '/patterns' } );
+			history.replace( { postType: TEMPLATE_PART_POST_TYPE } );
+		}
+
+		if ( path === '/page' ) {
+			history.replace( {
+				postType: 'page',
+				...rest,
+			} );
+		}
+
+		if ( path === '/wp_template' ) {
+			history.replace( {
+				postType: TEMPLATE_POST_TYPE,
+				...rest,
+			} );
+		}
+
+		if ( path === '/patterns' ) {
+			history.replace( {
+				postType:
+					categoryType === TEMPLATE_PART_POST_TYPE
+						? TEMPLATE_PART_POST_TYPE
+						: PATTERN_TYPES.user,
+				...rest,
+			} );
+		}
+
+		if ( path === '/navigation' ) {
+			history.replace( {
+				postType: NAVIGATION_POST_TYPE,
+				...rest,
+			} );
 		}
-	}, [ history, path ] );
+	}, [ history, params ] );
+}
 
-	// Note: Since "sidebar" is not yet supported here,
-	// returning undefined from "mobile" means show the sidebar.
+export default function useLayoutAreas() {
+	const isSiteEditorLoading = useIsSiteEditorLoading();
+	const history = useHistory();
+	const { params } = useLocation();
+	const { postType, postId, path, layout, isCustom, canvas } = params;
+	useRedirectOldPaths();
 
 	// Page list
-	if ( path === '/page' ) {
+	if ( postType === 'page' ) {
 		const isListLayout = layout === 'list' || ! layout;
 		return {
-			key: 'pages-list',
+			key: 'pages',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreen
@@ -58,7 +94,7 @@ export default function useLayoutAreas() {
 					/>
 				),
 				content: <PagePages />,
-				preview: isListLayout && (
+				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor
 						isLoading={ isSiteEditorLoading }
 						onClick={ () =>
@@ -83,61 +119,17 @@ export default function useLayoutAreas() {
 		};
 	}
 
-	// Regular other post types
-	if ( postType && postId ) {
-		let sidebar;
-		if ( postType === 'wp_template_part' || postType === 'wp_block' ) {
-			sidebar = (
-				<SidebarNavigationScreenPattern
-					backPath={ {
-						path: '/patterns',
-						categoryId: params.categoryId,
-						categoryType: params.categoryType,
-					} }
-				/>
-			);
-		} else if ( postType === 'wp_template' ) {
-			sidebar = (
-				<SidebarNavigationScreenTemplate
-					backPath={ { path: '/wp_template' } }
-				/>
-			);
-		} else if ( postType === 'page' ) {
-			sidebar = (
-				<SidebarNavigationScreenPage
-					backPath={ { path: '/page', postId } }
-				/>
-			);
-		} else {
-			sidebar = (
-				<SidebarNavigationScreenNavigationMenu
-					backPath={ { path: '/navigation' } }
-				/>
-			);
-		}
-		return {
-			key: 'page',
-			areas: {
-				sidebar,
-				preview: <Editor isLoading={ isSiteEditorLoading } />,
-				mobile: canvas === 'edit' && (
-					<Editor isLoading={ isSiteEditorLoading } />
-				),
-			},
-		};
-	}
-
 	// Templates
-	if ( path === '/wp_template' ) {
+	if ( postType === TEMPLATE_POST_TYPE ) {
 		const isListLayout = isCustom !== 'true' && layout === 'list';
 		return {
-			key: 'templates-list',
+			key: 'templates',
 			areas: {
 				sidebar: (
 					<SidebarNavigationScreenTemplatesBrowse backPath={ {} } />
 				),
 				content: <PageTemplates />,
-				preview: isListLayout && (
+				preview: ( isListLayout || canvas === 'edit' ) && (
 					<Editor isLoading={ isSiteEditorLoading } />
 				),
 				mobile: <PageTemplates />,
@@ -149,15 +141,18 @@ export default function useLayoutAreas() {
 	}
 
 	// Patterns
-	// `/wp_template_part/all` path is no longer used and redirects to
-	// Patterns page for backward compatibility.
-	if ( path === '/patterns' || path === '/wp_template_part/all' ) {
+	if (
+		[ TEMPLATE_PART_POST_TYPE, PATTERN_TYPES.user ].includes( postType )
+	) {
 		return {
 			key: 'patterns',
 			areas: {
 				sidebar: <SidebarNavigationScreenPatterns backPath={ {} } />,
 				content: <PagePatterns />,
 				mobile: <PagePatterns />,
+				preview: canvas === 'edit' && (
+					<Editor isLoading={ isSiteEditorLoading } />
+				),
 			},
 		};
 	}
@@ -179,14 +174,14 @@ export default function useLayoutAreas() {
 	}
 
 	// Navigation
-	if ( path === '/navigation' ) {
+	if ( postType === NAVIGATION_POST_TYPE ) {
 		if ( postId ) {
 			return {
 				key: 'navigation',
 				areas: {
 					sidebar: (
 						<SidebarNavigationScreenNavigationMenu
-							backPath={ { path: '/navigation' } }
+							backPath={ { postType: NAVIGATION_POST_TYPE } }
 						/>
 					),
 					preview: <Editor isLoading={ isSiteEditorLoading } />,