Patterns: Display all custom template part areas in sidebar nav

Author: aaronrobertshaw

packages/edit-site/src/components/page-patterns/use-patterns.js

@@ -38,14 +38,8 @@ const templatePartToPattern = ( templatePart ) => ( {
 	templatePart,
 } );
 
-const templatePartCategories = [ 'header', 'footer', 'sidebar' ];
-const templatePartHasCategory = ( item, category ) => {
-	if ( category === 'uncategorized' ) {
-		return ! templatePartCategories.includes( item.templatePart.area );
-	}
-
-	return item.templatePart.area === category;
-};
+const templatePartHasCategory = ( item, category ) =>
+	item.templatePart.area === category;
 
 const useTemplatePartsAsPatterns = (
 	categoryId,

packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js

@@ -29,13 +29,6 @@ import usePatternCategories from './use-pattern-categories';
 import useMyPatterns from './use-my-patterns';
 import useTemplatePartAreas from './use-template-part-areas';
 
-const templatePartAreaLabels = {
-	header: __( 'Headers' ),
-	footer: __( 'Footers' ),
-	sidebar: __( 'Sidebar' ),
-	uncategorized: __( 'Uncategorized' ),
-};
-
 export default function SidebarNavigationScreenPatterns() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
@@ -111,18 +104,17 @@ export default function SidebarNavigationScreenPatterns() {
 							{ hasTemplateParts && (
 								<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 									{ Object.entries( templatePartAreas ).map(
-										( [ area, parts ] ) => (
+										( [
+											area,
+											{ label, templateParts },
+										] ) => (
 											<CategoryItem
 												key={ area }
-												count={ parts.length }
+												count={ templateParts?.length }
 												icon={ getTemplatePartIcon(
 													area
 												) }
-												label={
-													templatePartAreaLabels[
-														area
-													]
-												}
+												label={ label }
 												id={ area }
 												type="wp_template_part"
 												isActive={

packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js

@@ -2,19 +2,41 @@
  * WordPress dependencies
  */
 import { useEntityRecords } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 
-const getTemplatePartAreas = ( items ) => {
+const useTemplatePartsGroupedByArea = ( items ) => {
 	const allItems = items || [];
 
-	const groupedByArea = allItems.reduce(
-		( accumulator, item ) => {
-			const key = accumulator[ item.area ] ? item.area : 'uncategorized';
-			accumulator[ key ].push( item );
-			return accumulator;
-		},
-		{ header: [], footer: [], sidebar: [], uncategorized: [] }
+	const templatePartAreas = useSelect(
+		( select ) =>
+			select( editorStore ).__experimentalGetDefaultTemplatePartAreas(),
+		[]
 	);
 
+	// Create map of template areas ensuring that default areas are displayed before
+	// any custom registered template part areas.
+	const knownAreas = {
+		header: {},
+		footer: {},
+		sidebar: {},
+		uncategorized: {},
+	};
+
+	templatePartAreas.forEach(
+		( templatePartArea ) =>
+			( knownAreas[ templatePartArea.area ] = {
+				...templatePartArea,
+				templateParts: [],
+			} )
+	);
+
+	const groupedByArea = allItems.reduce( ( accumulator, item ) => {
+		const key = accumulator[ item.area ] ? item.area : 'uncategorized';
+		accumulator[ key ].templateParts.push( item );
+		return accumulator;
+	}, knownAreas );
+
 	return groupedByArea;
 };
 
@@ -28,6 +50,6 @@ export default function useTemplatePartAreas() {
 	return {
 		hasTemplateParts: templateParts ? !! templateParts.length : false,
 		isLoading,
-		templatePartAreas: getTemplatePartAreas( templateParts ),
+		templatePartAreas: useTemplatePartsGroupedByArea( templateParts ),
 	};
 }