Set an order for page layout categories (#50110)

Author: roo2

packages/page-template-modal/src/components/page-template-modal.js

@@ -18,6 +18,7 @@ import replacePlaceholders from '../utils/replace-placeholders';
 import ensureAssets from '../utils/ensure-assets';
 import mapBlocksRecursively from '../utils/map-blocks-recursively';
 import containsMissingBlock from '../utils/contains-missing-block';
+import { sortGroupNames } from '../utils/group-utils';
 
 export default class PageTemplateModal extends Component {
 	state = {
@@ -280,16 +281,8 @@ export default class PageTemplateModal extends Component {
 			}
 		}
 
-		return this.sortGroupsNames( templateGroups );
-	};
-
-	sortGroupsNames = ( groups ) => {
-		return Object.keys( groups )
-			.sort()
-			.reduce( ( result, key ) => {
-				result[ key ] = groups[ key ];
-				return result;
-			}, {} );
+		const preferredGroupOrder = [ 'about', 'blog', 'home-page', 'gallery', 'services', 'contact' ];
+		return sortGroupNames( preferredGroupOrder, templateGroups );
 	};
 
 	getTemplatesForGroup = ( groupName ) => {
@@ -339,7 +332,7 @@ export default class PageTemplateModal extends Component {
 		const blankGroup = this.renderTemplateGroup( 'blank', __( 'Blank', __i18n_text_domain__ ) );
 
 		const homePageGroup = this.props.isFrontPage
-			? this.renderTemplateGroup( 'home-page', __( 'Home Page', __i18n_text_domain__ ) )
+			? this.renderTemplateGroup( 'home-page', __( 'Home', __i18n_text_domain__ ) )
 			: null;
 
 		const renderedGroups = [];
@@ -364,10 +357,10 @@ export default class PageTemplateModal extends Component {
 			return null;
 		}
 
-		return this.renderTemplatesList( templates, groupName, groupTitle );
+		return this.renderTemplatesList( templates, groupTitle );
 	};
 
-	renderTemplatesList = ( templatesList, groupName, groupTitle ) => {
+	renderTemplatesList = ( templatesList, groupTitle ) => {
 		if ( ! templatesList.length ) {
 			return null;
 		}

packages/page-template-modal/src/utils/group-utils.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { intersection, difference } from 'lodash';
+
+/**
+ * Sorts the keys on the group object to have a preferred order.
+ * If some groups exist without a preferred order, they will be included last
+ *
+ * @param {Array<string>} preferredGroupOrder the order of group slugs that we want
+ * @param {object} groupsObject an object with all group information, with group names as keys
+ */
+export function sortGroupNames( preferredGroupOrder, groupsObject ) {
+	const groups = Object.keys( groupsObject );
+
+	const orderedGroups = intersection( preferredGroupOrder, groups );
+	const remainingGroups = difference( groups, preferredGroupOrder );
+	const allGroups = orderedGroups.concat( remainingGroups.sort() );
+
+	return allGroups.reduce( ( result, groupName ) => {
+		result[ groupName ] = groupsObject[ groupName ];
+		return result;
+	}, {} );
+}