BlockPatternsList: use the Async component

packages/block-editor/package.json

@@ -59,6 +59,7 @@
 		"@wordpress/keycodes": "*",
 		"@wordpress/notices": "*",
 		"@wordpress/preferences": "*",
+		"@wordpress/priority-queue": "*",
 		"@wordpress/private-apis": "*",
 		"@wordpress/rich-text": "*",
 		"@wordpress/style-engine": "*",

packages/block-editor/src/components/block-patterns-list/README.md

@@ -18,7 +18,6 @@ import { BlockPatternsList } from '@wordpress/block-editor';
 const MyBlockPatternsList = () => (
 	<BlockPatternsList
 		blockPatterns={ shownBlockPatterns }
-		shownPatterns={ shownBlockPatterns }
 		onClickPattern={ onSelectBlockPattern }
 	/>
 );
@@ -33,13 +32,6 @@ An array of block patterns that can be shown in the block patterns list.
 -   Type: `Array`
 -   Required: Yes
 
-#### shownPatterns
-
-An array of shown block patterns objects.
-
--   Type: `Array`
--   Required: Yes
-
 #### onClickPattern
 
 The performed event after a click on a block pattern. In most cases, the pattern is inserted in the block editor.

packages/block-editor/src/components/block-patterns-list/index.js

@@ -134,10 +134,14 @@ function BlockPattern( {
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
 						>
-							<BlockPreview
-								blocks={ blocks }
-								viewportWidth={ viewportWidth }
-							/>
+							<BlockPreview.Async
+								placeholder={ <BlockPatternPlaceholder /> }
+							>
+								<BlockPreview
+									blocks={ blocks }
+									viewportWidth={ viewportWidth }
+								/>
+							</BlockPreview.Async>
 
 							{ showTitle && (
 								<HStack
@@ -187,7 +191,6 @@ function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
-		shownPatterns,
 		onHover,
 		onClickPattern,
 		orientation,
@@ -205,11 +208,9 @@ function BlockPatternsList(
 		// Reset the active composite item whenever the available patterns change,
 		// to make sure that Composite widget can receive focus correctly when its
 		// composite items change. The first composite item will receive focus.
-		const firstCompositeItemId = blockPatterns.find( ( pattern ) =>
-			shownPatterns.includes( pattern )
-		)?.name;
+		const firstCompositeItemId = blockPatterns[ 0 ]?.name;
 		setActiveCompositeId( firstCompositeItemId );
-	}, [ shownPatterns, blockPatterns ] );
+	}, [ blockPatterns ] );
 
 	return (
 		<Composite
@@ -221,24 +222,19 @@ function BlockPatternsList(
 			aria-label={ label }
 			ref={ ref }
 		>
-			{ blockPatterns.map( ( pattern ) => {
-				const isShown = shownPatterns.includes( pattern );
-				return isShown ? (
-					<BlockPattern
-						key={ pattern.name }
-						id={ pattern.name }
-						pattern={ pattern }
-						onClick={ onClickPattern }
-						onHover={ onHover }
-						isDraggable={ isDraggable }
-						showTitle={ showTitle }
-						showTooltip={ showTitlesAsTooltip }
-						category={ category }
-					/>
-				) : (
-					<BlockPatternPlaceholder key={ pattern.name } />
-				);
-			} ) }
+			{ blockPatterns.map( ( pattern ) => (
+				<BlockPattern
+					key={ pattern.name }
+					id={ pattern.name }
+					pattern={ pattern }
+					onClick={ onClickPattern }
+					onHover={ onHover }
+					isDraggable={ isDraggable }
+					showTitle={ showTitle }
+					showTooltip={ showTitlesAsTooltip }
+					category={ category }
+				/>
+			) ) }
 			{ pagingProps && <BlockPatternsPaging { ...pagingProps } /> }
 		</Composite>
 	);

packages/block-editor/src/components/block-patterns-list/stories/index.story.js

@@ -3,11 +3,6 @@
  */
 import blockLibraryStyles from '!!raw-loader!../../../../../block-library/build-style/style.css';
 
-/**
- * WordPress dependencies
- */
-import { useAsyncList } from '@wordpress/compose';
-
 /**
  * Internal dependencies
  */
@@ -26,13 +21,9 @@ export default {
 
 export const Default = {
 	render: function Template( props ) {
-		const shownPatterns = useAsyncList( props.blockPatterns );
 		return (
 			<ExperimentalBlockEditorProvider settings={ blockEditorSettings }>
-				<BlockPatternsList
-					shownPatterns={ shownPatterns }
-					{ ...props }
-				/>
+				<BlockPatternsList { ...props } />
 			</ExperimentalBlockEditorProvider>
 		);
 	},

packages/block-editor/src/components/block-preview/index.js

@@ -19,6 +19,7 @@ import AutoHeightBlockPreview from './auto';
 import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
+import { Async } from './async';
 
 const EMPTY_ADDITIONAL_STYLES = [];
 
@@ -86,6 +87,10 @@ export function BlockPreview( {
 	);
 }
 
+const MemoizedBlockPreview = memo( BlockPreview );
+
+MemoizedBlockPreview.Async = Async;
+
 /**
  * BlockPreview renders a preview of a block or array of blocks.
  *
@@ -97,7 +102,7 @@ export function BlockPreview( {
  *
  * @return {Component} The component to be rendered.
  */
-export default memo( BlockPreview );
+export default MemoizedBlockPreview;
 
 /**
  * This hook is used to lightly mark an element as a block preview wrapper

packages/block-editor/src/components/block-toolbar/change-design.js

@@ -10,7 +10,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { cloneBlock } from '@wordpress/blocks';
 import { useMemo } from '@wordpress/element';
-import { useAsyncList } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
@@ -81,10 +80,6 @@ export default function ChangeDesign( { clientId } ) {
 			.slice( 0, MAX_PATTERNS_TO_SHOW );
 	}, [ categories, currentPatternName, patterns ] );
 
-	const currentShownPatterns = useAsyncList(
-		sameCategoryPatternsWithSingleWrapper
-	);
-
 	if ( sameCategoryPatternsWithSingleWrapper.length < 2 ) {
 		return null;
 	}
@@ -121,7 +116,6 @@ export default function ChangeDesign( { clientId } ) {
 					paddingSize="none"
 				>
 					<BlockPatternsList
-						shownPatterns={ currentShownPatterns }
 						blockPatterns={ sameCategoryPatternsWithSingleWrapper }
 						onClickPattern={ onClickPattern }
 						showTitle={ false }

packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js

@@ -151,9 +151,6 @@ function PatternList( {
 				{ hasItems && (
 					<>
 						<BlockPatternsList
-							shownPatterns={
-								pagingProps.categoryPatternsAsyncList
-							}
 							blockPatterns={ pagingProps.categoryPatterns }
 							onClickPattern={ onClickPattern }
 							isDraggable={ false }

packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js

@@ -182,7 +182,6 @@ export function PatternCategoryPreviews( {
 					) }
 					<BlockPatternsList
 						ref={ scrollContainerRef }
-						shownPatterns={ pagingProps.categoryPatternsAsyncList }
 						blockPatterns={ pagingProps.categoryPatterns }
 						onClickPattern={ onClickPattern }
 						onHover={ onHover }

packages/block-editor/src/components/inserter/hooks/use-patterns-paging.js

@@ -2,11 +2,10 @@
  * WordPress dependencies
  */
 import { useMemo, useState, useEffect } from '@wordpress/element';
-import { useAsyncList, usePrevious } from '@wordpress/compose';
+import { 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.
@@ -42,9 +41,6 @@ export default function usePatternsPaging(
 			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(
@@ -68,7 +64,6 @@ export default function usePatternsPaging(
 	return {
 		totalItems,
 		categoryPatterns,
-		categoryPatternsAsyncList,
 		numPages,
 		changePage,
 		currentPage,

packages/block-editor/src/components/inserter/search-results.js

@@ -159,11 +159,6 @@ function InserterSearchResults( {
 	const currentShownBlockTypes = useAsyncList( filteredBlockTypes, {
 		step: INITIAL_INSERTER_RESULTS,
 	} );
-	const currentShownPatterns = useAsyncList(
-		currentShownBlockTypes.length === filteredBlockTypes.length
-			? filteredBlockPatterns
-			: EMPTY_ARRAY
-	);
 
 	const hasItems =
 		filteredBlockTypes.length > 0 || filteredBlockPatterns.length > 0;
@@ -190,7 +185,6 @@ function InserterSearchResults( {
 		>
 			<div className="block-editor-inserter__quick-inserter-patterns">
 				<BlockPatternsList
-					shownPatterns={ currentShownPatterns }
 					blockPatterns={ filteredBlockPatterns }
 					onClickPattern={ onClickPattern }
 					onHover={ onHoverPattern }

packages/block-editor/tsconfig.json

@@ -18,6 +18,7 @@
 		{ "path": "../dom" },
 		{ "path": "../element" },
 		{ "path": "../escape-html" },
+		{ "path": "../priority-queue" },
 		{ "path": "../private-apis" },
 		{ "path": "../hooks" },
 		{ "path": "../html-entities" },

packages/block-library/src/query/edit/pattern-selection-modal.js

@@ -4,7 +4,6 @@
 import { useState, useMemo } from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 import { Modal, SearchControl } from '@wordpress/components';
-import { useAsyncList } from '@wordpress/compose';
 import {
 	BlockContextProvider,
 	store as blockEditorStore,
@@ -55,7 +54,6 @@ export default function PatternSelectionModal( {
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
 	}, [ blockPatterns, searchValue ] );
-	const shownBlockPatterns = useAsyncList( filteredBlockPatterns );
 
 	return (
 		<Modal
@@ -77,7 +75,6 @@ export default function PatternSelectionModal( {
 				<BlockContextProvider value={ blockPreviewContext }>
 					<BlockPatternsList
 						blockPatterns={ filteredBlockPatterns }
-						shownPatterns={ shownBlockPatterns }
 						onClickPattern={ onBlockPatternSelect }
 					/>
 				</BlockContextProvider>

packages/block-library/src/template-part/edit/index.js

@@ -21,7 +21,6 @@ import {
 	MenuItem,
 	ToolbarButton,
 } from '@wordpress/components';
-import { useAsyncList } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
@@ -85,7 +84,6 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
 		isEntityAvailable &&
 		!! blockPatterns.length &&
 		( area === 'header' || area === 'footer' );
-	const shownTemplates = useAsyncList( blockPatterns );
 
 	if ( ! canReplace ) {
 		return null;
@@ -96,7 +94,6 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
 			<BlockPatternsList
 				label={ __( 'Templates' ) }
 				blockPatterns={ blockPatterns }
-				shownPatterns={ shownTemplates }
 				onClickPattern={ onSelect }
 				showTitle={ false }
 			/>

packages/block-library/src/template-part/edit/selection-modal.js

@@ -5,7 +5,6 @@ import { useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import {
 	SearchControl,
@@ -43,7 +42,6 @@ export default function TemplatePartSelectionModal( {
 
 		return searchPatterns( partsAsPatterns, searchValue );
 	}, [ templateParts, searchValue ] );
-	const shownTemplateParts = useAsyncList( filteredTemplateParts );
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
@@ -89,7 +87,6 @@ export default function TemplatePartSelectionModal( {
 					<h2>{ __( 'Existing template parts' ) }</h2>
 					<BlockPatternsList
 						blockPatterns={ filteredTemplateParts }
-						shownPatterns={ shownTemplateParts }
 						onClickPattern={ ( pattern ) => {
 							onTemplatePartSelect( pattern.templatePart );
 						} }

packages/edit-site/src/components/page-patterns/fields.js

@@ -25,7 +25,6 @@ import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import {
 	PATTERN_TYPES,
 	TEMPLATE_PART_POST_TYPE,
@@ -88,12 +87,12 @@ function PreviewField( { item } ) {
 				{ isEmpty && isTemplatePart && __( 'Empty template part' ) }
 				{ isEmpty && ! isTemplatePart && __( 'Empty pattern' ) }
 				{ ! isEmpty && (
-					<Async>
+					<BlockPreview.Async>
 						<BlockPreview
 							blocks={ blocks }
 							viewportWidth={ item.viewportWidth }
 						/>
-					</Async>
+					</BlockPreview.Async>
 				) }
 			</PreviewWrapper>
 			{ !! description && (

packages/edit-site/src/components/page-templates/fields.js

@@ -20,7 +20,6 @@ import { EditorProvider } from '@wordpress/editor';
 /**
  * Internal dependencies
  */
-import { Async } from '../async';
 import { default as Link, useLink } from '../routes/link';
 import { useAddedBy } from './hooks';
 
@@ -63,9 +62,9 @@ function PreviewField( { item } ) {
 				>
 					{ isEmpty && __( 'Empty template' ) }
 					{ ! isEmpty && (
-						<Async>
+						<BlockPreview.Async>
 							<BlockPreview blocks={ blocks } />
-						</Async>
+						</BlockPreview.Async>
 					) }
 				</button>
 			</div>