From 447293ef0b3a06e0b7cf068a5539194663ff8477 Mon Sep 17 00:00:00 2001
From: Jerry Jones <jones.jeremydavid@gmail.com>
Date: Fri, 23 Aug 2024 09:20:17 -0500
Subject: [PATCH] Focus selected block in editor canvas when clicking edit
 button on zoom out mode toolbar (#64725)

There is currently a focus loss when clicking the edit button on the zoom out mode toolbar. This sends focus to the contentRef, which lets writing flow handle sending the focus to the selected block.

Co-authored-by: Dave Smith <getdavemail@gmail.com>
---
 .../src/components/block-tools/zoom-out-popover.js         | 1 +
 .../src/components/block-tools/zoom-out-toolbar.js         | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-tools/zoom-out-popover.js b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
index 0a7ab6d31fab8..bb127351f09d8 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-popover.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-popover.js
@@ -42,6 +42,7 @@ export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
 			{ ...props }
 		>
 			<ZoomOutToolbar
+				__unstableContentRef={ __unstableContentRef }
 				clientId={ clientId }
 				rootClientId={ rootClientId }
 			/>
diff --git a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
index b35c67482b4c7..b5503c253548b 100644
--- a/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
+++ b/packages/block-editor/src/components/block-tools/zoom-out-toolbar.js
@@ -21,7 +21,11 @@ import BlockMover from '../block-mover';
 import Shuffle from '../block-toolbar/shuffle';
 import NavigableToolbar from '../navigable-toolbar';
 
-export default function ZoomOutToolbar( { clientId, rootClientId } ) {
+export default function ZoomOutToolbar( {
+	clientId,
+	rootClientId,
+	__unstableContentRef,
+} ) {
 	const selected = useSelect(
 		( select ) => {
 			const {
@@ -133,6 +137,7 @@ export default function ZoomOutToolbar( { clientId, rootClientId } ) {
 					label={ __( 'Edit' ) }
 					onClick={ () => {
 						__unstableSetEditorMode( 'edit' );
+						__unstableContentRef.current?.focus();
 					} }
 				/>
 			) }