Site Editor (Experiment): Automatically open the sidebar to the appropriate template sub-menu

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

@@ -51,6 +51,12 @@ export const TEMPLATES_NEW_OPTIONS = [
 	'index',
 ];
 
+export const TEMPLATE_OVERRIDES = {
+	singular: [ 'single', 'page' ],
+	index: [ 'archive', '404', 'search', 'singular', 'home' ],
+	home: [ 'front-page' ],
+};
+
 export const MENU_ROOT = 'root';
 export const MENU_CONTENT_CATEGORIES = 'content-categories';
 export const MENU_CONTENT_PAGES = 'content-pages';

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

@@ -25,64 +25,15 @@ import {
 	MENU_TEMPLATES_PAGES,
 	MENU_TEMPLATES_POSTS,
 	MENU_TEMPLATES_UNUSED,
-	TEMPLATES_GENERAL,
-	TEMPLATES_PAGES_PREFIXES,
-	TEMPLATES_POSTS_PREFIXES,
-	TEMPLATES_TOP_LEVEL,
 } from '../constants';
 import NewTemplateDropdown from '../new-template-dropdown';
 import TemplateNavigationItem from '../template-navigation-item';
 import SearchResults from '../search-results';
 import TemplatesSubMenu from './templates-sub';
-import { isTemplateSuperseded } from '../template-hierarchy';
-
-function getTemplateLocation( template ) {
-	const { slug } = template;
-
-	const isTopLevelTemplate = TEMPLATES_TOP_LEVEL.includes( slug );
-	if ( isTopLevelTemplate ) {
-		return MENU_TEMPLATES;
-	}
-
-	const isGeneralTemplate = TEMPLATES_GENERAL.includes( slug );
-	if ( isGeneralTemplate ) {
-		return MENU_TEMPLATES_GENERAL;
-	}
-
-	const isPostsTemplate = TEMPLATES_POSTS_PREFIXES.some( ( prefix ) =>
-		slug.startsWith( prefix )
-	);
-	if ( isPostsTemplate ) {
-		return MENU_TEMPLATES_POSTS;
-	}
-
-	const isPagesTemplate = TEMPLATES_PAGES_PREFIXES.some( ( prefix ) =>
-		slug.startsWith( prefix )
-	);
-	if ( isPagesTemplate ) {
-		return MENU_TEMPLATES_PAGES;
-	}
-
-	return MENU_TEMPLATES_GENERAL;
-}
-
-function getUnusedTemplates( templates, showOnFront ) {
-	const unusedTemplates = [];
-
-	const templateSlugs = map( templates, 'slug' );
-	const supersededTemplates = templates.filter( ( { slug } ) =>
-		isTemplateSuperseded( slug, templateSlugs, showOnFront )
-	);
-
-	return [ ...supersededTemplates, ...unusedTemplates ];
-}
-
-function getTemplatesLocationMap( templates ) {
-	return templates.reduce( ( obj, template ) => {
-		obj[ template.slug ] = getTemplateLocation( template );
-		return obj;
-	}, {} );
-}
+import {
+	getTemplatesLocationMap,
+	getUnusedTemplates,
+} from '../template-hierarchy';
 
 export default function TemplatesMenu() {
 	const [ search, setSearch ] = useState( '' );

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

@@ -1,8 +1,22 @@
-const TEMPLATE_OVERRIDES = {
-	singular: [ 'single', 'page' ],
-	index: [ 'archive', '404', 'search', 'singular', 'home' ],
-	home: [ 'front-page' ],
-};
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * Internal dependencies
+ */
+import {
+	MENU_TEMPLATES,
+	MENU_TEMPLATES_GENERAL,
+	MENU_TEMPLATES_PAGES,
+	MENU_TEMPLATES_POSTS,
+	TEMPLATE_OVERRIDES,
+	TEMPLATES_GENERAL,
+	TEMPLATES_PAGES_PREFIXES,
+	TEMPLATES_POSTS_PREFIXES,
+	TEMPLATES_TOP_LEVEL,
+} from './constants';
 
 export function isTemplateSuperseded( slug, existingSlugs, showOnFront ) {
 	if ( ! TEMPLATE_OVERRIDES[ slug ] ) {
@@ -21,3 +35,47 @@ export function isTemplateSuperseded( slug, existingSlugs, showOnFront ) {
 			isTemplateSuperseded( overrideSlug, existingSlugs, showOnFront )
 	);
 }
+
+export function getTemplateLocation( slug ) {
+	const isTopLevelTemplate = TEMPLATES_TOP_LEVEL.includes( slug );
+	if ( isTopLevelTemplate ) {
+		return MENU_TEMPLATES;
+	}
+
+	const isGeneralTemplate = TEMPLATES_GENERAL.includes( slug );
+	if ( isGeneralTemplate ) {
+		return MENU_TEMPLATES_GENERAL;
+	}
+
+	const isPostsTemplate = TEMPLATES_POSTS_PREFIXES.some( ( prefix ) =>
+		slug.startsWith( prefix )
+	);
+	if ( isPostsTemplate ) {
+		return MENU_TEMPLATES_POSTS;
+	}
+
+	const isPagesTemplate = TEMPLATES_PAGES_PREFIXES.some( ( prefix ) =>
+		slug.startsWith( prefix )
+	);
+	if ( isPagesTemplate ) {
+		return MENU_TEMPLATES_PAGES;
+	}
+
+	return MENU_TEMPLATES_GENERAL;
+}
+
+export function getUnusedTemplates( templates, showOnFront ) {
+	const templateSlugs = map( templates, 'slug' );
+	const supersededTemplates = templates.filter( ( { slug } ) =>
+		isTemplateSuperseded( slug, templateSlugs, showOnFront )
+	);
+
+	return supersededTemplates;
+}
+
+export function getTemplatesLocationMap( templates ) {
+	return templates.reduce( ( obj, template ) => {
+		obj[ template.slug ] = getTemplateLocation( template.slug );
+		return obj;
+	}, {} );
+}

packages/edit-site/src/store/selectors.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
+import { get, map } from 'lodash';
 import createSelector from 'rememo';
 
 /**
@@ -15,10 +15,15 @@ import { uploadMedia } from '@wordpress/media-utils';
  * Internal dependencies
  */
 import {
+	MENU_ROOT,
 	MENU_TEMPLATE_PARTS,
+	MENU_TEMPLATES_UNUSED,
 	TEMPLATE_PARTS_SUB_MENUS,
-	MENU_TEMPLATES,
 } from '../components/navigation-sidebar/navigation-panel/constants';
+import {
+	getTemplateLocation,
+	isTemplateSuperseded,
+} from '../components/navigation-sidebar/navigation-panel/template-hierarchy';
 
 /**
  * Returns whether the given feature is enabled or not.
@@ -153,20 +158,13 @@ export function getNavigationPanelActiveMenu( state ) {
  * Returns the current template or template part's corresponding
  * navigation panel's sub menu, to be used with `openNavigationPanelToMenu`.
  *
- * Currently, while template parts return their sub menu,
- * templates always return their main menu.
- *
  * @param {Object} state Global application state.
  *
  * @return {string} The current template or template part's sub menu.
  */
 export const getCurrentTemplateNavigationPanelSubMenu = createRegistrySelector(
 	( select ) => ( state ) => {
 		const templateType = getEditedPostType( state );
-		if ( 'wp_template' === templateType ) {
-			return MENU_TEMPLATES;
-		}
-
 		const templateId = getEditedPostId( state );
 		const template = templateId
 			? select( coreDataStore ).getEntityRecord(
@@ -176,11 +174,41 @@ export const getCurrentTemplateNavigationPanelSubMenu = createRegistrySelector(
 			  )
 			: null;
 
-		return (
-			TEMPLATE_PARTS_SUB_MENUS.find(
-				( submenu ) => submenu.area === template?.area
-			)?.menu || MENU_TEMPLATE_PARTS
+		if ( ! template ) {
+			return MENU_ROOT;
+		}
+
+		if ( 'wp_template_part' === templateType ) {
+			return (
+				TEMPLATE_PARTS_SUB_MENUS.find(
+					( submenu ) => submenu.area === template?.area
+				)?.menu || MENU_TEMPLATE_PARTS
+			);
+		}
+
+		const templates = select( coreDataStore ).getEntityRecords(
+			'postType',
+			'wp_template',
+			{
+				per_page: -1,
+			}
 		);
+		const showOnFront = select( coreDataStore ).getEditedEntityRecord(
+			'root',
+			'site'
+		).show_on_front;
+
+		if (
+			isTemplateSuperseded(
+				template.slug,
+				map( templates, 'slug' ),
+				showOnFront
+			)
+		) {
+			return MENU_TEMPLATES_UNUSED;
+		}
+
+		return getTemplateLocation( template.slug );
 	}
 );