Closed tellthemachines closed 3 weeks ago
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 - https://github.com/WordPress/gutenberg/pull/41153#issuecomment-1478944303). The editor canvas iframe bubbles mouse move events for this purpose: https://github.com/WordPress/gutenberg/blob/dbc6e11e8c2b84d48c0d78bf9a83ee45333e6d0d/packages/block-editor/src/components/iframe/index.js#L76-L102
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.
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
Screenshots, screen recording, code snippet
https://github.com/WordPress/gutenberg/assets/8096000/278a6b52-fb91-4408-8acc-205591a68375
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