WordPress · diegohaz · Mar 12, 2021 · Nov 12, 2020 · Nov 12, 2020 · Nov 19, 2020
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
@@ -60,7 +60,7 @@
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-spring": "^8.0.19",
-		"reakit": "1.1.0",
+		"reakit": "1.3.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0",

@@ -1,18 +1,21 @@
-/**
- * External dependencies
- */
-import { Composite, useCompositeState } from 'reakit';
-
 /**
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
-import { useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import InserterListItem from '../inserter-list-item';
+import { InserterListboxGroup, InserterListboxRow } from '../inserter-listbox';
+
+function chunk( array, size ) {
+	const chunks = [];
+	for ( let i = 0, j = array.length; i < j; i += size ) {
+		chunks.push( array.slice( i, i + size ) );
+	}
+	return chunks;
+}
 
 function BlockTypesList( {
 	items = [],
@@ -21,49 +24,37 @@ function BlockTypesList( {
 	children,
 	label,
 } ) {
-	const composite = useCompositeState();
-	const orderId = items.reduce( ( acc, item ) => acc + '--' + item.id, '' );
-
-	// This ensures the composite state refreshes when the list order changes.
-	useEffect( () => {
-		composite.unstable_sort();
-	}, [ composite.unstable_sort, orderId ] );
-
 	return (
-		/*
-		 * Disable reason: The `list` ARIA role is redundant but
-		 * Safari+VoiceOver won't announce the list otherwise.
-		 */
-		/* eslint-disable jsx-a11y/no-redundant-roles */
-		<Composite
-			{ ...composite }
-			role="listbox"
+		<InserterListboxGroup
 			className="block-editor-block-types-list"
 			aria-label={ label }
 		>
-			{ items.map( ( item ) => {
-				return (
-					<InserterListItem
-						key={ item.id }
-						className={ getBlockMenuDefaultClassName( item.id ) }
-						icon={ item.icon }
-						onClick={ () => {
-							onSelect( item );
-							onHover( null );
-						} }
-						onFocus={ () => onHover( item ) }
-						onMouseEnter={ () => onHover( item ) }
-						onMouseLeave={ () => onHover( null ) }
-						onBlur={ () => onHover( null ) }
-						isDisabled={ item.isDisabled }
-						title={ item.title }
-						composite={ composite }
-					/>
-				);
-			} ) }
+			{ chunk( items, 3 ).map( ( row, i ) => (
+				<InserterListboxRow key={ i } role="presentation">
+					{ row.map( ( item, j ) => (
+						<InserterListItem
+							key={ item.id }
+							className={ getBlockMenuDefaultClassName(
+								item.id
+							) }
+							icon={ item.icon }
+							onClick={ () => {
+								onSelect( item );
+								onHover( null );
+							} }
+							onFocus={ () => onHover( item ) }
+							onMouseEnter={ () => onHover( item ) }
+							onMouseLeave={ () => onHover( null ) }
+							onBlur={ () => onHover( null ) }
+							isDisabled={ item.isDisabled }
+							title={ item.title }
+							isFirst={ i + j === 0 }
+						/>
+					) ) }
+				</InserterListboxRow>
+			) ) }
 			{ children }
-		</Composite>
-		/* eslint-enable jsx-a11y/no-redundant-roles */
+		</InserterListboxGroup>
 	);
 }
 

@@ -1,5 +1,4 @@
-.block-editor-block-types-list {
-	list-style: none;
+.block-editor-block-types-list > * {
 	padding: 4px;
 	margin-left: -4px;
 	margin-right: -4px;

@@ -2,25 +2,20 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { CompositeItem } from 'reakit';
-
-/**
- * WordPress dependencies
- */
-import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import { InserterListboxItem } from '../inserter-listbox';
 
 function InserterListItem( {
 	icon,
 	onClick,
 	isDisabled,
 	title,
 	className,
-	composite,
+	isFirst,
 	...props
 } ) {
 	const itemIconStyle = icon
@@ -31,11 +26,11 @@ function InserterListItem( {
 		: {};
 
 	return (
-		<div className="block-editor-block-types-list__list-item">
-			<CompositeItem
-				role="option"
-				as={ Button }
-				{ ...composite }
+		<div
+			className="block-editor-block-types-list__list-item"
+			role="presentation"
+		>
+			<InserterListboxItem
 				className={ classnames(
 					'block-editor-block-types-list__item',
 					className
@@ -45,6 +40,7 @@ function InserterListItem( {
 					onClick();
 				} }
 				disabled={ isDisabled }
+				isFirst={ isFirst }
 				{ ...props }
 			>
 				<span
@@ -56,7 +52,7 @@ function InserterListItem( {
 				<span className="block-editor-block-types-list__item-title">
 					{ title }
 				</span>
-			</CompositeItem>
+			</InserterListboxItem>
 		</div>
 	);
 }

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const InserterListboxContext = createContext();
+
+export default InserterListboxContext;
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function InserterListboxGroup( props, ref ) {
+	return (
+		<div
+			role="listbox"
+			aria-orientation="horizontal"
+			{ ...props }
+			ref={ ref }
+		/>
+	);
+}
+
+export default forwardRef( InserterListboxGroup );
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { useCompositeState } from 'reakit/Composite';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InserterListboxContext from './context';
+
+export { default as InserterListboxGroup } from './group';
+export { default as InserterListboxRow } from './row';
+export { default as InserterListboxItem } from './item';
+
+function InserterListbox( props, ref ) {
+	const compositeState = useCompositeState( {
+		shift: true,
+		wrap: 'horizontal',
+	} );
+	return (
+		<InserterListboxContext.Provider value={ compositeState }>
+			<div { ...props } ref={ ref } />
+		</InserterListboxContext.Provider>
+	);
+}
+
+export default forwardRef( InserterListbox );