Gutenberg: 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: https://github.com/Automattic/wp-calypso/issues/40401

[simison]

Potential fix: https://github.com/WordPress/gutenberg/pull/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.
https://github.com/WordPress/gutenberg/issues/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