From f8dffcf2e82365078b2251ae8383404d632b6abf Mon Sep 17 00:00:00 2001
From: Andrei Draganescu <me@andreidraganescu.info>
Date: Thu, 19 Sep 2024 13:35:35 +0300
Subject: [PATCH] Handle zoom out when changing device preview (#65444)

---
 packages/editor/src/components/preview-dropdown/index.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index ecc5bc610a302..38565f4b04abe 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -26,6 +26,7 @@ import { ActionItem } from '@wordpress/interface';
  * Internal dependencies
  */
 import { store as editorStore } from '../../store';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import PostPreviewButton from '../post-preview-button';
 
 export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
@@ -44,6 +45,12 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			};
 		}, [] );
 	const { setDeviceType } = useDispatch( editorStore );
+	const { __unstableSetEditorMode } = useDispatch( blockEditorStore );
+
+	const handleDevicePreviewChange = ( newDeviceType ) => {
+		setDeviceType( newDeviceType );
+		__unstableSetEditorMode( 'edit' );
+	};
 
 	const isMobile = useViewportMatch( 'medium', '<' );
 	if ( isMobile ) {
@@ -113,7 +120,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 						<MenuItemsChoice
 							choices={ choices }
 							value={ deviceType }
-							onSelect={ setDeviceType }
+							onSelect={ handleDevicePreviewChange }
 						/>
 					</MenuGroup>
 					{ isTemplate && (