Migrating block editor BlockPatternsList component (#56210)

- Removes `__unstableComposite` imports from `@wordpress/components` - Adds private `Composite*` exports from `@wordpress/components` - Refactors `BlockPatternsList` and `BlockPattern` to use updated `Composite` components - Additionally renames list component to be consistent with codebase
WordPress · Nov 22, 2023 · 1694514 · 1694514
1 parent 57f1171
commit 1694514
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 31 deletions.
diff --git a/packages/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md
@@ -1,6 +1,6 @@
 # Block Patterns List
 
-The `BlockPatternList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.
+The `BlockPatternsList` component makes a list of the different registered block patterns. It uses the `BlockPreview` component to display a preview for each block pattern.
 
 For more infos about blocks patterns, read [this](https://make.wordpress.org/core/2020/07/16/block-patterns-in-wordpress-5-5/).
 
@@ -18,10 +18,10 @@ For more infos about blocks patterns, read [this](https://make.wordpress.org/cor
 Renders a block patterns list.
 
 ```jsx
-import { BlockPatternList } from '@wordpress/block-editor';
+import { BlockPatternsList } from '@wordpress/block-editor';
 
-const MyBlockPatternList = () => (
-	<BlockPatternList
+const MyBlockPatternsList = () => (
+	<BlockPatternsList
 		blockPatterns={ shownBlockPatterns }
 		shownPatterns={ shownBlockPatterns }
 		onClickPattern={ onSelectBlockPattern }

diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js
@@ -6,13 +6,11 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, forwardRef } from '@wordpress/element';
+import { useEffect, 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,11 +20,18 @@ 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';
 import { PATTERN_TYPES } from '../inserter/block-patterns-tab/utils';
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 const WithToolTip = ( { showTooltip, title, children } ) => {
 	if ( showTooltip ) {
 		return <Tooltip text={ title }>{ children }</Tooltip>;
@@ -35,11 +40,11 @@ const WithToolTip = ( { showTooltip, title, children } ) => {
 };
 
 function BlockPattern( {
+	id,
 	isDraggable,
 	pattern,
 	onClick,
 	onHover,
-	composite,
 	showTooltip,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -78,17 +83,27 @@ 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.type === PATTERN_TYPES.user &&
-										! pattern.syncStatus,
-								}
-							) }
+							render={
+								<div
+									role="option"
+									aria-label={ pattern.title }
+									aria-describedby={
+										pattern.description
+											? descriptionId
+											: undefined
+									}
+									className={ classnames(
+										'block-editor-block-patterns-list__item',
+										{
+											'block-editor-block-patterns-list__list-item-synced':
+												pattern.type ===
+													PATTERN_TYPES.user &&
+												! pattern.syncStatus,
+										}
+									) }
+								/>
+							}
+							id={ id }
 							onClick={ () => {
 								onClick( pattern, blocks );
 								onHover?.( null );
@@ -100,10 +115,6 @@ function BlockPattern( {
 								onHover?.( pattern );
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
-							aria-label={ pattern.title }
-							aria-describedby={
-								pattern.description ? descriptionId : undefined
-							}
 						>
 							<BlockPreview
 								blocks={ blocks }
@@ -147,7 +158,7 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList(
+function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
@@ -161,10 +172,19 @@ function BlockPatternList(
 	},
 	ref
 ) {
-	const composite = useCompositeState( { orientation } );
+	const compositeStore = useCompositeStore( { orientation } );
+	const { setActiveId } = compositeStore;
+
+	useEffect( () => {
+		// We reset the active composite item whenever the
+		// available patterns change, to make sure that
+		// focus is put back to the start.
+		setActiveId( undefined );
+	}, [ setActiveId, shownPatterns, blockPatterns ] );
+
 	return (
 		<Composite
-			{ ...composite }
+			store={ compositeStore }
 			role="listbox"
 			className="block-editor-block-patterns-list"
 			aria-label={ label }
@@ -175,11 +195,11 @@ function BlockPatternList(
 				return isShown ? (
 					<BlockPattern
 						key={ pattern.name }
+						id={ pattern.name }
 						pattern={ pattern }
 						onClick={ onClickPattern }
 						onHover={ onHover }
 						isDraggable={ isDraggable }
-						composite={ composite }
 						showTooltip={ showTitlesAsTooltip }
 					/>
 				) : (
@@ -191,4 +211,4 @@ function BlockPatternList(
 	);
 }
 
-export default forwardRef( BlockPatternList );
+export default forwardRef( BlockPatternsList );
diff --git a/packages/block-editor/src/components/block-patterns-list/style.scss b/packages/block-editor/src/components/block-patterns-list/style.scss
@@ -18,6 +18,13 @@
 
 .block-editor-block-patterns-list__item {
 	height: 100%;
+	// This is derived from the top padding set on
+	// `.block-editor-block-patterns-explorer__list`
+	scroll-margin-top: $grid-unit-30;
+	// This is derived from the bottom padding set on
+	// `.block-editor-block-patterns-explorer__list` and
+	// the bottom margin set on `...__list-item` above
+	scroll-margin-bottom: ($grid-unit-40 + $grid-unit-30);
 
 	.block-editor-block-preview__container {
 		display: flex;

diff --git a/...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/...ages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
@@ -22,7 +22,7 @@ import {
  * Internal dependencies
  */
 import usePatternsState from '../hooks/use-patterns-state';
-import BlockPatternList from '../../block-patterns-list';
+import BlockPatternsList from '../../block-patterns-list';
 import usePatternsPaging from '../hooks/use-patterns-paging';
 import { PatternsFilter } from './patterns-filter';
 import { usePatternCategories } from './use-pattern-categories';
@@ -159,7 +159,7 @@ export function PatternCategoryPreviews( {
 			</VStack>
 
 			{ currentCategoryPatterns.length > 0 && (
-				<BlockPatternList
+				<BlockPatternsList
 					ref={ scrollContainerRef }
 					shownPatterns={ pagingProps.categoryPatternsAsyncList }
 					blockPatterns={ pagingProps.categoryPatterns }