Block editor: render block edit in popover if it's not React

docs/reference-guides/data/data-core-block-editor.md

@@ -1087,6 +1087,10 @@ _Returns_
 
 -   `boolean`: Whether block is first in multi-selection.
 
+### isIframeIncompatible
+
+Undocumented declaration.
+
 ### isLastBlockChangePersistent
 
 Returns true if the most recent block change is be considered persistent, or

packages/block-editor/package.json

@@ -56,6 +56,7 @@
 		"@wordpress/preferences": "file:../preferences",
 		"@wordpress/private-apis": "file:../private-apis",
 		"@wordpress/rich-text": "file:../rich-text",
+		"@wordpress/server-side-render": "file:../server-side-render",
 		"@wordpress/shortcode": "file:../shortcode",
 		"@wordpress/style-engine": "file:../style-engine",
 		"@wordpress/token-list": "file:../token-list",

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

@@ -12,12 +12,23 @@ import {
 	hasBlockSupport,
 	getBlockType,
 } from '@wordpress/blocks';
-import { useContext, useMemo } from '@wordpress/element';
+import { useContext, useMemo, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import ServerSideRender from '@wordpress/server-side-render';
+import { useResizeObserver } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BlockContext from '../block-context';
+import { useSelect } from '@wordpress/data';
+import { store } from '../../store';
+import {
+	useBlockProps,
+	DisableBlockProps,
+} from '../block-list/use-block-props';
+import Warning from '../warning';
+import BlockPopover from '../block-popover';
 
 /**
  * Default value used for blocks which do not define their own context needs,
@@ -29,8 +40,65 @@ import BlockContext from '../block-context';
  */
 const DEFAULT_BLOCK_CONTEXT = {};
 
+function LoadingResponsePlaceholder() {
+	return <Warning>{ __( 'Loading preview…' ) }</Warning>;
+}
+
+function IframeCompat( {
+	clientId,
+	blockType,
+	attributes,
+	isSelected,
+	children,
+} ) {
+	const isIframeIncompatible = useSelect(
+		( select ) => select( store ).isIframeIncompatible( clientId ),
+		[ clientId ]
+	);
+	const [ resizeListener, sizes ] = useResizeObserver();
+	const ref = useRef();
+	const blockProps = useBlockProps( {
+		ref,
+		style: {
+			height: isSelected ? sizes?.height : undefined,
+		},
+	} );
+
+	if ( ! isIframeIncompatible ) {
+		return children;
+	}
+
+	return (
+		<div { ...blockProps }>
+			{ isSelected && (
+				<BlockPopover
+					clientId={ clientId }
+					__unstablePopoverSlot="Popover"
+					__unstableContentRef={ ref }
+					placement="overlay"
+					shift={ false }
+				>
+					<DisableBlockProps.Provider value={ true }>
+						<div style={ { position: 'relative' } }>
+							{ resizeListener }
+							{ children }
+						</div>
+					</DisableBlockProps.Provider>
+				</BlockPopover>
+			) }
+			{ ! isSelected && (
+				<ServerSideRender
+					block={ blockType.name }
+					attributes={ attributes }
+					LoadingResponsePlaceholder={ LoadingResponsePlaceholder }
+				/>
+			) }
+		</div>
+	);
+}
+
 export const Edit = ( props ) => {
-	const { attributes = {}, name } = props;
+	const { attributes = {}, name, clientId, isSelected } = props;
 	const blockType = getBlockType( name );
 	const blockContext = useContext( BlockContext );
 
@@ -55,7 +123,16 @@ export const Edit = ( props ) => {
 	const Component = blockType.edit || blockType.save;
 
 	if ( blockType.apiVersion > 1 ) {
-		return <Component { ...props } context={ context } />;
+		return (
+			<IframeCompat
+				clientId={ clientId }
+				blockType={ blockType }
+				attributes={ attributes }
+				isSelected={ isSelected }
+			>
+				<Component { ...props } context={ context } />
+			</IframeCompat>
+		);
 	}
 
 	// Generate a class name for the block's editable form.
@@ -69,7 +146,18 @@ export const Edit = ( props ) => {
 	);
 
 	return (
-		<Component { ...props } context={ context } className={ className } />
+		<IframeCompat
+			clientId={ clientId }
+			blockType={ blockType }
+			attributes={ attributes }
+			isSelected={ isSelected }
+		>
+			<Component
+				{ ...props }
+				context={ context }
+				className={ className }
+			/>
+		</IframeCompat>
 	);
 };
 

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useContext } from '@wordpress/element';
+import { useContext, createContext } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	__unstableGetBlockProps as getBlockProps,
@@ -34,6 +34,7 @@ import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
+import { useNonReactObserver } from './use-non-react-observer';
 import { store as blockEditorStore } from '../../../store';
 import useBlockOverlayActive from '../../block-content-overlay';
 
@@ -43,6 +44,8 @@ import useBlockOverlayActive from '../../block-content-overlay';
  */
 const BLOCK_ANIMATION_THRESHOLD = 200;
 
+export const DisableBlockProps = createContext();
+
 /**
  * This hook is used to lightly mark an element as a block element. The element
  * should be the outermost element of a block. Call this hook and pass the
@@ -66,6 +69,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		wrapperProps = {},
 		isAligned,
 	} = useContext( BlockListBlockContext );
+	const disableBlockProps = useContext( DisableBlockProps );
 	const {
 		index,
 		mode,
@@ -117,9 +121,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	);
 
 	const hasOverlay = useBlockOverlayActive( clientId );
-
-	// translators: %s: Type of block (i.e. Text, Image etc)
-	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
 	const mergedRefs = useMergeRefs( [
 		props.ref,
@@ -137,6 +138,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			triggerAnimationOnChange: index,
 		} ),
 		useDisabled( { isDisabled: ! hasOverlay } ),
+		useNonReactObserver( clientId ),
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -147,6 +149,20 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		);
 	}
 
+	const additionalClassNames = [
+		useBlockClassNames( clientId ),
+		useBlockDefaultClassName( clientId ),
+		useBlockCustomClassName( clientId ),
+		useBlockMovingModeClassNames( clientId ),
+	];
+
+	if ( disableBlockProps ) {
+		return {};
+	}
+
+	// translators: %s: Type of block (i.e. Text, Image etc)
+	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
+
 	return {
 		tabIndex: 0,
 		...wrapperProps,
@@ -167,10 +183,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			className,
 			props.className,
 			wrapperProps.className,
-			useBlockClassNames( clientId ),
-			useBlockDefaultClassName( clientId ),
-			useBlockCustomClassName( clientId ),
-			useBlockMovingModeClassNames( clientId )
+			...additionalClassNames
 		),
 		style: { ...wrapperProps.style, ...props.style },
 	};

packages/block-editor/src/components/block-list/use-block-props/use-non-react-observer.js

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../../store';
+
+export function useNonReactObserver( clientId ) {
+	const { __unstableIframeIncompatible } = useDispatch( blockEditorStore );
+	return useRefEffect( ( node ) => {
+		const observer = new node.ownerDocument.defaultView.MutationObserver(
+			( mutationList ) => {
+				for ( const mutation of mutationList ) {
+					for ( const addedNode of mutation.addedNodes ) {
+						if ( ! addedNode.isConnected ) continue;
+
+						if (
+							addedNode.isContentEditable ||
+							addedNode.parentElement.isContentEditable
+						)
+							continue;
+
+						if (
+							Object.keys( addedNode ).some( ( i ) => {
+								// Yes, React could change this at any point,
+								// but we'll know when we update the version.
+								return i.startsWith( '__react' );
+							} )
+						)
+							continue;
+
+						__unstableIframeIncompatible( clientId );
+					}
+				}
+			}
+		);
+		observer.observe( node, { childList: true, subtree: true } );
+		return () => {
+			observer.disconnect( node );
+		};
+	}, [] );
+}

packages/block-editor/src/components/block-popover/use-popover-scroll.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useRefEffect } from '@wordpress/compose';
+import { getScrollContainer } from '@wordpress/dom';
 
 /**
  * Allow scrolling "through" popovers over the canvas. This is only called for
@@ -19,14 +20,28 @@ function usePopoverScroll( scrollableRef ) {
 
 			function onWheel( event ) {
 				const { deltaX, deltaY } = event;
+				const scrollContainer = getScrollContainer(
+					scrollableRef.current
+				);
+				const { ownerDocument } = scrollContainer;
+				const { defaultView } = ownerDocument;
+				const windowScroll =
+					scrollContainer === ownerDocument.body ||
+					scrollContainer === ownerDocument.documentElement;
 				scrollableRef.current.scrollBy( deltaX, deltaY );
+
+				if ( windowScroll ) {
+					defaultView.scrollBy( 0, deltaY );
+				} else {
+					scrollContainer.scrollLeft += deltaX;
+					scrollContainer.scrollTop += deltaY;
+				}
+
+				event.preventDefault();
 			}
-			// Tell the browser that we do not call event.preventDefault
-			// See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#improving_scrolling_performance_with_passive_listeners
-			const options = { passive: true };
-			node.addEventListener( 'wheel', onWheel, options );
+			node.addEventListener( 'wheel', onWheel );
 			return () => {
-				node.removeEventListener( 'wheel', onWheel, options );
+				node.removeEventListener( 'wheel', onWheel );
 			};
 		},
 		[ scrollableRef ]

packages/block-editor/src/store/actions.js

@@ -1264,6 +1264,13 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
+export function __unstableIframeIncompatible( clientId ) {
+	return {
+		type: 'IFRAME_INCOMPATIBLE',
+		clientId,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *

packages/block-editor/src/store/reducer.js

@@ -1507,6 +1507,18 @@ export function blocksMode( state = {}, action ) {
 	return state;
 }
 
+export function iframeIncompatible( state = {}, action ) {
+	if ( action.type === 'IFRAME_INCOMPATIBLE' ) {
+		const { clientId } = action;
+		return {
+			...state,
+			[ clientId ]: true,
+		};
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning the block insertion point visibility, either null if there
  * is not an explicit insertion point assigned, or an object of its `index` and
@@ -1873,6 +1885,7 @@ export default combineReducers( {
 	isSelectionEnabled,
 	initialPosition,
 	blocksMode,
+	iframeIncompatible,
 	blockListSettings,
 	insertionPoint,
 	template,

packages/block-editor/src/store/selectors.js

@@ -1279,6 +1279,10 @@ export function getBlockMode( state, clientId ) {
 	return state.blocksMode[ clientId ] || 'visual';
 }
 
+export function isIframeIncompatible( state, clientId ) {
+	return state.iframeIncompatible[ clientId ] || false;
+}
+
 /**
  * Returns true if the user is typing, or false otherwise.
  *