FSE: Theme's stylesheet is enqueued outside the editor's <iframe>

[adsheyn]

Description

After upgrading Gutenberg plugin from 8.9.3 to 9.0 I've noticed that all the stylesheets that were before enqueued inside the editor's <iframe> window are now outside of it. I've tested this with my custom block-based theme as well as with TT1. Stylesheets are enqueued using the add_editor_style() function and worked before properly.

Step-by-step reproduction instructions

1. Open the Site Editor window.
2. Open the Browser's Dev Tools.
3. Scroll to the bottom and see that all the stylesheets are there.

Expected behavior

Stylesheets provided by the theme should be enqueued inside of the editor's <iframe>.

WordPress information

• WordPress 5.6.1
• Gutenberg version: 9.0.0
• All plugins except Gutenberg are deactivated.
• Tested with TT1, and custom block-based theme.

Device information

• Device: iMac
• Operating system: iOS 10
• Browser: Chrome 88.0

[adsheyn]

Another problem with styles...
On Post / Page edit screen there is this:

<style>.editor-styles-wrapper a { color: var(--wp--style--color--link, #00e); }</style>

Setting "link" to false inside theme.json doesn't change anything.
How to get rid of this?

[ndiego]

👏 I have being trying to find the cause of this problem for hours and just stumbled upon this ticket. I have opened at ticket (WordPress/theme-experiments#201) in the Theme Experiments repo thinking it had something to do with the new experimental-theme.json file.

But yes, I can confirm this issue with a similar testing setup to @adsheyn.

[aristath]

This has already been fixed in #28731 so it will be included in the next minor release 👍

[adsheyn]

Thanks for looking into this @aristath and @nosolosw .
I've just checked the latest fixes to this problem #28731 but unfortunately, now this is even more strange.
Please look at the screenshot below:

All the styles are double enqueued. Right at the beginning of the <body/> tag as well as at the end of it.

There is also problem with the included styles itself. Some of them should not be enqueued at all.

1.) The first stylesheet contains this:

I understand the need to provide some default stylling for the editor, but when a theme author provides their own styles through the add_editor_style() function, these defaults should not be included at all. That is very important because overriding them provides specifity problems. Especcially for plugin authors trying to style particular components.

2.) Default set of font families.

Similary to the previous styles... As a theme developer I always declare font families to the basic html elements. Currently I have to do this: .editor-styles-wrapper p { . . . } to override that... and what if a theme has different font families for section heading, subheading, page titles or links inside heading tags?

I really think that these kind of styles (editor defaults) should only be included if the theme has no add_theme_support( 'editor-styles' ); in functions.php.

3.) Styles that comes from the theme using the add_editor_style() function.

4.) Styles that comes from the theme using the add_editor_style() function.

5.) Default editor variables that comes from the theme.json.

Well, this is not actually a big problem, but I believe that css variables should come first. It is rather personal preference.

6.) Classes generated by the theme.json file.

At the very beginning there is: .editor-styles-wrapper a { color: var(--wp--style--color--link, #00e); }.
How to turn of this default color for links? Setting "link" to false doesn't work.

Also, how to prevent automatic generation of these styles?

[ndiego]

@adsheyn see the additional comments in #28731. Looks like this was a hotfix to get the Site Editor working again, but additional iteration is needed get things working 100%. #28837 is working to address the duplication.