stokesman
commented
1 day ago 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:
https://github.com/user-attachments/assets/87b9cfcd-ae53-436f-8327-5a2deef6b273
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.
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,
This is the same as in WordPress 6.6 and should look like this:
cc @stokesman