Fix tabbing in widgets not triggering auto-scrolling (#26139)

packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js

@@ -5,10 +5,10 @@ import { Popover } from '@wordpress/components';
 import {
 	BlockList,
 	BlockEditorKeyboardShortcuts,
+	BlockSelectionClearer,
 	WritingFlow,
 	ObserveTyping,
 } from '@wordpress/block-editor';
-import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -17,31 +17,27 @@ import Notices from '../notices';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 
 export default function WidgetAreasBlockEditorContent() {
-	const { clearSelectedBlock } = useDispatch( 'core/block-editor' );
-
 	return (
-		<>
-			<KeyboardShortcuts />
-			<BlockEditorKeyboardShortcuts />
-			<Notices />
-			<Popover.Slot name="block-toolbar" />
-			<div tabIndex="-1" onFocus={ clearSelectedBlock }>
-				<div
-					className="editor-styles-wrapper"
-					onFocus={ ( event ) => {
-						// Stop propagation of the focus event to avoid the parent
-						// widget layout component catching the event and removing the selected area.
-						event.stopPropagation();
-						event.preventDefault();
-					} }
-				>
-					<WritingFlow>
-						<ObserveTyping>
-							<BlockList className="edit-widgets-main-block-list" />
-						</ObserveTyping>
-					</WritingFlow>
-				</div>
+		<BlockSelectionClearer>
+			<div
+				className="edit-widgets-block-editor editor-styles-wrapper"
+				onFocus={ ( event ) => {
+					// Stop propagation of the focus event to avoid the parent
+					// widget layout component catching the event and removing the selected area.
+					event.stopPropagation();
+					event.preventDefault();
+				} }
+			>
+				<KeyboardShortcuts />
+				<BlockEditorKeyboardShortcuts />
+				<Notices />
+				<Popover.Slot name="block-toolbar" />
+				<WritingFlow>
+					<ObserveTyping>
+						<BlockList className="edit-widgets-main-block-list" />
+					</ObserveTyping>
+				</WritingFlow>
 			</div>
-		</>
+		</BlockSelectionClearer>
 	);
 }

packages/edit-widgets/src/components/widget-areas-block-editor-content/style.scss

@@ -0,0 +1,3 @@
+.edit-widgets-block-editor {
+	position: relative;
+}

packages/edit-widgets/src/style.scss

@@ -6,6 +6,7 @@
 @import "./components/sidebar/style.scss";
 @import "./components/notices/style.scss";
 @import "./components/layout/style.scss";
+@import "./components/widget-areas-block-editor-content/style.scss";
 
 // In order to use mix-blend-mode, this element needs to have an explicitly set background-color
 // We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations