Unable to unset the Highlighter feature: Clicking Clear only removes the color while preventing block color changes from applying

[kimerlin81]

Quick summary

When Highlighter is chosen for a block (header for example) there is no way to unset it like you can with an option like Bold. The problem is that clicking "Clear" seems to only remove the color that was applied, but it will override any color preference that is set in the block color settings. If new text is entered into the header and a block color preference is set, that will work. But, as soon as you highlight that text the problem occurs.

Steps to reproduce

1. Insert a header block on any page/post
2. Enter header text
3. Set the header text color via header block settings - notice the change
4. Apply a color using the highlighter and see the color change
5. Now try to clear the highlighter color that was set by clicking clear - notice that the color is removed, but the default block color that was set cannot be applied to this existing text.
6. Also notice how highlighter (even in cleared mode) is still selected and there's no way to deselect it.

Video Capture:

https://user-images.githubusercontent.com/6737345/141536668-a00324b4-250c-4478-bfc5-414ff555206d.mp4

What you expected to happen

I expected that once "clear" was chosen for the highlighter, that the block color settings would be able to apply accordingly

What actually happened

Once the highlighter has been used on a block, the existing text will not reflect the block settings that are set prior to or after using the highlighter.

Context

No response

Operating System

No response

Browser

No response

Simple, Atomic or both?

Simple, Atomic

Theme-specific issue?

No

Other notes

No response

Reproducibility

Consistent

Severity

All

Available workarounds?

Yes, easy to implement

Workaround details

A. Delete the existing text and re-writing the block text B. Select all existing block text and apply a color using the Highlighter feature.

[kimerlin81]

Current case - 4448183-zd-woothemes

[Robertght]

Thank you for this super-clear report @kimerlin81 ! :)

I asked here: p1636752643139000-slack-CBTN58FTJ

cc @Automattic/flow-patrol-create as well

[chad1008]

I can reproduce this on v11.9.0 (edge) at the moment. cc @fullofcaffeine @ellatrix

What's happening is that when you apply a text color with Highlight it generates a mark tag with the chosen text and background color. In the absence of a chosen background a transparency is applied.

Now, when you use the Clear button to remove the text color, it ONLY removes the text color. It doesn't remove that transparent background. If you then click over the the "Background" tab of the Highlight modal, and clear that, you get the block-level coloring back. The transparent background is removed, and the mark is also removed at the same time.

All of this is, of course, going to be very counterintuitive for a user that didn't add a background color, and has no idea the system is doing it "in the background" (pun in intended)

[kimerlin81]

Thanks, Chad! This makes complete sense!

"All of this is, of course, going to be very counterintuitive for a user that didn't add a background color, and has no idea the system is doing it "in the background" (pun in intended)" - THIS part! :)

[fullofcaffeine]

Reported in core: https://github.com/WordPress/gutenberg/issues/36532.

@kimerlin81 Thanks for reporting this! It's often a good practice to try to reproduce the issue in a vanilla WP+Gutengerg instance if you can t (i.e using wp-env in the Gutenberg repo) and if you manage to do, report in the Gutenberg repository instead of (or in addition to) Calypso. If you need help doing that next time, feel free to ping me :)

[cometgrrl]

This issue is tracking an issue in another repository. All +1's of end-user reports should be done on this issue, while any discussion related to the issue itself and its fix should be done on the issue in the outside repository.