[6.7] Mobile/tablet preview and meta box issues

[t-hamano]

WordPress 6.7 introduced resizable meta boxes. The combination of meta boxes and device previews can cause some unintended problems. Let me explain.

Desktop Preview

✅ If the post editor is an iframe, the meta box is now resizable and the editor canvas and meta box will have separate scroll areas, which is the correct behavior:

✅ On the other hand, if a block with API version 2 or lower is registered, the editor works as a non-iframe: the editor canvas and meta box together form a scrolling container, and the meta box is not resizable. This is also the correct behavior:

Tablet/Mobile Preview

❌ If the post editor is an iframe, the resizable meta box will obscure the bottom of the editor canvas. Even if you resize the meta box to a minimum height, you may not be able to access the bottom content of the editor canvas:

❌ If the editor is not an iframe, the meta box is not resizable. The meta box will obscure the bottom of the content. Furthermore, when you open the meta box, you will not be able to access the editor:

What is your proposed solution?

I think the previous behavior should be maintained for mobile/tablet previews. That is,

• Meta boxes are not resizable.
• The editor canvas and meta box together form a scrolling container.

This is the same as in WordPress 6.6 and should look like this:

cc @stokesman

[stokesman]

Thanks for raising this Aki. Unfortunately, it looks like this was something we overlooked in #66494, because the canvas in device previews was at least scrollable before that though it did clip the margin that’s supposed to create a space below the canvas.

I’ve only given a cursory look at how we might fix this but I think it’d be preferable to allow scrolling the canvas independently of the meta boxes instead of the single scrolling area. E.g. like this:

device-preview-and-meta-boxes.mp4

That is done by adding overflow: auto on .block-editor-iframe__scale-container but I’m not sure that’s ideal or doesn’t cause other issues. Also, when not iframed that obviously won’t work. I’ll keep looking into it.

[stokesman]

I’ve opened #66706 that will fix this. It does so by making the split view work even when the editor is not iframed and fixing the device preview overflow in the split view. It seems like the ideal resolution to me and it’s something I’d had a branch for even before the split view landed in #64351 (I just wanted to keep that PR minimal by not including it there). The only hesitation I expect we may have for 6.7 is that it is probably not as minimal a fix as the one proposed by Aki here. I’ll give Aki’s proposal a try in a separate PR.

[stokesman]

Now I’ve opened #66726 targeted to the wp/6.7 branch with Aki’s proposed solution. It seems to resolve this well enough and makes for a lighter and more isolated changeset.

[ndiego]

Given the discussion here, I am punting this to 6.7.1.