Site Editor: Browsing sidebar templates menu restructure (#28291)

packages/e2e-tests/specs/experiments/multi-entity-editing.test.js

@@ -207,8 +207,11 @@ describe( 'Multi-entity editor states', () => {
 				'.wp-block-template-part .block-editor-block-list__layout'
 			);
 
-			// Our custom template shows up in the " templates > all" menu; let's use it.
-			await clickTemplateItem( [ 'Templates', 'All' ], templateName );
+			// Our custom template shows up in the "Templates > General" menu; let's use it.
+			await clickTemplateItem(
+				[ 'Templates', 'General templates' ],
+				templateName
+			);
 			await page.waitForXPath(
 				`//h1[contains(@class, "edit-site-document-actions__title") and contains(text(), '${ templateName }')]`
 			);

packages/edit-site/src/components/navigation-sidebar/navigation-panel/constants.js

@@ -3,16 +3,43 @@
  */
 import { __ } from '@wordpress/i18n';
 
-export const TEMPLATES_GENERAL = [
-	'front-page',
-	'archive',
-	'singular',
+export const TEMPLATES_PRIMARY = [
 	'index',
-	'search',
+	'singular',
+	'archive',
+	'single',
+	'page',
+	'home',
 	'404',
+	'search',
+];
+
+export const TEMPLATES_SECONDARY = [
+	'author',
+	'category',
+	'taxonomy',
+	'date',
+	'tag',
+	'attachment',
+	'single-post',
+	'front-page',
+];
+
+export const TEMPLATES_TOP_LEVEL = [
+	...TEMPLATES_PRIMARY,
+	...TEMPLATES_SECONDARY,
+];
+
+export const TEMPLATES_GENERAL = [ 'page-home' ];
+
+export const TEMPLATES_POSTS_PREFIXES = [
+	'post-',
+	'author-',
+	'single-post-',
+	'tag-',
 ];
 
-export const TEMPLATES_POSTS = [ 'home', 'single', 'single-post' ];
+export const TEMPLATES_PAGES_PREFIXES = [ 'page-' ];
 
 export const TEMPLATES_NEW_OPTIONS = [
 	'front-page',
@@ -30,9 +57,10 @@ export const MENU_CONTENT_PAGES = 'content-pages';
 export const MENU_CONTENT_POSTS = 'content-posts';
 export const MENU_TEMPLATE_PARTS = 'template-parts';
 export const MENU_TEMPLATES = 'templates';
-export const MENU_TEMPLATES_ALL = 'templates-all';
+export const MENU_TEMPLATES_GENERAL = 'templates-general';
 export const MENU_TEMPLATES_PAGES = 'templates-pages';
 export const MENU_TEMPLATES_POSTS = 'templates-posts';
+export const MENU_TEMPLATES_UNUSED = 'templates-unused';
 
 export const SEARCH_DEBOUNCE_IN_MS = 75;
 

packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-all.js → packages/edit-site/src/components/navigation-sidebar/navigation-panel/menus/templates-sub.js

@@ -7,22 +7,31 @@ import { map } from 'lodash';
  * WordPress dependencies
  */
 import { __experimentalNavigationMenu as NavigationMenu } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import TemplateNavigationItem from '../template-navigation-item';
-import { MENU_TEMPLATES, MENU_TEMPLATES_ALL } from '../constants';
+import { MENU_TEMPLATES } from '../constants';
+
+export default function TemplatesSubMenu( { menu, title, templates } ) {
+	const templatesFiltered = useMemo(
+		() =>
+			templates
+				?.filter( ( { location } ) => location === menu )
+				?.map( ( { template } ) => template ) ?? [],
+		[ menu, templates ]
+	);
 
-export default function TemplatesAllMenu( { templates } ) {
 	return (
 		<NavigationMenu
-			menu={ MENU_TEMPLATES_ALL }
-			title={ __( 'All Templates' ) }
+			menu={ menu }
+			title={ title }
 			parentMenu={ MENU_TEMPLATES }
+			isEmpty={ templatesFiltered.length === 0 }
 		>
-			{ map( templates, ( template ) => (
+			{ map( templatesFiltered, ( template ) => (
 				<TemplateNavigationItem
 					item={ template }
 					key={ `wp_template-${ template.id }` }