Merge template parts & patterns categories

WordPress · Apr 16, 2024 · 22914c4 · 22914c4
1 parent bed12ce
commit 22914c4
Showing 1 changed file with 68 additions and 75 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
@@ -4,7 +4,6 @@
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
-	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { getTemplatePartIcon } from '@wordpress/editor';
@@ -31,75 +30,77 @@ import usePatternCategories from './use-pattern-categories';
 import useTemplatePartAreas from './use-template-part-areas';
 import { store as editSiteStore } from '../../store';
 
-function TemplatePartGroup( { areas, currentArea, currentType } ) {
+function CategoriesGroup( {
+	templatePartAreas,
+	patternCategories,
+	currentCategory,
+	currentType,
+} ) {
+	const [ allPatterns, ...otherPatterns ] = patternCategories;
+
 	return (
-		<>
-			<div className="edit-site-sidebar-navigation-screen-patterns__group-header">
-				<Heading level={ 2 }>{ __( 'Template parts' ) }</Heading>
-			</div>
-			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+		<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+			{ allPatterns && (
 				<CategoryItem
-					key="all"
-					count={ Object.values( areas )
-						.map(
-							( { templateParts } ) => templateParts?.length || 0
-						)
-						.reduce( ( acc, val ) => acc + val, 0 ) }
-					icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */
-					label={ __( 'All template parts' ) }
-					id={ 'all-parts' }
-					type={ TEMPLATE_PART_POST_TYPE }
+					key={ allPatterns.name }
+					count={ allPatterns.count }
+					label={ allPatterns.label }
+					icon={ file }
+					id={ allPatterns.name }
+					type="pattern"
 					isActive={
-						currentArea === 'all-parts' &&
-						currentType === TEMPLATE_PART_POST_TYPE
+						currentCategory === `${ allPatterns.name }` &&
+						( currentType === PATTERN_TYPES.theme ||
+							currentType === PATTERN_TYPES.user )
 					}
 				/>
-				{ Object.entries( areas ).map(
-					( [ area, { label, templateParts } ] ) => (
-						<CategoryItem
-							key={ area }
-							count={ templateParts?.length }
-							icon={ getTemplatePartIcon( area ) }
-							label={ label }
-							id={ area }
-							type={ TEMPLATE_PART_POST_TYPE }
-							isActive={
-								currentArea === area &&
-								currentType === TEMPLATE_PART_POST_TYPE
-							}
-						/>
-					)
-				) }
-			</ItemGroup>
-		</>
-	);
-}
-
-function PatternCategoriesGroup( {
-	categories,
-	currentCategory,
-	currentType,
-} ) {
-	return (
-		<>
-			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
-				{ categories.map( ( category ) => (
+			) }
+			<CategoryItem
+				key="all"
+				count={ Object.values( templatePartAreas )
+					.map( ( { templateParts } ) => templateParts?.length || 0 )
+					.reduce( ( acc, val ) => acc + val, 0 ) }
+				icon={ getTemplatePartIcon() } /* no name, so it provides the fallback icon */
+				label={ __( 'All template parts' ) }
+				id={ 'all-parts' }
+				type={ TEMPLATE_PART_POST_TYPE }
+				isActive={
+					currentCategory === 'all-parts' &&
+					currentType === TEMPLATE_PART_POST_TYPE
+				}
+			/>
+			{ Object.entries( templatePartAreas ).map(
+				( [ area, { label, templateParts } ] ) => (
 					<CategoryItem
-						key={ category.name }
-						count={ category.count }
-						label={ category.label }
-						icon={ file }
-						id={ category.name }
-						type="pattern"
+						key={ area }
+						count={ templateParts?.length }
+						icon={ getTemplatePartIcon( area ) }
+						label={ label }
+						id={ area }
+						type={ TEMPLATE_PART_POST_TYPE }
 						isActive={
-							currentCategory === `${ category.name }` &&
-							( currentType === PATTERN_TYPES.theme ||
-								currentType === PATTERN_TYPES.user )
+							currentCategory === area &&
+							currentType === TEMPLATE_PART_POST_TYPE
 						}
 					/>
-				) ) }
-			</ItemGroup>
-		</>
+				)
+			) }
+			{ otherPatterns.map( ( category ) => (
+				<CategoryItem
+					key={ category.name }
+					count={ category.count }
+					label={ category.label }
+					icon={ file }
+					id={ category.name }
+					type="pattern"
+					isActive={
+						currentCategory === `${ category.name }` &&
+						( currentType === PATTERN_TYPES.theme ||
+							currentType === PATTERN_TYPES.user )
+					}
+				/>
+			) ) }
+		</ItemGroup>
 	);
 }
 
@@ -162,20 +163,12 @@ export default function SidebarNavigationScreenPatterns() {
 									</Item>
 								</ItemGroup>
 							) }
-							{ hasPatterns && (
-								<PatternCategoriesGroup
-									categories={ patternCategories }
-									currentCategory={ currentCategory }
-									currentType={ currentType }
-								/>
-							) }
-							{ hasTemplateParts && (
-								<TemplatePartGroup
-									areas={ templatePartAreas }
-									currentArea={ currentCategory }
-									currentType={ currentType }
-								/>
-							) }
+							<CategoriesGroup
+								templatePartAreas={ templatePartAreas }
+								patternCategories={ patternCategories }
+								currentCategory={ currentCategory }
+								currentType={ currentType }
+							/>
 						</>
 					) }
 				</>