Iframe the editor content

lib/client-assets.php

@@ -663,3 +663,42 @@ function gutenberg_extend_block_editor_settings_with_fse_theme_flag( $settings )
 	return $settings;
 }
 add_filter( 'block_editor_settings', 'gutenberg_extend_block_editor_settings_with_fse_theme_flag' );
+
+/**
+ * Sets the editor styles to be consumed by JS.
+ */
+function gutenberg_extend_block_editor_styles_html() {
+	$handles = array(
+		'wp-block-editor',
+		'wp-block-library',
+		'wp-edit-blocks',
+	);
+
+	$block_registry = WP_Block_Type_Registry::get_instance();
+
+	foreach ( $block_registry->get_all_registered() as $block_name => $block_type ) {
+		if ( ! empty( $block_type->style ) ) {
+			$handles[] = $block_type->style;
+		}
+
+		if ( ! empty( $block_type->editor_style ) ) {
+			$handles[] = $block_type->editor_style;
+		}
+	}
+
+	$handles = array_unique( $handles );
+	$done    = wp_styles()->done;
+
+	ob_start();
+
+	wp_styles()->done = array();
+	wp_styles()->do_items( $handles );
+	wp_styles()->done = $done;
+
+	$editor_styles = wp_json_encode( array( 'html' => ob_get_clean() ) );
+
+	echo "<script>window.__editorStyles = $editor_styles</script>";
+}
+add_action( 'admin_footer-post.php', 'gutenberg_extend_block_editor_styles_html' );
+add_action( 'admin_footer-post-new.php', 'gutenberg_extend_block_editor_styles_html' );
+add_action( 'admin_footer-toplevel_page_gutenberg-edit-site', 'gutenberg_extend_block_editor_styles_html' );

packages/block-editor/package.json

@@ -60,6 +60,7 @@
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
+		"react-merge-refs": "^1.0.0",
 		"react-spring": "^8.0.19",
 		"reakit": "1.1.0",
 		"redux-multi": "^0.1.12",

packages/block-editor/src/components/block-edit/edit.js

@@ -7,13 +7,13 @@ import { pick } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { withFilters } from '@wordpress/components';
+import { withFilters, Popover } from '@wordpress/components';
 import {
 	getBlockDefaultClassName,
 	hasBlockSupport,
 	getBlockType,
 } from '@wordpress/blocks';
-import { useContext, useMemo } from '@wordpress/element';
+import { useContext, useMemo, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -30,6 +30,31 @@ import BlockContext from '../block-context';
  */
 const DEFAULT_BLOCK_CONTEXT = {};
 
+function IframeCompat( { children } ) {
+	const [ ref, setRef ] = useState();
+	const [ height, setHeight ] = useState();
+
+	return (
+		<div
+			ref={ setRef }
+			className="wp-block iframe-compat-placeholder"
+			style={ { height, position: 'relative' } }
+		>
+			{ ref && (
+				<Popover
+					__unstableSlotName="block-toolbar"
+					anchorRef={ ref }
+					__unstabelOnHeightChange={ setHeight }
+					__unstableSpanOverAnchor
+					__unstableTransparent
+				>
+					{ children }
+				</Popover>
+			) }
+		</div>
+	);
+}
+
 export const Edit = ( props ) => {
 	const { attributes = {}, name } = props;
 	const blockType = getBlockType( name );
@@ -50,23 +75,40 @@ export const Edit = ( props ) => {
 	// with which a block is displayed. If `blockType` is valid, assign
 	// them preferentially as the render value for the block.
 	const Component = blockType.edit || blockType.save;
+	let component;
 
 	if (
 		blockType.apiVersion > 1 ||
 		hasBlockSupport( blockType, 'lightBlockWrapper', false )
 	) {
-		return <Component { ...props } context={ context } />;
+		component = <Component { ...props } context={ context } />;
+	} else {
+		// Generate a class name for the block's editable form
+		const generatedClassName = hasBlockSupport(
+			blockType,
+			'className',
+			true
+		)
+			? getBlockDefaultClassName( name )
+			: null;
+		const className = classnames(
+			generatedClassName,
+			attributes.className
+		);
+		component = (
+			<Component
+				{ ...props }
+				context={ context }
+				className={ className }
+			/>
+		);
 	}
 
-	// Generate a class name for the block's editable form
-	const generatedClassName = hasBlockSupport( blockType, 'className', true )
-		? getBlockDefaultClassName( name )
-		: null;
-	const className = classnames( generatedClassName, attributes.className );
+	if ( ! hasBlockSupport( blockType, 'iframe', true ) ) {
+		component = <IframeCompat>{ component }</IframeCompat>;
+	}
 
-	return (
-		<Component { ...props } context={ context } className={ className } />
-	);
+	return component;
 };
 
 export default withFilters( 'editor.BlockEdit' )( Edit );

packages/block-editor/src/components/block-list/block-popover.js

@@ -167,7 +167,13 @@ function BlockPopover( {
 		: 'top right left';
 	const stickyBoundaryElement = showEmptyBlockSideInserter
 		? undefined
-		: getScrollContainer( node ) || ownerDocument.body;
+		: // The sticky boundary element should be the boundary at which the
+		  // the block toolbar becomes sticky when the block scolls out of view.
+		  // In case of an iframe, this should be the iframe boundary, otherwise
+		  // the scroll container.
+		  ownerDocument.defaultView.frameElement ||
+		  getScrollContainer( node ) ||
+		  ownerDocument.body;
 
 	return (
 		<Popover

packages/block-editor/src/components/block-list/block-selection-button.js

@@ -223,6 +223,12 @@ function BlockSelectionButton( { clientId, rootClientId, blockElement } ) {
 
 				if ( navigateDown ) {
 					nextTabbable = focus.tabbable.findNext( blockElement );
+
+					if ( ! nextTabbable ) {
+						nextTabbable =
+							blockElement.ownerDocument.defaultView.frameElement;
+						nextTabbable = focus.tabbable.findNext( nextTabbable );
+					}
 				} else {
 					nextTabbable = focus.tabbable.findPrevious( blockElement );
 				}

packages/block-editor/src/components/block-list/style.scss

@@ -364,6 +364,12 @@
 	&[data-align="wide"] {
 		clear: both;
 	}
+
+	&[data-align="full"],
+	&.alignfull {
+		max-width: 100vw;
+		width: 100vw;
+	}
 }
 
 /**