Patterns: Update pattern inserter to show all categories regardless o…

…f sync status (#54480) Co-authored-by: Aaron Robertshaw <[email protected]>
WordPress · Sep 15, 2023 · 85f4c5e · 85f4c5e
1 parent 8669bee
commit 85f4c5e
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 105 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,50 +2,27 @@
  * 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
  */
 import PatternExplorerSidebar from './sidebar';
 import PatternList from './patterns-list';
 import { usePatternsCategories } from '../block-patterns-tab';
-import { store as blockEditorStore } from '../../../store';
 
 function PatternsExplorer( { initialCategory, rootClientId } ) {
 	const [ searchValue, setSearchValue ] = useState( '' );
 	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
-	const patternSyncFilter = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return settings.patternsSyncFilter || 'all';
-	}, [] );
+
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		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 (
@@ -64,7 +41,6 @@ function PatternsExplorer( { initialCategory, rootClientId } ) {
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
 				patternSourceFilter={ patternSourceFilter }
-				patternSyncFilter={ patternSyncFilter }
 			/>
 		</div>
 	);

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
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useEffect, useRef } from '@wordpress/element';
+import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
 import { useDebounce } from '@wordpress/compose';
 import { __experimentalHeading as Heading } from '@wordpress/components';
@@ -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>
 	);
@@ -54,8 +67,8 @@ function PatternList( {
 	patternSourceFilter,
 	selectedCategory,
 	patternCategories,
-	patternSyncFilter,
 } ) {
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -147,19 +160,24 @@ 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 /> }
+					! searchValue && (
+						<BlockPatternsSyncFilter
+							patternSyncFilter={ patternSyncFilter }
+							setPatternSyncFilter={ setPatternSyncFilter }
+						/>
+					) }
+
 				{ hasItems && (
 					<BlockPatternsList
 						shownPatterns={ pagingProps.categoryPatternsAsyncList }

diff --git a/packages/block-editor/src/components/inserter/block-patterns-sync-filter.js b/packages/block-editor/src/components/inserter/block-patterns-sync-filter.js
@@ -3,12 +3,10 @@
  */
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import { store as blockEditorStore } from '../../store';
 export const SYNC_TYPES = {
 	full: 'fully',
 	unsynced: 'unsynced',
@@ -20,28 +18,17 @@ const patternSyncOptions = [
 	{ value: SYNC_TYPES.unsynced, label: __( 'Standard' ) },
 ];
 
-export function BlockPatternsSyncFilter() {
-	const { updateSettings } = useDispatch( blockEditorStore );
-
-	const syncFilter = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return settings.patternsSyncFilter || 'all';
-	}, [] );
-
-	const handleUpdateSyncFilter = ( value ) => {
-		updateSettings( {
-			patternsSyncFilter: value,
-		} );
-	};
-
+export function BlockPatternsSyncFilter( {
+	setPatternSyncFilter,
+	patternSyncFilter,
+} ) {
 	return (
 		<SelectControl
 			className="block-editor-patterns__sync-status-filter"
 			label={ __( 'Syncing' ) }
 			options={ patternSyncOptions }
-			value={ syncFilter }
-			onChange={ ( value ) => handleUpdateSyncFilter( value ) }
+			value={ patternSyncFilter }
+			onChange={ setPatternSyncFilter }
 			aria-label={ __( 'Filter patterns by sync type' ) }
 		/>
 	);

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,
@@ -20,7 +20,6 @@ import {
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 import { focus } from '@wordpress/dom';
 import { speak } from '@wordpress/a11y';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -39,7 +38,6 @@ import {
 	BlockPatternsSyncFilter,
 	SYNC_TYPES,
 } from './block-patterns-sync-filter';
-import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
@@ -75,11 +73,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 +85,9 @@ export function usePatternsCategories(
 				? allPatterns
 				: allPatterns.filter(
 						( pattern ) =>
-							! isPatternFiltered(
-								pattern,
-								sourceFilter,
-								syncFilter
-							)
+							! isPatternFiltered( pattern, sourceFilter )
 				  ),
-		[ sourceFilter, syncFilter, allPatterns ]
+		[ sourceFilter, allPatterns ]
 	);
 
 	const hasRegisteredCategory = useCallback(
@@ -206,15 +196,11 @@ export function BlockPatternsCategoryPanel( {
 		onInsert,
 		rootClientId
 	);
-	const patternSyncFilter = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return settings.patternsSyncFilter || 'all';
-	}, [] );
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+
 	const availableCategories = usePatternsCategories(
 		rootClientId,
-		patternFilter,
-		patternSyncFilter
+		patternFilter
 	);
 	const container = useRef();
 	const currentCategoryPatterns = useMemo(
@@ -265,6 +251,7 @@ export function BlockPatternsCategoryPanel( {
 	);
 
 	// Hide block pattern preview on unmount.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
 	return (
@@ -277,7 +264,10 @@ export function BlockPatternsCategoryPanel( {
 			</div>
 			<p>{ category.description }</p>
 			{ patternFilter === PATTERN_TYPES.user && (
-				<BlockPatternsSyncFilter />
+				<BlockPatternsSyncFilter
+					patternSyncFilter={ patternSyncFilter }
+					setPatternSyncFilter={ setPatternSyncFilter }
+				/>
 			) }
 			{ ! currentCategoryPatterns.length && (
 				<div>{ __( 'No results found' ) }</div>
@@ -311,30 +301,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 ];