Gutenberg on wpcom: fix mobile/tablet/desktop previews

[simison]

In #40388 we disabled the new "preview" functionality in Gutenberg 7.7.1:

Instead, we have just:

TODO:

• Explain the problem here. Meanwhile, look at wpcom block editor: hide new Gutenberg preview button #40388
• Open issue at Gutenberg repo
• Fix in core 💪

[simison]

Once we fix this and enable the feature on wpcom again, we can enable these changes to E2E tests I just removed again: 5d9870d

[roo2]

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.

more context: p7DVsv-8gl-p2#comment-27501

[roo2]

creted Gutenberg issue WordPress/gutenberg#21193

[github-actions]

This issue is stale because it has been 180 days with no activity. You can keep the issue open by adding a comment. If you do, please provide additional context and explain why you’d like it to remain open. You can also close the issue yourself — if you do, please add a brief explanation and apply one of relevant issue close labels.