WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
9.99k stars 4.02k forks source link

Resolve background styling issue with legacy widgets in Customizer #33264

Open critterverse opened 2 years ago

critterverse commented 2 years ago

Hi all, there has been some discussion around this previously in https://github.com/WordPress/gutenberg/issues/32849#issuecomment-866374349 but I’m opening a new issue as it would be great to continue to explore ways to remove the theme background color that appears only on legacy widgets in the Customizer widget editor. This is how legacy widgets appear currently:

123006238-5d0a4f80-d385-11eb-86a0-32af597893eb

Seeing the theme background color in the legacy widget is not ideal as it doesn't match the way that blocks appear within this editor, and creates a visually patchy effect.

Introducing theme styling into the Customizer would help resolve this issue visually, but starts to get a bit weird with the other WYSIWYG preview directly next to it — so that option isn't preferable. Ideally, we could remove the background color from legacy widgets so that no theme colors appear in the previews.

noisysocks commented 2 years ago

Agree, this shouldn't have a background colour. The editor in the Customizer should not have theme styles.

We won't be able to fix this in time for 5.8 but I've added it to https://github.com/WordPress/gutenberg/issues/33242.

kevin940726 commented 2 years ago

If we just remove the background color in the preview, but leave the text color intact, wouldn't that potentially cause accessibility issues with hard-to-read texts? For instance, the background color is black and the text color is white in the preview. That will result in the editor having invisible texts. Not sure if it has been brought up before?

noisysocks commented 2 years ago

I don't think we should have editor styles at all in the Customizer. That includes custom background colour, custom foreground colour, etc.

noisysocks commented 2 years ago

My memory is a bit hazy, but I believe that editor styles are already not loaded in the Customiser and that this bug is because some themes use enqueue_block_editor_assets to add styles instead of editor styles. This is due to limitations with editor styles. I'm not sure if there's anything we can do in Core/Gutenberg to address that. It would be nice to investigate.

When I test this locally, I only see the issue with Twenty Twenty and not Twenty Twenty-one.

critterverse commented 2 years ago

When I test this locally, I only see the issue with Twenty Twenty and not Twenty Twenty-one.

Same. I believe the issue was first introduced in https://github.com/WordPress/gutenberg/issues/32849#issuecomment-866374349 in case there's any helpful context there.