Post editor: iframe: check inserted rather than registered block versions (#75187)

Co-authored-by: ellatrix <ellatrix@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: mcsf <mcsf@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: stokesman <presstoke@git.wordpress.org>

Author: 5 people

packages/block-editor/src/components/block-canvas/index.js

@@ -70,6 +70,7 @@ export function ExperimentalBlockCanvas( {
 					style={ {
 						height: '100%',
 						width: '100%',
+						overflow: 'auto',
 					} }
 				>
 					{ children }

packages/edit-post/src/components/layout/index.js

@@ -134,7 +134,7 @@ function useEditorStyles( settings ) {
 
 /**
  * @param {Object}  props
- * @param {boolean} props.isLegacy True when the editor canvas is not in an iframe.
+ * @param {boolean} props.isLegacy True for device previews where split view is disabled.
  */
 function MetaBoxesMain( { isLegacy } ) {
 	const [ isOpen, openHeight, hasAnyVisible ] = useSelect( ( select ) => {
@@ -602,11 +602,7 @@ function Layout( {
 						extraContent={
 							! isDistractionFree &&
 							showMetaBoxes && (
-								<MetaBoxesMain
-									isLegacy={
-										! shouldIframe || isDevicePreview
-									}
-								/>
+								<MetaBoxesMain isLegacy={ isDevicePreview } />
 							)
 						}
 					>

packages/edit-post/src/components/layout/style.scss

@@ -110,14 +110,13 @@
 	clear: both;
 }
 
-// Only when the split view is active the visual editor should allow shrinking and
-// its main size should be zero.
+// Only when the split view is active the visual editor should allow shrinking,
+// its main size should be zero, and overflow should be hidden so that the inner
+// container provides the scrollable viewport.
 .has-metaboxes .interface-interface-skeleton__content:has(.edit-post-meta-boxes-main) .editor-visual-editor {
 	flex-shrink: 1;
 	flex-basis: 0%;
-}
-
-.has-metaboxes .editor-visual-editor.is-iframed {
+	overflow: hidden;
 	isolation: isolate;
 }
 

packages/edit-post/src/components/layout/use-should-iframe.js

@@ -17,6 +17,10 @@ export function useShouldIframe() {
 	return useSelect( ( select ) => {
 		const { getEditorSettings, getCurrentPostType, getDeviceType } =
 			select( editorStore );
+		const { getClientIdsWithDescendants, getBlockName } =
+			select( blockEditorStore );
+		const { getBlockType } = select( blocksStore );
+
 		return (
 			// If the theme is block based and the Gutenberg plugin is active,
 			// we ALWAYS use the iframe for consistency across the post and site
@@ -29,11 +33,12 @@ export function useShouldIframe() {
 			getDeviceType() !== 'Desktop' ||
 			[ 'wp_template', 'wp_block' ].includes( getCurrentPostType() ) ||
 			unlock( select( blockEditorStore ) ).isZoomOut() ||
-			// Finally, still iframe the editor if all blocks are v3 (which means
-			// they are marked as iframe-compatible).
-			select( blocksStore )
-				.getBlockTypes()
-				.every( ( type ) => type.apiVersion >= 3 )
+			// Finally, still iframe the editor if all present blocks are v3
+			// (which means they are marked as iframe-compatible).
+			[ ...new Set( getClientIdsWithDescendants().map( getBlockName ) ) ]
+				.map( getBlockType )
+				.filter( Boolean )
+				.every( ( blockType ) => blockType.apiVersion >= 3 )
 		);
 	}, [] );
 }

test/e2e/specs/editor/various/should-iframe.spec.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Should iframe', () => {
+	test.beforeEach( async ( { admin } ) => {
+		await admin.createNewPost();
+	} );
+
+	test( 'should switch to non-iframe when a v2 block is added', async ( {
+		page,
+		editor,
+	} ) => {
+		const iframe = page.locator( 'iframe[name="editor-canvas"]' );
+
+		// Initially, the editor should be iframed (all core blocks are v3).
+		await expect( iframe ).toBeVisible();
+
+		await page.evaluate( () => {
+			window.wp.blocks.registerBlockType( 'test/v1', {
+				apiVersion: 1,
+				title: 'Test V1 Block',
+				edit: () =>
+					window.wp.element.createElement( 'p', null, 'v1 block' ),
+				save: () => null,
+			} );
+		} );
+
+		// The editor should still be iframed.
+		await expect( iframe ).toBeVisible();
+
+		// Insert the v1 block.
+		await editor.insertBlock( { name: 'test/v1' } );
+
+		// The editor should no longer be iframed.
+		await expect( iframe ).toBeHidden();
+	} );
+} );