Grid resizers not working well when resizing an embed block down

[tellthemachines]

Description

When a block containing an iframe, such as a YouTube embed, is placed within a Grid block and set to span multiple columns, trying to resize it down to a smaller size with the handles doesn't always work as expected, especially when resizing over the iframe area itself (dragging the handles over the caption space below works fine).

This is likely because the event listeners responsible for the resizing can't follow events inside the area of the iframe.

Step-by-step reproduction instructions

1. Add a Grid block to a post or template;
2. Add a YouTube block inside it, and resize it to take up two columns;
3. Try to resize the block back down to one column with the resize handles and observe the flaky behaviour.

Screenshots, screen recording, code snippet

resizers-on-iframe.mp4

Environment info

Latest Gutenberg and also WP 6.6.

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

This is likely because the event listeners responsible for the resizing can't follow events inside the area of the iframe.

Agree, that seems likely, I seem to remember encountering this before for the editor canvas iframe (found it here - #41153 (comment)). The editor canvas iframe bubbles mouse move events for this purpose:

gutenberg/packages/block-editor/src/components/iframe/index.js

Lines 76 to 102 in dbc6e11

	function useBubbleEvents( iframeDocument ) {
	return useRefEffect( () => {
	const { defaultView } = iframeDocument;
	if ( ! defaultView ) {
	return;
	}
	const { frameElement } = defaultView;
	const html = iframeDocument.documentElement;
	const eventTypes = [ 'dragover', 'mousemove' ];
	const handlers = {};
	for ( const name of eventTypes ) {
	handlers[ name ] = ( event ) => {
	const prototype = Object.getPrototypeOf( event );
	const constructorName = prototype.constructor.name;
	const Constructor = window[ constructorName ];
	bubbleEvent( event, Constructor, frameElement );
	};
	html.addEventListener( name, handlers[ name ] );
	}
	return () => {
	for ( const name of eventTypes ) {
	html.removeEventListener( name, handlers[ name ] );
	}
	};
	} );
	}

The Sandbox component used by embeds doesn't have a similar implementation.

One solution could be to add event bubbling to Sandbox, but it won't fix things for third-party blocks that don't use that component. An alternative might be to render an overlay that sits above the iframe when the user starts dragging that can intercept mouse events. It might get interesting with z-indices, but if the resizable box is already in a popover maybe it'd be possible.