Block editor mobile preview iframes ignore add_theme_support( 'wp-block-styles' )

[ALJ]

Description

The block editor allows themes to opt-in to slightly more opinionated styles for the front and editor by calling add_theme_support( 'wp-block-styles' );. This works as expected on the front end and in the block editor's Desktop mode.

But, this does not work as expected in the block editor's iframed Tablet and Mobile preview modes. In the iframed previews, the opinionated styles are always loaded, regardless of the wp-block-styles support of the theme.

Step-by-step reproduction instructions

1. Activate the Twenty Twenty-Two 1.1 theme.
2. Remove line 25, add_theme_support( 'wp-block-styles' );, from the theme's functions.php file.
3. Edit a page in the block editor.
4. Place a Quote block and fill with sample text.
5. The Quote block lacks the visual left border. This is expected since we removed wp-block-styles from the theme.
6. Click Preview > Tablet to enter the iframe preview.
7. The Quote block now has the visual left border because the preview iframe is loading /wp-includes/css/dist/block-library/theme.css. This is unexpected since the preview iframe should not load that CSS file without adding theme support for wp-block-styles.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress: 5.9.2
• Gutenberg: 12.7.2 (can also be reproduced without Gutenberg)
• Theme: Twenty Twenty-Two 1.1
• No other active plugins

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

[covertnine]

Not to pile on, but I'm also having this issue.

One thing I can add is that it seems to be specific to Firefox as mobile and tablet previews continue to work for me in more recent Google Chrome browsers--but not so much in Firefox.

[ALJ]

Thanks for bumping this bug report. For me, the problem is across all browsers, at least both Firefox and Chrome. This screenshot is in Chrome (Version 100.0.4896.75 (arm64)).

These two screens are the exact same page in the editor. The mobile previews are pulling in opinionated block styles, but the desktop view does not. In this example, I do not ever want opinionated block styles pulled in. But, there seems to be no way to prevent that from happening in the iframed mobile previews.

[ALJ]

Hi @skorasaurus thanks for taking time to catalogue but I'm not sure Mobile Web is the right tag, unless I'm misunderstanding what the tags mean. I would call this a straight-up Bug. The block editor seems to not deal with add_theme_support( 'wp-block-styles' ); consistently when switching preview modes. I'm hesitant to say it more definitively until someone else verifies it, though.

[skorasaurus]

Thanks for pinging me back @ALJ ; on second read of the question; I misunderstood what you originally wrote in your bug report and thought it was occurring while viewing the preview in a tablet ; that's clearly my fault.

[ALJ]

on second read of the question

All good. Thanks for that!

[skorasaurus]

Thanks for the report; On second review of this; I am able to reproduce this bug; WP 5.9.3, gutenberg 12.9.0; firefox 99.0 (did not try in chrome)

A hunch that this may be related to #33346?

[room34]

I'm not entirely sure what I'm experiencing is the same issue reported here, but I find the problem is happening regardless of whether or not I have add_theme_support( 'wp-block-styles' ); in my theme. This is using WordPress 6.0, no Gutenberg plugin.

I am finding that my theme CSS loads fine in the editor in Desktop mode, but not at all in Tablet or Mobile mode, and this is happening across browsers. (Tested in Safari, Chrome and Firefox on Mac.)

This is a tangent, so I should probably open a separate ticket for it, but I think the labeling of the menu as "Preview" is misleading, which is how I became aware of this issue in the first place. My client sent me a long list of issues they were seeing with the site in tablet and mobile views, which confused me greatly until I realized they were using the Preview menu to switch the editor view, and thinking it was an actual page preview. Since it's not that, it shouldn't be called that.

[pawel-dabek]

Same issue here.