Show uncategorized patterns on the Editor > Patterns page (#52633)

WordPress · Jul 17, 2023 · 155f2a0 · 155f2a0
1 parent 482e28c
commit 155f2a0
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 11 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -176,7 +176,7 @@ function GridItem( { categoryId, item, ...props } ) {
 					spacing={ 3 }
 					className="edit-site-patterns__pattern-title"
 				>
-					{ itemIcon && (
+					{ itemIcon && ! isNonUserPattern && (
 						<Tooltip
 							position="top center"
 							text={ __(

diff --git a/packages/edit-site/src/components/page-patterns/patterns-list.js b/packages/edit-site/src/components/page-patterns/patterns-list.js
@@ -57,11 +57,18 @@ export default function PatternsList( { categoryId, type } ) {
 
 	const [ syncFilter, setSyncFilter ] = useState( 'all' );
 	const deferredSyncedFilter = useDeferredValue( syncFilter );
-	const { patterns, isResolving } = usePatterns( type, categoryId, {
-		search: deferredFilterValue,
-		syncStatus:
-			deferredSyncedFilter === 'all' ? undefined : deferredSyncedFilter,
-	} );
+
+	const { patterns, isResolving } = usePatterns(
+		type,
+		categoryId !== 'uncategorized' ? categoryId : '',
+		{
+			search: deferredFilterValue,
+			syncStatus:
+				deferredSyncedFilter === 'all'
+					? undefined
+					: deferredSyncedFilter,
+		}
+	);
 
 	const id = useId();
 	const titleId = `${ id }-title`;

diff --git a/packages/edit-site/src/components/page-patterns/use-patterns.js b/packages/edit-site/src/components/page-patterns/use-patterns.js
@@ -93,11 +93,17 @@ const selectThemePatterns = ( select, { categoryId, search = '' } = {} ) => {
 			blocks: parse( pattern.content ),
 		} ) );
 
-	patterns = searchItems( patterns, search, {
-		categoryId,
-		hasCategory: ( item, currentCategory ) =>
-			item.categories?.includes( currentCategory ),
-	} );
+	if ( categoryId ) {
+		patterns = searchItems( patterns, search, {
+			categoryId,
+			hasCategory: ( item, currentCategory ) =>
+				item.categories?.includes( currentCategory ),
+		} );
+	} else {
+		patterns = searchItems( patterns, search, {
+			hasCategory: ( item ) => ! item.hasOwnProperty( 'categories' ),
+		} );
+	}
 
 	return { patterns, isResolving: false };
 };

diff --git a/...ges/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js b/...ges/edit-site/src/components/sidebar-navigation-screen-patterns/use-pattern-categories.js
@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -11,6 +12,10 @@ import useThemePatterns from './use-theme-patterns';
 
 export default function usePatternCategories() {
 	const defaultCategories = useDefaultPatternCategories();
+	defaultCategories.push( {
+		name: 'uncategorized',
+		label: __( 'Uncategorized' ),
+	} );
 	const themePatterns = useThemePatterns();
 
 	const patternCategories = useMemo( () => {
@@ -31,6 +36,10 @@ export default function usePatternCategories() {
 					categoryMap[ category ].count += 1;
 				}
 			} );
+			// If the pattern has no categories, add it to uncategorized.
+			if ( ! pattern.categories?.length ) {
+				categoryMap.uncategorized.count += 1;
+			}
 		} );
 
 		// Filter categories so we only have those containing patterns.