Fix site editor navigation (#48025)

WordPress · Feb 13, 2023 · 0433f44 · 0433f44 · github-actions · Feb 13, 2023
1 parent ea74a30
commit 0433f44
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 60 deletions.
diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js
@@ -67,9 +67,12 @@ export default function NewTemplatePart( {
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template part editor.
-			history.push( {
-				postId: templatePart.id,
-				postType: templatePart.type,
+			window.queueMicrotask( () => {
+				history.push( {
+					postId: templatePart.id,
+					postType: 'wp_template_part',
+					path: '/template-parts/single',
+				} );
 			} );
 
 			// TODO: Add a success notice?

diff --git a/packages/edit-site/src/components/add-new-template/new-template.js b/packages/edit-site/src/components/add-new-template/new-template.js
@@ -100,7 +100,6 @@ export default function NewTemplate( {
 	const { setTemplate, setCanvasMode } = unlock(
 		useDispatch( editSiteStore )
 	);
-
 	async function createTemplate( template, isWPSuggestion = true ) {
 		if ( isCreatingTemplate ) {
 			return;
@@ -125,15 +124,18 @@ export default function NewTemplate( {
 
 			// Set template before navigating away to avoid initial stale value.
 			setTemplate( newTemplate.id, newTemplate.slug );
-
 			// Switch to edit mode.
 			setCanvasMode( 'edit' );
 
 			// Navigate to the created template editor.
-			history.push( {
-				postId: newTemplate.id,
-				postType: newTemplate.type,
+			window.queueMicrotask( () => {
+				history.push( {
+					postId: newTemplate.id,
+					postType: newTemplate.type,
+					path: '/templates/single',
+				} );
 			} );
+
 			createSuccessNotice(
 				sprintf(
 					// translators: %s: Title of the created template e.g: "Category".

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Button } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+
+/**
+ * Internal dependencies
+ */
+import SidebarNavigationScreen from '../sidebar-navigation-screen';
+import { unlock } from '../../private-apis';
+import { store as editSiteStore } from '../../store';
+
+export default function SidebarNavigationScreenNavigationItem() {
+	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+
+	const { post } = useSelect( ( select ) => {
+		const { getEditedPostContext } = select( editSiteStore );
+		const { getEntityRecord } = select( coreStore );
+		const { postType, postId } = getEditedPostContext() ?? {};
+
+		// The currently selected entity to display.
+		// Typically template or template part in the site editor.
+		return {
+			post:
+				postId && postType
+					? getEntityRecord( 'postType', postType, postId )
+					: null,
+		};
+	}, [] );
+
+	return (
+		<SidebarNavigationScreen
+			path="/navigation/single"
+			title={ post ? decodeEntities( post?.title?.rendered ) : null }
+			actions={
+				<Button
+					variant="primary"
+					onClick={ () => setCanvasMode( 'edit' ) }
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			}
+			content={
+				post ? decodeEntities( post?.description?.rendered ) : null
+			}
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/index.js
@@ -25,6 +25,7 @@ export default function SidebarNavigationScreenNavigationMenus() {
 				history.push( {
 					postType: attributes.type,
 					postId: attributes.id,
+					path: '/navigation/single',
 				} );
 			}
 		},

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecords } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -15,12 +18,6 @@ import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
 
-function omit( object, keys ) {
-	return Object.fromEntries(
-		Object.entries( object ).filter( ( [ key ] ) => ! keys.includes( key ) )
-	);
-}
-
 const config = {
 	wp_template: {
 		path: '/templates',
@@ -42,15 +39,13 @@ const config = {
 	},
 };
 
-const Item = ( { item } ) => {
+const TemplateItem = ( { postType, postId, ...props } ) => {
 	const linkInfo = useLink( {
-		...item.params,
-		path: config[ item.params.postType ].path + '/single',
+		postType,
+		postId,
+		path: config[ postType ].path + '/single',
 	} );
-	const props = item.params
-		? { ...omit( item, 'params' ), ...linkInfo }
-		: item;
-	return <SidebarNavigationItem { ...props } />;
+	return <SidebarNavigationItem { ...linkInfo } { ...props } />;
 };
 
 export default function SidebarNavigationScreenTemplates( {
@@ -66,31 +61,6 @@ export default function SidebarNavigationScreenTemplates( {
 		}
 	);
 
-	let items = [];
-	if ( isLoading ) {
-		items = [
-			{
-				children: config[ postType ].labels.loading,
-			},
-		];
-	} else if ( ! templates && ! isLoading ) {
-		items = [
-			{
-				children: config[ postType ].labels.notFound,
-			},
-		];
-	} else {
-		items = templates?.map( ( template ) => ( {
-			params: {
-				postType,
-				postId: template.id,
-			},
-			children: decodeEntities(
-				template.title?.rendered || template.slug
-			),
-		} ) );
-	}
-
 	const browseAllLink = useLink( {
 		postType,
 		postId: undefined,
@@ -114,19 +84,37 @@ export default function SidebarNavigationScreenTemplates( {
 			}
 			content={
 				<>
-					<ItemGroup>
-						{ items.map( ( item, index ) => (
-							<Item item={ item } key={ index } />
-						) ) }
-
-						{ ! isMobileViewport && (
-							<SidebarNavigationItem
-								className="edit-site-sidebar-navigation-screen-templates__see-all"
-								{ ...browseAllLink }
-								children={ config[ postType ].labels.manage }
-							/>
-						) }
-					</ItemGroup>
+					{ isLoading && config[ postType ].labels.loading }
+					{ ! isLoading && (
+						<ItemGroup>
+							{ ! templates?.length && (
+								<Item>
+									{ config[ postType ].labels.notFound }
+								</Item>
+							) }
+							{ ( templates ?? [] ).map( ( template ) => (
+								<TemplateItem
+									postType={ postType }
+									postId={ template.id }
+									key={ template.id }
+								>
+									{ decodeEntities(
+										template.title?.rendered ||
+											template.slug
+									) }
+								</TemplateItem>
+							) ) }
+							{ ! isMobileViewport && (
+								<SidebarNavigationItem
+									className="edit-site-sidebar-navigation-screen-templates__see-all"
+									{ ...browseAllLink }
+									children={
+										config[ postType ].labels.manage
+									}
+								/>
+							) }
+						</ItemGroup>
+					) }
 				</>
 			}
 		/>

diff --git a/packages/edit-site/src/components/sidebar/index.js b/packages/edit-site/src/components/sidebar/index.js
@@ -16,6 +16,7 @@ import useSyncPathWithURL from '../sync-state-with-url/use-sync-path-with-url';
 import SidebarNavigationScreenNavigationMenus from '../sidebar-navigation-screen-navigation-menus';
 import SidebarNavigationScreenTemplatesBrowse from '../sidebar-navigation-screen-templates-browse';
 import SaveButton from '../save-button';
+import SidebarNavigationScreenNavigationItem from '../sidebar-navigation-screen-navigation-item';
 
 function SidebarScreens() {
 	useSyncPathWithURL();
@@ -24,6 +25,7 @@ function SidebarScreens() {
 		<>
 			<SidebarNavigationScreenMain />
 			<SidebarNavigationScreenNavigationMenus />
+			<SidebarNavigationScreenNavigationItem />
 			<SidebarNavigationScreenTemplates postType="wp_template" />
 			<SidebarNavigationScreenTemplates postType="wp_template_part" />
 			<SidebarNavigationScreenTemplate postType="wp_template" />