De-emphasise pattern filters in inserter (#54681)

* de-emphasise pattern filters in inserter * Remove obsolete props from PatternListHeader * Remove unnecessary dependencies comment * Remove unused pattern source filters * Fix pattern filtering logic * Split theme patterns from core and directory sourced ones * Allow theme and directory patterns as unsynced * Disable the sync filter options if the pattern source is not user * Add constants for different all values * Keep the menu open while toggling options * Add sticky header * Fix padding and move pagination * Fix pagination scroll to top * Reset pagination if filter changes * Revert the update to paging scroll to top * Fix scrolling-to-top after page changes * Fix scrolling-to-top after filter changes * Scroll to top on category change * Fix scroll-to-top on category change * Derive pattern sync menu options * Update the translators comment --------- Co-authored-by: Aaron Robertshaw <[email protected]> Co-authored-by: Glen Davies <[email protected]> Co-authored-by: Kai Hao <[email protected]>
WordPress · Sep 22, 2023 · 2831076 · 2831076
1 parent 46697a3
commit 2831076
Show file tree

Hide file tree

Showing 11 changed files with 301 additions and 247 deletions.
diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, forwardRef } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	__unstableComposite as Composite,
@@ -24,6 +24,7 @@ import { Icon, symbol } from '@wordpress/icons';
  */
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
+import BlockPatternsPaging from '../block-patterns-paging';
 
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
@@ -140,23 +141,28 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList( {
-	isDraggable,
-	blockPatterns,
-	shownPatterns,
-	onHover,
-	onClickPattern,
-	orientation,
-	label = __( 'Block Patterns' ),
-	showTitlesAsTooltip,
-} ) {
+function BlockPatternList(
+	{
+		isDraggable,
+		blockPatterns,
+		shownPatterns,
+		onHover,
+		onClickPattern,
+		orientation,
+		label = __( 'Block Patterns' ),
+		showTitlesAsTooltip,
+		pagingProps,
+	},
+	ref
+) {
 	const composite = useCompositeState( { orientation } );
 	return (
 		<Composite
 			{ ...composite }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
+			ref={ ref }
 		>
 			{ blockPatterns.map( ( pattern ) => {
 				const isShown = shownPatterns.includes( pattern );
@@ -174,8 +180,11 @@ function BlockPatternList( {
 					<BlockPatternPlaceholder key={ pattern.name } />
 				);
 			} ) }
+			{ pagingProps && pagingProps.numPages > 1 && (
+				<BlockPatternsPaging { ...pagingProps } />
+			) }
 		</Composite>
 	);
 }
 
-export default BlockPatternList;
+export default forwardRef( BlockPatternList );
diff --git a/packages/block-editor/src/components/block-patterns-paging/index.js b/packages/block-editor/src/components/block-patterns-paging/index.js
@@ -16,7 +16,7 @@ export default function Pagination( {
 	totalItems,
 } ) {
 	return (
-		<VStack>
+		<VStack className="block-editor-patterns__grid-pagination-wrapper">
 			<Text variant="muted">
 				{
 					// translators: %s: Total number of patterns.

diff --git a/packages/block-editor/src/components/block-patterns-paging/style.scss b/packages/block-editor/src/components/block-patterns-paging/style.scss
@@ -1,20 +1,23 @@
-.block-editor-patterns__grid-pagination {
-	border-top: 1px solid $gray-800;
-	padding: $grid-unit-05;
+.block-editor-patterns__grid-pagination-wrapper {
 
-	.components-button.is-tertiary {
-		width: auto;
-		height: $button-size-compact;
+	.block-editor-patterns__grid-pagination {
+		border-top: 1px solid $gray-800;
+		padding: $grid-unit-05;
 		justify-content: center;
+		.components-button.is-tertiary {
+			width: auto;
+			height: $button-size-compact;
+			justify-content: center;
 
-		&:disabled {
-			color: $gray-600;
-			background: none;
-		}
+			&:disabled {
+				color: $gray-600;
+				background: none;
+			}
 
-		&:hover:not(:disabled) {
-			color: $white;
-			background-color: $gray-700;
+			&:hover:not(:disabled) {
+				color: $white;
+				background-color: $gray-700;
+			}
 		}
 	}
 }

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, useState } from '@wordpress/element';
+import { useMemo, useEffect, useRef } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
 import { useDebounce } from '@wordpress/compose';
 import { __experimentalHeading as Heading } from '@wordpress/components';
@@ -17,58 +17,33 @@ import InserterListbox from '../../inserter-listbox';
 import { searchItems } from '../search-items';
 import BlockPatternsPaging from '../../block-patterns-paging';
 import usePatternsPaging from '../hooks/use-patterns-paging';
-import { allPatternsCategory, isPatternFiltered } from '../block-patterns-tab';
-import { BlockPatternsSyncFilter } from '../block-patterns-sync-filter';
-import {
-	PATTERN_TYPES,
-	PATTERN_SOURCE_FILTERS,
-} from '../block-patterns-source-filter';
-
-function PatternsListHeader( {
-	filterValue,
-	filteredBlockPatternsLength,
-	selectedCategory,
-	patternCategories,
-} ) {
+import { allPatternsCategory } from '../block-patterns-tab';
+
+function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	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 }
 			lineHeight={ '48px' }
 			className="block-editor-block-patterns-explorer__search-results-count"
 		>
 			{ sprintf(
-				/* translators: %d: number of patterns. %s: block pattern search query */
+				/* translators: %d: number of patterns. */
 				_n(
-					'%1$d pattern found for "%2$s"',
-					'%1$d patterns found for "%2$s"',
+					'%d pattern found',
+					'%d patterns found',
 					filteredBlockPatternsLength
 				),
-				filteredBlockPatternsLength,
-				filter
+				filteredBlockPatternsLength
 			) }
 		</Heading>
 	);
 }
 
-function PatternList( {
-	searchValue,
-	patternSourceFilter,
-	selectedCategory,
-	patternCategories,
-} ) {
-	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+function PatternList( { searchValue, selectedCategory, patternCategories } ) {
 	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
@@ -89,16 +64,6 @@ function PatternList( {
 
 	const filteredBlockPatterns = useMemo( () => {
 		const filteredPatterns = patterns.filter( ( pattern ) => {
-			if (
-				isPatternFiltered(
-					pattern,
-					patternSourceFilter,
-					patternSyncFilter
-				)
-			) {
-				return false;
-			}
-
 			if ( selectedCategory === allPatternsCategory.name ) {
 				return true;
 			}
@@ -119,18 +84,12 @@ function PatternList( {
 			return filteredPatterns;
 		}
 
-		return searchItems(
-			filteredPatterns,
-			searchValue,
-			patternSourceFilter
-		);
+		return searchItems( filteredPatterns, searchValue );
 	}, [
 		searchValue,
-		patternSourceFilter,
 		patterns,
 		selectedCategory,
 		registeredPatternCategories,
-		patternSyncFilter,
 	] );
 
 	// Announce search results on change.
@@ -150,8 +109,7 @@ function PatternList( {
 	const pagingProps = usePatternsPaging(
 		filteredBlockPatterns,
 		selectedCategory,
-		container,
-		patternSourceFilter
+		container
 	);
 
 	const hasItems = !! filteredBlockPatterns?.length;
@@ -161,23 +119,11 @@ function PatternList( {
 			ref={ container }
 		>
 			<PatternsListHeader
-				filterValue={
-					searchValue || PATTERN_SOURCE_FILTERS[ patternSourceFilter ]
-				}
+				filterValue={ searchValue }
 				filteredBlockPatternsLength={ filteredBlockPatterns.length }
-				selectedCategory={ selectedCategory }
-				patternCategories={ patternCategories }
 			/>
 
 			<InserterListbox>
-				{ patternSourceFilter === PATTERN_TYPES.user &&
-					! searchValue && (
-						<BlockPatternsSyncFilter
-							patternSyncFilter={ patternSyncFilter }
-							setPatternSyncFilter={ setPatternSyncFilter }
-						/>
-					) }
-
 				{ hasItems && (
 					<BlockPatternsList
 						shownPatterns={ pagingProps.categoryPatternsAsyncList }

diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/sidebar.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/sidebar.js
@@ -4,12 +4,6 @@
 import { Button, SearchControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-/**
- * Internal dependencies
- */
-import { default as BlockPatternsSourceFilter } from '../block-patterns-source-filter';
-import { allPatternsCategory } from '../block-patterns-tab';
-
 function PatternCategoriesList( {
 	selectedCategory,
 	patternCategories,
@@ -56,8 +50,6 @@ function PatternExplorerSidebar( {
 	selectedCategory,
 	patternCategories,
 	onClickCategory,
-	patternSourceFilter,
-	setPatternSourceFilter,
 	searchValue,
 	setSearchValue,
 } ) {
@@ -68,13 +60,6 @@ function PatternExplorerSidebar( {
 				searchValue={ searchValue }
 				setSearchValue={ setSearchValue }
 			/>
-			<BlockPatternsSourceFilter
-				value={ patternSourceFilter }
-				onChange={ ( value ) => {
-					setPatternSourceFilter( value );
-					onClickCategory( allPatternsCategory.name );
-				} }
-			/>
 			{ ! searchValue && (
 				<PatternCategoriesList
 					selectedCategory={ selectedCategory }