From bb4cb8baf1bca90e02cfd13d924181975ab09c26 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 6 Jul 2023 13:07:24 +1000
Subject: [PATCH 1/2] Patterns: Display all custom template part areas in
 sidebar nav

---
 .../components/page-patterns/use-patterns.js  | 10 +----
 .../index.js                                  | 17 ++------
 .../use-template-part-areas.js                | 40 ++++++++++++++-----
 3 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
index cef7b4721193f..a394aabf572c4 100644
--- a/packages/edit-site/src/components/page-patterns/use-patterns.js
+++ b/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,
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index 97789e6ec45fe..0f4f73a7e1c81 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -30,13 +30,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 );
@@ -124,18 +117,14 @@ export default function SidebarNavigationScreenPatterns() {
 									<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
 										{ Object.entries(
 											templatePartAreas
-										).map( ( [ area, parts ] ) => (
+										).map( ( [ 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={
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js
index aa258344d132d..bc538c5e7a85f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/use-template-part-areas.js
+++ b/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 ),
 	};
 }

From b041ba97d4710cb1dbdbe33c1e6794f550796ec0 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 7 Jul 2023 10:42:01 +1000
Subject: [PATCH 2/2] Clean up patterns category groups

---
 .../index.js                                  | 177 +++++++++---------
 1 file changed, 84 insertions(+), 93 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index 0f4f73a7e1c81..f200382f96311 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -30,6 +30,80 @@ import usePatternCategories from './use-pattern-categories';
 import useMyPatterns from './use-my-patterns';
 import useTemplatePartAreas from './use-template-part-areas';
 
+function TemplatePartGroup( { areas, currentArea, currentType } ) {
+	return (
+		<>
+			<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
+				<Heading level={ 2 }>{ __( 'Template parts' ) }</Heading>
+				<p>{ __( 'Synced patterns for use in template building.' ) }</p>
+			</div>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+				{ Object.entries( areas ).map(
+					( [ area, { label, templateParts } ] ) => (
+						<CategoryItem
+							key={ area }
+							count={ templateParts?.length }
+							icon={ getTemplatePartIcon( area ) }
+							label={ label }
+							id={ area }
+							type="wp_template_part"
+							isActive={
+								currentArea === area &&
+								currentType === 'wp_template_part'
+							}
+						/>
+					)
+				) }
+			</ItemGroup>
+		</>
+	);
+}
+
+function ThemePatternsGroup( { categories, currentCategory, currentType } ) {
+	return (
+		<>
+			<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
+				<Heading level={ 2 }>{ __( 'Theme patterns' ) }</Heading>
+				<p>
+					{ __(
+						'For insertion into documents where they can then be customized.'
+					) }
+				</p>
+			</div>
+			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+				{ categories.map( ( category ) => (
+					<CategoryItem
+						key={ category.name }
+						count={ category.count }
+						label={
+							<Flex justify="left" align="center" gap={ 0 }>
+								{ category.label }
+								<Tooltip
+									position="top center"
+									text={ __(
+										'Theme patterns cannot be edited.'
+									) }
+								>
+									<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
+										<Icon icon={ lockSmall } size={ 24 } />
+									</span>
+								</Tooltip>
+							</Flex>
+						}
+						icon={ file }
+						id={ category.name }
+						type="pattern"
+						isActive={
+							currentCategory === `${ category.name }` &&
+							currentType === 'pattern'
+						}
+					/>
+				) ) }
+			</ItemGroup>
+		</>
+	);
+}
+
 export default function SidebarNavigationScreenPatterns() {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const { categoryType, categoryId } = getQueryArgs( window.location.href );
@@ -103,101 +177,18 @@ export default function SidebarNavigationScreenPatterns() {
 								</ItemGroup>
 							) }
 							{ hasTemplateParts && (
-								<>
-									<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
-										<Heading level={ 2 }>
-											{ __( 'Template parts' ) }
-										</Heading>
-										<p>
-											{ __(
-												'Synced patterns for use in template building.'
-											) }
-										</p>
-									</div>
-									<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-										{ Object.entries(
-											templatePartAreas
-										).map( ( [ area, { label, templateParts } ] ) => (
-											<CategoryItem
-												key={ area }
-												count={ templateParts?.length }
-												icon={ getTemplatePartIcon(
-													area
-												) }
-												label={ label }
-												id={ area }
-												type="wp_template_part"
-												isActive={
-													currentCategory === area &&
-													currentType ===
-														'wp_template_part'
-												}
-											/>
-										) ) }
-									</ItemGroup>
-								</>
+								<TemplatePartGroup
+									areas={ templatePartAreas }
+									currentArea={ currentCategory }
+									currentType={ currentType }
+								/>
 							) }
 							{ hasPatterns && (
-								<>
-									<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
-										<Heading level={ 2 }>
-											{ __( 'Theme patterns' ) }
-										</Heading>
-										<p>
-											{ __(
-												'For insertion into documents where they can then be customized.'
-											) }
-										</p>
-									</div>
-									<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-										{ patternCategories.map(
-											( category ) => (
-												<CategoryItem
-													key={ category.name }
-													count={ category.count }
-													label={
-														<Flex
-															justify="left"
-															align="center"
-															gap={ 0 }
-														>
-															{ category.label }
-															<Tooltip
-																position="top center"
-																text={ __(
-																	'Theme patterns cannot be edited.'
-																) }
-															>
-																<span className="edit-site-sidebar-navigation-screen-pattern__lock-icon">
-																	<Icon
-																		style={ {
-																			fill: 'currentcolor',
-																		} }
-																		icon={
-																			lockSmall
-																		}
-																		size={
-																			24
-																		}
-																	/>
-																</span>
-															</Tooltip>
-														</Flex>
-													}
-													icon={ file }
-													id={ category.name }
-													type="pattern"
-													isActive={
-														currentCategory ===
-															`${ category.name }` &&
-														currentType ===
-															'pattern'
-													}
-												/>
-											)
-										) }
-									</ItemGroup>
-								</>
+								<ThemePatternsGroup
+									categories={ patternCategories }
+									currentCategory={ currentCategory }
+									currentType={ currentType }
+								/>
 							) }
 						</>
 					) }