Media query parity between frontend and the editor

[roryashfordbentley]

What problem does this address?

Currently CSS media queries are used to style blocks at different screen width breakpoints however there is a fundamental limatiation of CSS media queries in that they are relative to the current window size. This can be quite problematic in WordPress due to the sidebars in the editor.

This is more apparent now we are exploring FSE themes where blocks can be the full width of the page and can have their own sidebars etc.

Example:

Lets say we have a custom block that shows 4 boxes, and content can be added by a user within each of the boxes. the layout of these boxes is as follows:

Up to 600px wide = 1 column
600px - 1000px = 2 column
1000px and above = 4 column

Simple enough to style this using media queries but (unless you use the fullscreen editing mode) the main WP sidebar on the left and also the settings sidebar (which is togglable) reduce the width of the editor which causes layout shifting because blocks are losing real-estate.

To demonstrate this I have created a very rudimentary Codepen:

https://codepen.io/roikles/pen/jOYmzWm

As a developer I understand why this is happening but both my clients and content editing colleagues frequently flag this as a bug.

What is your proposed solution?

I dont have a single solution for this issue but would like to propose a few ideas and see what the comunity think about this:

Option 1 - iFrame

If the content editor was loaded in an iFrame within the backend then media queries would be relative to the iFrame width and in theory should appear very similar to the frontend. (Im not a huge fan of this solution)

Option 2 - Container queries

As a future solve this is great and provides the flexibility we need but browser support isnt there yet.

Option 3 - Rethink the editor layout

The fullscreen editor works correctly and looks almost identical to the frontend. Perhaps we can use that as the baseline for testing and explore the main sidebar and also the Settings sidebar as dynamic panes that appear in-front of the editor rather than either side of it.

I would love to hear what others think and especially how others are currently dealing with this.

[stokesman]

I think that Option 1 is where things are headed and for more reasons than the media query parity issue. Here are a couple related issues:

• Consider iframing the editor canvas/content #20797
• Iframed Content Roadmap #33346

I'm not aware of any way to work around this currently.

[ellatrix]

Yes, this has been fixed with #48286! 🎉
Note that the editor won't be iframed if you have plugins that add blocks with an API version lower than 2 or add meta boxes. In that case, contact the plugin authors and ask them to update their blocks to work with the iframe. :)