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

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

@@ -8,17 +8,21 @@ import {
 	useRef,
 	useEffect,
 } from '@wordpress/element';
-import { _x, __, isRTL } from '@wordpress/i18n';
-import { useAsyncList, useViewportMatch } from '@wordpress/compose';
+import { _x, __, _n, isRTL, sprintf } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalHeading as Heading,
+	__experimentalText as Text,
 	FlexBlock,
 	Button,
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 import { focus } from '@wordpress/dom';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -27,29 +31,88 @@ import usePatternsState from './hooks/use-patterns-state';
 import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
+import usePatternsPaging from './hooks/use-patterns-paging';
+import {
+	BlockPatternsSyncFilter,
+	SYNC_TYPES,
+	PATTERN_TYPES,
+} from './block-patterns-filter';
 
 const noop = () => {};
 
-// Preferred order of pattern categories. Any other categories should
-// be at the bottom without any re-ordering.
-const patternCategoriesOrder = [
-	'custom',
-	'featured',
-	'posts',
-	'text',
-	'gallery',
-	'call-to-action',
-	'banner',
-	'header',
-	'footer',
-];
-
-function usePatternsCategories( rootClientId ) {
-	const [ allPatterns, allCategories ] = usePatternsState(
+export const allPatternsCategory = {
+	name: 'allPatterns',
+	label: __( 'All Patterns' ),
+};
+
+export const myPatternsCategory = {
+	name: 'myPatterns',
+	label: __( 'My patterns' ),
+};
+
+export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
+	const isUserPattern = pattern.name.startsWith( 'core/block' );
+	const isDirectoryPattern =
+		pattern.source === 'core' ||
+		pattern.source?.startsWith( 'pattern-directory' );
+
+	// If theme source selected, filter out user created patterns and those from
+	// the core patterns directory.
+	if (
+		sourceFilter === PATTERN_TYPES.theme &&
+		( isUserPattern || isDirectoryPattern )
+	) {
+		return true;
+	}
+
+	// If the directory source is selected, filter out user created patterns
+	// and those bundled with the theme.
+	if (
+		sourceFilter === PATTERN_TYPES.directory &&
+		( isUserPattern || ! isDirectoryPattern )
+	) {
+		return true;
+	}
+
+	// If user source selected, filter out theme patterns. Any pattern without
+	// an id wasn't created by a user.
+	if ( sourceFilter === PATTERN_TYPES.user && ! pattern.id ) {
+		return true;
+	}
+
+	// Filter by sync status.
+	if ( syncFilter === SYNC_TYPES.full && pattern.syncStatus !== '' ) {
+		return true;
+	}
+
+	if (
+		syncFilter === SYNC_TYPES.unsynced &&
+		pattern.syncStatus !== 'unsynced' &&
+		isUserPattern
+	) {
+		return true;
+	}
+
+	return false;
+}
+
+export function usePatternsCategories( rootClientId, sourceFilter = 'all' ) {
+	const [ patterns, allCategories ] = usePatternsState(
 		undefined,
 		rootClientId
 	);
 
+	const filteredPatterns = useMemo(
+		() =>
+			sourceFilter === 'all'
+				? patterns
+				: patterns.filter(
+						( pattern ) =>
+							! isPatternFiltered( pattern, sourceFilter )
+				  ),
+		[ sourceFilter, patterns ]
+	);
+
 	const hasRegisteredCategory = useCallback(
 		( pattern ) => {
 			if ( ! pattern.categories || ! pattern.categories.length ) {
@@ -67,22 +130,14 @@ function usePatternsCategories( rootClientId ) {
 	const populatedCategories = useMemo( () => {
 		const categories = allCategories
 			.filter( ( category ) =>
-				allPatterns.some( ( pattern ) =>
+				filteredPatterns.some( ( pattern ) =>
 					pattern.categories?.includes( category.name )
 				)
 			)
-			.sort( ( { name: aName }, { name: bName } ) => {
-				// Sort categories according to `patternCategoriesOrder`.
-				let aIndex = patternCategoriesOrder.indexOf( aName );
-				let bIndex = patternCategoriesOrder.indexOf( bName );
-				// All other categories should come after that.
-				if ( aIndex < 0 ) aIndex = patternCategoriesOrder.length;
-				if ( bIndex < 0 ) bIndex = patternCategoriesOrder.length;
-				return aIndex - bIndex;
-			} );
+			.sort( ( a, b ) => a.label.localeCompare( b.label ) );
 
 		if (
-			allPatterns.some(
+			filteredPatterns.some(
 				( pattern ) => ! hasRegisteredCategory( pattern )
 			) &&
 			! categories.find(
@@ -94,9 +149,28 @@ function usePatternsCategories( rootClientId ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
-
+		if ( filteredPatterns.some( ( pattern ) => pattern.id ) ) {
+			categories.unshift( myPatternsCategory );
+		}
+		if ( filteredPatterns.length > 0 ) {
+			categories.unshift( {
+				name: allPatternsCategory.name,
+				label: allPatternsCategory.label,
+			} );
+		}
+		speak(
+			sprintf(
+				/* translators: %d: number of categories . */
+				_n(
+					'%d category button displayed.',
+					'%d category buttons displayed.',
+					categories.length
+				),
+				categories.length
+			)
+		);
 		return categories;
-	}, [ allCategories, allPatterns, hasRegisteredCategory ] );
+	}, [ allCategories, filteredPatterns, hasRegisteredCategory ] );
 
 	return populatedCategories;
 }
@@ -107,6 +181,7 @@ export function BlockPatternsCategoryDialog( {
 	onHover,
 	category,
 	showTitlesAsTooltip,
+	patternFilter,
 } ) {
 	const container = useRef();
 
@@ -124,11 +199,13 @@ export function BlockPatternsCategoryDialog( {
 			className="block-editor-inserter__patterns-category-dialog"
 		>
 			<BlockPatternsCategoryPanel
+				key={ category.name }
 				rootClientId={ rootClientId }
 				onInsert={ onInsert }
 				onHover={ onHover }
 				category={ category }
 				showTitlesAsTooltip={ showTitlesAsTooltip }
+				patternFilter={ patternFilter }
 			/>
 		</div>
 	);
@@ -141,15 +218,37 @@ export function BlockPatternsCategoryPanel( {
 	category,
 	showTitlesAsTooltip,
 } ) {
-	const [ allPatterns, , onClick ] = usePatternsState(
+	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
 		rootClientId
 	);
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
+	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
 
-	const availableCategories = usePatternsCategories( rootClientId );
+	const availableCategories = usePatternsCategories(
+		rootClientId,
+		patternSourceFilter
+	);
+	const scrollContainerRef = useRef();
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
+				if (
+					isPatternFiltered(
+						pattern,
+						patternSourceFilter,
+						patternSyncFilter
+					)
+				) {
+					return false;
+				}
+
+				if ( category.name === allPatternsCategory.name ) {
+					return true;
+				}
+				if ( category.name === myPatternsCategory.name && pattern.id ) {
+					return true;
+				}
 				if ( category.name !== 'uncategorized' ) {
 					return pattern.categories?.includes( category.name );
 				}
@@ -166,35 +265,91 @@ export function BlockPatternsCategoryPanel( {
 
 				return availablePatternCategories.length === 0;
 			} ),
-		[ allPatterns, availableCategories, category.name ]
+		[
+			allPatterns,
+			availableCategories,
+			category.name,
+			patternSourceFilter,
+			patternSyncFilter,
+		]
 	);
 
-	const categoryPatternsList = useAsyncList( currentCategoryPatterns );
+	const pagingProps = usePatternsPaging(
+		currentCategoryPatterns,
+		category,
+		scrollContainerRef
+	);
+	const { changePage } = pagingProps;
 
 	// Hide block pattern preview on unmount.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
-	if ( ! currentCategoryPatterns.length ) {
-		return null;
-	}
+	const onSetPatternSyncFilter = useCallback(
+		( value ) => {
+			setPatternSyncFilter( value );
+			changePage( 1 );
+		},
+		[ setPatternSyncFilter, changePage ]
+	);
+	const onSetPatternSourceFilter = useCallback(
+		( value ) => {
+			setPatternSourceFilter( value );
+			changePage( 1 );
+		},
+		[ setPatternSourceFilter, changePage ]
+	);
 
 	return (
 		<div className="block-editor-inserter__patterns-category-panel">
-			<div className="block-editor-inserter__patterns-category-panel-title">
-				{ category.label }
-			</div>
-			<p>{ category.description }</p>
-			<BlockPatternList
-				shownPatterns={ categoryPatternsList }
-				blockPatterns={ currentCategoryPatterns }
-				onClickPattern={ onClick }
-				onHover={ onHover }
-				label={ category.label }
-				orientation="vertical"
-				category={ category.label }
-				isDraggable
-				showTitlesAsTooltip={ showTitlesAsTooltip }
-			/>
+			<VStack
+				spacing={ 2 }
+				className="block-editor-inserter__patterns-category-panel-header"
+			>
+				<HStack>
+					<FlexBlock>
+						<Heading level={ 4 } as="div">
+							{ category.label }
+						</Heading>
+					</FlexBlock>
+					<BlockPatternsSyncFilter
+						patternSyncFilter={ patternSyncFilter }
+						patternSourceFilter={ patternSourceFilter }
+						setPatternSyncFilter={ onSetPatternSyncFilter }
+						setPatternSourceFilter={ onSetPatternSourceFilter }
+						scrollContainerRef={ scrollContainerRef }
+						category={ category }
+					/>
+				</HStack>
+				{ category.description && (
+					<Text>{ category.description }</Text>
+				) }
+				{ ! currentCategoryPatterns.length && (
+					<Text
+						variant="muted"
+						className="block-editor-inserter__patterns-category-no-results"
+					>
+						{ __( 'No results found' ) }
+					</Text>
+				) }
+			</VStack>
+
+			{ currentCategoryPatterns.length > 0 && (
+				<BlockPatternList
+					ref={ scrollContainerRef }
+					shownPatterns={ pagingProps.categoryPatternsAsyncList }
+					blockPatterns={ pagingProps.categoryPatterns }
+					onClickPattern={ onClickPattern }
+					onHover={ onHover }
+					label={ category.label }
+					orientation="vertical"
+					category={ category.name }
+					isDraggable
+					showTitlesAsTooltip={ showTitlesAsTooltip }
+					patternFilter={ patternSourceFilter }
+					pagingProps={ pagingProps }
+				/>
+			) }
 		</div>
 	);
 }
@@ -206,18 +361,20 @@ function BlockPatternsTabs( {
 	rootClientId,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
+
 	const categories = usePatternsCategories( rootClientId );
+
 	const initialCategory = selectedCategory || categories[ 0 ];
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return (
 		<>
 			{ ! isMobile && (
 				<div className="block-editor-inserter__block-patterns-tabs-container">
-					<nav aria-label={ __( 'Block pattern categories' ) }>
-						<ItemGroup
-							role="list"
-							className="block-editor-inserter__block-patterns-tabs"
-						>
+					<nav
+						aria-label={ __( 'Block pattern categories' ) }
+						className="block-editor-inserter__block-patterns-tabs"
+					>
+						<ItemGroup role="list">
 							{ categories.map( ( category ) => (
 								<Item
 									role="listitem"
@@ -270,6 +427,7 @@ function BlockPatternsTabs( {
 				<MobileTabNavigation categories={ categories }>
 					{ ( category ) => (
 						<BlockPatternsCategoryPanel
+							key={ category.name }
 							onInsert={ onInsert }
 							rootClientId={ rootClientId }
 							category={ category }
@@ -283,6 +441,7 @@ function BlockPatternsTabs( {
 					initialCategory={ initialCategory }
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
+					rootClientId={ rootClientId }
 				/>
 			) }
 		</>

package/src/components/inserter/hooks/use-patterns-paging.js

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState, useEffect } from '@wordpress/element';
+import { useAsyncList, usePrevious } from '@wordpress/compose';
+import { getScrollContainer } from '@wordpress/dom';
+
+const PAGE_SIZE = 20;
+const INITIAL_INSERTER_RESULTS = 5;
+
+/**
+ * Supplies values needed to page the patterns list client side.
+ *
+ * @param {Array}  currentCategoryPatterns An array of the current patterns to display.
+ * @param {string} currentCategory         The currently selected category.
+ * @param {Object} scrollContainerRef      Ref of container to to find scroll container for when moving between pages.
+ * @param {string} currentFilter           The currently search filter.
+ *
+ * @return {Object} Returns the relevant paging values. (totalItems, categoryPatternsList, numPages, changePage, currentPage)
+ */
+export default function usePatternsPaging(
+	currentCategoryPatterns,
+	currentCategory,
+	scrollContainerRef,
+	currentFilter = ''
+) {
+	const [ currentPage, setCurrentPage ] = useState( 1 );
+	const previousCategory = usePrevious( currentCategory );
+	const previousFilter = usePrevious( currentFilter );
+	if (
+		( previousCategory !== currentCategory ||
+			previousFilter !== currentFilter ) &&
+		currentPage !== 1
+	) {
+		setCurrentPage( 1 );
+	}
+	const totalItems = currentCategoryPatterns.length;
+	const pageIndex = currentPage - 1;
+	const categoryPatterns = useMemo( () => {
+		return currentCategoryPatterns.slice(
+			pageIndex * PAGE_SIZE,
+			pageIndex * PAGE_SIZE + PAGE_SIZE
+		);
+	}, [ pageIndex, currentCategoryPatterns ] );
+	const categoryPatternsAsyncList = useAsyncList( categoryPatterns, {
+		step: INITIAL_INSERTER_RESULTS,
+	} );
+	const numPages = Math.ceil( currentCategoryPatterns.length / PAGE_SIZE );
+	const changePage = ( page ) => {
+		const scrollContainer = getScrollContainer(
+			scrollContainerRef?.current
+		);
+		scrollContainer?.scrollTo( 0, 0 );
+
+		setCurrentPage( page );
+	};
+
+	useEffect(
+		function scrollToTopOnCategoryChange() {
+			const scrollContainer = getScrollContainer(
+				scrollContainerRef?.current
+			);
+			scrollContainer?.scrollTo( 0, 0 );
+		},
+		[ currentCategory, scrollContainerRef ]
+	);
+
+	return {
+		totalItems,
+		categoryPatterns,
+		categoryPatternsAsyncList,
+		numPages,
+		changePage,
+		currentPage,
+	};
+}

package/src/components/inserter/hooks/use-patterns-state.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useCallback, useMemo } from '@wordpress/element';
-import { cloneBlock } from '@wordpress/blocks';
+import { cloneBlock, createBlock } from '@wordpress/blocks';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
@@ -12,12 +12,6 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import { store as blockEditorStore } from '../../../store';
 
-const CUSTOM_CATEGORY = {
-	name: 'custom',
-	label: __( 'My patterns' ),
-	description: __( 'Custom patterns added by site users.' ),
-};
-
 /**
  * Retrieves the block patterns inserter state.
  *
@@ -27,30 +21,47 @@ const CUSTOM_CATEGORY = {
  * @return {Array} Returns the patterns state. (patterns, categories, onSelect handler)
  */
 const usePatternsState = ( onInsert, rootClientId ) => {
-	const { patternCategories, patterns } = useSelect(
+	const { patternCategories, patterns, userPatternCategories } = useSelect(
 		( select ) => {
 			const { __experimentalGetAllowedPatterns, getSettings } =
 				select( blockEditorStore );
-
+			const {
+				__experimentalUserPatternCategories,
+				__experimentalBlockPatternCategories,
+			} = getSettings();
 			return {
 				patterns: __experimentalGetAllowedPatterns( rootClientId ),
-				patternCategories:
-					getSettings().__experimentalBlockPatternCategories,
+				userPatternCategories: __experimentalUserPatternCategories,
+				patternCategories: __experimentalBlockPatternCategories,
 			};
 		},
 		[ rootClientId ]
 	);
 
-	const allCategories = useMemo(
-		() => [ ...patternCategories, CUSTOM_CATEGORY ],
-		[ patternCategories ]
-	);
+	const allCategories = useMemo( () => {
+		const categories = [ ...patternCategories ];
+		userPatternCategories?.forEach( ( userCategory ) => {
+			if (
+				! categories.find(
+					( existingCategory ) =>
+						existingCategory.name === userCategory.name
+				)
+			) {
+				categories.push( userCategory );
+			}
+		} );
+		return categories;
+	}, [ patternCategories, userPatternCategories ] );
 
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const onClickPattern = useCallback(
 		( pattern, blocks ) => {
+			const patternBlocks =
+				pattern.id && pattern.syncStatus !== 'unsynced'
+					? [ createBlock( 'core/block', { ref: pattern.id } ) ]
+					: blocks;
 			onInsert(
-				( blocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
+				( patternBlocks ?? [] ).map( ( block ) => cloneBlock( block ) ),
 				pattern.name
 			);
 			createSuccessNotice(

package/src/components/inserter/menu.js

@@ -27,7 +27,6 @@ import BlockTypesTab from './block-types-tab';
 import BlockPatternsTabs, {
 	BlockPatternsCategoryDialog,
 } from './block-patterns-tab';
-import ReusableBlocksTab from './reusable-blocks-tab';
 import { MediaTab, MediaCategoryDialog, useMediaCategories } from './media-tab';
 import InserterSearchResults from './search-results';
 import useDebouncedInput from './hooks/use-debounced-input';
@@ -55,6 +54,7 @@ function InserterMenu(
 	const [ hoveredItem, setHoveredItem ] = useState( null );
 	const [ selectedPatternCategory, setSelectedPatternCategory ] =
 		useState( null );
+	const [ patternFilter, setPatternFilter ] = useState( 'all' );
 	const [ selectedMediaCategory, setSelectedMediaCategory ] =
 		useState( null );
 	const [ selectedTab, setSelectedTab ] = useState( null );
@@ -121,8 +121,9 @@ function InserterMenu(
 	);
 
 	const onClickPatternCategory = useCallback(
-		( patternCategory ) => {
+		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
+			setPatternFilter( filter );
 		},
 		[ setSelectedPatternCategory ]
 	);
@@ -174,17 +175,6 @@ function InserterMenu(
 		]
 	);
 
-	const reusableBlocksTab = useMemo(
-		() => (
-			<ReusableBlocksTab
-				rootClientId={ destinationRootClientId }
-				onInsert={ onInsert }
-				onHover={ onHover }
-			/>
-		),
-		[ destinationRootClientId, onInsert, onHover ]
-	);
-
 	const mediaTab = useMemo(
 		() => (
 			<MediaTab
@@ -208,13 +198,11 @@ function InserterMenu(
 				return blocksTab;
 			} else if ( tab.name === 'patterns' ) {
 				return patternsTab;
-			} else if ( tab.name === 'reusable' ) {
-				return reusableBlocksTab;
 			} else if ( tab.name === 'media' ) {
 				return mediaTab;
 			}
 		},
-		[ blocksTab, patternsTab, reusableBlocksTab, mediaTab ]
+		[ blocksTab, patternsTab, mediaTab ]
 	);
 
 	const searchRef = useRef();
@@ -235,6 +223,15 @@ function InserterMenu(
 		selectedTab === 'media' &&
 		! delayedFilterValue &&
 		selectedMediaCategory;
+
+	const handleSetSelectedTab = ( value ) => {
+		// If no longer on patterns tab remove the category setting.
+		if ( value !== 'patterns' ) {
+			setSelectedPatternCategory( null );
+		}
+		setSelectedTab( value );
+	};
+
 	return (
 		<div className="block-editor-inserter__menu">
 			<div
@@ -278,7 +275,7 @@ function InserterMenu(
 						showReusableBlocks={ hasReusableBlocks }
 						showMedia={ showMedia }
 						prioritizePatterns={ prioritizePatterns }
-						onSelect={ setSelectedTab }
+						onSelect={ handleSetSelectedTab }
 					>
 						{ getCurrentTab }
 					</InserterTabs>
@@ -305,6 +302,7 @@ function InserterMenu(
 					onInsert={ onInsertPattern }
 					onHover={ onHoverPattern }
 					category={ selectedPatternCategory }
+					patternFilter={ patternFilter }
 					showTitlesAsTooltip
 				/>
 			) }

package/src/components/inserter/search-results.js

@@ -81,7 +81,7 @@ function InserterSearchResults( {
 		blockTypeCollections,
 		onSelectBlockType,
 	] = useBlockTypesState( destinationRootClientId, onInsertBlocks );
-	const [ patterns, , onSelectBlockPattern ] = usePatternsState(
+	const [ patterns, , onClickPattern ] = usePatternsState(
 		onInsertBlocks,
 		destinationRootClientId
 	);
@@ -105,8 +105,10 @@ function InserterSearchResults( {
 		if ( maxBlockTypesToShow === 0 ) {
 			return [];
 		}
-
-		let orderedItems = orderBy( blockTypes, 'frecency', 'desc' );
+		const nonPatternBlockTypes = blockTypes.filter(
+			( blockType ) => blockType.name !== 'core/block'
+		);
+		let orderedItems = orderBy( nonPatternBlockTypes, 'frecency', 'desc' );
 
 		if ( ! filterValue && prioritizedBlocks.length ) {
 			orderedItems = orderInserterBlockItems(
@@ -189,7 +191,7 @@ function InserterSearchResults( {
 				<BlockPatternsList
 					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
-					onClickPattern={ onSelectBlockPattern }
+					onClickPattern={ onClickPattern }
 					onHover={ onHoverPattern }
 					isDraggable={ isDraggable }
 				/>