.editor-styles-wrapper prefix remains on device previews

[tomusborne]

Description

When adding a stylesheet via add_editor_style() in a classic theme, the .editor-styles-wrapper prefix that is automatically added when no device preview is selected remains when a device is selected.

However, if you add CSS via block_editor_settings_all, the prefix is removed. This leads to specificity issues.

Before WP 6.5, this prefix was removed when previewing a device.

Step-by-step reproduction instructions

1. Use WP 6.5
2. Use a classic theme
3. Ensure the theme has a classic metabox
4. Add a stylesheet via add_editor_style()
5. Inspect an targeted in that stylesheet when there's no device view and when there is a device view. Both will have the .editor-styles-wrapper prefix.

This was not the case in WP 6.4.x.

Easiest way to see this is to use the Twenty-Twenty-Two theme and add an ACF metabox.

Environment info

WP 6.5-RC2

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

[tomusborne]

Actually, after further testing, this seems to affect block themes as well if they have a classic metabox on the page.

To reproduce:

1. Activate Twenty Twenty Four theme
2. Add a classic metabox (via ACF or similar)
3. In WP 6.4.x, you'll see this CSS on "desktop":

.editor-styles-wrapper h2 {
  font-size: var(--wp--preset--font-size--x-large);
}

And you'll see this CSS when previewing a device:

h2 {
  font-size: var(--wp--preset--font-size--x-large);
}

However, in WP 6.5-RC2, you see the .editor-styles-wrapper prefix in all previews.

[fabiankaegy]

Tagging @ellatrix here for visibility

[fabiankaegy]

I think the crux of the issue here is that in block themes / iframed previews the selectors are no longer getting scoped to the editor styles wrapper. The scoping is only supposed to happen when the content area is not rendered in an iFrame.

And the device previews are always rendered inside the iFrame.

[tomusborne]

Yeah, in 6.4 the .editor-styles-wrapper class was being removed on device preview successfully. In 6.5 it almost seems like something has been memoized so those styles aren't updated automatically (or at least not all of them), resulting in the prefixed selector still being there for some styles.

[ellatrix]

Does #56649 fix your problem?

[iansvo]

@ellatrix Hey thanks for following up on this! Looks like the selector in the scope prop is a bit too specific, I made a comment with a suggested change on the PR for you: https://github.com/WordPress/gutenberg/pull/56649/files#r1546874525