Seedlet, Blank Canvas: Dark color palette causes cover block text to lose contrast

[kwight]

In Baker, the last palette on the right (with a dark background and white text) will result in the text disappearing, because the main content area always has a white background.

[sixhours]

This happens with the same content in Blank Canvas and Seedlet, too, so it's an issue further up the chain. :-/ I wonder if it's related to this core fix for cover blocks with light backgrounds WordPress/gutenberg#33541 or if it's a conflict between individual block colors and our Custom Colors. The good news is, users can work around it by editing the page/block and updating the text color. I'll dig into it more tomorrow to see if there's a more globally applicable fix.

[sixhours]

Looks like this is related to the theme's use of CSS variables which don't update automatically in the Customizer; things work as expected once you refresh the page, since the variable changes. We may be able to add a Customizer script to change things on the fly with inline CSS. Will poke around at it a bit more and see if that fixes the issue in Seedlet, which would hopefully fix it in Baker and Bradford as well.

[sixhours]

This is tricky. :-/ After lots of back and forth and experimentation with the Customizer and the editor (during which I got all sorts of unexpected results due to us defining colors in multiple places 🙃 ), I think what's happening here is the content imported with the Headstart annotation specifies a custom background color for the wrapping cover block, but not the text.

When Custom Colors change, the cover block retains its white background color because that's been declared in the annotation, but the text defaults to whatever the foreground color is, and that changes to white when using a dark background.

We shouldn't override a user's block color choices with Custom Colors, IMO. I think the solution is to update the theme's annotation to specify a dark text color for the elements in the cover block. That way it won't change with Custom Colors, but it will always have dark text on a white background.

If the user wants something different, they can always change it, but at least this way the annotations won't look broken when you switch to the dark color scheme.

[sixhours]

Solution proposed here: D64853-code