Widgets Editor has CSS bleeding with Twenty Twenty Theme

[annezazu]

Description

While testing the Widgets Editor with the Twenty Twenty theme, there's some pretty bad CSS bleeding happening with both the background and the text of the Add Block prompt.

Step-by-step reproduction instructions

1. Install & activate Twenty Twenty
2. Install & activate Gutenberg Plugin
3. Under Gutenberg > Experiments, enable widgets experiments (both)
4. Go to Appearance > Widgets and see CSS bleed

Expected behaviour

Expect the widgets screen to retain its own styling and not the theme's.

Actual behaviour

Widgets screen has some CSS bleeding going on.

Screenshots or screen recording (optional)

Screen.Recording.2021-05-18.at.10.32.12.AM.mov

WordPress information

• WordPress version: 5.7.2
• Gutenberg version: 10.6.1
• Are all plugins except Gutenberg deactivated? Yes
• Are you using a default theme (e.g. Twenty Twenty-One)? Twenty Twenty

Device information

• Device: Desktop
• Operating system: MacOS (latest
• Browser: Chrome (latest)

[jasmussen]

Wanted to note that TwentyTwenty loads its stylesheet into wp-admin directly, rather than through the intended add_editor_style mechanismn, and some of the reasons for that are captured in #18571. That is to say, it is very possible that this issue has to be fixed in the theme rather than the widgets editor.

[tellthemachines]

This needs to be fixed on the theme side. I've reported it on Trac so closing this issue now.