Bundle the block selection clearer hook into the BlockCanvas component (

#54209)

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

@@ -12,6 +12,7 @@ import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
 import { useClipboardHandler } from '../copy-handler';
+import { useBlockSelectionClearer } from '../block-selection-clearer';
 
 export function ExperimentalBlockCanvas( {
 	shouldIframe = true,
@@ -23,7 +24,12 @@ export function ExperimentalBlockCanvas( {
 } ) {
 	const resetTypingRef = useMouseMoveTypingReset();
 	const copyHandler = useClipboardHandler();
-	const contentRef = useMergeRefs( [ copyHandler, contentRefProp ] );
+	const clearerRef = useBlockSelectionClearer();
+	const contentRef = useMergeRefs( [
+		copyHandler,
+		contentRefProp,
+		clearerRef,
+	] );
 
 	if ( ! shouldIframe ) {
 		return (

packages/customize-widgets/src/components/sidebar-block-editor/index.js

@@ -7,7 +7,6 @@ import { useMemo, createPortal } from '@wordpress/element';
 import {
 	BlockList,
 	BlockTools,
-	BlockSelectionClearer,
 	BlockInspector,
 	privateApis as blockEditorPrivateApis,
 	__unstableBlockSettingsMenuFirstItem,
@@ -114,15 +113,13 @@ export default function SidebarBlockEditor( {
 				/>
 
 				<BlockTools>
-					<BlockSelectionClearer>
-						<BlockCanvas
-							shouldIframe={ false }
-							styles={ settings.defaultEditorStyles }
-							height="100%"
-						>
-							<BlockList renderAppender={ BlockAppender } />
-						</BlockCanvas>
-					</BlockSelectionClearer>
+					<BlockCanvas
+						shouldIframe={ false }
+						styles={ settings.defaultEditorStyles }
+						height="100%"
+					>
+						<BlockList renderAppender={ BlockAppender } />
+					</BlockCanvas>
 				</BlockTools>
 
 				{ createPortal(

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

@@ -11,7 +11,6 @@ import {
 	BlockList,
 	BlockTools,
 	store as blockEditorStore,
-	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 	__unstableUseTypewriter as useTypewriter,
 	__unstableUseTypingObserver as useTypingObserver,
 	__experimentalUseResizeCanvas as useResizeCanvas,
@@ -182,13 +181,7 @@ export default function VisualEditor( { styles } ) {
 	}
 
 	const ref = useRef();
-	const contentRef = useMergeRefs( [
-		ref,
-		useTypewriter(),
-		useBlockSelectionClearer(),
-	] );
-
-	const blockSelectionClearerRef = useBlockSelectionClearer();
+	const contentRef = useMergeRefs( [ ref, useTypewriter() ] );
 
 	// fallbackLayout is used if there is no Post Content,
 	// and for Post Title.
@@ -322,7 +315,6 @@ export default function VisualEditor( { styles } ) {
 				animate={ {
 					padding: isTemplateMode ? '48px 48px 0' : 0,
 				} }
-				ref={ blockSelectionClearerRef }
 			>
 				<motion.div
 					animate={ animatedStyles }

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

@@ -4,7 +4,6 @@
 import {
 	BlockList,
 	BlockTools,
-	BlockSelectionClearer,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -43,15 +42,13 @@ export default function WidgetAreasBlockEditorContent( {
 			<Notices />
 			<BlockTools>
 				<KeyboardShortcuts />
-				<BlockSelectionClearer>
-					<BlockCanvas
-						shouldIframe={ false }
-						styles={ styles }
-						height="100%"
-					>
-						<BlockList className="edit-widgets-main-block-list" />
-					</BlockCanvas>
-				</BlockSelectionClearer>
+				<BlockCanvas
+					shouldIframe={ false }
+					styles={ styles }
+					height="100%"
+				>
+					<BlockList className="edit-widgets-main-block-list" />
+				</BlockCanvas>
 			</BlockTools>
 		</div>
 	);