From 2dde02d4a42a68264534d4e3779ed7e5ecffe12c Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 6 Aug 2024 00:11:57 +0900
Subject: [PATCH] Zoom out: Disable 'Desktop (50%)' option in the non-iframed
 editor

---
 .../editor/src/components/editor-interface/index.js  |  1 +
 packages/editor/src/components/header/index.js       |  2 ++
 .../editor/src/components/preview-dropdown/index.js  | 12 +++++++++---
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/editor/src/components/editor-interface/index.js b/packages/editor/src/components/editor-interface/index.js
index 5b0aea5400d7ba..96c3e45dd156b2 100644
--- a/packages/editor/src/components/editor-interface/index.js
+++ b/packages/editor/src/components/editor-interface/index.js
@@ -143,6 +143,7 @@ export default function EditorInterface( {
 						forceDisableBlockTools={ forceDisableBlockTools }
 						title={ title }
 						icon={ icon }
+						disableIframe={ disableIframe }
 					/>
 				)
 			}
diff --git a/packages/editor/src/components/header/index.js b/packages/editor/src/components/header/index.js
index b8eda30c721860..1b12db1c101e5f 100644
--- a/packages/editor/src/components/header/index.js
+++ b/packages/editor/src/components/header/index.js
@@ -47,6 +47,7 @@ function Header( {
 	setEntitiesSavedStatesCallback,
 	title,
 	icon,
+	disableIframe = false,
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -136,6 +137,7 @@ function Header( {
 				<PreviewDropdown
 					forceIsAutosaveable={ forceIsDirty }
 					disabled={ isNestedEntity }
+					disableIframe={ disableIframe }
 				/>
 				<PostPreviewButton
 					className="editor-header__post-preview-button"
diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js
index 6554f7c0228a77..65ae3b317e7081 100644
--- a/packages/editor/src/components/preview-dropdown/index.js
+++ b/packages/editor/src/components/preview-dropdown/index.js
@@ -29,7 +29,11 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 import { store as editorStore } from '../../store';
 import PostPreviewButton from '../post-preview-button';
 
-export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
+export default function PreviewDropdown( {
+	forceIsAutosaveable,
+	disabled,
+	disableIframe = false,
+} ) {
 	const {
 		deviceType,
 		editorMode,
@@ -111,7 +115,9 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			label: __( 'Desktop' ),
 			icon: desktop,
 		},
-		{
+		// The "Desktop (50%)" option only works in the iframe editor,
+		// so disable it in the non-iframe editor.
+		! disableIframe && {
 			value: 'ZoomOut',
 			label: __( 'Desktop (50%)' ),
 			icon: desktop,
@@ -126,7 +132,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			label: __( 'Mobile' ),
 			icon: mobile,
 		},
-	];
+	].filter( Boolean );
 
 	const previewValue = editorMode === 'zoom-out' ? 'ZoomOut' : deviceType;