Inaccurate error messaging with block-level colors when 'Use theme styles' is off

[Robertght]

Description

This is a replica of the following issue reported here:

Automattic/wp-calypso#86467

Quick summary

When 'Use theme styles' is toggled off in the editor's settings, applying different colours at a block-level can lead to inaccurate, misleading error messages via the colour contrast checker and an overall confusing experience.

As expanded upon in the Logs or notes section, I have only been able to reproduce this within Calypso. In /wp-admin for self-hosted sites, the contrast checker appears to be disabled all together when 'Use theme styles' is toggled off.

Experiment with dark text

1. Add a new paragraph block and navigate to the block's colour settings in the sidebar.
2. Select a dark colour and begin typing.
3. Notice that the colour appears legible in the sidebar, and no contrast warning is provided.
4. Save changes and preview the post.
5. Observe that the text is not actually legible.

What you expected to happen

I expected the in-editor contrast warnings to be accurate and for any content included in the post to be legible on the site's font-end.

Potentially relevant: Automattic/wp-calypso#86082

Step-by-step reproduction instructions

Steps to reproduce

Setup: Enable a theme with a dark background and deactivate editor's theme styles

1. Active a block-based theme with a dark background on your site. For example, the Charcoal variation of the Byrne theme.
2. Navigate to the post editor for the site in Calypso.
3. Observe how, by default, the editor reflects the theme's colour scheme, with a dark background.
4. Tap the three dots to the upper right of the editor and then access Preferences.
5. From the resulting modal, navigate to Appearance and then toggle the Use theme styles option off.
6. Return to the editor to observe that the editor no longer represents the theme styles and has a light background.

Experiment with light text

1. Add a new paragraph block and navigate to the block's colour settings in the sidebar.
2. Select a light colour and begin typing.
3. Notice that the colour appears illegible in the editor, and the following warning is provided:

This color combination may be hard for people to read. Try using a darker background color and/or a brighter text color.

4. Save changes and preview the post.
5. Observe that the text is actually legible.

Experiment with dark text

1. Add a new paragraph block and navigate to the block's colour settings in the sidebar.
2. Select a dark colour and begin typing.
3. Notice that the colour appears legible in the sidebar, and no contrast warning is provided.
4. Save changes and preview the post.
5. Observe that the text is not actually legible.

Screenshots, screen recording, code snippet

What actually happened

In-editor contrast warnings are incredibly misleading as they appear to use the editor's styles as the point of reference, rather than the actual site's background.

In-editor contrast warning, despite text being legible on front-end

Editor	Front-end

No in-editor contrast warning, leading to illegible text (partially highlighted with cursor for the sake of the screenshot)

Editor	Front-end

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Mamaduka]

While I understand the frustration, I don't see how the editor can calculate the correct color contrast for the theme when "Use theme styles" is turned off. Similar feedback will be different or incorrect if the theme and editor styles differ.

One option I can think of is disabling the contrast checker when "Use theme styles".

@afercia, what do you think?

[afercia]

@Mamaduka I'm missing the context for the 'Use theme styles' preference. I could track its introduction till #22494 but I'm not fully understanding why the editor should ever allow to disable theme styles in the first place.
I thought the editor is supposed to always show the preview of the content as close as possible to the front end. Why there is such preference in the first place>

[Mamaduka]

@afercia, unfortunately, I don't have any additional context besides that PR. Maybe @youknowriad or @mtias can clarify the feature.

[youknowriad]

This is a writing tool that was introduce a long time ago to allow users to write content without being distracted by opinionated styles that may come from the theme. A lot of people don't want the typography or the colors defined by the theme to interfere when they're focused on writing. It's a common feature in several writing editors. I think it shares some of the goals of the distraction free mode.

[carolinan]

Also in the beginning (before many of the block style options were introduced) there were lots of styling conflicts.

[afercia]

Thanks @youknowriad yes I noticed it was introduced in #22494 (if I'm not wrong) in the context of other 'writing flow options'.

I think it shares some of the goals of the distraction free mode.

You make a good point here. Distraction free mode doesn't disable the background color provided by the theme though.

I thought the editor was always supposed to provide a preview that is as close as possible to the front end. Disabling 'Use theme styles' goes in the opposite direction and I wonder whether it still makes sense. It's not a case that this preference is not available in the Site editor, where users do need to see the theme styles.

Thinking at the ongoing effort to unify the editors, how this aligns with the reunification? I tend to think disabling 'Use theme styles' makes only sense in a content writing flow. When in the future there will be only one editor, and only on set or user preferences, should this feature be provided in another mode?

Overall, I'd really prefer to not disable the contrast checker. Rather, I would love to see the contrast checker work reliably wherever text and background can be changed by the users, whatever the edited object is (content, template, pattern, whatever).

I wouldn't object to disable the contrast checker in modes that are only focused on writing content. As such, I'm not sure disabling theme styles should be a user preference any longer. Would it make sense to move it to an editor mode?