From 0df4171863e07ba4c9abeb4757902adc6e3a5f24 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Thu, 12 Nov 2020 11:51:37 -0300
Subject: [PATCH 01/11] Try new block inserter keyboard navigation

---
 package-lock.json                             |  86 +++-----
 packages/block-editor/package.json            |   2 +-
 .../src/components/block-types-list/index.js  |  82 ++++----
 .../components/block-types-list/style.scss    |   2 +-
 .../components/inserter-list-item/index.js    |  33 +--
 .../components/inserter/block-types-tab.js    | 194 +++++++++---------
 .../src/components/inserter/context.js        |   8 +
 packages/block-library/package.json           |   2 +-
 packages/components/package.json              |   2 +-
 packages/edit-widgets/package.json            |   2 +-
 10 files changed, 209 insertions(+), 204 deletions(-)
 create mode 100644 packages/block-editor/src/components/inserter/context.js

diff --git a/package-lock.json b/package-lock.json
index 6c7a4e48c1f9c4..f1abd432f631e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9427,9 +9427,9 @@
 			}
 		},
 		"@popperjs/core": {
-			"version": "2.4.2",
-			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.4.2.tgz",
-			"integrity": "sha512-JlGTGRYHC2QK+DDbePyXdBdooxFq2+noLfWpRqJtkxcb/oYWzOF0kcbfvvbWrwevCC1l6hLUg1wHYT+ona5BWQ=="
+			"version": "2.5.4",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.5.4.tgz",
+			"integrity": "sha512-ZpKr+WTb8zsajqgDkvCEWgp6d5eJT6Q63Ng2neTbzBO76Lbe91vX/iVIW9dikq+Fs3yEo+ls4cxeXABD2LtcbQ=="
 		},
 		"@reach/router": {
 			"version": "1.2.1",
@@ -16388,16 +16388,6 @@
 				}
 			}
 		},
-		"@testing-library/react-hooks": {
-			"version": "3.4.2",
-			"resolved": "https://registry.npmjs.org/@testing-library/react-hooks/-/react-hooks-3.4.2.tgz",
-			"integrity": "sha512-RfPG0ckOzUIVeIqlOc1YztKgFW+ON8Y5xaSPbiBkfj9nMkkiLhLeBXT5icfPX65oJV/zCZu4z8EVnUc6GY9C5A==",
-			"dev": true,
-			"requires": {
-				"@babel/runtime": "^7.5.4",
-				"@types/testing-library__react-hooks": "^3.4.0"
-			}
-		},
 		"@types/anymatch": {
 			"version": "1.3.1",
 			"resolved": "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz",
@@ -16801,15 +16791,6 @@
 				"@types/react": "*"
 			}
 		},
-		"@types/react-test-renderer": {
-			"version": "16.9.3",
-			"resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.3.tgz",
-			"integrity": "sha512-wJ7IlN5NI82XMLOyHSa+cNN4Z0I+8/YaLl04uDgcZ+W+ExWCmCiVTLT/7fRNqzy4OhStZcUwIqLNF7q+AdW43Q==",
-			"dev": true,
-			"requires": {
-				"@types/react": "*"
-			}
-		},
 		"@types/react-textarea-autosize": {
 			"version": "4.3.5",
 			"resolved": "https://registry.npmjs.org/@types/react-textarea-autosize/-/react-textarea-autosize-4.3.5.tgz",
@@ -16988,15 +16969,6 @@
 				}
 			}
 		},
-		"@types/testing-library__react-hooks": {
-			"version": "3.4.1",
-			"resolved": "https://registry.npmjs.org/@types/testing-library__react-hooks/-/testing-library__react-hooks-3.4.1.tgz",
-			"integrity": "sha512-G4JdzEcq61fUyV6wVW9ebHWEiLK2iQvaBuCHHn9eMSbZzVh4Z4wHnUGIvQOYCCYeu5DnUtFyNYuAAgbSaO/43Q==",
-			"dev": true,
-			"requires": {
-				"@types/react-test-renderer": "*"
-			}
-		},
 		"@types/tinycolor2": {
 			"version": "1.4.2",
 			"resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.2.tgz",
@@ -17571,7 +17543,7 @@
 				"react-autosize-textarea": "^7.1.0",
 				"react-spring": "^8.0.19",
 				"react-transition-group": "^2.9.0",
-				"reakit": "1.1.0",
+				"reakit": "1.3.0",
 				"redux-multi": "^0.1.12",
 				"refx": "^3.0.0",
 				"rememo": "^3.0.0",
@@ -17617,7 +17589,7 @@
 				"memize": "^1.1.0",
 				"moment": "^2.22.1",
 				"react-easy-crop": "^3.0.0",
-				"reakit": "1.1.0",
+				"reakit": "1.3.0",
 				"tinycolor2": "^1.4.1"
 			}
 		},
@@ -17700,7 +17672,7 @@
 				"react-resize-aware": "^3.0.1",
 				"react-spring": "^8.0.20",
 				"react-use-gesture": "^7.0.15",
-				"reakit": "^1.1.0",
+				"reakit": "^1.3.0",
 				"rememo": "^3.0.0",
 				"tinycolor2": "^1.4.1",
 				"uuid": "^8.3.0"
@@ -18010,7 +17982,7 @@
 				"@wordpress/url": "file:packages/url",
 				"classnames": "^2.2.5",
 				"lodash": "^4.17.19",
-				"reakit": "^1.1.0",
+				"reakit": "^1.3.0",
 				"rememo": "^3.0.0",
 				"uuid": "^8.3.0"
 			}
@@ -29120,9 +29092,9 @@
 			}
 		},
 		"body-scroll-lock": {
-			"version": "3.0.3",
-			"resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.0.3.tgz",
-			"integrity": "sha512-EUryImgD6Gv87HOjJB/yB2WIGECiZMhmcUK+DrqVRFDDa64xR+FsK0LgvLPnBxZDTxIl+W80/KJ8i6gp2IwOHQ=="
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz",
+			"integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg=="
 		},
 		"boolbase": {
 			"version": "1.0.0",
@@ -55269,36 +55241,36 @@
 			}
 		},
 		"reakit": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/reakit/-/reakit-1.1.0.tgz",
-			"integrity": "sha512-d/ERtwgBndBPsyPBPUl5jueyfFgsglIfQCnLMKuxM0PaWiIZ6Ys3XsYaNy/AaG8k46Ee5cQPMdRrR30nVcSToQ==",
+			"version": "1.3.0",
+			"resolved": "https://registry.npmjs.org/reakit/-/reakit-1.3.0.tgz",
+			"integrity": "sha512-2hTq1VQ8F5hUksyNFgCWhLuBipMlpjOIFfqwbossWgNj36pQQMsvB0kb/+vcvQ0YgS6iXCLFq9lI2O5G4wAkgw==",
 			"requires": {
-				"@popperjs/core": "^2.4.2",
-				"body-scroll-lock": "^3.0.2",
-				"reakit-system": "^0.13.0",
-				"reakit-utils": "^0.13.0",
-				"reakit-warning": "^0.4.0"
+				"@popperjs/core": "^2.4.4",
+				"body-scroll-lock": "^3.1.5",
+				"reakit-system": "^0.15.0",
+				"reakit-utils": "^0.15.0",
+				"reakit-warning": "^0.6.0"
 			}
 		},
 		"reakit-system": {
-			"version": "0.13.0",
-			"resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.13.0.tgz",
-			"integrity": "sha512-33HCSab1WS08H8P4aFU7X7sf089B383GKWilyj+Z0U5XNJPzRklbqdsfsyasEm9vr/gQyu9ZMLxX1YJBN/iekw==",
+			"version": "0.15.0",
+			"resolved": "https://registry.npmjs.org/reakit-system/-/reakit-system-0.15.0.tgz",
+			"integrity": "sha512-C7b9Jz9sU4qGpSQS5e1aGKJHoajbT3PBk3qDb5hOoc8BEpHEqkceaCH7THtVZze0I7tQUnOM9XL4DL1tO5xCxg==",
 			"requires": {
-				"reakit-utils": "^0.13.0"
+				"reakit-utils": "^0.15.0"
 			}
 		},
 		"reakit-utils": {
-			"version": "0.13.0",
-			"resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.13.0.tgz",
-			"integrity": "sha512-/Ll+D4WllB6s2dNuWHTO32JNgdSHl1jf5y6QK3aCU4OEMtSCGz0TpXXHslWgRXWEQjKItVY640A8wugVQmKgWQ=="
+			"version": "0.15.0",
+			"resolved": "https://registry.npmjs.org/reakit-utils/-/reakit-utils-0.15.0.tgz",
+			"integrity": "sha512-c9HWaT9XU8KQWj+dhUG01WD+D4EK5bQHq+wVwRUuTXau0e49i4udNxo/t/4M3lXeOS+WfgJ8aC00/0imgzPLTw=="
 		},
 		"reakit-warning": {
-			"version": "0.4.0",
-			"resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.4.0.tgz",
-			"integrity": "sha512-p5/dGY2AlWTV33AS9JPlm9Y5u0YUUyg53MIC90vl3p4J4VI2cxMnu42eCck1g0nwYgiEYLPU/90NNrAQf/Ck6g==",
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/reakit-warning/-/reakit-warning-0.6.0.tgz",
+			"integrity": "sha512-D3vMUQ8fFktZ+drs4PuUlwjLanYsc6bRoYQOma2iGTfQtqwQkhFeNMDKxlBQ79GfdQtZF/ECiCaLLjDUsIseWA==",
 			"requires": {
-				"reakit-utils": "^0.13.0"
+				"reakit-utils": "^0.15.0"
 			}
 		},
 		"realpath-native": {
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 7fc434dc3e5650..9bb0493b6ad76f 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -63,7 +63,7 @@
 		"react-autosize-textarea": "^7.1.0",
 		"react-spring": "^8.0.19",
 		"react-transition-group": "^2.9.0",
-		"reakit": "1.1.0",
+		"reakit": "1.3.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",
 		"rememo": "^3.0.0",
diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index 356ed3a7d13d3c..e53433f8b390d3 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -1,18 +1,26 @@
-/**
- * External dependencies
- */
-import { Composite, useCompositeState } from 'reakit';
-
 /**
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
-import { useEffect } from '@wordpress/element';
+import { useContext } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { CompositeGroup } from 'reakit/Composite';
+
+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;
+}
 
 /**
  * Internal dependencies
  */
 import InserterListItem from '../inserter-list-item';
+import InserterContext from '../inserter/context';
 
 function BlockTypesList( {
 	items = [],
@@ -21,48 +29,48 @@ 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 ] );
-
+	const compositeState = useContext( InserterContext );
 	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 }
+		<div
 			role="listbox"
 			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 ) => (
+				<CompositeGroup
+					state={ compositeState }
+					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 }
+						/>
+					) ) }
+				</CompositeGroup>
+			) ) }
 			{ children }
-		</Composite>
+		</div>
 		/* eslint-enable jsx-a11y/no-redundant-roles */
 	);
 }
diff --git a/packages/block-editor/src/components/block-types-list/style.scss b/packages/block-editor/src/components/block-types-list/style.scss
index 1f197db18126bd..1f6b83d58232f5 100644
--- a/packages/block-editor/src/components/block-types-list/style.scss
+++ b/packages/block-editor/src/components/block-types-list/style.scss
@@ -1,4 +1,4 @@
-.block-editor-block-types-list {
+.block-editor-block-types-list > * {
 	list-style: none;
 	padding: 4px;
 	margin-left: -4px;
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index 7dfd41cf98cbea..d5976d724f3266 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -7,12 +7,14 @@ import { CompositeItem } from 'reakit';
 /**
  * WordPress dependencies
  */
+import { useContext } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
+import InserterContext from '../inserter/context';
 
 function InserterListItem( {
 	icon,
@@ -20,9 +22,10 @@ function InserterListItem( {
 	isDisabled,
 	title,
 	className,
-	composite,
+	isFirst,
 	...props
 } ) {
+	const compositeState = useContext( InserterContext );
 	const itemIconStyle = icon
 		? {
 				backgroundColor: icon.background,
@@ -33,9 +36,8 @@ function InserterListItem( {
 	return (
 		<div className="block-editor-block-types-list__list-item">
 			<CompositeItem
+				state={ compositeState }
 				role="option"
-				as={ Button }
-				{ ...composite }
 				className={ classnames(
 					'block-editor-block-types-list__item',
 					className
@@ -47,15 +49,22 @@ function InserterListItem( {
 				disabled={ isDisabled }
 				{ ...props }
 			>
-				<span
-					className="block-editor-block-types-list__item-icon"
-					style={ itemIconStyle }
-				>
-					<BlockIcon icon={ icon } showColors />
-				</span>
-				<span className="block-editor-block-types-list__item-title">
-					{ title }
-				</span>
+				{ ( htmlProps ) => (
+					<Button
+						{ ...htmlProps }
+						tabIndex={ isFirst ? 0 : htmlProps.tabIndex }
+					>
+						<span
+							className="block-editor-block-types-list__item-icon"
+							style={ itemIconStyle }
+						>
+							<BlockIcon icon={ icon } showColors />
+						</span>
+						<span className="block-editor-block-types-list__item-title">
+							{ title }
+						</span>
+					</Button>
+				) }
 			</CompositeItem>
 		</div>
 	);
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index e6b7c630bad372..5cf66767797bba 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -10,6 +10,7 @@ import {
 	isEmpty,
 	orderBy,
 } from 'lodash';
+import { useCompositeState } from 'reakit/Composite';
 
 /**
  * WordPress dependencies
@@ -29,6 +30,7 @@ import { searchBlockItems } from './search-items';
 import InserterPanel from './panel';
 import InserterNoResults from './no-results';
 import useBlockTypesState from './hooks/use-block-types-state';
+import InserterContext from './context';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -42,6 +44,10 @@ export function BlockTypesTab( {
 	debouncedSpeak,
 	showMostUsedBlocks,
 } ) {
+	const compositeState = useCompositeState( {
+		shift: true,
+		wrap: 'horizontal',
+	} );
 	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
 		rootClientId,
 		onInsert
@@ -122,113 +128,115 @@ export function BlockTypesTab( {
 	const hasItems = ! isEmpty( filteredItems );
 
 	return (
-		<div>
-			{ hasChildItems && (
-				<ChildBlocks rootClientId={ rootClientId }>
-					<BlockTypesList
-						// Pass along every block, as useBlockTypesState() and
-						// getInserterItems() will have already filtered out
-						// non-child blocks.
-						items={ filteredItems }
-						onSelect={ onSelectItem }
-						onHover={ onHover }
-						label={ __( 'Child Blocks' ) }
-					/>
-				</ChildBlocks>
-			) }
-
-			{ showMostUsedBlocks &&
-				! hasChildItems &&
-				!! suggestedItems.length &&
-				! filterValue && (
-					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
+		<InserterContext.Provider value={ compositeState }>
+			<div>
+				{ hasChildItems && (
+					<ChildBlocks rootClientId={ rootClientId }>
 						<BlockTypesList
-							items={ suggestedItems }
+							// Pass along every block, as useBlockTypesState() and
+							// getInserterItems() will have already filtered out
+							// non-child blocks.
+							items={ filteredItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
-							label={ _x( 'Most used', 'blocks' ) }
+							label={ __( 'Child Blocks' ) }
 						/>
-					</InserterPanel>
+					</ChildBlocks>
 				) }
 
-			{ ! hasChildItems &&
-				map( categories, ( category ) => {
-					const categoryItems = itemsPerCategory[ category.slug ];
-					if ( ! categoryItems || ! categoryItems.length ) {
-						return null;
-					}
-					return (
-						<InserterPanel
-							key={ category.slug }
-							title={ category.title }
-							icon={ category.icon }
-						>
+				{ showMostUsedBlocks &&
+					! hasChildItems &&
+					!! suggestedItems.length &&
+					! filterValue && (
+						<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 							<BlockTypesList
-								items={ categoryItems }
+								items={ suggestedItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
-								label={ category.title }
+								label={ _x( 'Most used', 'blocks' ) }
 							/>
 						</InserterPanel>
-					);
-				} ) }
+					) }
+
+				{ ! hasChildItems &&
+					map( categories, ( category ) => {
+						const categoryItems = itemsPerCategory[ category.slug ];
+						if ( ! categoryItems || ! categoryItems.length ) {
+							return null;
+						}
+						return (
+							<InserterPanel
+								key={ category.slug }
+								title={ category.title }
+								icon={ category.icon }
+							>
+								<BlockTypesList
+									items={ categoryItems }
+									onSelect={ onSelectItem }
+									onHover={ onHover }
+									label={ category.title }
+								/>
+							</InserterPanel>
+						);
+					} ) }
+
+				{ ! hasChildItems && !! uncategorizedItems.length && (
+					<InserterPanel
+						className="block-editor-inserter__uncategorized-blocks-panel"
+						title={ __( 'Uncategorized' ) }
+					>
+						<BlockTypesList
+							items={ uncategorizedItems }
+							onSelect={ onSelectItem }
+							onHover={ onHover }
+							label={ __( 'Uncategorized' ) }
+						/>
+					</InserterPanel>
+				) }
 
-			{ ! hasChildItems && !! uncategorizedItems.length && (
-				<InserterPanel
-					className="block-editor-inserter__uncategorized-blocks-panel"
-					title={ __( 'Uncategorized' ) }
+				{ ! hasChildItems &&
+					map( collections, ( collection, namespace ) => {
+						const collectionItems = itemsPerCollection[ namespace ];
+						if ( ! collectionItems || ! collectionItems.length ) {
+							return null;
+						}
+
+						return (
+							<InserterPanel
+								key={ namespace }
+								title={ collection.title }
+								icon={ collection.icon }
+							>
+								<BlockTypesList
+									items={ collectionItems }
+									onSelect={ onSelectItem }
+									onHover={ onHover }
+									label={ collection.title }
+								/>
+							</InserterPanel>
+						);
+					} ) }
+
+				<__experimentalInserterMenuExtension.Slot
+					fillProps={ {
+						onSelect: onSelectItem,
+						onHover,
+						filterValue,
+						hasItems,
+					} }
 				>
-					<BlockTypesList
-						items={ uncategorizedItems }
-						onSelect={ onSelectItem }
-						onHover={ onHover }
-						label={ __( 'Uncategorized' ) }
-					/>
-				</InserterPanel>
-			) }
-
-			{ ! hasChildItems &&
-				map( collections, ( collection, namespace ) => {
-					const collectionItems = itemsPerCollection[ namespace ];
-					if ( ! collectionItems || ! collectionItems.length ) {
+					{ ( fills ) => {
+						if ( fills.length ) {
+							return fills;
+						}
+						if ( ! hasItems ) {
+							return <InserterNoResults />;
+						}
 						return null;
-					}
-
-					return (
-						<InserterPanel
-							key={ namespace }
-							title={ collection.title }
-							icon={ collection.icon }
-						>
-							<BlockTypesList
-								items={ collectionItems }
-								onSelect={ onSelectItem }
-								onHover={ onHover }
-								label={ collection.title }
-							/>
-						</InserterPanel>
-					);
-				} ) }
-
-			<__experimentalInserterMenuExtension.Slot
-				fillProps={ {
-					onSelect: onSelectItem,
-					onHover,
-					filterValue,
-					hasItems,
-				} }
-			>
-				{ ( fills ) => {
-					if ( fills.length ) {
-						return fills;
-					}
-					if ( ! hasItems ) {
-						return <InserterNoResults />;
-					}
-					return null;
-				} }
-			</__experimentalInserterMenuExtension.Slot>
-		</div>
+					} }
+				</__experimentalInserterMenuExtension.Slot>
+			</div>
+		</InserterContext.Provider>
 	);
 }
 
diff --git a/packages/block-editor/src/components/inserter/context.js b/packages/block-editor/src/components/inserter/context.js
new file mode 100644
index 00000000000000..950497a4193d34
--- /dev/null
+++ b/packages/block-editor/src/components/inserter/context.js
@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+const InserterContext = createContext();
+
+export default InserterContext;
diff --git a/packages/block-library/package.json b/packages/block-library/package.json
index 42adc1e8f4ba4b..bd67396e2d29fd 100644
--- a/packages/block-library/package.json
+++ b/packages/block-library/package.json
@@ -61,7 +61,7 @@
 		"memize": "^1.1.0",
 		"moment": "^2.22.1",
 		"react-easy-crop": "^3.0.0",
-		"reakit": "1.1.0",
+		"reakit": "1.3.0",
 		"tinycolor2": "^1.4.1"
 	},
 	"publishConfig": {
diff --git a/packages/components/package.json b/packages/components/package.json
index 02feffdfebe8b0..f21d949486b19a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -58,7 +58,7 @@
 		"react-resize-aware": "^3.0.1",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^7.0.15",
-		"reakit": "^1.1.0",
+		"reakit": "^1.3.0",
 		"rememo": "^3.0.0",
 		"tinycolor2": "^1.4.1",
 		"uuid": "^8.3.0"
diff --git a/packages/edit-widgets/package.json b/packages/edit-widgets/package.json
index 63686ea6bbfb06..6bbda60d6a89e7 100644
--- a/packages/edit-widgets/package.json
+++ b/packages/edit-widgets/package.json
@@ -48,7 +48,7 @@
 		"@wordpress/url": "file:../url",
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.19",
-		"reakit": "^1.1.0",
+		"reakit": "^1.3.0",
 		"rememo": "^3.0.0",
 		"uuid": "^8.3.0"
 	},

From 13d209d08d2f620cfb2703b52698ef19ab8d924b Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Thu, 19 Nov 2020 09:07:20 -0300
Subject: [PATCH 02/11] Refactor code

---
 .../src/components/block-types-list/index.js  |  33 +--
 .../components/block-types-list/style.scss    |   1 -
 .../components/inserter-list-item/index.js    |  47 ++---
 .../{inserter => inserter-listbox}/context.js |   4 +-
 .../src/components/inserter-listbox/group.js  |  10 +
 .../src/components/inserter-listbox/index.js  |  32 +++
 .../src/components/inserter-listbox/item.js   |  45 ++++
 .../src/components/inserter-listbox/row.js    |  27 +++
 .../components/inserter/block-types-tab.js    | 195 +++++++++---------
 9 files changed, 235 insertions(+), 159 deletions(-)
 rename packages/block-editor/src/components/{inserter => inserter-listbox}/context.js (50%)
 create mode 100644 packages/block-editor/src/components/inserter-listbox/group.js
 create mode 100644 packages/block-editor/src/components/inserter-listbox/index.js
 create mode 100644 packages/block-editor/src/components/inserter-listbox/item.js
 create mode 100644 packages/block-editor/src/components/inserter-listbox/row.js

diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index e53433f8b390d3..b249bb65a18bd7 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { getBlockMenuDefaultClassName } from '@wordpress/blocks';
-import { useContext } from '@wordpress/element';
+
 /**
- * External dependencies
+ * Internal dependencies
  */
-import { CompositeGroup } from 'reakit/Composite';
+import InserterListItem from '../inserter-list-item';
+import { InserterListboxGroup, InserterListboxRow } from '../inserter-listbox';
 
 function chunk( array, size ) {
 	const chunks = [];
@@ -16,12 +17,6 @@ function chunk( array, size ) {
 	return chunks;
 }
 
-/**
- * Internal dependencies
- */
-import InserterListItem from '../inserter-list-item';
-import InserterContext from '../inserter/context';
-
 function BlockTypesList( {
 	items = [],
 	onSelect,
@@ -29,24 +24,13 @@ function BlockTypesList( {
 	children,
 	label,
 } ) {
-	const compositeState = useContext( InserterContext );
 	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 */
-		<div
-			role="listbox"
+		<InserterListboxGroup
 			className="block-editor-block-types-list"
 			aria-label={ label }
 		>
 			{ chunk( items, 3 ).map( ( row, i ) => (
-				<CompositeGroup
-					state={ compositeState }
-					key={ i }
-					role="presentation"
-				>
+				<InserterListboxRow key={ i } role="presentation">
 					{ row.map( ( item, j ) => (
 						<InserterListItem
 							key={ item.id }
@@ -67,11 +51,10 @@ function BlockTypesList( {
 							isFirst={ i + j === 0 }
 						/>
 					) ) }
-				</CompositeGroup>
+				</InserterListboxRow>
 			) ) }
 			{ children }
-		</div>
-		/* eslint-enable jsx-a11y/no-redundant-roles */
+		</InserterListboxGroup>
 	);
 }
 
diff --git a/packages/block-editor/src/components/block-types-list/style.scss b/packages/block-editor/src/components/block-types-list/style.scss
index 1f6b83d58232f5..4f530ec394f77f 100644
--- a/packages/block-editor/src/components/block-types-list/style.scss
+++ b/packages/block-editor/src/components/block-types-list/style.scss
@@ -1,5 +1,4 @@
 .block-editor-block-types-list > * {
-	list-style: none;
 	padding: 4px;
 	margin-left: -4px;
 	margin-right: -4px;
diff --git a/packages/block-editor/src/components/inserter-list-item/index.js b/packages/block-editor/src/components/inserter-list-item/index.js
index d5976d724f3266..579f5f15e1d175 100644
--- a/packages/block-editor/src/components/inserter-list-item/index.js
+++ b/packages/block-editor/src/components/inserter-list-item/index.js
@@ -2,19 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { CompositeItem } from 'reakit';
-
-/**
- * WordPress dependencies
- */
-import { useContext } from '@wordpress/element';
-import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import BlockIcon from '../block-icon';
-import InserterContext from '../inserter/context';
+import { InserterListboxItem } from '../inserter-listbox';
 
 function InserterListItem( {
 	icon,
@@ -25,7 +18,6 @@ function InserterListItem( {
 	isFirst,
 	...props
 } ) {
-	const compositeState = useContext( InserterContext );
 	const itemIconStyle = icon
 		? {
 				backgroundColor: icon.background,
@@ -34,10 +26,11 @@ function InserterListItem( {
 		: {};
 
 	return (
-		<div className="block-editor-block-types-list__list-item">
-			<CompositeItem
-				state={ compositeState }
-				role="option"
+		<div
+			className="block-editor-block-types-list__list-item"
+			role="presentation"
+		>
+			<InserterListboxItem
 				className={ classnames(
 					'block-editor-block-types-list__item',
 					className
@@ -47,25 +40,19 @@ function InserterListItem( {
 					onClick();
 				} }
 				disabled={ isDisabled }
+				isFirst={ isFirst }
 				{ ...props }
 			>
-				{ ( htmlProps ) => (
-					<Button
-						{ ...htmlProps }
-						tabIndex={ isFirst ? 0 : htmlProps.tabIndex }
-					>
-						<span
-							className="block-editor-block-types-list__item-icon"
-							style={ itemIconStyle }
-						>
-							<BlockIcon icon={ icon } showColors />
-						</span>
-						<span className="block-editor-block-types-list__item-title">
-							{ title }
-						</span>
-					</Button>
-				) }
-			</CompositeItem>
+				<span
+					className="block-editor-block-types-list__item-icon"
+					style={ itemIconStyle }
+				>
+					<BlockIcon icon={ icon } showColors />
+				</span>
+				<span className="block-editor-block-types-list__item-title">
+					{ title }
+				</span>
+			</InserterListboxItem>
 		</div>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/context.js b/packages/block-editor/src/components/inserter-listbox/context.js
similarity index 50%
rename from packages/block-editor/src/components/inserter/context.js
rename to packages/block-editor/src/components/inserter-listbox/context.js
index 950497a4193d34..aaaac34f05f61f 100644
--- a/packages/block-editor/src/components/inserter/context.js
+++ b/packages/block-editor/src/components/inserter-listbox/context.js
@@ -3,6 +3,6 @@
  */
 import { createContext } from '@wordpress/element';
 
-const InserterContext = createContext();
+const InserterListboxContext = createContext();
 
-export default InserterContext;
+export default InserterListboxContext;
diff --git a/packages/block-editor/src/components/inserter-listbox/group.js b/packages/block-editor/src/components/inserter-listbox/group.js
new file mode 100644
index 00000000000000..6a31201603303e
--- /dev/null
+++ b/packages/block-editor/src/components/inserter-listbox/group.js
@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+function InserterListboxGroup( props, ref ) {
+	return <div role="listbox" { ...props } ref={ ref } />;
+}
+
+export default forwardRef( InserterListboxGroup );
diff --git a/packages/block-editor/src/components/inserter-listbox/index.js b/packages/block-editor/src/components/inserter-listbox/index.js
new file mode 100644
index 00000000000000..abda1136f413b6
--- /dev/null
+++ b/packages/block-editor/src/components/inserter-listbox/index.js
@@ -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 );
diff --git a/packages/block-editor/src/components/inserter-listbox/item.js b/packages/block-editor/src/components/inserter-listbox/item.js
new file mode 100644
index 00000000000000..566b4054da927b
--- /dev/null
+++ b/packages/block-editor/src/components/inserter-listbox/item.js
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { CompositeItem } from 'reakit/Composite';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+import { forwardRef, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import InserterListboxContext from './context';
+
+function InserterListboxItem(
+	{ isFirst, as: Component, children, ...props },
+	ref
+) {
+	const state = useContext( InserterListboxContext );
+	return (
+		<CompositeItem state={ state } role="option" ref={ ref } { ...props }>
+			{ ( htmlProps ) => {
+				const propsWithTabIndex = {
+					...htmlProps,
+					tabIndex: isFirst ? 0 : htmlProps.tabIndex,
+				};
+				if ( Component ) {
+					return (
+						<Component { ...propsWithTabIndex }>
+							{ children }
+						</Component>
+					);
+				}
+				if ( typeof children === 'function' ) {
+					return children( propsWithTabIndex );
+				}
+				return <Button { ...propsWithTabIndex }>{ children }</Button>;
+			} }
+		</CompositeItem>
+	);
+}
+
+export default forwardRef( InserterListboxItem );
diff --git a/packages/block-editor/src/components/inserter-listbox/row.js b/packages/block-editor/src/components/inserter-listbox/row.js
new file mode 100644
index 00000000000000..902eec96af286b
--- /dev/null
+++ b/packages/block-editor/src/components/inserter-listbox/row.js
@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { forwardRef, useContext } from '@wordpress/element';
+/**
+ * External dependencies
+ */
+import { CompositeGroup } from 'reakit/Composite';
+
+/**
+ * Internal dependencies
+ */
+import InserterListboxContext from './context';
+
+function InserterListboxRow( props, ref ) {
+	const state = useContext( InserterListboxContext );
+	return (
+		<CompositeGroup
+			state={ state }
+			role="presentation"
+			ref={ ref }
+			{ ...props }
+		/>
+	);
+}
+
+export default forwardRef( InserterListboxRow );
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index 5cf66767797bba..87f32fccf308f1 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -10,7 +10,6 @@ import {
 	isEmpty,
 	orderBy,
 } from 'lodash';
-import { useCompositeState } from 'reakit/Composite';
 
 /**
  * WordPress dependencies
@@ -30,7 +29,7 @@ import { searchBlockItems } from './search-items';
 import InserterPanel from './panel';
 import InserterNoResults from './no-results';
 import useBlockTypesState from './hooks/use-block-types-state';
-import InserterContext from './context';
+import InserterListbox from '../inserter-listbox';
 
 const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ];
 
@@ -44,10 +43,6 @@ export function BlockTypesTab( {
 	debouncedSpeak,
 	showMostUsedBlocks,
 } ) {
-	const compositeState = useCompositeState( {
-		shift: true,
-		wrap: 'horizontal',
-	} );
 	const [ items, categories, collections, onSelectItem ] = useBlockTypesState(
 		rootClientId,
 		onInsert
@@ -128,115 +123,113 @@ export function BlockTypesTab( {
 	const hasItems = ! isEmpty( filteredItems );
 
 	return (
-		<InserterContext.Provider value={ compositeState }>
-			<div>
-				{ hasChildItems && (
-					<ChildBlocks rootClientId={ rootClientId }>
+		<InserterListbox>
+			{ hasChildItems && (
+				<ChildBlocks rootClientId={ rootClientId }>
+					<BlockTypesList
+						// Pass along every block, as useBlockTypesState() and
+						// getInserterItems() will have already filtered out
+						// non-child blocks.
+						items={ filteredItems }
+						onSelect={ onSelectItem }
+						onHover={ onHover }
+						label={ __( 'Child Blocks' ) }
+					/>
+				</ChildBlocks>
+			) }
+
+			{ showMostUsedBlocks &&
+				! hasChildItems &&
+				!! suggestedItems.length &&
+				! filterValue && (
+					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 						<BlockTypesList
-							// Pass along every block, as useBlockTypesState() and
-							// getInserterItems() will have already filtered out
-							// non-child blocks.
-							items={ filteredItems }
+							items={ suggestedItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
-							label={ __( 'Child Blocks' ) }
+							label={ _x( 'Most used', 'blocks' ) }
 						/>
-					</ChildBlocks>
+					</InserterPanel>
 				) }
 
-				{ showMostUsedBlocks &&
-					! hasChildItems &&
-					!! suggestedItems.length &&
-					! filterValue && (
-						<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
+			{ ! hasChildItems &&
+				map( categories, ( category ) => {
+					const categoryItems = itemsPerCategory[ category.slug ];
+					if ( ! categoryItems || ! categoryItems.length ) {
+						return null;
+					}
+					return (
+						<InserterPanel
+							key={ category.slug }
+							title={ category.title }
+							icon={ category.icon }
+						>
 							<BlockTypesList
-								items={ suggestedItems }
+								items={ categoryItems }
 								onSelect={ onSelectItem }
 								onHover={ onHover }
-								label={ _x( 'Most used', 'blocks' ) }
+								label={ category.title }
 							/>
 						</InserterPanel>
-					) }
-
-				{ ! hasChildItems &&
-					map( categories, ( category ) => {
-						const categoryItems = itemsPerCategory[ category.slug ];
-						if ( ! categoryItems || ! categoryItems.length ) {
-							return null;
-						}
-						return (
-							<InserterPanel
-								key={ category.slug }
-								title={ category.title }
-								icon={ category.icon }
-							>
-								<BlockTypesList
-									items={ categoryItems }
-									onSelect={ onSelectItem }
-									onHover={ onHover }
-									label={ category.title }
-								/>
-							</InserterPanel>
-						);
-					} ) }
-
-				{ ! hasChildItems && !! uncategorizedItems.length && (
-					<InserterPanel
-						className="block-editor-inserter__uncategorized-blocks-panel"
-						title={ __( 'Uncategorized' ) }
-					>
-						<BlockTypesList
-							items={ uncategorizedItems }
-							onSelect={ onSelectItem }
-							onHover={ onHover }
-							label={ __( 'Uncategorized' ) }
-						/>
-					</InserterPanel>
-				) }
+					);
+				} ) }
 
-				{ ! hasChildItems &&
-					map( collections, ( collection, namespace ) => {
-						const collectionItems = itemsPerCollection[ namespace ];
-						if ( ! collectionItems || ! collectionItems.length ) {
-							return null;
-						}
-
-						return (
-							<InserterPanel
-								key={ namespace }
-								title={ collection.title }
-								icon={ collection.icon }
-							>
-								<BlockTypesList
-									items={ collectionItems }
-									onSelect={ onSelectItem }
-									onHover={ onHover }
-									label={ collection.title }
-								/>
-							</InserterPanel>
-						);
-					} ) }
-
-				<__experimentalInserterMenuExtension.Slot
-					fillProps={ {
-						onSelect: onSelectItem,
-						onHover,
-						filterValue,
-						hasItems,
-					} }
+			{ ! hasChildItems && !! uncategorizedItems.length && (
+				<InserterPanel
+					className="block-editor-inserter__uncategorized-blocks-panel"
+					title={ __( 'Uncategorized' ) }
 				>
-					{ ( fills ) => {
-						if ( fills.length ) {
-							return fills;
-						}
-						if ( ! hasItems ) {
-							return <InserterNoResults />;
-						}
+					<BlockTypesList
+						items={ uncategorizedItems }
+						onSelect={ onSelectItem }
+						onHover={ onHover }
+						label={ __( 'Uncategorized' ) }
+					/>
+				</InserterPanel>
+			) }
+
+			{ ! hasChildItems &&
+				map( collections, ( collection, namespace ) => {
+					const collectionItems = itemsPerCollection[ namespace ];
+					if ( ! collectionItems || ! collectionItems.length ) {
 						return null;
-					} }
-				</__experimentalInserterMenuExtension.Slot>
-			</div>
-		</InserterContext.Provider>
+					}
+
+					return (
+						<InserterPanel
+							key={ namespace }
+							title={ collection.title }
+							icon={ collection.icon }
+						>
+							<BlockTypesList
+								items={ collectionItems }
+								onSelect={ onSelectItem }
+								onHover={ onHover }
+								label={ collection.title }
+							/>
+						</InserterPanel>
+					);
+				} ) }
+
+			<__experimentalInserterMenuExtension.Slot
+				fillProps={ {
+					onSelect: onSelectItem,
+					onHover,
+					filterValue,
+					hasItems,
+				} }
+			>
+				{ ( fills ) => {
+					if ( fills.length ) {
+						return fills;
+					}
+					if ( ! hasItems ) {
+						return <InserterNoResults />;
+					}
+					return null;
+				} }
+			</__experimentalInserterMenuExtension.Slot>
+		</InserterListbox>
 	);
 }
 

From 543ef7cce5509a3d63ab4becb13518c861289c49 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Thu, 19 Nov 2020 09:26:06 -0300
Subject: [PATCH 03/11] Pass aria-orientation to listbox

---
 .../src/components/inserter-listbox/group.js             | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inserter-listbox/group.js b/packages/block-editor/src/components/inserter-listbox/group.js
index 6a31201603303e..5b6d40d629a3b1 100644
--- a/packages/block-editor/src/components/inserter-listbox/group.js
+++ b/packages/block-editor/src/components/inserter-listbox/group.js
@@ -4,7 +4,14 @@
 import { forwardRef } from '@wordpress/element';
 
 function InserterListboxGroup( props, ref ) {
-	return <div role="listbox" { ...props } ref={ ref } />;
+	return (
+		<div
+			role="listbox"
+			aria-orientation="horizontal"
+			{ ...props }
+			ref={ ref }
+		/>
+	);
 }
 
 export default forwardRef( InserterListboxGroup );

From eca11f9c86d2f94ef99746405db60516aa44f2e4 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Wed, 2 Dec 2020 22:49:27 -0300
Subject: [PATCH 04/11] Update package.json

---
 package-lock.json                  | 6 ++++--
 packages/block-editor/package.json | 1 -
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0bfaaf0e988b4b..13c538d4ccbe8f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17340,7 +17340,6 @@
 				"memize": "^1.1.0",
 				"react-autosize-textarea": "^7.1.0",
 				"react-spring": "^8.0.19",
-				"react-transition-group": "^2.9.0",
 				"reakit": "1.3.0",
 				"redux-multi": "^0.1.12",
 				"refx": "^3.0.0",
@@ -32477,6 +32476,7 @@
 			"version": "3.4.0",
 			"resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.4.0.tgz",
 			"integrity": "sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==",
+			"dev": true,
 			"requires": {
 				"@babel/runtime": "^7.1.2"
 			}
@@ -53530,7 +53530,8 @@
 		"react-lifecycles-compat": {
 			"version": "3.0.4",
 			"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+			"dev": true
 		},
 		"react-merge-refs": {
 			"version": "1.0.0",
@@ -54809,6 +54810,7 @@
 			"version": "2.9.0",
 			"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz",
 			"integrity": "sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==",
+			"dev": true,
 			"requires": {
 				"dom-helpers": "^3.4.0",
 				"loose-envify": "^1.4.0",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 9af8dfc3d3b93b..6e74f78ededd7c 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -60,7 +60,6 @@
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"react-spring": "^8.0.19",
-		"react-transition-group": "^2.9.0",
 		"reakit": "1.3.0",
 		"redux-multi": "^0.1.12",
 		"refx": "^3.0.0",

From fcd65731fba7820002712cfefee39a536a0fcf23 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Fri, 4 Dec 2020 04:20:59 -0300
Subject: [PATCH 05/11] Address review comments

---
 .../block-editor/src/components/block-types-list/index.js     | 4 ++--
 .../block-editor/src/components/block-types-list/style.scss   | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js
index b249bb65a18bd7..6dccf9fc0a4d7d 100644
--- a/packages/block-editor/src/components/block-types-list/index.js
+++ b/packages/block-editor/src/components/block-types-list/index.js
@@ -30,7 +30,7 @@ function BlockTypesList( {
 			aria-label={ label }
 		>
 			{ chunk( items, 3 ).map( ( row, i ) => (
-				<InserterListboxRow key={ i } role="presentation">
+				<InserterListboxRow key={ i }>
 					{ row.map( ( item, j ) => (
 						<InserterListItem
 							key={ item.id }
@@ -48,7 +48,7 @@ function BlockTypesList( {
 							onBlur={ () => onHover( null ) }
 							isDisabled={ item.isDisabled }
 							title={ item.title }
-							isFirst={ i + j === 0 }
+							isFirst={ i === 0 && j === 0 }
 						/>
 					) ) }
 				</InserterListboxRow>
diff --git a/packages/block-editor/src/components/block-types-list/style.scss b/packages/block-editor/src/components/block-types-list/style.scss
index 4f530ec394f77f..f1f22fe504fbe4 100644
--- a/packages/block-editor/src/components/block-types-list/style.scss
+++ b/packages/block-editor/src/components/block-types-list/style.scss
@@ -1,4 +1,4 @@
-.block-editor-block-types-list > * {
+.block-editor-block-types-list > [role="presentation"] {
 	padding: 4px;
 	margin-left: -4px;
 	margin-right: -4px;

From 3155ceeef7a1a29e61d0a9e84583c42e7341e7f0 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Thu, 7 Jan 2021 15:07:05 +0100
Subject: [PATCH 06/11] Add announcement

---
 package-lock.json                             | 26 +++++++++----------
 .../src/components/inserter-listbox/group.js  | 22 ++++++++++++++--
 2 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9857a148d90f46..a7a0813d3888ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47967,18 +47967,18 @@
 					"dev": true
 				},
 				"mime-db": {
-					"version": "1.44.0",
-					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz",
-					"integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==",
+					"version": "1.45.0",
+					"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.45.0.tgz",
+					"integrity": "sha512-CkqLUxUk15hofLoLyljJSrukZi8mAtgd+yE5uO4tqRZsdsAJKv0O+rFMhVDRJgozy+yG6md5KwuXhD4ocIoP+w==",
 					"dev": true
 				},
 				"mime-types": {
-					"version": "2.1.27",
-					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz",
-					"integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==",
+					"version": "2.1.28",
+					"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.28.tgz",
+					"integrity": "sha512-0TO2yJ5YHYr7M2zzT7gDU1tbwHxEUWBCLt0lscSNpcdAfFyJOVEpRYNS7EXVcTLNj/25QO8gulHC5JtTzSE2UQ==",
 					"dev": true,
 					"requires": {
-						"mime-db": "1.44.0"
+						"mime-db": "1.45.0"
 					}
 				},
 				"ms": {
@@ -48021,9 +48021,9 @@
 					}
 				},
 				"tar-stream": {
-					"version": "2.1.4",
-					"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.4.tgz",
-					"integrity": "sha512-o3pS2zlG4gxr67GmFYBLlq+dM8gyRGUOvsrHclSkvtVtQbjV0s/+ZE8OpICbaj8clrX3tjeHngYGP7rweaBnuw==",
+					"version": "2.2.0",
+					"resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+					"integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
 					"dev": true,
 					"requires": {
 						"bl": "^4.0.3",
@@ -48034,9 +48034,9 @@
 					}
 				},
 				"ws": {
-					"version": "7.4.1",
-					"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.1.tgz",
-					"integrity": "sha512-pTsP8UAfhy3sk1lSk/O/s4tjD0CRwvMnzvwr4OKGX7ZvqZtUyx4KIJB5JWbkykPoc55tixMGgTNoh3k4FkNGFQ==",
+					"version": "7.4.2",
+					"resolved": "https://registry.npmjs.org/ws/-/ws-7.4.2.tgz",
+					"integrity": "sha512-T4tewALS3+qsrpGI/8dqNMLIVdq/g/85U98HPMa6F0m6xTbvhXU6RCQLqPH3+SlomNV/LdY6RXEbBpMH6EOJnA==",
 					"dev": true
 				},
 				"yauzl": {
diff --git a/packages/block-editor/src/components/inserter-listbox/group.js b/packages/block-editor/src/components/inserter-listbox/group.js
index 5b6d40d629a3b1..c91ee5c7916612 100644
--- a/packages/block-editor/src/components/inserter-listbox/group.js
+++ b/packages/block-editor/src/components/inserter-listbox/group.js
@@ -1,15 +1,33 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
 
 function InserterListboxGroup( props, ref ) {
+	const hasSpokenRef = useRef( false );
 	return (
 		<div
+			ref={ ref }
 			role="listbox"
 			aria-orientation="horizontal"
+			onFocus={ () => {
+				if ( ! hasSpokenRef.current ) {
+					speak(
+						__(
+							'Use left and right arrow keys to move through blocks'
+						)
+					);
+					hasSpokenRef.current = true;
+				}
+			} }
+			onBlur={ ( event ) => {
+				if ( ! event.currentTarget.contains( event.relatedTarget ) ) {
+					hasSpokenRef.current = false;
+				}
+			} }
 			{ ...props }
-			ref={ ref }
 		/>
 	);
 }

From 40a0043aa54324879c6076677ce8d0c25b1be63b Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Sat, 16 Jan 2021 04:56:27 +0100
Subject: [PATCH 07/11] Import composite from @wordpress/components

---
 .../src/components/inserter-listbox/index.js           |  6 +-----
 .../src/components/inserter-listbox/item.js            | 10 ++++------
 .../src/components/inserter-listbox/row.js             |  5 +----
 3 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-listbox/index.js b/packages/block-editor/src/components/inserter-listbox/index.js
index abda1136f413b6..7349ddaf62c322 100644
--- a/packages/block-editor/src/components/inserter-listbox/index.js
+++ b/packages/block-editor/src/components/inserter-listbox/index.js
@@ -1,11 +1,7 @@
-/**
- * External dependencies
- */
-import { useCompositeState } from 'reakit/Composite';
-
 /**
  * WordPress dependencies
  */
+import { unstable_useCompositeState as useCompositeState } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 
 /**
diff --git a/packages/block-editor/src/components/inserter-listbox/item.js b/packages/block-editor/src/components/inserter-listbox/item.js
index e63364c0cb4a66..c0a6edd8d66455 100644
--- a/packages/block-editor/src/components/inserter-listbox/item.js
+++ b/packages/block-editor/src/components/inserter-listbox/item.js
@@ -1,12 +1,10 @@
-/**
- * External dependencies
- */
-import { CompositeItem } from 'reakit/Composite';
-
 /**
  * WordPress dependencies
  */
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	unstable_CompositeItem as CompositeItem,
+} from '@wordpress/components';
 import { forwardRef, useContext } from '@wordpress/element';
 
 /**
diff --git a/packages/block-editor/src/components/inserter-listbox/row.js b/packages/block-editor/src/components/inserter-listbox/row.js
index 902eec96af286b..82e64e917cfe16 100644
--- a/packages/block-editor/src/components/inserter-listbox/row.js
+++ b/packages/block-editor/src/components/inserter-listbox/row.js
@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { forwardRef, useContext } from '@wordpress/element';
-/**
- * External dependencies
- */
-import { CompositeGroup } from 'reakit/Composite';
+import { unstable_CompositeGroup as CompositeGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies

From 2f7889a3760e27fc89e8903fb99dba184a08dbc1 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Sat, 16 Jan 2021 05:06:37 +0100
Subject: [PATCH 08/11] Fix import names

---
 packages/block-editor/src/components/inserter-listbox/index.js | 2 +-
 packages/block-editor/src/components/inserter-listbox/item.js  | 2 +-
 packages/block-editor/src/components/inserter-listbox/row.js   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-listbox/index.js b/packages/block-editor/src/components/inserter-listbox/index.js
index 7349ddaf62c322..5c0b34fcb8bf16 100644
--- a/packages/block-editor/src/components/inserter-listbox/index.js
+++ b/packages/block-editor/src/components/inserter-listbox/index.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { unstable_useCompositeState as useCompositeState } from '@wordpress/components';
+import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
 
 /**
diff --git a/packages/block-editor/src/components/inserter-listbox/item.js b/packages/block-editor/src/components/inserter-listbox/item.js
index c0a6edd8d66455..50adb4a7880387 100644
--- a/packages/block-editor/src/components/inserter-listbox/item.js
+++ b/packages/block-editor/src/components/inserter-listbox/item.js
@@ -3,7 +3,7 @@
  */
 import {
 	Button,
-	unstable_CompositeItem as CompositeItem,
+	__unstableCompositeItem as CompositeItem,
 } from '@wordpress/components';
 import { forwardRef, useContext } from '@wordpress/element';
 
diff --git a/packages/block-editor/src/components/inserter-listbox/row.js b/packages/block-editor/src/components/inserter-listbox/row.js
index 82e64e917cfe16..710267660199d7 100644
--- a/packages/block-editor/src/components/inserter-listbox/row.js
+++ b/packages/block-editor/src/components/inserter-listbox/row.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { forwardRef, useContext } from '@wordpress/element';
-import { unstable_CompositeGroup as CompositeGroup } from '@wordpress/components';
+import { __unstableCompositeGroup as CompositeGroup } from '@wordpress/components';
 
 /**
  * Internal dependencies

From cb7b4d7a033149033b806b25f536f492dab12707 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Thu, 21 Jan 2021 15:06:44 +0100
Subject: [PATCH 09/11] Fix keyboard navigation on search results

---
 .../src/components/inserter-listbox/index.js  |   7 +-
 .../components/inserter/block-types-tab.js    | 112 +++++++++---------
 .../src/components/inserter/search-results.js |   5 +-
 3 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-listbox/index.js b/packages/block-editor/src/components/inserter-listbox/index.js
index 5c0b34fcb8bf16..6345cb38c494ac 100644
--- a/packages/block-editor/src/components/inserter-listbox/index.js
+++ b/packages/block-editor/src/components/inserter-listbox/index.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
-import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -13,16 +12,16 @@ export { default as InserterListboxGroup } from './group';
 export { default as InserterListboxRow } from './row';
 export { default as InserterListboxItem } from './item';
 
-function InserterListbox( props, ref ) {
+function InserterListbox( { children } ) {
 	const compositeState = useCompositeState( {
 		shift: true,
 		wrap: 'horizontal',
 	} );
 	return (
 		<InserterListboxContext.Provider value={ compositeState }>
-			<div { ...props } ref={ ref } />
+			{ children }
 		</InserterListboxContext.Provider>
 	);
 }
 
-export default forwardRef( InserterListbox );
+export default InserterListbox;
diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js
index 1ba5f81c7c4b4c..1d7f45b8c79f5c 100644
--- a/packages/block-editor/src/components/inserter/block-types-tab.js
+++ b/packages/block-editor/src/components/inserter/block-types-tab.js
@@ -81,73 +81,75 @@ export function BlockTypesTab( {
 
 	return (
 		<InserterListbox>
-			{ showMostUsedBlocks && !! suggestedItems.length && (
-				<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
-					<BlockTypesList
-						items={ suggestedItems }
-						onSelect={ onSelectItem }
-						onHover={ onHover }
-						label={ _x( 'Most used', 'blocks' ) }
-					/>
-				</InserterPanel>
-			) }
-
-			{ map( categories, ( category ) => {
-				const categoryItems = itemsPerCategory[ category.slug ];
-				if ( ! categoryItems || ! categoryItems.length ) {
-					return null;
-				}
-				return (
-					<InserterPanel
-						key={ category.slug }
-						title={ category.title }
-						icon={ category.icon }
-					>
+			<div>
+				{ showMostUsedBlocks && !! suggestedItems.length && (
+					<InserterPanel title={ _x( 'Most used', 'blocks' ) }>
 						<BlockTypesList
-							items={ categoryItems }
+							items={ suggestedItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
-							label={ category.title }
+							label={ _x( 'Most used', 'blocks' ) }
 						/>
 					</InserterPanel>
-				);
-			} ) }
-
-			{ ! uncategorizedItems.length && (
-				<InserterPanel
-					className="block-editor-inserter__uncategorized-blocks-panel"
-					title={ __( 'Uncategorized' ) }
-				>
-					<BlockTypesList
-						items={ uncategorizedItems }
-						onSelect={ onSelectItem }
-						onHover={ onHover }
-						label={ __( 'Uncategorized' ) }
-					/>
-				</InserterPanel>
-			) }
-
-			{ map( collections, ( collection, namespace ) => {
-				const collectionItems = itemsPerCollection[ namespace ];
-				if ( ! collectionItems || ! collectionItems.length ) {
-					return null;
-				}
-
-				return (
+				) }
+
+				{ map( categories, ( category ) => {
+					const categoryItems = itemsPerCategory[ category.slug ];
+					if ( ! categoryItems || ! categoryItems.length ) {
+						return null;
+					}
+					return (
+						<InserterPanel
+							key={ category.slug }
+							title={ category.title }
+							icon={ category.icon }
+						>
+							<BlockTypesList
+								items={ categoryItems }
+								onSelect={ onSelectItem }
+								onHover={ onHover }
+								label={ category.title }
+							/>
+						</InserterPanel>
+					);
+				} ) }
+
+				{ ! uncategorizedItems.length && (
 					<InserterPanel
-						key={ namespace }
-						title={ collection.title }
-						icon={ collection.icon }
+						className="block-editor-inserter__uncategorized-blocks-panel"
+						title={ __( 'Uncategorized' ) }
 					>
 						<BlockTypesList
-							items={ collectionItems }
+							items={ uncategorizedItems }
 							onSelect={ onSelectItem }
 							onHover={ onHover }
-							label={ collection.title }
+							label={ __( 'Uncategorized' ) }
 						/>
 					</InserterPanel>
-				);
-			} ) }
+				) }
+
+				{ map( collections, ( collection, namespace ) => {
+					const collectionItems = itemsPerCollection[ namespace ];
+					if ( ! collectionItems || ! collectionItems.length ) {
+						return null;
+					}
+
+					return (
+						<InserterPanel
+							key={ namespace }
+							title={ collection.title }
+							icon={ collection.icon }
+						>
+							<BlockTypesList
+								items={ collectionItems }
+								onSelect={ onSelectItem }
+								onHover={ onHover }
+								label={ collection.title }
+							/>
+						</InserterPanel>
+					);
+				} ) }
+			</div>
 		</InserterListbox>
 	);
 }
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js
index 56f17a95f05f4b..bf889996993ac8 100644
--- a/packages/block-editor/src/components/inserter/search-results.js
+++ b/packages/block-editor/src/components/inserter/search-results.js
@@ -24,6 +24,7 @@ import useInsertionPoint from './hooks/use-insertion-point';
 import usePatternsState from './hooks/use-patterns-state';
 import useBlockTypesState from './hooks/use-block-types-state';
 import { searchBlockItems, searchItems } from './search-items';
+import InserterListbox from '../inserter-listbox';
 
 function InserterSearchResults( {
 	filterValue,
@@ -103,7 +104,7 @@ function InserterSearchResults( {
 		! isEmpty( filteredBlockTypes ) || ! isEmpty( filteredBlockPatterns );
 
 	return (
-		<>
+		<InserterListbox>
 			{ ! showBlockDirectory && ! hasItems && <InserterNoResults /> }
 
 			{ !! filteredBlockTypes.length && (
@@ -167,7 +168,7 @@ function InserterSearchResults( {
 					} }
 				</__experimentalInserterMenuExtension.Slot>
 			) }
-		</>
+		</InserterListbox>
 	);
 }
 

From 454a69fb7cc0e28053a68c78b927114bcbf1e09a Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Thu, 21 Jan 2021 16:29:48 +0100
Subject: [PATCH 10/11] Fix e2e test

---
 packages/e2e-tests/specs/editor/various/adding-blocks.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
index efe1a049a78207..378503b5a152df 100644
--- a/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
@@ -293,7 +293,7 @@ describe( 'adding blocks', () => {
 		// We need to wait a bit after typing otherwise we might an "early" result
 		// that is going to be "detached" when trying to click on it
 		// eslint-disable-next-line no-restricted-syntax
-		await page.waitForTimeout( 100 );
+		await page.waitForTimeout( 200 );
 		const coverBlock = await page.waitForSelector(
 			'.block-editor-block-types-list .editor-block-list-item-cover'
 		);

From c0d52d1371a00370bfbab19f1f569df397be7035 Mon Sep 17 00:00:00 2001
From: Haz <hazdiego@gmail.com>
Date: Thu, 21 Jan 2021 16:39:53 +0100
Subject: [PATCH 11/11] Announce instructions after block and group name

---
 .../src/components/inserter-listbox/group.js  | 29 +++++++++++--------
 1 file changed, 17 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/inserter-listbox/group.js b/packages/block-editor/src/components/inserter-listbox/group.js
index c91ee5c7916612..11e98cf01b202f 100644
--- a/packages/block-editor/src/components/inserter-listbox/group.js
+++ b/packages/block-editor/src/components/inserter-listbox/group.js
@@ -1,30 +1,35 @@
 /**
  * WordPress dependencies
  */
-import { forwardRef, useRef } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
 
 function InserterListboxGroup( props, ref ) {
-	const hasSpokenRef = useRef( false );
+	const [ shouldSpeak, setShouldSpeak ] = useState( false );
+
+	useEffect( () => {
+		if ( shouldSpeak ) {
+			speak(
+				__( 'Use left and right arrow keys to move through blocks' )
+			);
+		}
+	}, [ shouldSpeak ] );
+
 	return (
 		<div
 			ref={ ref }
 			role="listbox"
 			aria-orientation="horizontal"
 			onFocus={ () => {
-				if ( ! hasSpokenRef.current ) {
-					speak(
-						__(
-							'Use left and right arrow keys to move through blocks'
-						)
-					);
-					hasSpokenRef.current = true;
-				}
+				setShouldSpeak( true );
 			} }
 			onBlur={ ( event ) => {
-				if ( ! event.currentTarget.contains( event.relatedTarget ) ) {
-					hasSpokenRef.current = false;
+				const focusingOutsideGroup = ! event.currentTarget.contains(
+					event.relatedTarget
+				);
+				if ( focusingOutsideGroup ) {
+					setShouldSpeak( false );
 				}
 			} }
 			{ ...props }