Gutenberg: Consider adding text-level color settings to all text blocks

[mapk]

Issues like #8171 are exploring block-level color settings for text and backgrounds. It might be equally beneficial to include text-level color settings in Gutenberg as well. In the future (props @mtias) I can see having site-level settings -> block-template-level settings -> block-level settings -> text-level settings. We need to figure out how to surface this UI and how it works together for the greater whole.

This being said, let's explore how we might add text-level color settings to the blocks. These settings would include, but not limited to:

1. Text color
2. Text highlight color

I know @phpbits and @ellatrix have both looked into this already.

[phpbits]

In need of better icon but here's what I have on Text Highlight Color. Don't we need Background Color on Text Highlighting also? Thanks!

Regarding Text Color, I think it's better to have this similar across all blocks like what's been added recently on Heading Block.

Thanks @mapk!

[mapk]

Don't we need Background Color on Text Highlighting also?

Probably my bad terminology, but when I said "highlight color" I meant the background color of the text one highlights.

Regarding Text Color, I think it's better to have this similar across all blocks like what's been added recently on Heading Block.

I think there's a case for having the ability to change specific highlighted text colors and be able to change the whole block's text color. One is a text-level control and the other is a block-level control. And as the settings get more specific they begin to trump the other. So a text-level control would trump a block-level control.

[phpbits]

Probably my bad terminology, but when I said "highlight color" I meant the background color of the text one highlights.

I see. In this case, both color options should be easily available on the toolbar format.

Block level color control should be the same as Paragraph block in my opinion. Having similar panels across blocks are easier to understand.

[mapk]

Thanks @phpbits for the mockups. Here's some early feedback.

1. I really like moving this to the toolbar. While it's not an "important" action, it's one that is more focused than just a block-level setting.
2. The heading, "Highlighted Text Settings" could be dropped entirely. The two labels should be sufficient.
3. Let's change the label for "Background Color" to "Highlight Color". Similar to Google Docs.
   

[phpbits]

@mapk I've tried that before too, from Google Docs right? I just don't want users to have too much icon on the toolbar. It's probably better though, I'll try and create a PR for that. This will be my first PR so my apology in advance if I may do it incorrectly.

[phpbits]

@mapk Do you like this one for Text Color? Thanks!

[phpbits]

@mapk @paaljoachim Just created my first PR for text color. I need guidance on proper testing though if I missed something. Thanks a lot in advance.

[mapk]

I just don't want users to have too much icon on the toolbar.

@phpbits I wasn't saying split them out into different icons... I meant just use the terminology they were using for each of the two color sections, ie. "Text color" and "Highlight color". I'm fine with keeping them together. I need to test your PR and I'll leave some comments there.

[mapk]

Because the PR https://github.com/WordPress/gutenberg/pull/16014 is being worked on, I'm going to remove the Needs Design Feedback label from this issue. Let's move the comments over there.

[youknowriad]

Seems like this is done now right?