Migrating BlockPatternList to use updated Composite implementation

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

@@ -9,10 +9,8 @@ import classnames from 'classnames';
 import { useState, forwardRef } from '@wordpress/element';
 import {
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 	Tooltip,
+	privateApis as componentsPrivateApis,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
@@ -22,10 +20,17 @@ import { Icon, symbol } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import { unlock } from '../../lock-unlock';
 import BlockPreview from '../block-preview';
 import InserterDraggableBlocks from '../inserter-draggable-blocks';
 import BlockPatternsPaging from '../block-patterns-paging';
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
 		return <Tooltip text={ title }>{ children }</Tooltip>;
@@ -34,11 +39,11 @@ const WithToolTip = ( { showTooltip, title, children } ) => {
 };
 
 function BlockPattern( {
+	id,
 	isDraggable,
 	pattern,
 	onClick,
 	onHover,
-	composite,
 	showTooltip,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -54,6 +59,7 @@ function BlockPattern( {
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
+					role="listitem"
 					className="block-editor-block-patterns-list__list-item"
 					draggable={ draggable }
 					onDragStart={ ( event ) => {
@@ -75,16 +81,7 @@ function BlockPattern( {
 						title={ pattern.title }
 					>
 						<CompositeItem
-							role="option"
-							as="div"
-							{ ...composite }
-							className={ classnames(
-								'block-editor-block-patterns-list__item',
-								{
-									'block-editor-block-patterns-list__list-item-synced':
-										pattern.id && ! pattern.syncStatus,
-								}
-							) }
+							id={ id }
 							onClick={ () => {
 								onClick( pattern, blocks );
 								onHover?.( null );
@@ -96,9 +93,24 @@ function BlockPattern( {
 								onHover?.( pattern );
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
-							aria-label={ pattern.title }
-							aria-describedby={
-								pattern.description ? descriptionId : undefined
+							render={
+								<div
+									role="button"
+									className={ classnames(
+										'block-editor-block-patterns-list__item',
+										{
+											'block-editor-block-patterns-list__list-item-synced':
+												pattern.id &&
+												! pattern.syncStatus,
+										}
+									) }
+									aria-label={ pattern.title }
+									aria-describedby={
+										pattern.description
+											? descriptionId
+											: undefined
+									}
+								/>
 							}
 						>
 							<BlockPreview
@@ -141,7 +153,7 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList(
+function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
@@ -155,25 +167,52 @@ function BlockPatternList(
 	},
 	ref
 ) {
-	const composite = useCompositeState( { orientation } );
+	const composite = useCompositeStore( {
+		orientation,
+		setItems: ( items ) => {
+			// This is necessary for if/when we filter the block patterns;
+			// we can potentially remove the currently active item, so we
+			// check to see if the active item is still present, and if not,
+			// reset the it to be the first available block.
+
+			const currentIds = items.map( ( item ) => item.id );
+			if ( ! currentIds.includes( activeId ) ) {
+				// We can't rely on the order of `currentIds` here, because
+				// `blockPatterns` may not be in the same order the blocks were
+				// originally registered in. So we filter the blocks by what's
+				// visible, and take the first item in that list instead.
+				const firstPattern = blockPatterns.filter( ( pattern ) =>
+					currentIds.includes( pattern.name )
+				)[ 0 ];
+				composite.setActiveId( firstPattern?.name );
+			}
+		},
+	} );
+
+	const activeId = composite.useState( 'activeId' );
+
 	return (
 		<Composite
-			{ ...composite }
-			role="listbox"
-			className="block-editor-block-patterns-list"
-			aria-label={ label }
-			ref={ ref }
+			store={ composite }
+			render={
+				<div
+					ref={ ref }
+					role="list"
+					className="block-editor-block-patterns-list"
+					aria-label={ label }
+				/>
+			}
 		>
 			{ 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 }
-						composite={ composite }
 						showTooltip={ showTitlesAsTooltip }
 					/>
 				) : (
@@ -185,4 +224,4 @@ function BlockPatternList(
 	);
 }
 
-export default forwardRef( BlockPatternList );
+export default forwardRef( BlockPatternsList );

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

@@ -28,7 +28,7 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 import usePatternsState from './hooks/use-patterns-state';
-import BlockPatternList from '../block-patterns-list';
+import BlockPatternsList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 import usePatternsPaging from './hooks/use-patterns-paging';
@@ -332,7 +332,7 @@ export function BlockPatternsCategoryPanel( {
 			</VStack>
 
 			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternList
+				<BlockPatternsList
 					ref={ scrollContainerRef }
 					shownPatterns={ pagingProps.categoryPatternsAsyncList }
 					blockPatterns={ pagingProps.categoryPatterns }

packages/e2e-test-utils/src/inserter.js

@@ -183,7 +183,7 @@ export async function searchGlobalInserter( category, searchTerm ) {
 		case 'Synced patterns': {
 			waitForInsertElement = async () => {
 				return await page.waitForXPath(
-					`//*[@role='option' and contains(., '${ searchTerm }')]`
+					`//*[@class="block-editor-inserter__panel-content"]//*[self::button or self::*[@role="button"]][contains(., '${ searchTerm }')]`
 				);
 			};
 			waitForNoResults = async () => {

packages/e2e-tests/specs/editor/various/allowed-patterns.test.js

@@ -12,7 +12,7 @@ import {
 const checkPatternExistence = async ( name, available = true ) => {
 	await searchForPattern( name );
 	const patternElement = await page.waitForXPath(
-		`//div[@role = 'option']//div[contains(text(), '${ name }')]`,
+		`//div[@role = 'button']//div[contains(text(), '${ name }')]`,
 		{ timeout: 5000, visible: available, hidden: ! available }
 	);
 	const patternExists = !! patternElement;