@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.1

package/src/components/inserter/block-patterns-explorer/explorer.js

@@ -10,25 +10,37 @@ import { __ } from '@wordpress/i18n';
  */
 import PatternExplorerSidebar from './sidebar';
 import PatternList from './patterns-list';
+import { usePatternsCategories } from '../block-patterns-tab';
+
+function PatternsExplorer( { initialCategory, rootClientId } ) {
+	const [ searchValue, setSearchValue ] = useState( '' );
+	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
-function PatternsExplorer( { initialCategory, patternCategories } ) {
-	const [ filterValue, setFilterValue ] = useState( '' );
 	const [ selectedCategory, setSelectedCategory ] = useState(
 		initialCategory?.name
 	);
+
+	const patternCategories = usePatternsCategories(
+		rootClientId,
+		patternSourceFilter
+	);
+
 	return (
 		<div className="block-editor-block-patterns-explorer">
 			<PatternExplorerSidebar
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
 				onClickCategory={ setSelectedCategory }
-				filterValue={ filterValue }
-				setFilterValue={ setFilterValue }
+				searchValue={ searchValue }
+				setSearchValue={ setSearchValue }
+				patternSourceFilter={ patternSourceFilter }
+				setPatternSourceFilter={ setPatternSourceFilter }
 			/>
 			<PatternList
-				filterValue={ filterValue }
+				searchValue={ searchValue }
 				selectedCategory={ selectedCategory }
 				patternCategories={ patternCategories }
+				patternSourceFilter={ patternSourceFilter }
 			/>
 		</div>
 	);

package/src/components/inserter/block-patterns-explorer/patterns-list.js

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useEffect } from '@wordpress/element';
+import { useMemo, useEffect, useRef, useState } from '@wordpress/element';
 import { _n, sprintf } from '@wordpress/i18n';
-import { useDebounce, useAsyncList } from '@wordpress/compose';
+import { useDebounce } from '@wordpress/compose';
 import { __experimentalHeading as Heading } from '@wordpress/components';
 import { speak } from '@wordpress/a11y';
 
@@ -11,18 +11,19 @@ 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';
 import { searchItems } from '../search-items';
-
-const INITIAL_INSERTER_RESULTS = 2;
+import BlockPatternsPaging from '../../block-patterns-paging';
+import usePatternsPaging from '../hooks/use-patterns-paging';
+import { allPatternsCategory, myPatternsCategory } from '../block-patterns-tab';
 
 function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 	if ( ! filterValue ) {
 		return null;
 	}
+
 	return (
 		<Heading
 			level={ 2 }
@@ -30,25 +31,25 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 			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,
-				filterValue
+				filteredBlockPatternsLength
 			) }
 		</Heading>
 	);
 }
 
-function PatternList( { filterValue, selectedCategory, patternCategories } ) {
+function PatternList( { searchValue, selectedCategory, patternCategories } ) {
+	const container = useRef();
 	const debouncedSpeak = useDebounce( speak, 500 );
 	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
 		shouldFocusBlock: true,
 	} );
-	const [ allPatterns, , onSelectBlockPattern ] = usePatternsState(
+	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
 		destinationRootClientId
 	);
@@ -62,30 +63,40 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 	);
 
 	const filteredBlockPatterns = useMemo( () => {
-		if ( ! filterValue ) {
-			return allPatterns.filter( ( pattern ) =>
-				selectedCategory === 'uncategorized'
-					? ! pattern.categories?.length ||
-					  pattern.categories.every(
-							( category ) =>
-								! registeredPatternCategories.includes(
-									category
-								)
-					  )
-					: pattern.categories?.includes( selectedCategory )
-			);
+		const filteredPatterns = patterns.filter( ( pattern ) => {
+			if ( selectedCategory === allPatternsCategory.name ) {
+				return true;
+			}
+			if ( selectedCategory === myPatternsCategory.name && pattern.id ) {
+				return true;
+			}
+			if ( selectedCategory === 'uncategorized' ) {
+				const hasKnownCategory = pattern.categories.some(
+					( category ) =>
+						registeredPatternCategories.includes( category )
+				);
+
+				return ! pattern.categories?.length || ! hasKnownCategory;
+			}
+
+			return pattern.categories?.includes( selectedCategory );
+		} );
+
+		if ( ! searchValue ) {
+			return filteredPatterns;
 		}
-		return searchItems( allPatterns, filterValue );
+
+		return searchItems( filteredPatterns, searchValue );
 	}, [
-		filterValue,
-		allPatterns,
+		searchValue,
+		patterns,
 		selectedCategory,
 		registeredPatternCategories,
 	] );
 
 	// Announce search results on change.
 	useEffect( () => {
-		if ( ! filterValue ) {
+		if ( ! searchValue ) {
 			return;
 		}
 		const count = filteredBlockPatterns.length;
@@ -95,31 +106,45 @@ function PatternList( { filterValue, selectedCategory, patternCategories } ) {
 			count
 		);
 		debouncedSpeak( resultsFoundMessage );
-	}, [ filterValue, debouncedSpeak, filteredBlockPatterns.length ] );
+	}, [ searchValue, debouncedSpeak, filteredBlockPatterns.length ] );
 
-	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
-		step: INITIAL_INSERTER_RESULTS,
-	} );
+	const pagingProps = usePatternsPaging(
+		filteredBlockPatterns,
+		selectedCategory,
+		container
+	);
+
+	// Reset page when search value changes.
+	const [ previousSearchValue, setPreviousSearchValue ] =
+		useState( searchValue );
+	if ( searchValue !== previousSearchValue ) {
+		setPreviousSearchValue( searchValue );
+		pagingProps.changePage( 1 );
+	}
 
 	const hasItems = !! filteredBlockPatterns?.length;
 	return (
-		<div className="block-editor-block-patterns-explorer__list">
-			{ hasItems && (
-				<PatternsListHeader
-					filterValue={ filterValue }
-					filteredBlockPatternsLength={ filteredBlockPatterns.length }
-				/>
-			) }
+		<div
+			className="block-editor-block-patterns-explorer__list"
+			ref={ container }
+		>
+			<PatternsListHeader
+				filterValue={ searchValue }
+				filteredBlockPatternsLength={ filteredBlockPatterns.length }
+			/>
+
 			<InserterListbox>
-				{ ! hasItems && <InserterNoResults /> }
 				{ hasItems && (
 					<BlockPatternsList
-						shownPatterns={ currentShownPatterns }
-						blockPatterns={ filteredBlockPatterns }
-						onClickPattern={ onSelectBlockPattern }
+						shownPatterns={ pagingProps.categoryPatternsAsyncList }
+						blockPatterns={ pagingProps.categoryPatterns }
+						onClickPattern={ onClickPattern }
 						isDraggable={ false }
 					/>
 				) }
+				{ pagingProps.numPages > 1 && (
+					<BlockPatternsPaging { ...pagingProps } />
+				) }
 			</InserterListbox>
 		</div>
 	);

package/src/components/inserter/block-patterns-explorer/sidebar.js

@@ -31,14 +31,14 @@ function PatternCategoriesList( {
 	);
 }
 
-function PatternsExplorerSearch( { filterValue, setFilterValue } ) {
+function PatternsExplorerSearch( { searchValue, setSearchValue } ) {
 	const baseClassName = 'block-editor-block-patterns-explorer__search';
 	return (
 		<div className={ baseClassName }>
 			<SearchControl
 				__nextHasNoMarginBottom
-				onChange={ setFilterValue }
-				value={ filterValue }
+				onChange={ setSearchValue }
+				value={ searchValue }
 				label={ __( 'Search for patterns' ) }
 				placeholder={ __( 'Search' ) }
 			/>
@@ -50,17 +50,17 @@ function PatternExplorerSidebar( {
 	selectedCategory,
 	patternCategories,
 	onClickCategory,
-	filterValue,
-	setFilterValue,
+	searchValue,
+	setSearchValue,
 } ) {
 	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
 	return (
 		<div className={ baseClassName }>
 			<PatternsExplorerSearch
-				filterValue={ filterValue }
-				setFilterValue={ setFilterValue }
+				searchValue={ searchValue }
+				setSearchValue={ setSearchValue }
 			/>
-			{ ! filterValue && (
+			{ ! searchValue && (
 				<PatternCategoriesList
 					selectedCategory={ selectedCategory }
 					patternCategories={ patternCategories }

package/src/components/inserter/block-patterns-filter.js

@@ -0,0 +1,183 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	SVG,
+	Path,
+	DropdownMenu,
+	MenuGroup,
+	MenuItemsChoice,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { Icon } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { myPatternsCategory } from './block-patterns-tab';
+
+export const PATTERN_TYPES = {
+	all: 'all',
+	synced: 'synced',
+	unsynced: 'unsynced',
+	user: 'user',
+	theme: 'theme',
+	directory: 'directory',
+};
+
+export const SYNC_TYPES = {
+	all: 'all',
+	full: 'fully',
+	unsynced: 'unsynced',
+};
+
+const getShouldDisableSyncFilter = ( sourceFilter ) =>
+	sourceFilter !== PATTERN_TYPES.all && sourceFilter !== PATTERN_TYPES.user;
+
+const getShouldDisableNonUserSources = ( category ) => {
+	return category.name === myPatternsCategory.name;
+};
+
+export function BlockPatternsSyncFilter( {
+	setPatternSyncFilter,
+	setPatternSourceFilter,
+	patternSyncFilter,
+	patternSourceFilter,
+	scrollContainerRef,
+	category,
+} ) {
+	// If the category is `myPatterns` then we need to set the source filter to `user`, but
+	// we do this by deriving from props rather than calling setPatternSourceFilter otherwise
+	// the user may be confused when switching to another category if the haven't explicity set
+	// this filter themselves.
+	const currentPatternSourceFilter =
+		category.name === myPatternsCategory.name
+			? PATTERN_TYPES.user
+			: patternSourceFilter;
+
+	// We need to disable the sync filter option if the source filter is not 'all' or 'user'
+	// otherwise applying them will just result in no patterns being shown.
+	const shouldDisableSyncFilter = getShouldDisableSyncFilter(
+		currentPatternSourceFilter
+	);
+
+	// We also need to disable the directory and theme source filter options if the category
+	// is `myPatterns` otherwise applying them will also just result in no patterns being shown.
+	const shouldDisableNonUserSources =
+		getShouldDisableNonUserSources( category );
+
+	const patternSyncMenuOptions = useMemo(
+		() => [
+			{ value: SYNC_TYPES.all, label: __( 'All' ) },
+			{
+				value: SYNC_TYPES.full,
+				label: __( 'Synced' ),
+				info: __( 'Updated everywhere' ),
+				disabled: shouldDisableSyncFilter,
+			},
+			{
+				value: SYNC_TYPES.unsynced,
+				label: __( 'Standard' ),
+				info: __( 'Edit freely' ),
+				disabled: shouldDisableSyncFilter,
+			},
+		],
+		[ shouldDisableSyncFilter ]
+	);
+
+	const patternSourceMenuOptions = useMemo(
+		() => [
+			{
+				value: PATTERN_TYPES.all,
+				label: __( 'All' ),
+				disabled: shouldDisableNonUserSources,
+			},
+			{
+				value: PATTERN_TYPES.directory,
+				label: __( 'Directory' ),
+				info: __( 'Pattern directory & core' ),
+				disabled: shouldDisableNonUserSources,
+			},
+			{
+				value: PATTERN_TYPES.theme,
+				label: __( 'Theme' ),
+				info: __( 'Bundled with the theme' ),
+				disabled: shouldDisableNonUserSources,
+			},
+			{
+				value: PATTERN_TYPES.user,
+				label: __( 'User' ),
+				info: __( 'Custom created' ),
+			},
+		],
+		[ shouldDisableNonUserSources ]
+	);
+
+	function handleSetSourceFilterChange( newSourceFilter ) {
+		setPatternSourceFilter( newSourceFilter );
+		if ( getShouldDisableSyncFilter( newSourceFilter ) ) {
+			setPatternSyncFilter( SYNC_TYPES.all );
+		}
+	}
+
+	return (
+		<>
+			<DropdownMenu
+				popoverProps={ {
+					placement: 'right-end',
+				} }
+				label="Filter patterns"
+				icon={
+					<Icon
+						icon={
+							<SVG
+								width="24"
+								height="24"
+								viewBox="0 0 24 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<Path
+									d="M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z"
+									fill="#1E1E1E"
+								/>
+							</SVG>
+						}
+					/>
+				}
+			>
+				{ () => (
+					<>
+						<MenuGroup label={ __( 'Author' ) }>
+							<MenuItemsChoice
+								choices={ patternSourceMenuOptions }
+								onSelect={ ( value ) => {
+									handleSetSourceFilterChange( value );
+									scrollContainerRef.current?.scrollTo(
+										0,
+										0
+									);
+								} }
+								value={ currentPatternSourceFilter }
+							/>
+						</MenuGroup>
+						<MenuGroup label={ __( 'Type' ) }>
+							<MenuItemsChoice
+								choices={ patternSyncMenuOptions }
+								onSelect={ ( value ) => {
+									setPatternSyncFilter( value );
+									scrollContainerRef.current?.scrollTo(
+										0,
+										0
+									);
+								} }
+								value={ patternSyncFilter }
+							/>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</>
+	);
+}