Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid resizers not working well when resizing an embed block down #63279

Closed
tellthemachines opened this issue Jul 9, 2024 · 1 comment · Fixed by #64098
Closed

Grid resizers not working well when resizing an embed block down #63279

tellthemachines opened this issue Jul 9, 2024 · 1 comment · Fixed by #64098
Assignees
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@tellthemachines
Copy link
Contributor

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

@tellthemachines tellthemachines added [Type] Bug An existing feature does not function as intended [Feature] Layout Layout block support, its UI controls, and style output. labels Jul 9, 2024
@talldan
Copy link
Contributor

talldan commented Jul 9, 2024

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:

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Layout Layout block support, its UI controls, and style output. [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants