Text color icon appears and disappears

[paaljoachim]

Continuing discussion from:
"Add option to add text color to specific text inside RichText"
#16014

Into a new issue. Where we can focus.

1. Text color icon appears and disappears from toolbar.
2. Bring colors by the block for some blocks: Bring colors by the block for some blocks #20197
3. Background color issue here: Add a way to add inline text background color #20835

Comments from:
@ellatrix
#16014 (review)

Looks good to me. Not sure if I like the conditional placement of the button, but we can experiment with that. Also think it would be nicer to consolidate the custom color popover, but also could be adjusted later.

@mapk
#16014 (review)

I totally agree with @ellatrix's comment. Having it appear and disappear is somewhat odd. But I just tested this out and it was working great. I'm all for getting this in and iterating later.

@afercia
#16014 (comment)

Saw this new feature today and I'd totally second that. I would expect to find controls where I saw them the first time. Instead, they just disappear and appear in a new place. Not to mention that, from an accessibility perspective, the accessibility team has pointed out several times that the continuous appearing / disappearing of controls is highly confusing.

I'd definitely recommend to further iterate on this soon.

---

[mapk]

@paaljoachim do you have a solution around keeping the color icon visible all the time? Does it just show the default color for the text until the user selects the custom color letters?

[MDWolinski]

An option I proposed is that the options (Bold, Italic, Text Color, Links, etc) show in the toolbar if they are used in the document (or the most recently used 3 or 4). If they are not used, then they can be collapsed into the dropdown menu.

[paaljoachim]

I do think that the most used options such as Bold, Italic, Link should stay in the toolbar.
If others inside the "More rich text controls" are being used in a block than these should be added on to the toolbar.

--

Coloring a single word:

Default approach: Adds an icon - icon is removed when the red color word is deselected or another word has been selected.

New suggested approach: Selecting any other word in the block still shows text color, but does not show the color of the default text.

Adds an icon - color is removed when the red colored word is deselected or another word has been selected.

I decided to add a prototype to get a feel for keeping the icon in place and just removing the red color below it when selecting another word.
https://www.figma.com/proto/DKczhwVe8ctklez0EKymO2/Add-Color-Icon?node-id=1%3A2&scaling=min-zoom

Accessibility concerns:
#16014 (comment)

"I would expect to find controls where I saw them the first time. Instead, they just disappear and appear in a new place. Not to mention that, from an accessibility perspective, the accessibility team has pointed out several times that the continuous appearing / disappearing of controls is highly confusing."

@jasmussen @mapk

[kellychoffman]

Looks like this one has been updated (Text color icon has been moved and is always present) and is no longer an issue. 🎉Reopen if I am mistaken.

[paaljoachim]

Hey Kelly @kellychoffman

This is what I see:

Inline-color.mp4

Clicking the text that has the inline color shows the A with the red line below it. Clicking any other place the A is not seen.

WordPress 5.7.2.
Twenty Twenty One
Gutenberg plugin 106.1

[jasmussen]

Having lived with the current behavior for a while, I'm starting to think it's the best approach with the current design, and that simply showing the color icon always is not going to be a good user experience.

[ellatrix]

Fixed in #21892.