From 70d8430d8b2bab25ca0409f1d7502787c892353d Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:02:18 +0900
Subject: [PATCH] Post Editor: Always force iframe in pattern editor (#65887)

* Post Editor: Always force iframe in pattern editor

* Aggregate conditions into useShouldIframe hook

* Revert "Aggregate conditions into useShouldIframe hook"

This reverts commit 5da84337c5d2845489f0a0e8ebc3d728898deee3.

* Aggregate conditions into useShouldIframe hook

* Add device type check to useShouldIframe check

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>
---
 .../src/components/layout/use-should-iframe.js   | 16 +++++++++++-----
 .../editor/src/components/visual-editor/index.js |  6 ++----
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/edit-post/src/components/layout/use-should-iframe.js b/packages/edit-post/src/components/layout/use-should-iframe.js
index 97e746a6a28f6e..6da344c138f64b 100644
--- a/packages/edit-post/src/components/layout/use-should-iframe.js
+++ b/packages/edit-post/src/components/layout/use-should-iframe.js
@@ -17,10 +17,12 @@ export function useShouldIframe() {
 	const {
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
-		isEditingTemplate,
+		isEditingTemplateOrPattern,
 		isZoomOutMode,
+		deviceType,
 	} = useSelect( ( select ) => {
-		const { getEditorSettings, getCurrentPostType } = select( editorStore );
+		const { getEditorSettings, getCurrentPostType, getDeviceType } =
+			select( editorStore );
 		const { isZoomOut } = unlock( select( blockEditorStore ) );
 		const { getBlockTypes } = select( blocksStore );
 		const editorSettings = getEditorSettings();
@@ -29,15 +31,19 @@ export function useShouldIframe() {
 			hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
 				return type.apiVersion >= 3;
 			} ),
-			isEditingTemplate: getCurrentPostType() === 'wp_template',
+			isEditingTemplateOrPattern: [ 'wp_template', 'wp_block' ].includes(
+				getCurrentPostType()
+			),
 			isZoomOutMode: isZoomOut(),
+			deviceType: getDeviceType(),
 		};
 	}, [] );
 
 	return (
 		hasV3BlocksOnly ||
 		( isGutenbergPlugin && isBlockBasedTheme ) ||
-		isEditingTemplate ||
-		isZoomOutMode
+		isEditingTemplateOrPattern ||
+		isZoomOutMode ||
+		[ 'Tablet', 'Mobile' ].includes( deviceType )
 	);
 }
diff --git a/packages/editor/src/components/visual-editor/index.js b/packages/editor/src/components/visual-editor/index.js
index 8ad9ce7fc974ac..0f772075f5d4ae 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -351,8 +351,6 @@ function VisualEditor( {
 		! isMobileViewport &&
 		// Dsiable resizing in zoomed-out mode.
 		! isZoomedOut;
-	const shouldIframe =
-		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
 
 	const iframeStyles = useMemo( () => {
 		return [
@@ -377,7 +375,7 @@ function VisualEditor( {
 				{
 					'has-padding': isFocusedEntity || enableResizing,
 					'is-resizable': enableResizing,
-					'is-iframed': shouldIframe,
+					'is-iframed': ! disableIframe,
 				}
 			) }
 		>
@@ -388,7 +386,7 @@ function VisualEditor( {
 				}
 			>
 				<BlockCanvas
-					shouldIframe={ shouldIframe }
+					shouldIframe={ ! disableIframe }
 					contentRef={ contentRef }
 					styles={ iframeStyles }
 					height="100%"