Reader: Highlighted text appears with a yellow background

[dcoleonline]

Quick summary

Text that has been formatted with the block editor's Highlight feature ends up showing with a yellow background in the Reader.

Steps to reproduce

1. Create a new post and add a paragraph block.
2. Apply a highlight color to text within the paragraph block.
3. Publish the post.
4. View the post in the Reader.
5. The highlighted text will have a yellow background in the Reader.

What you expected to happen

I expected the text to have no yellow background in the Reader.

What actually happened

The highlighted text appears with a yellow background in the Reader, regardless of what color the text is set to appear on the blog itself.

Highlight feature in use in the editor

In the example there, the text is highlighted in red.

This is how it appears in the Reader below text that is not highlighted:

Context

reported in 5502314-zen

Platform (Simple, Atomic, or both?)

Simple

Theme-specific issue?

No

Browser, operating system and other notes

Tested Firefox 103.0.2, but the customer also saw it in Chrome.

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, difficult to implement

Workaround details

Customers could undo the highlighting, but that would have to be done for each instance where highlights were used. This isn't practical for sites where lots of text has been highlighted.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5502314-zen

[zachspears]

Checking in with team Calypso as this appears to be the expected behavior. Waiting for feedback.

[jamiepalatnik]

Based on thread linked above, this does seem to be expected behavior, so I'll close for now.

[davemart-in]

We do strip out some HTML on the reader for security reasons. I suspect there may be a way for us to do this securely.

We also want to have some degree of consistency within the reader experience, which may be why we opted not to fix this in the past. I'm open to exploring it.

Adding this to our teams board for re-evaluation.

[github-actions]

OpenAI suggested the following labels for this issue:

• [Feature Group] Editor Experience: The issue pertains to how text is highlighted in the block editor and how it appears in the Reader, which relates directly to the editing experience.
• [Feature] Post/Page Editor: This label is relevant because the problem involves the text highlighting feature while editing posts.
• [Feature] Reader: The issue specifically mentions the behavior of highlighted text in the Reader, making this feature particularly relevant.
• [Feature] Global Styles: The issue could also relate to global styles, as it affects how highlighted text is visually represented across the platform.

[jcsanyi]

We ran into this on our P2 recently, where we used highlighting to change the text color... to color-code projects or people to various teams - and then found that it all ended up with the default yellow highlighter when viewed in the reader.

Example post with the problem:

• https://wordpress.com/read/blogs/174659535/posts/16165

Similar more recent posts that we've "fixed" with a <font color=""> workaround by editing the HTML directly:

• https://wordpress.com/read/blogs/174659535/posts/20080
• https://wordpress.com/read/blogs/174659535/posts/19926

This is particularly frustrating because the gutenberg paragraph's highlight feature doesn't have the concept of a "default" highlight - you need to pick the text color and/or background that you're highlighting with - so it's rather jarring when the reader overrides that with the black-on-yellow default.

I wanted to escalate this for re-evaluation, since this seems like the kind of bug that would easily turn somebody off of the reader as making posts unreadable if they happen to be subscribe to a site that uses highlighting to adjust the text color.