prepare 12/6

packages/block-editor/src/components/block-list/block-popover.js

@@ -27,7 +27,7 @@ import { getScrollContainer } from '@wordpress/dom';
 import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import Inserter from '../inserter';
-import { BlockNodes } from './root-container';
+import { BlockNodes } from './';
 import { getBlockDOMNode } from '../../utils/dom';
 
 function selector( select ) {

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

@@ -7,45 +7,47 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
-import { useRef, forwardRef } from '@wordpress/element';
+import { useRef, createContext, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockListBlock from './block';
 import BlockListAppender from '../block-list-appender';
-import RootContainer from './root-container';
 import useBlockDropZone from '../use-block-drop-zone';
+import useInsertionPoint from './insertion-point';
+import BlockPopover from './block-popover';
 
 /**
  * If the block count exceeds the threshold, we disable the reordering animation
  * to avoid laginess.
  */
 const BLOCK_ANIMATION_THRESHOLD = 200;
 
-function BlockList(
-	{ className, placeholder, rootClientId, renderAppender },
-	ref
-) {
-	const Container = rootClientId ? 'div' : RootContainer;
-	const fallbackRef = useRef();
-	const wrapperRef = ref || fallbackRef;
+export const BlockNodes = createContext();
+export const SetBlockNodes = createContext();
+
+export default function BlockList( { className } ) {
+	const ref = useRef();
+	const [ blockNodes, setBlockNodes ] = useState( {} );
+	const insertionPoint = useInsertionPoint( ref );
 
 	return (
-		<Container
-			ref={ wrapperRef }
-			className={ classnames(
-				'block-editor-block-list__layout',
-				className
-			) }
-		>
-			<BlockListItems
-				placeholder={ placeholder }
-				rootClientId={ rootClientId }
-				renderAppender={ renderAppender }
-				wrapperRef={ wrapperRef }
-			/>
-		</Container>
+		<BlockNodes.Provider value={ blockNodes }>
+			{ insertionPoint }
+			<BlockPopover />
+			<div
+				ref={ ref }
+				className={ classnames(
+					'block-editor-block-list__layout is-root-container',
+					className
+				) }
+			>
+				<SetBlockNodes.Provider value={ setBlockNodes }>
+					<BlockListItems wrapperRef={ ref } />
+				</SetBlockNodes.Provider>
+			</div>
+		</BlockNodes.Provider>
 	);
 }
 
@@ -161,5 +163,3 @@ export function BlockListItems( props ) {
 		</AsyncModeProvider>
 	);
 }
-
-export default forwardRef( BlockList );

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -15,7 +15,7 @@ import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
  * Internal dependencies
  */
 import useMovingAnimation from '../../use-moving-animation';
-import { SetBlockNodes } from '../root-container';
+import { SetBlockNodes } from '../';
 import { BlockListBlockContext } from '../block';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';

packages/block-editor/src/components/block-selection-clearer/index.js

@@ -19,20 +19,25 @@ export function useBlockSelectionClearer( ref ) {
 			return;
 		}
 
-		function onFocus() {
+		function onMouseDown( event ) {
+			// Only handle clicks on the canvas, not the content.
+			if ( event.target.closest( '.wp-block' ) ) {
+				return;
+			}
+
 			clearSelectedBlock();
 		}
 
-		ref.current.addEventListener( 'focus', onFocus );
+		ref.current.addEventListener( 'mousedown', onMouseDown );
 
 		return () => {
-			ref.current.removeEventListener( 'focus', onFocus );
+			ref.current.removeEventListener( 'mousedown', onMouseDown );
 		};
 	}, [ hasSelection, clearSelectedBlock ] );
 }
 
 export default function BlockSelectionClearer( props ) {
 	const ref = useRef();
 	useBlockSelectionClearer( ref );
-	return <div tabIndex={ -1 } ref={ ref } { ...props } />;
+	return <div ref={ ref } { ...props } />;
 }

packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -108,10 +108,10 @@ describe( 'Order of block keyboard navigation', () => {
 			await page.keyboard.type( paragraphBlock );
 		}
 
-		// Clear the selected block and put focus in front of the block list.
-		await page.evaluate( () => {
-			document.querySelector( '.editor-styles-wrapper' ).focus();
-		} );
+		// Clear the selected block.
+		const paragraph = await page.$( '[data-type="core/paragraph"]' );
+		const box = await paragraph.boundingBox();
+		await page.mouse.click( box.x - 1, box.y );
 
 		await page.keyboard.press( 'Tab' );
 		await expect(
@@ -143,9 +143,13 @@ describe( 'Order of block keyboard navigation', () => {
 			await page.keyboard.type( paragraphBlock );
 		}
 
-		// Clear the selected block and put focus behind the block list.
+		// Clear the selected block.
+		const paragraph = await page.$( '[data-type="core/paragraph"]' );
+		const box = await paragraph.boundingBox();
+		await page.mouse.click( box.x - 1, box.y );
+
+		// Put focus behind the block list.
 		await page.evaluate( () => {
-			document.querySelector( '.editor-styles-wrapper' ).focus();
 			document
 				.querySelector( '.interface-interface-skeleton__sidebar' )
 				.focus();

packages/edit-post/src/components/visual-editor/index.js

@@ -64,7 +64,6 @@ export default function VisualEditor() {
 			<div
 				ref={ ref }
 				className="editor-styles-wrapper"
-				tabIndex="-1"
 				style={ resizedCanvasStyles || desktopCanvasStyles }
 			>
 				<WritingFlow>

packages/edit-site/src/components/block-editor/index.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useCallback, useRef } from '@wordpress/element';
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	BlockEditorProvider,
@@ -12,6 +12,7 @@ import {
 	WritingFlow,
 	ObserveTyping,
 	BlockList,
+	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 } from '@wordpress/block-editor';
 
 /**
@@ -39,8 +40,11 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 		'postType',
 		templateType
 	);
-
 	const { setPage } = useDispatch( 'core/edit-site' );
+	const ref = useRef();
+
+	useBlockSelectionClearer( ref );
+
 	return (
 		<BlockEditorProvider
 			settings={ settings }
@@ -66,7 +70,10 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<div className="editor-styles-wrapper edit-site-block-editor__editor-styles-wrapper">
+			<div
+				ref={ ref }
+				className="editor-styles-wrapper edit-site-block-editor__editor-styles-wrapper"
+			>
 				<WritingFlow>
 					<ObserveTyping>
 						<BlockList className="edit-site-block-editor__block-list" />

packages/edit-site/src/components/editor/index.js

@@ -19,7 +19,6 @@ import {
 import { EntityProvider } from '@wordpress/core-data';
 import {
 	BlockContextProvider,
-	BlockSelectionClearer,
 	BlockBreadcrumb,
 	__unstableUseEditorStyles as useEditorStyles,
 	__experimentalUseResizeCanvas as useResizeCanvas,
@@ -288,7 +287,7 @@ function Editor() {
 														/>
 													}
 													content={
-														<BlockSelectionClearer
+														<div
 															className="edit-site-visual-editor"
 															style={
 																inlineStyles
@@ -304,7 +303,7 @@ function Editor() {
 																/>
 															) }
 															<KeyboardShortcuts />
-														</BlockSelectionClearer>
+														</div>
 													}
 													actions={
 														<>