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

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,37 @@ 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';
+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';
 
-const INITIAL_INSERTER_RESULTS = 2;
-
-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 }
@@ -37,18 +56,25 @@ function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
 					filteredBlockPatternsLength
 				),
 				filteredBlockPatternsLength,
-				filterValue
+				filter
 			) }
 		</Heading>
 	);
 }
 
-function PatternList( { filterValue, selectedCategory, patternCategories } ) {
+function PatternList( {
+	searchValue,
+	patternSourceFilter,
+	selectedCategory,
+	patternCategories,
+} ) {
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+	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 +88,54 @@ 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 (
+				isPatternFiltered(
+					pattern,
+					patternSourceFilter,
+					patternSyncFilter
+				)
+			) {
+				return false;
+			}
+
+			if ( selectedCategory === allPatternsCategory.name ) {
+				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,
+			patternSourceFilter
+		);
 	}, [
-		filterValue,
-		allPatterns,
+		searchValue,
+		patternSourceFilter,
+		patterns,
 		selectedCategory,
 		registeredPatternCategories,
+		patternSyncFilter,
 	] );
 
 	// Announce search results on change.
 	useEffect( () => {
-		if ( ! filterValue ) {
+		if ( ! searchValue ) {
 			return;
 		}
 		const count = filteredBlockPatterns.length;
@@ -95,31 +145,50 @@ 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,
+		patternSourceFilter
+	);
 
 	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 || PATTERN_SOURCE_FILTERS[ patternSourceFilter ]
+				}
+				filteredBlockPatternsLength={ filteredBlockPatterns.length }
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+			/>
+
 			<InserterListbox>
-				{ ! hasItems && <InserterNoResults /> }
+				{ patternSourceFilter === PATTERN_TYPES.user &&
+					! searchValue && (
+						<BlockPatternsSyncFilter
+							patternSyncFilter={ patternSyncFilter }
+							setPatternSyncFilter={ setPatternSyncFilter }
+						/>
+					) }
+
 				{ 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

@@ -4,6 +4,12 @@
 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,
@@ -31,14 +37,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 +56,26 @@ function PatternExplorerSidebar( {
 	selectedCategory,
 	patternCategories,
 	onClickCategory,
-	filterValue,
-	setFilterValue,
+	patternSourceFilter,
+	setPatternSourceFilter,
+	searchValue,
+	setSearchValue,
 } ) {
 	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
 	return (
 		<div className={ baseClassName }>
 			<PatternsExplorerSearch
-				filterValue={ filterValue }
-				setFilterValue={ setFilterValue }
+				searchValue={ searchValue }
+				setSearchValue={ setSearchValue }
+			/>
+			<BlockPatternsSourceFilter
+				value={ patternSourceFilter }
+				onChange={ ( value ) => {
+					setPatternSourceFilter( value );
+					onClickCategory( allPatternsCategory.name );
+				} }
 			/>
-			{ ! filterValue && (
+			{ ! searchValue && (
 				<PatternCategoriesList
 					selectedCategory={ selectedCategory }
 					patternCategories={ patternCategories }

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

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { SelectControl } from '@wordpress/components';
+
+export const PATTERN_TYPES = {
+	synced: 'synced',
+	unsynced: 'unsynced',
+	user: 'user',
+	theme: 'theme',
+};
+
+const patternSourceOptions = [
+	{ value: 'all', label: __( 'All pattern types' ) },
+	{ value: PATTERN_TYPES.theme, label: __( 'Theme patterns' ) },
+	{ value: PATTERN_TYPES.user, label: __( 'My patterns' ) },
+];
+
+export const PATTERN_SOURCE_FILTERS = patternSourceOptions.reduce(
+	( patternSourceFilters, { value, label } ) => {
+		patternSourceFilters[ value ] = label;
+		return patternSourceFilters;
+	},
+	{}
+);
+
+export default function BlockPatternsSourceFilter( { onChange, value } ) {
+	return (
+		<SelectControl
+			className="block-editor-block-patterns__source-filter"
+			label={ __( 'Pattern source' ) }
+			options={ patternSourceOptions }
+			value={ value }
+			onChange={ onChange }
+			aria-label={ __( 'Filter patterns by type' ) }
+			hideLabelFromVision
+		/>
+	);
+}

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

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+export const SYNC_TYPES = {
+	full: 'fully',
+	unsynced: 'unsynced',
+};
+
+const patternSyncOptions = [
+	{ value: 'all', label: __( 'All' ) },
+	{ value: SYNC_TYPES.full, label: __( 'Synced' ) },
+	{ value: SYNC_TYPES.unsynced, label: __( 'Standard' ) },
+];
+
+export function BlockPatternsSyncFilter( {
+	setPatternSyncFilter,
+	patternSyncFilter,
+} ) {
+	return (
+		<SelectControl
+			className="block-editor-patterns__sync-status-filter"
+			label={ __( 'Syncing' ) }
+			options={ patternSyncOptions }
+			value={ patternSyncFilter }
+			onChange={ setPatternSyncFilter }
+			aria-label={ __( 'Filter patterns by sync type' ) }
+		/>
+	);
+}