Patterns: add a "All Template Parts" section (#60775)

Co-authored-by: oandregal <[email protected]> Co-authored-by: jorgefilipecosta <[email protected]>
WordPress · Apr 16, 2024 · 72198da · 72198da
1 parent 69b748a
commit 72198da
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 2 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js
@@ -40,8 +40,10 @@ export default function PatternsHeader( {
 		const templatePartArea = templatePartAreas.find(
 			( area ) => area.area === categoryId
 		);
-		title = templatePartArea?.label;
-		description = templatePartArea?.description;
+		title = templatePartArea?.label || __( 'All Template Parts' );
+		description =
+			templatePartArea?.description ||
+			__( 'Includes every template part defined for any area.' );
 	} else if ( type === PATTERN_TYPES.theme ) {
 		patternCategory = patternCategories.find(
 			( category ) => category.name === categoryId

diff --git a/packages/edit-site/src/components/page-patterns/search-items.js b/packages/edit-site/src/components/page-patterns/search-items.js
@@ -16,6 +16,7 @@ const { extractWords, getNormalizedSearchTerms, normalizeString } = unlock(
  * Internal dependencies
  */
 import {
+	TEMPLATE_PART_ALL_AREAS_CATEGORY,
 	PATTERN_DEFAULT_CATEGORY,
 	PATTERN_USER_CATEGORY,
 	PATTERN_TYPES,
@@ -48,6 +49,7 @@ const removeMatchingTerms = ( unmatchedTerms, unprocessedTerms ) => {
  */
 export const searchItems = ( items = [], searchInput = '', config = {} ) => {
 	const normalizedSearchTerms = getNormalizedSearchTerms( searchInput );
+
 	// Filter patterns by category: the default category indicates that all patterns will be shown.
 	const onlyFilterByCategory =
 		config.categoryId !== PATTERN_DEFAULT_CATEGORY &&
@@ -100,6 +102,7 @@ function getItemSearchRank( item, searchTerm, config ) {
 
 	let rank =
 		categoryId === PATTERN_DEFAULT_CATEGORY ||
+		categoryId === TEMPLATE_PART_ALL_AREAS_CATEGORY ||
 		( categoryId === PATTERN_USER_CATEGORY &&
 			item.type === PATTERN_TYPES.user ) ||
 		hasCategory( item, 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
@@ -38,6 +38,22 @@ function TemplatePartGroup( { areas, currentArea, currentType } ) {
 				<Heading level={ 2 }>{ __( 'Template parts' ) }</Heading>
 			</div>
 			<ItemGroup className="edit-site-sidebar-navigation-screen-patterns__group">
+				<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 }
+					isActive={
+						currentArea === 'all-parts' &&
+						currentType === TEMPLATE_PART_POST_TYPE
+					}
+				/>
 				{ Object.entries( areas ).map(
 					( [ area, { label, templateParts } ] ) => (
 						<CategoryItem

diff --git a/packages/edit-site/src/utils/constants.js b/packages/edit-site/src/utils/constants.js
@@ -21,6 +21,7 @@ export const TEMPLATE_ORIGINS = {
 	plugin: 'plugin',
 };
 export const TEMPLATE_PART_AREA_DEFAULT_CATEGORY = 'uncategorized';
+export const TEMPLATE_PART_ALL_AREAS_CATEGORY = 'all-parts';
 
 // Patterns.
 export const {