Preview options don't actually show the page as it would appear in the browser

[maddisondesigns]

Description

The new Desktop/Tablet/Mobile Preview options are mostly useless and don't provide an adequate preview of the page.

For a start, clicking the "Desktop" Preview option does absolutely nothing. Clicking the "Tablet" or "Mobile" preview options simply reduces the width of the editor area. It doesn't provide a real representation of what the page looks like on the front end, in the browser. It doesn't show headers or footers, it shows Read More... tags when they're not actually shown on the front end. Using TwentyTwenty, it doesn't even show changes made from Media Queries such as font sizes and layout changes. It can't be called a "Preview" if it doesn't accurately represent how the page actually looks.

All of these options should open the page within a new browser tab, and then minimise the screen width, according to the option selected. In fact, there should be just one "Preview" option, as there was before. This Preview page should then provide options to view it in either Desktop, Tablet, or Mobile view.

This is not how the Desktop view of the page looks

This is not how the Mobile view of the page looks

This is a true preview representation of the mobile layout (screenshot of the Responsive Design Mode in Firefox). Site header and footers can be seen. Media queries are executed properly, seen by fonts resizing and layout changing.

Step-by-step reproduction instructions

1. Click on Desktop preview
2. See nothing happen
3. Click on Mobile Preview
4. See editor width decrease and nothing else change
5. Click Preview in new tab and view the true representation of how the page looks

Screenshots, screen recording, code snippet

No response

Environment info

WP5.8 (No Gutenberg plugin. Core only)
TwentyTwenty
MacOS Big Sur 11.5.2
Firefox 91.0.2

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

[cr0ybot]

I'm generally ok with the concept behind the Desktop/Tablet/Mobile preview options within the editor since the "Preview in new tab" function exists. What bugs me the most is that the media queries I have set up for blocks do not work at all within the editor preview system. What is worse is that there doesn't seem to be a way to adapt the current media queries I have.

When in any of the 3 preview modes, there is a container div responsible for the width of the in-editor preview that has the equivalent preview class: is-desktop-preview, is-tablet-preview, and is-mobile-preview. I assumed I could use these classes to adapt my media queries, but when working with a theme and using the add_editor_style() method, all styles are scoped to the .editor-styles-wrapper container, which is a child of the .is-desktop-preview etc. container. That means that there is no way to use the .is-___-preview classes in my CSS, because they're automatically scoped under the .editor-styles-wrapper class!

Ideally, I'd prefer my media queries to work properly within the editor preview, but the only way to do that is with an iframe (I believe).

[ellatrix]

This was fix with #33342, with more improvements to styles in the iframe in the last few years.