Follow-up to theme styles on Widget screen

[critterverse]

Follow up to #32683 — some bugs and styling notes!

• Legacy widgets seem to have lost their labels/any information other than the input field when the site has a dark background color:

• On a dark background, the appender/empty block area should have a white outline (it's a bit difficult to see in the images above)

• Let's try to match the widths of all elements in the Widget areas if possible, for example this empty appender should have the same width as the blocks above it:

• Ideally, I think we should try to add the Preferences modal to accompany this new option: see Add Preferences modal to the Widgets screen #32711

[tellthemachines]

@critterverse which theme are you using for the dark background? The block inserter is showing in light colour for me.

With the widths issue, there's no fully theme-compatible way to tackle it as different themes set different max-widths on the blocks. So e.g. in Twenty Nineteen all the widths match:

The most we could do is try to unset the theme max-width, so block widths will match the inserter instead of the other way around, so Twenty Twenty One would look like this:

This is not entirely foolproof though, as a higher specificity theme style could always override our defaults.

[critterverse]

@critterverse which theme are you using for the dark background? The block inserter is showing in light colour for me.

Hmmm I'm using Twenty Twenty-One too so I'm not sure why it's showing up differently for me? Still seeing the darker version on the dark background.

The most we could do is try to unset the theme max-width, so block widths will match the inserter instead of the other way around

Let's try it this way, Twenty Nineteen looks really clean 👍

[critterverse]

One more issue I just spotted here — it looks like the change made to the background color on the Legacy Widget block preview on the standalone editor has changed the background color on the Customizer screen as well:

@tellthemachines Could we make those unstyled for now until we're ready to address theme styles on the Customizer screen?

[tellthemachines]

I've updated #32871 to make block width match the inserter width.

the change made to the background color on the Legacy Widget block preview on the standalone editor has changed the background color on the Customizer screen as well

That's intentional, as we also needed to fix a dark mode bug. We're not able to have custom styles for the Customizer previews anyway, as the preview is inside an iframe and so not aware of its parent location.

[critterverse]

That's intentional, as we also needed to fix a dark mode bug. We're not able to have custom styles for the Customizer previews anyway, as the preview is inside an iframe and so not aware of its parent location.

I believe this needs to be addressed somehow because it looks so unintentional (IMO, this should take higher priority over a bug fix in Twenty Twenty-One dark mode because it affects all themes/colors).

I think the theme styles could either be fully applied or fully removed, but the partial application feels problematic 😅

I made this quickly a while ago but perhaps introducing theme styles into the Customizer editor is a possibility? The editor area has a 4px gray border to keep it from blending in with the preview area.

Would love to hear if there are other ideas that could help us address this more quickly!

[tellthemachines]

I believe this needs to be addressed somehow because it looks so unintentional (IMO, this should take higher priority over a bug fix in Twenty Twenty-One dark mode because it affects all themes/colors).

The dark mode issue is a usability issue: preview contents are not legible at all when the background color is set to white. Whereas having the preview show the theme background color doesn't affect legibility, it just arguably looks a bit weird.

Also, let's bear in mind that those previews weren't unstyled before this change, they just had their background colour hardcoded to white. The font families, sizes and styles, spacing and any other theme styles were still being applied, so there was already an inconsistency with vanilla Gutenberg styles. It became more noticeable after the change, but only on themes which set a non-white background colour. And, although our two most recent default themes set background colours, this won't affect the majority of themes or users out there.

I made this quickly a while ago but perhaps introducing theme styles into the Customizer editor is a possibility?

This is definitely something we can look into, but with the first release candidate scheduled for next week, it's too big a change to go into 5.8 at this point.