Resets the Zoom on viewed/edited entity change (#66232)

Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: kevin940726 <kevin940726@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
* Resets the Zoom on syncing to new entity

* Zoom back out when exiting editor

---------

Co-authored-by: Daniel Richards <daniel.richards@automattic.com>

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

@@ -23,6 +23,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Icon, arrowUpLeft } from '@wordpress/icons';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -153,6 +154,9 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
+	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
 	const { createSuccessNotice } = useDispatch( noticesStore );
 	const history = useHistory();
 	const onActionPerformed = useCallback(
@@ -261,6 +265,11 @@ export default function EditSiteEditor( { isPostsList = false } ) {
 											tooltipPosition="middle right"
 											onClick={ () => {
 												setCanvasMode( 'view' );
+												__unstableSetEditorMode(
+													'edit'
+												);
+												resetZoomLevel();
+
 												// TODO: this is a temporary solution to navigate to the posts list if we are
 												// come here through `posts list` and are in focus mode editing a template, template part etc..
 												if (

packages/edit-site/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -5,6 +5,7 @@ import { useEffect, useMemo } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -248,9 +249,14 @@ export default function useInitEditedEntityFromURL() {
 		useResolveEditedEntityAndContext( params );
 
 	const { setEditedEntity } = useDispatch( editSiteStore );
+	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
+		useDispatch( blockEditorStore )
+	);
 
 	useEffect( () => {
 		if ( isReady ) {
+			__unstableSetEditorMode( 'edit' );
+			resetZoomLevel();
 			setEditedEntity( postType, postId, context );
 		}
 	}, [ isReady, postType, postId, context, setEditedEntity ] );