Stop making sync filter affect filter list but instead just so 0 resu…

…lts if no patterns for category sync type combination
WordPress · Sep 14, 2023 · 6c51286 · 6c51286
1 parent 81876cd
commit 6c51286
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 67 deletions.
diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/explorer.js
@@ -2,10 +2,9 @@
  * WordPress dependencies
  */
 import { Modal } from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -27,25 +26,9 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 		initialCategory?.name
 	);
 
-	const previousSyncFilter = usePrevious( patternSyncFilter );
-
-	// If the sync filter changes, we need to select the "All" category to avoid
-	// showing a confusing no results screen.
-	useEffect( () => {
-		if ( patternSyncFilter && patternSyncFilter !== previousSyncFilter ) {
-			setSelectedCategory( initialCategory?.name );
-		}
-	}, [
-		patternSyncFilter,
-		previousSyncFilter,
-		patternSourceFilter,
-		initialCategory?.name,
-	] );
-
 	const patternCategories = usePatternsCategories(
 		rootClientId,
-		patternSourceFilter,
-		patternSyncFilter
+		patternSourceFilter
 	);
 
 	return (

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/patterns-list.js
@@ -11,7 +11,6 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 import BlockPatternsList from '../../block-patterns-list';
-import InserterNoResults from '../no-results';
 import useInsertionPoint from '../hooks/use-insertion-point';
 import usePatternsState from '../hooks/use-patterns-state';
 import InserterListbox from '../../inserter-listbox';
@@ -25,10 +24,24 @@ import {
 	PATTERN_SOURCE_FILTERS,
 } from '../block-patterns-source-filter';
 
-function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
+function PatternsListHeader( {
+	filterValue,
+	filteredBlockPatternsLength,
+	selectedCategory,
+	patternCategories,
+} ) {
 	if ( ! filterValue ) {
 		return null;
 	}
+	let filter = filterValue;
+	if ( selectedCategory !== allPatternsCategory.name ) {
+		const category = patternCategories.find(
+			( patternCategory ) => patternCategory.name === selectedCategory
+		);
+		if ( category ) {
+			filter = `${ filter } - ${ category?.label }`;
+		}
+	}
 	return (
 		<Heading
 			level={ 2 }
@@ -43,7 +56,7 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 					filteredBlockPatternsLength
 				),
 				filteredBlockPatternsLength,
-				filterValue
+				filter
 			) }
 		</Heading>
 	);
@@ -147,19 +160,19 @@ function PatternList( {
 			className="block-editor-block-patterns-explorer__list"
 			ref={ container }
 		>
-			{ hasItems && (
-				<PatternsListHeader
-					filterValue={
-						searchValue ||
-						PATTERN_SOURCE_FILTERS[ patternSourceFilter ]
-					}
-					filteredBlockPatternsLength={ filteredBlockPatterns.length }
-				/>
-			) }
+			<PatternsListHeader
+				filterValue={
+					searchValue || PATTERN_SOURCE_FILTERS[ patternSourceFilter ]
+				}
+				filteredBlockPatternsLength={ filteredBlockPatterns.length }
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+			/>
+
 			<InserterListbox>
-				{ ! hasItems && <InserterNoResults /> }
 				{ patternSourceFilter === PATTERN_TYPES.user &&
 					! searchValue && <BlockPatternsSyncFilter /> }
+
 				{ hasItems && (
 					<BlockPatternsList
 						shownPatterns={ pagingProps.categoryPatternsAsyncList }

diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab.js b/packages/block-editor/src/components/inserter/block-patterns-tab.js
@@ -9,7 +9,7 @@ import {
 	useEffect,
 } from '@wordpress/element';
 import { _x, __, _n, isRTL, sprintf } from '@wordpress/i18n';
-import { useViewportMatch, usePrevious } from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -75,11 +75,7 @@ export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
 	return false;
 }
 
-export function usePatternsCategories(
-	rootClientId,
-	sourceFilter = 'all',
-	syncFilter
-) {
+export function usePatternsCategories( rootClientId, sourceFilter = 'all' ) {
 	const { patterns: allPatterns, allCategories } = usePatternsState(
 		undefined,
 		rootClientId
@@ -91,13 +87,9 @@ export function usePatternsCategories(
 				? allPatterns
 				: allPatterns.filter(
 						( pattern ) =>
-							! isPatternFiltered(
-								pattern,
-								sourceFilter,
-								syncFilter
-							)
+							! isPatternFiltered( pattern, sourceFilter )
 				  ),
-		[ sourceFilter, syncFilter, allPatterns ]
+		[ sourceFilter, allPatterns ]
 	);
 
 	const hasRegisteredCategory = useCallback(
@@ -213,8 +205,7 @@ export function BlockPatternsCategoryPanel( {
 	}, [] );
 	const availableCategories = usePatternsCategories(
 		rootClientId,
-		patternFilter,
-		patternSyncFilter
+		patternFilter
 	);
 	const container = useRef();
 	const currentCategoryPatterns = useMemo(
@@ -311,30 +302,10 @@ function BlockPatternsTabs( {
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
-	const patternSyncFilter = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return settings.patternsSyncFilter;
-	}, [] );
-	const previousSyncFilter = usePrevious( patternSyncFilter );
-
-	// If the sync filter changes, we need to select the "All" category to avoid
-	// showing a confusing no results screen.
-	useEffect( () => {
-		if ( patternSyncFilter && patternSyncFilter !== previousSyncFilter ) {
-			onSelectCategory( allPatternsCategory, patternSourceFilter );
-		}
-	}, [
-		patternSyncFilter,
-		previousSyncFilter,
-		onSelectCategory,
-		patternSourceFilter,
-	] );
 
 	const categories = usePatternsCategories(
 		rootClientId,
-		patternSourceFilter,
-		patternSyncFilter
+		patternSourceFilter
 	);
 
 	const initialCategory = selectedCategory || categories[ 0 ];