From 8b8f2fb4d501687f0d36ca9c6f47d90cc98b60bf Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 29 Jan 2024 13:12:31 -0500
Subject: [PATCH] try stacking with device previews

---
 .../src/components/preview-dropdown/index.js  | 34 +++++++------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 529960b47477cc..897362dd9cf5f6 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -10,14 +10,7 @@ import {
 	Icon,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import {
-	check,
-	desktop,
-	mobile,
-	tablet,
-	external,
-	chevronUpDown,
-} from '@wordpress/icons';
+import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -86,11 +79,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			popoverProps={ popoverProps }
 			toggleProps={ toggleProps }
 			menuProps={ menuProps }
-			icon={
-				isZoomedOutView
-					? chevronUpDown
-					: deviceIcons[ deviceType.toLowerCase() ]
-			}
+			icon={ deviceIcons[ deviceType.toLowerCase() ] }
 			label={ __( 'View' ) }
 			disableOpenOnArrowDown={ disabled }
 		>
@@ -102,11 +91,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 								setDeviceType( 'Desktop' );
 								__unstableSetEditorMode( 'edit' );
 							} }
-							icon={
-								deviceType === 'Desktop' &&
-								! isZoomedOutView &&
-								check
-							}
+							icon={ deviceType === 'Desktop' && check }
 						>
 							{ __( 'Desktop' ) }
 						</MenuItem>
@@ -133,10 +118,15 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 						<MenuGroup>
 							<MenuItem
 								onClick={ () => {
-									setDeviceType( 'Desktop' );
-									__unstableSetEditorMode(
-										isZoomedOutView ? 'edit' : 'zoom-out'
-									);
+									__unstableSetEditorMode( 'edit' );
+								} }
+								icon={ ! isZoomedOutView && check }
+							>
+								{ __( 'Zoom to 100%' ) }
+							</MenuItem>
+							<MenuItem
+								onClick={ () => {
+									__unstableSetEditorMode( 'zoom-out' );
 								} }
 								icon={ isZoomedOutView && check }
 							>