Admin Color Scheme styles leaking into the Site Editor

[alaczek]

Quick summary

In the site editor, selecting the paragraph or text block turns it pink, which depending on the global styles can make the text unreadable due to low contrast. This seems to only happen on WordPress.com simple sites.

Steps to reproduce

1. On a simple site with a block theme active, go to Appearance > Editor.
2. Click on Templates and select any of the templates to edit.
3. Select or create a text block (paragraph, heading, navigation, site title, etc.). Notice that it the text turns pink when the block is selected.
4. In the global styles settings change the site background color to #DA1035. Notice the text is unreadable now when a paragraph/heading block is selected.

What you expected to happen

I expected for the text not to change the color at all when a text-based block is selected. This aligns with core behavior, and avoids the issue of text potentially clashing with global styles and being unreadable while editing.

What actually happened

Selecting a text-based block made it pink.

Impact

Most (> 50%)

Available workarounds?

No but the platform is still usable

Platform (Simple and/or Atomic)

Simple

Logs or notes

This seems to only happen on WordPress.com simple sites.
I was not able to replicate on a local install with WP 6.4.2 and Gutenberg 17.5.1 or on an Atomic site with Gutenberg 17.5.1

[liviopv]

📌 REPRODUCTION RESULTS

• Tested on Simple – Uncertain

📌 FINDINGS/SCREENSHOTS/VIDEO
When I select text on a Simple Site in the site editor using TT4, a bluish background is applied to the selected text, in a hue that I believe is derived from the #3858e9 applied to the admin color I defined in /me/account. It's a little different than core, but it doesn't seem to cause any accessibility issue

Local Site X Simple Site comparison

📌 ACTIONS

• Requested author feedback

📌 Message to Author
@alaczek I feel like I'm missing something here, as I'm not able to reproduce - or perhaps I didn't test the correct thing. Is it theme-specific? Or perhaps only reproducible when selecting a specific dashboard color scheme on https://wordpress.com/me/account?

[alaczek]

I was able to reproduce this with a few themes (TT4, Bedrock, Smithland). You're right that it feels like it's related to the admin color scheme (Interface Settings in user profile). I switched from Bright to Default, and the issue persists. It's not about the bluish highlight though - it's about the text turning pink - I made a quick video:

Screen.Recording.2024-01-25.at.10.39.28.mov

[alaczek]

It's definitely related to the interface color scheme in user profile - the text turns orange when selected if I pick the Sunset color scheme and teal when I picked Ocean color scheme. And in the Default and Bright the selected text is pink, because these two have the same accent color.

Possibly it's this piece of CSS leaking into the editor:

[liviopv]

I was able to reproduce when switching to the Ocean color scheme - select text inside the editor changes color, which can cause an accessibility issue depending on the background:

[miksansegundo]

We fixed a similar CSS issue related to the admin styles leaking into the editor canvas by disabling the concatenation of that asset.

The other issue was caused by the reset.css affecting the margin styles of the Heading block. See D134512-code for Gutenberg: Fix for the Heading block styles on h2 and h3 avoiding the concatenation of the editor reset.css.

[miksansegundo]

I cannot reproduce it on TT4, or Bedrock, using Classic bright and dark admin color schemes.

@alaczek, please let us know if you can reproduce this or any other issues related to wp-admin styles leaking into the editor canvas because we know how to fix them.