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

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

@@ -8,8 +8,8 @@ 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,
@@ -19,6 +19,7 @@ import {
 } from '@wordpress/components';
 import { Icon, chevronRight, chevronLeft } from '@wordpress/icons';
 import { focus } from '@wordpress/dom';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Internal dependencies
@@ -27,29 +28,68 @@ 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 BlockPatternsPaging from '../block-patterns-paging';
+import usePatternsPaging from './hooks/use-patterns-paging';
+import {
+	PATTERN_TYPES,
+	default as BlockPatternsSourceFilter,
+} from './block-patterns-source-filter';
+import {
+	BlockPatternsSyncFilter,
+	SYNC_TYPES,
+} from './block-patterns-sync-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',
-];
+export const allPatternsCategory = {
+	name: 'allPatterns',
+	label: __( 'All categories' ),
+};
+
+export function isPatternFiltered( pattern, sourceFilter, syncFilter ) {
+	if (
+		sourceFilter === PATTERN_TYPES.theme &&
+		pattern.name.startsWith( 'core/block' )
+	) {
+		return true;
+	}
+	if ( sourceFilter === PATTERN_TYPES.user && ! pattern.id ) {
+		return true;
+	}
+	if (
+		sourceFilter === PATTERN_TYPES.user &&
+		syncFilter === SYNC_TYPES.full &&
+		pattern.syncStatus !== ''
+	) {
+		return true;
+	}
+	if (
+		sourceFilter === PATTERN_TYPES.user &&
+		syncFilter === SYNC_TYPES.unsynced &&
+		pattern.syncStatus !== 'unsynced'
+	) {
+		return true;
+	}
+	return false;
+}
 
-function usePatternsCategories( rootClientId ) {
-	const [ allPatterns, allCategories ] = usePatternsState(
+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 +107,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 +126,25 @@ function usePatternsCategories( rootClientId ) {
 				label: _x( 'Uncategorized' ),
 			} );
 		}
-
+		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 +155,7 @@ export function BlockPatternsCategoryDialog( {
 	onHover,
 	category,
 	showTitlesAsTooltip,
+	patternFilter,
 } ) {
 	const container = useRef();
 
@@ -129,6 +178,7 @@ export function BlockPatternsCategoryDialog( {
 				onHover={ onHover }
 				category={ category }
 				showTitlesAsTooltip={ showTitlesAsTooltip }
+				patternFilter={ patternFilter }
 			/>
 		</div>
 	);
@@ -140,16 +190,35 @@ export function BlockPatternsCategoryPanel( {
 	onHover = noop,
 	category,
 	showTitlesAsTooltip,
+	patternFilter,
 } ) {
-	const [ allPatterns, , onClick ] = usePatternsState(
+	const [ allPatterns, , onClickPattern ] = usePatternsState(
 		onInsert,
 		rootClientId
 	);
+	const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' );
 
-	const availableCategories = usePatternsCategories( rootClientId );
+	const availableCategories = usePatternsCategories(
+		rootClientId,
+		patternFilter
+	);
+	const container = useRef();
 	const currentCategoryPatterns = useMemo(
 		() =>
 			allPatterns.filter( ( pattern ) => {
+				if (
+					isPatternFiltered(
+						pattern,
+						patternFilter,
+						patternSyncFilter
+					)
+				) {
+					return false;
+				}
+
+				if ( category.name === allPatternsCategory.name ) {
+					return true;
+				}
 				if ( category.name !== 'uncategorized' ) {
 					return pattern.categories?.includes( category.name );
 				}
@@ -166,35 +235,60 @@ export function BlockPatternsCategoryPanel( {
 
 				return availablePatternCategories.length === 0;
 			} ),
-		[ allPatterns, availableCategories, category.name ]
+		[
+			allPatterns,
+			availableCategories,
+			category.name,
+			patternFilter,
+			patternSyncFilter,
+		]
 	);
 
-	const categoryPatternsList = useAsyncList( currentCategoryPatterns );
+	const pagingProps = usePatternsPaging(
+		currentCategoryPatterns,
+		category,
+		container
+	);
 
 	// Hide block pattern preview on unmount.
+	// eslint-disable-next-line react-hooks/exhaustive-deps
 	useEffect( () => () => onHover( null ), [] );
 
-	if ( ! currentCategoryPatterns.length ) {
-		return null;
-	}
-
 	return (
-		<div className="block-editor-inserter__patterns-category-panel">
+		<div
+			className="block-editor-inserter__patterns-category-panel"
+			ref={ container }
+		>
 			<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 }
-			/>
+			{ patternFilter === PATTERN_TYPES.user && (
+				<BlockPatternsSyncFilter
+					patternSyncFilter={ patternSyncFilter }
+					setPatternSyncFilter={ setPatternSyncFilter }
+				/>
+			) }
+			{ ! currentCategoryPatterns.length && (
+				<div>{ __( 'No results found' ) }</div>
+			) }
+			{ currentCategoryPatterns.length > 0 && (
+				<BlockPatternList
+					shownPatterns={ pagingProps.categoryPatternsAsyncList }
+					blockPatterns={ pagingProps.categoryPatterns }
+					onClickPattern={ onClickPattern }
+					onHover={ onHover }
+					label={ category.label }
+					orientation="vertical"
+					category={ category.name }
+					isDraggable
+					showTitlesAsTooltip={ showTitlesAsTooltip }
+					patternFilter={ patternFilter }
+				/>
+			) }
+			{ pagingProps.numPages > 1 && (
+				<BlockPatternsPaging { ...pagingProps } />
+			) }
 		</div>
 	);
 }
@@ -206,24 +300,40 @@ function BlockPatternsTabs( {
 	rootClientId,
 } ) {
 	const [ showPatternsExplorer, setShowPatternsExplorer ] = useState( false );
-	const categories = usePatternsCategories( rootClientId );
+	const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' );
+
+	const categories = usePatternsCategories(
+		rootClientId,
+		patternSourceFilter
+	);
+
 	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"
+					>
+						<BlockPatternsSourceFilter
+							value={ patternSourceFilter }
+							onChange={ ( value ) => {
+								setPatternSourceFilter( value );
+								onSelectCategory( allPatternsCategory, value );
+							} }
+						/>
+						<ItemGroup role="list">
 							{ categories.map( ( category ) => (
 								<Item
 									role="listitem"
 									key={ category.name }
 									onClick={ () =>
-										onSelectCategory( category )
+										onSelectCategory(
+											category,
+											patternSourceFilter
+										)
 									}
 									className={
 										category === selectedCategory
@@ -283,6 +393,7 @@ function BlockPatternsTabs( {
 					initialCategory={ initialCategory }
 					patternCategories={ categories }
 					onModalClose={ () => setShowPatternsExplorer( false ) }
+					rootClientId={ rootClientId }
 				/>
 			) }
 		</>

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

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useState } 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 );
+	};
+	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 }
 				/>

package/src/components/inserter/style.scss

@@ -271,11 +271,15 @@ $block-inserter-tabs-height: 44px;
 	}
 }
 
-.block-editor-inserter__block-patterns-tabs-container {
+.block-editor-inserter__block-patterns-tabs-container,
+.block-editor-block-patterns-explorer__sidebar {
 	height: 100%;
 	nav {
 		height: 100%;
 	}
+	.block-editor-block-patterns__source-filter select.components-select-control__input {
+		height: 40px;
+	}
 }
 
 .block-editor-inserter__block-patterns-tabs {
@@ -312,10 +316,14 @@ $block-inserter-tabs-height: 44px;
 	.block-editor-block-patterns-list {
 		margin-top: $grid-unit-30;
 	}
+}
 
+.block-editor-block-patterns-list__list-item {
 	.block-editor-block-preview__container {
 		box-shadow: 0 15px 25px rgb(0 0 0 / 7%);
-		&:hover {
+	}
+	&:hover {
+		.block-editor-block-preview__container {
 			box-shadow: 0 0 0 2px $gray-900, 0 15px 25px rgb(0 0 0 / 7%);
 		}
 	}
@@ -453,6 +461,11 @@ $block-inserter-tabs-height: 44px;
 	&__list {
 		margin-left: $sidebar-width;
 		padding: $grid-unit-30 0 $grid-unit-40;
+		.block-editor-patterns__sync-status-filter {
+			.components-input-control__container {
+				width: 380px;
+			}
+		}
 	}
 
 	.block-editor-block-patterns-list {
@@ -739,3 +752,11 @@ $block-inserter-tabs-height: 44px;
 .components-menu-group .reusable-blocks-menu-items__rename-hint {
 	margin: 0;
 }
+
+.block-editor-patterns__sync-status-filter {
+	.components-input-control__container {
+		select.components-select-control__input {
+			height: 40px;
+		}
+	}
+}