Post Editor: Always force iframe in pattern editor (WordPress#65887)

* Post Editor: Always force iframe in pattern editor * Aggregate conditions into useShouldIframe hook * Revert "Aggregate conditions into useShouldIframe hook" This reverts commit 5da8433. * Aggregate conditions into useShouldIframe hook * Add device type check to useShouldIframe check Co-authored-by: t-hamano <[email protected]> Co-authored-by: stokesman <[email protected]>
karthick-murugan · Nov 13, 2024 · 70d8430 · 70d8430
1 parent 8028ca0
commit 70d8430
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 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
@@ -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
@@ -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%"