Mobile/Tablet/Desktop Previews do not work with externally loaded CSS

[roo2]

Describe the bug
On wordpress.com we use stylesheets loaded from s0.wp.com, s1.wp.com for various plugins such as full-site-editing.
When we install the gutenberg plugin and use the mobile preview, some of the css still behaves as if in desktop mode, so we see columns on mobile preview etc.

To reproduce
Steps to reproduce the behavior:

1. Install a plugin that loads styles from an external domain with mobile breakpoints (tested with the full-site-editing plugin)
2. Open the gutenberg editor and attempt to mobile preview

Expected behavior
The columns should be stacked for mobile display. Preview should render as if in a mobile device.

Additional context
From our initial investigation, here is what appears to be happening:
Our current understanding of what's happening:

Mobile/tablet preview uses the use-simulated-media-query function which works by modifying the loaded stylesheets to simulate being viewed on mobile/tablet breakpoints.

This works for stylesheets loaded from the same domain. However, on wordpress.com, the static domains s0.wp.com and s1.wp.com are used to serve many stylesheets such as those from the full-site-editing-plugin.

These stylesheets are therefore rendered in desktop mode even when using mobile/tablet preview.

calypso issue: Automattic/wp-calypso#40401

[simison]

Potential fix: #21102 cc @ellatrix

[ellatrix]

Yes, this will be fixed with an iframe. The PR is almost ready.

[ddryo]

Hello.
I am suffering from the same thing.

Media queries written in style sheets loaded by themes and plugins also do not work.

I'm using the 'enqueue_block_editor_assets' hook to read a CSS file. Is that OK?

[ddryo]

Also, it would be nice to have a way to detect from CSS which device mode is currently being previewed.

It would be very helpful if something like the '.is-mobile-mode' class was added to the body tag.

For example, just like turning on fullscreen mode gives it the '.is-fullscreen-mode' class.

It is possible to adjust the style using those class names.

[Vanillabacke]

Also, it would be nice to have a way to detect from CSS which device mode is currently being previewed.

It would be very helpful if something like the '.is-mobile-mode' class was added to the body tag.

For example, just like turning on fullscreen mode gives it the '.is-fullscreen-mode' class.

It is possible to adjust the style using those class names.

I was opening an issue for that. It would be also nice to have an hook / event for it.
#23430

[roo2]

this one was fixed in gutenberg

[mreishus]

I believe we're still seeing this issue in wordpress.com. Was this a recent fix that hasn't been released yet?

To reproduce:

• Visit a site's wp-admin and create a new post.
• Add a column block and set to 33/33/33
• Add a paragraph block in each column and set a background color for it
• Make your browser window wide and activate mobile preview mode

Expected result (works correctly when running off localhost with wp-env, or off sandbox):

• Columns are stacked
• In browser inspector, CSS media query breakpoints refer to 0px and 999999px (the rules on .wp-block-column )
• This means useSimulatedMediaQuery ran correctly
• Checking window.document.styleSheets shows href attributes that match the current site name, so getStyleSheetsThatMatchHostname() was able to find the stylesheets

Actual result (wpcom):

• Columns are side by side instead of stacked
• In browser inspector, CSS media query breakpoints still refer to real numbers instead of 0 and 999999 (the rules on .wp-block-column )
• This means useSimulatedMediaQuery did not run
• Checking window.document.styleSheets shows href attributes that are mostly null, so getStyleSheetsThatMatchHostname() was not able to find the stylesheets

[daviedR]

Any update on this? Styling Gutenberg editor is really frustrating at this point.

[ellatrix]

We need the iframe the post editor. I need to look at this again, but honestly is a tough and frustrating job :) The iframe has landed in the side editor, so there's some light at the end of the tunnel. I'll resume work on this.

[fabiankaegy]

@ellatrix If there is anything that can be done to support your efforts on that front let us know :) It is a great effort but I can only imaging how frustrating it must be... :)

[ellatrix]

Should be fixed by #33342. We're planning for all previews to be iframed in the WP 5.9 release. The only thing that will remain without an iframe is the post editor without (or "Desktop") preview. This is to give plugin and theme authors time to check their blocks and update them if needed. This particular issue should be resolved though, because it's about the Tablet and Mobile previews.

[lukasz-gorski]

Should be fixed by #33342. We're planning for all previews to be iframed in the WP 5.9 release. The only thing that will remain without an iframe is the post editor without (or "Desktop") preview. This is to give plugin and theme authors time to check their blocks and update them if needed. This particular issue should be resolved though, because it's about the Tablet and Mobile previews.

So it have been a while and we have 5.9 ;) Does it's possible to enable iframe preview for Desktop too? I see it's not default, but maybe as an option somehow?

[vitaliikaplia]

same question here

is there any option to force iframe preview for desktop?

thanks! @ellatrix

[pawel-dabek]

Same question here.
I would like to force iframe for dekstop view too.

[ellatrix]

Fixed by #48286