Site Editor: reorder template creation dropdown (#26610)

The items were previously in alphabetical order by slug, as with any keyed JS object. This allowed '404' to be first, which is not a very important template.
WordPress · Nov 3, 2020 · 7305ed3 · 7305ed3
1 parent 9b2f095
commit 7305ed3
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/...ges/edit-site/src/components/navigation-sidebar/navigation-panel/new-template-dropdown.js b/...ges/edit-site/src/components/navigation-sidebar/navigation-panel/new-template-dropdown.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { map, omit } from 'lodash';
+import { map, filter, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -46,9 +46,11 @@ export default function NewTemplateDropdown() {
 		} );
 	};
 
-	const missingTemplates = omit(
+	const existingTemplateSlugs = map( templates, 'slug' );
+
+	const missingTemplates = filter(
 		TEMPLATES_DEFAULT_DETAILS,
-		map( templates, 'slug' )
+		( template ) => ! includes( existingTemplateSlugs, template.slug )
 	);
 
 	return (
@@ -70,7 +72,7 @@ export default function NewTemplateDropdown() {
 					<MenuGroup label={ __( 'Add Template' ) }>
 						{ map(
 							missingTemplates,
-							( { title, description }, slug ) => (
+							( { title, description, slug } ) => (
 								<MenuItem
 									info={ description }
 									key={ slug }

diff --git a/packages/edit-site/src/utils/get-template-info/constants.js b/packages/edit-site/src/utils/get-template-info/constants.js
@@ -3,48 +3,55 @@
  */
 import { __, _x } from '@wordpress/i18n';
 
-export const TEMPLATES_DEFAULT_DETAILS = {
-	// General
-	'front-page': {
+/**
+ * Default template details, ordered by perceived importance
+ */
+export const TEMPLATES_DEFAULT_DETAILS = [
+	{
+		slug: 'front-page',
 		title: _x( 'Front Page', 'template name' ),
 		description: __(
 			'Front page template, whether it displays the blog posts index or a static page'
 		),
 	},
-	archive: {
-		title: _x( 'Archive', 'template name' ),
-		description: __( 'Generic archive template' ),
-	},
-	singular: {
-		title: _x( 'Singular', 'template name' ),
-		description: __( 'Default template for both single posts and pages' ),
-	},
-	index: {
+	{
+		slug: 'index',
 		title: _x( 'Index', 'template name' ),
 		description: __( 'Default template' ),
 	},
-	search: {
-		title: _x( 'Search Results', 'template name' ),
-		description: __( 'Search results template' ),
-	},
-	'404': {
-		title: _x( '404 (Not Found)', 'template name' ),
-		description: __( 'Template for "not found" errors' ),
+	{
+		slug: 'home',
+		title: __( 'Home Page' ),
+		description: __( 'Template for the latest blog posts' ),
 	},
-
-	// Pages
-	page: {
+	{
+		slug: 'page',
 		title: __( 'Single Page' ),
 		description: __( 'Template for single pages' ),
 	},
-
-	// Posts
-	home: {
-		title: __( 'Home Page' ),
-		description: __( 'Template for the latest blog posts' ),
+	{
+		slug: 'singular',
+		title: _x( 'Singular', 'template name' ),
+		description: __( 'Default template for both single posts and pages' ),
 	},
-	single: {
+	{
+		slug: 'single',
 		title: __( 'Single Post' ),
 		description: __( 'Template for single posts' ),
 	},
-};
+	{
+		slug: 'archive',
+		title: _x( 'Archive', 'template name' ),
+		description: __( 'Generic archive template' ),
+	},
+	{
+		slug: 'search',
+		title: _x( 'Search Results', 'template name' ),
+		description: __( 'Search results template' ),
+	},
+	{
+		slug: '404',
+		title: _x( '404 (Not Found)', 'template name' ),
+		description: __( 'Template for "not found" errors' ),
+	},
+];
diff --git a/packages/edit-site/src/utils/get-template-info/index.js b/packages/edit-site/src/utils/get-template-info/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import { find } from 'lodash';
+
 /**
  * Internal dependencies
  */
@@ -15,7 +20,7 @@ export default function getTemplateInfo( template ) {
 		return {};
 	}
 	const { title: defaultTitle, description: defaultDescription } =
-		TEMPLATES_DEFAULT_DETAILS[ template.slug ] ?? {};
+		find( TEMPLATES_DEFAULT_DETAILS, { slug: template?.slug } ) ?? {};
 
 	let title = template?.title?.rendered ?? template.slug;
 	if ( title !== template.slug ) {