Focus selected block in editor canvas when clicking edit button on zo…

…om 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>

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 }
 			/>

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();
 					} }
 				/>
 			) }