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 1528538c7ef2bd..97393fa46acb61 100644
--- a/packages/editor/src/components/visual-editor/index.js
+++ b/packages/editor/src/components/visual-editor/index.js
@@ -360,8 +360,6 @@ function VisualEditor( {
 		! isMobileViewport &&
 		// Dsiable resizing in zoomed-out mode.
 		! isZoomedOut;
-	const shouldIframe =
-		! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType );
 
 	const iframeStyles = useMemo( () => {
 		return [
@@ -386,7 +384,7 @@ function VisualEditor( {
 				{
 					'has-padding': isFocusedEntity || enableResizing,
 					'is-resizable': enableResizing,
-					'is-iframed': shouldIframe,
+					'is-iframed': ! disableIframe,
 				}
 			) }
 		>
@@ -397,7 +395,7 @@ function VisualEditor( {
 				}
 			>
 				<BlockCanvas
-					shouldIframe={ shouldIframe }
+					shouldIframe={ ! disableIframe }
 					contentRef={ contentRef }
 					styles={ iframeStyles }
 					height="100%"