@wordpress/block-editor 12.14.0 → 12.16.0

package/src/components/block-list/use-block-props/index.js

@@ -11,6 +11,8 @@ import { __, sprintf } from '@wordpress/i18n';
 import {
 	__unstableGetBlockProps as getBlockProps,
 	getBlockType,
+	isReusableBlock,
+	getBlockDefaultClassName,
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { useMergeRefs, useDisabled } from '@wordpress/compose';
@@ -25,17 +27,12 @@ import { BlockListBlockContext } from '../block-list-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
 import { useBlockEditContext } from '../../block-edit/context';
-import { useBlockClassNames } from './use-block-class-names';
-import { useBlockDefaultClassName } from './use-block-default-class-name';
-import { useBlockCustomClassName } from './use-block-custom-class-name';
-import { useBlockMovingModeClassNames } from './use-block-moving-mode-class-names';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { store as blockEditorStore } from '../../../store';
-import useBlockOverlayActive from '../../block-content-overlay';
 import { unlock } from '../../../lock-unlock';
 
 /**
@@ -99,10 +96,15 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
+		isSelected,
 		isPartOfSelection,
 		adjustScrolling,
 		enableAnimation,
 		isSubtreeDisabled,
+		isOutlineEnabled,
+		hasOverlay,
+		initialPosition,
+		classNames,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -117,9 +119,21 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				isAncestorMultiSelected,
 				isFirstMultiSelectedBlock,
 				isBlockSubtreeDisabled,
+				getSettings,
+				isBlockHighlighted,
+				__unstableIsFullySelected,
+				__unstableSelectionHasUnmergeableBlock,
+				isBlockBeingDragged,
+				hasSelectedInnerBlock,
+				hasBlockMovingClientId,
+				canInsertBlockType,
+				getBlockRootClientId,
+				__unstableHasActiveBlockOverlayActive,
+				__unstableGetEditorMode,
+				getSelectedBlocksInitialCaretPosition,
 			} = unlock( select( blockEditorStore ) );
 			const { getActiveBlockVariation } = select( blocksStore );
-			const isSelected = isBlockSelected( clientId );
+			const _isSelected = isBlockSelected( clientId );
 			const isPartOfMultiSelection =
 				isBlockMultiSelected( clientId ) ||
 				isAncestorMultiSelected( clientId );
@@ -127,6 +141,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			const blockType = getBlockType( blockName );
 			const attributes = getBlockAttributes( clientId );
 			const match = getActiveBlockVariation( blockName, attributes );
+			const { outlineMode } = getSettings();
+			const isMultiSelected = isBlockMultiSelected( clientId );
+			const checkDeep = true;
+			const isAncestorOfSelectedBlock = hasSelectedInnerBlock(
+				clientId,
+				checkDeep
+			);
+			const typing = isTyping();
+			const hasLightBlockWrapper = blockType?.apiVersion > 1;
+			const movingClientId = hasBlockMovingClientId();
 
 			return {
 				index: getBlockIndex( clientId ),
@@ -134,31 +158,62 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 				name: blockName,
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
-				isPartOfSelection: isSelected || isPartOfMultiSelection,
+				isSelected: _isSelected,
+				isPartOfSelection: _isSelected || isPartOfMultiSelection,
 				adjustScrolling:
-					isSelected || isFirstMultiSelectedBlock( clientId ),
+					_isSelected || isFirstMultiSelectedBlock( clientId ),
 				enableAnimation:
-					! isTyping() &&
+					! typing &&
 					getGlobalBlockCount() <= BLOCK_ANIMATION_THRESHOLD,
 				isSubtreeDisabled: isBlockSubtreeDisabled( clientId ),
+				isOutlineEnabled: outlineMode,
+				hasOverlay: __unstableHasActiveBlockOverlayActive( clientId ),
+				initialPosition:
+					_isSelected && __unstableGetEditorMode() === 'edit'
+						? getSelectedBlocksInitialCaretPosition()
+						: undefined,
+				classNames: classnames(
+					{
+						'is-selected': _isSelected,
+						'is-highlighted': isBlockHighlighted( clientId ),
+						'is-multi-selected': isMultiSelected,
+						'is-partially-selected':
+							isMultiSelected &&
+							! __unstableIsFullySelected() &&
+							! __unstableSelectionHasUnmergeableBlock(),
+						'is-reusable': isReusableBlock( blockType ),
+						'is-dragging': isBlockBeingDragged( clientId ),
+						'has-child-selected': isAncestorOfSelectedBlock,
+						'remove-outline': _isSelected && outlineMode && typing,
+						'is-block-moving-mode': !! movingClientId,
+						'can-insert-moving-block':
+							movingClientId &&
+							canInsertBlockType(
+								getBlockName( movingClientId ),
+								getBlockRootClientId( clientId )
+							),
+					},
+					hasLightBlockWrapper ? attributes.className : undefined,
+					hasLightBlockWrapper
+						? getBlockDefaultClassName( blockName )
+						: undefined
+				),
 			};
 		},
 		[ clientId ]
 	);
 
-	const hasOverlay = useBlockOverlayActive( clientId );
-
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
 	const mergedRefs = useMergeRefs( [
 		props.ref,
-		useFocusFirstElement( clientId ),
+		useFocusFirstElement( { clientId, initialPosition } ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
-		useEventHandlers( clientId ),
+		useEventHandlers( { clientId, isSelected } ),
 		useNavModeExit( clientId ),
-		useIsHovered(),
+		useIsHovered( { isEnabled: isOutlineEnabled } ),
 		useIntersectionObserver(),
 		useMovingAnimation( {
 			isSelected: isPartOfSelection,
@@ -190,18 +245,16 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		'data-title': blockTitle,
 		inert: isSubtreeDisabled ? 'true' : undefined,
 		className: classnames(
-			// The wp-block className is important for editor styles.
-			classnames( 'block-editor-block-list__block', {
+			'block-editor-block-list__block',
+			{
+				// The wp-block className is important for editor styles.
 				'wp-block': ! isAligned,
 				'has-block-overlay': hasOverlay,
-			} ),
+			},
 			className,
 			props.className,
 			wrapperProps.className,
-			useBlockClassNames( clientId ),
-			useBlockDefaultClassName( clientId ),
-			useBlockCustomClassName( clientId ),
-			useBlockMovingModeClassNames( clientId )
+			classNames
 		),
 		style: { ...wrapperProps.style, ...props.style },
 	};

package/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -18,38 +18,6 @@ import { store as blockEditorStore } from '../../../store';
 
 /** @typedef {import('@wordpress/element').RefObject} RefObject */
 
-/**
- * Returns the initial position if the block needs to be focussed, `undefined`
- * otherwise. The initial position is either 0 (start) or -1 (end).
- *
- * @param {string} clientId Block client ID.
- *
- * @return {number} The initial position, either 0 (start) or -1 (end).
- */
-function useInitialPosition( clientId ) {
-	return useSelect(
-		( select ) => {
-			const {
-				getSelectedBlocksInitialCaretPosition,
-				__unstableGetEditorMode,
-				isBlockSelected,
-			} = select( blockEditorStore );
-
-			if ( ! isBlockSelected( clientId ) ) {
-				return;
-			}
-
-			if ( __unstableGetEditorMode() !== 'edit' ) {
-				return;
-			}
-
-			// If there's no initial position, return 0 to focus the start.
-			return getSelectedBlocksInitialCaretPosition();
-		},
-		[ clientId ]
-	);
-}
-
 /**
  * Transitions focus to the block or inner tabbable when the block becomes
  * selected and an initial position is set.
@@ -58,9 +26,8 @@ function useInitialPosition( clientId ) {
  *
  * @return {RefObject} React ref with the block element.
  */
-export function useFocusFirstElement( clientId ) {
+export function useFocusFirstElement( { clientId, initialPosition } ) {
 	const ref = useRef();
-	const initialPosition = useInitialPosition( clientId );
 	const { isBlockSelected, isMultiSelecting } = useSelect( blockEditorStore );
 
 	useEffect( () => {

package/src/components/block-list/use-block-props/use-is-hovered.js

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
 import { useRefEffect } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../../../store';
-
 function listener( event ) {
 	if ( event.defaultPrevented ) {
 		return;
@@ -20,16 +14,11 @@ function listener( event ) {
 	event.currentTarget.classList[ action ]( 'is-hovered' );
 }
 
-/**
+/*
  * Adds `is-hovered` class when the block is hovered and in navigation or
  * outline mode.
  */
-export function useIsHovered() {
-	const isEnabled = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		return getSettings().outlineMode;
-	}, [] );
-
+export function useIsHovered( { isEnabled } ) {
 	return useRefEffect(
 		( node ) => {
 			if ( isEnabled ) {

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -19,11 +19,7 @@ import { store as blockEditorStore } from '../../../store';
  *
  * @param {string} clientId Block client ID.
  */
-export function useEventHandlers( clientId ) {
-	const isSelected = useSelect(
-		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
-		[ clientId ]
-	);
+export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
 	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );

package/src/components/block-parent-selector/index.js

@@ -74,7 +74,7 @@ export default function BlockParentSelector() {
 				onClick={ () => selectBlock( firstParentClientId ) }
 				label={ sprintf(
 					/* translators: %s: Name of the block's parent. */
-					__( 'Select %s' ),
+					__( 'Select parent block: %s' ),
 					blockInformation?.title
 				) }
 				showTooltip

package/src/components/block-pattern-setup/index.js

@@ -5,9 +5,7 @@ import { useDispatch } from '@wordpress/data';
 import { cloneBlock } from '@wordpress/blocks';
 import {
 	VisuallyHidden,
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
 import { useState } from '@wordpress/element';
@@ -22,6 +20,13 @@ import BlockPreview from '../block-preview';
 import SetupToolbar from './setup-toolbar';
 import usePatternsSetup from './use-patterns-setup';
 import { VIEWMODES } from './constants';
+import { unlock } from '../../lock-unlock';
+
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
 
 const SetupContent = ( {
 	viewMode,
@@ -30,8 +35,9 @@ const SetupContent = ( {
 	onBlockPatternSelect,
 	showTitles,
 } ) => {
-	const composite = useCompositeState();
+	const compositeStore = useCompositeStore();
 	const containerClass = 'block-editor-block-pattern-setup__container';
+
 	if ( viewMode === VIEWMODES.carousel ) {
 		const slideClass = new Map( [
 			[ activeSlide, 'active-slide' ],
@@ -41,23 +47,25 @@ const SetupContent = ( {
 		return (
 			<div className="block-editor-block-pattern-setup__carousel">
 				<div className={ containerClass }>
-					<ul className="carousel-container">
+					<div className="carousel-container">
 						{ patterns.map( ( pattern, index ) => (
 							<BlockPatternSlide
+								active={ index === activeSlide }
 								className={ slideClass.get( index ) || '' }
 								key={ pattern.name }
 								pattern={ pattern }
 							/>
 						) ) }
-					</ul>
+					</div>
 				</div>
 			</div>
 		);
 	}
+
 	return (
 		<div className="block-editor-block-pattern-setup__grid">
 			<Composite
-				{ ...composite }
+				store={ compositeStore }
 				role="listbox"
 				className={ containerClass }
 				aria-label={ __( 'Patterns list' ) }
@@ -67,7 +75,6 @@ const SetupContent = ( {
 						key={ pattern.name }
 						pattern={ pattern }
 						onSelect={ onBlockPatternSelect }
-						composite={ composite }
 						showTitles={ showTitles }
 					/>
 				) ) }
@@ -76,7 +83,7 @@ const SetupContent = ( {
 	);
 };
 
-function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
+function BlockPattern( { pattern, onSelect, showTitles } ) {
 	const baseClassName = 'block-editor-block-pattern-setup-list';
 	const { blocks, description, viewportWidth = 700 } = pattern;
 	const descriptionId = useInstanceId(
@@ -84,16 +91,19 @@ function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 		`${ baseClassName }__item-description`
 	);
 	return (
-		<div
-			className={ `${ baseClassName }__list-item` }
-			aria-label={ pattern.title }
-			aria-describedby={ pattern.description ? descriptionId : undefined }
-		>
+		<div className={ `${ baseClassName }__list-item` }>
 			<CompositeItem
+				render={
+					<div
+						aria-describedby={
+							description ? descriptionId : undefined
+						}
+						aria-label={ pattern.title }
+						className={ `${ baseClassName }__item` }
+					/>
+				}
+				id={ `${ baseClassName }__pattern__${ pattern.name }` }
 				role="option"
-				as="div"
-				{ ...composite }
-				className={ `${ baseClassName }__item` }
 				onClick={ () => onSelect( blocks ) }
 			>
 				<BlockPreview
@@ -115,14 +125,16 @@ function BlockPattern( { pattern, onSelect, composite, showTitles } ) {
 	);
 }
 
-function BlockPatternSlide( { className, pattern, minHeight } ) {
+function BlockPatternSlide( { active, className, pattern, minHeight } ) {
 	const { blocks, title, description } = pattern;
 	const descriptionId = useInstanceId(
 		BlockPatternSlide,
 		'block-editor-block-pattern-setup-list__item-description'
 	);
 	return (
-		<li
+		<div
+			aria-hidden={ ! active }
+			role="img"
 			className={ `pattern-slide ${ className }` }
 			aria-label={ title }
 			aria-describedby={ description ? descriptionId : undefined }
@@ -133,7 +145,7 @@ function BlockPatternSlide( { className, pattern, minHeight } ) {
 					{ description }
 				</VisuallyHidden>
 			) }
-		</li>
+		</div>
 	);
 }
 
@@ -178,10 +190,14 @@ const BlockPatternSetup = ( {
 					activeSlide={ activeSlide }
 					totalSlides={ patterns.length }
 					handleNext={ () => {
-						setActiveSlide( ( active ) => active + 1 );
+						setActiveSlide( ( active ) =>
+							Math.min( active + 1, patterns.length - 1 )
+						);
 					} }
 					handlePrevious={ () => {
-						setActiveSlide( ( active ) => active - 1 );
+						setActiveSlide( ( active ) =>
+							Math.max( active - 1, 0 )
+						);
 					} }
 					onBlockPatternSelect={ () => {
 						onPatternSelectCallback(

package/src/components/block-pattern-setup/setup-toolbar.js

@@ -35,12 +35,14 @@ const CarouselNavigation = ( {
 			label={ __( 'Previous pattern' ) }
 			onClick={ handlePrevious }
 			disabled={ activeSlide === 0 }
+			__experimentalIsFocusable
 		/>
 		<Button
 			icon={ chevronRight }
 			label={ __( 'Next pattern' ) }
 			onClick={ handleNext }
 			disabled={ activeSlide === totalSlides - 1 }
+			__experimentalIsFocusable
 		/>
 	</div>
 );

package/src/components/block-pattern-setup/style.scss

@@ -32,6 +32,8 @@
 			}
 
 			.block-editor-block-pattern-setup-list__item {
+				scroll-margin: 5px 0;
+
 				&:hover .block-editor-block-preview__container {
 					box-shadow: 0 0 0 2px var(--wp-admin-theme-color);
 				}
@@ -44,6 +46,7 @@
 					color: var(--wp-admin-theme-color);
 				}
 			}
+
 			.block-editor-block-pattern-setup-list__list-item {
 				break-inside: avoid-column;
 				margin-bottom: $grid-unit-30;
@@ -85,7 +88,7 @@
 		align-items: center;
 		justify-content: space-between;
 		border-top: 1px solid $gray-300;
-		align-self: flex-end;
+		align-self: stretch;
 
 		.block-editor-block-pattern-setup__display-controls {
 			display: flex;

package/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 }

package/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,9 +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';
+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 ) {
@@ -34,11 +40,11 @@ const WithToolTip = ( { showTooltip, title, children } ) => {
 };
 
 function BlockPattern( {
+	id,
 	isDraggable,
 	pattern,
 	onClick,
 	onHover,
-	composite,
 	showTooltip,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
@@ -50,7 +56,7 @@ function BlockPattern( {
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
 			blocks={ blocks }
-			isPattern={ !! pattern }
+			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
 				<div
@@ -71,20 +77,33 @@ function BlockPattern( {
 					} }
 				>
 					<WithToolTip
-						showTooltip={ showTooltip && ! pattern.id }
+						showTooltip={
+							showTooltip && ! pattern.type !== PATTERN_TYPES.user
+						}
 						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,
-								}
-							) }
+							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 );
@@ -96,10 +115,6 @@ function BlockPattern( {
 								onHover?.( pattern );
 							} }
 							onMouseLeave={ () => onHover?.( null ) }
-							aria-label={ pattern.title }
-							aria-describedby={
-								pattern.description ? descriptionId : undefined
-							}
 						>
 							<BlockPreview
 								blocks={ blocks }
@@ -107,15 +122,17 @@ function BlockPattern( {
 							/>
 
 							<HStack className="block-editor-patterns__pattern-details">
-								{ pattern.id && ! pattern.syncStatus && (
-									<div className="block-editor-patterns__pattern-icon-wrapper">
-										<Icon
-											className="block-editor-patterns__pattern-icon"
-											icon={ symbol }
-										/>
-									</div>
-								) }
-								{ ( ! showTooltip || pattern.id ) && (
+								{ pattern.type === PATTERN_TYPES.user &&
+									! pattern.syncStatus && (
+										<div className="block-editor-patterns__pattern-icon-wrapper">
+											<Icon
+												className="block-editor-patterns__pattern-icon"
+												icon={ symbol }
+											/>
+										</div>
+									) }
+								{ ( ! showTooltip ||
+									pattern.type === PATTERN_TYPES.user ) && (
 									<div className="block-editor-block-patterns-list__item-title">
 										{ pattern.title }
 									</div>
@@ -141,7 +158,7 @@ function BlockPatternPlaceholder() {
 	);
 }
 
-function BlockPatternList(
+function BlockPatternsList(
 	{
 		isDraggable,
 		blockPatterns,
@@ -155,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 }
@@ -169,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 }
 					/>
 				) : (
@@ -185,4 +211,4 @@ function BlockPatternList(
 	);
 }
 
-export default forwardRef( BlockPatternList );
+export default forwardRef( BlockPatternsList );