Gutenberg: Merge background and text color panels

[karmatosed]

If we merged these we would make a panel that applied to all coloring. It would also result in a better experience where right now the a11y check appears to float not connected on text coloring.

Props to @megsfulton for discovering the color check issue and prompting this.

[nic-bertino]

If I'm understanding correctly, we discussed this in #2381, particularly merging the two here. Hope that context is helpful.

[karmatosed]

@nic-bertino slightly different, but thanks for adding and that issue was great as we got to get to where we are now. This idea is about bringing them both together into one panel, but having 2 options. Not the merging totally.

[ZebulanStanphill]

If something like border color, box shadow, or text shadow options were added to the core blocks, would they appear in the same panel as the text and background color options?

[karmatosed]

@SuperGeniusZeb it depends, I am not sure right now adding those would be a good option.

[karmatosed]

Here is what merging could look like. I think this does give us options for the future and aligns more with 'Text Settings' for example.

[youknowriad]

This means we lose the color shown next to the panel title. I'm fine with that, just confirming that's what we want.

[ZebulanStanphill]

Also, from another perspective, isn't text color technically a "Text Setting"? And background color options could also be grouped with other background settings, like background images and background gradients. Of course, if non-solid-color background options are not added to any core blocks, it may make more sense to group color options into a single panel.

Additionally, will the Paragraph block even still have background color options when the Section block is added?

[karmatosed]

This means we lose the color shown next to the panel title. I'm fine with that, just confirming that's what we want.

That's a great point, let's have 2 states for that. When closed it can show beside and when open it can show beside each relevant section:

[tofumatt]

That looks nice, but what happens when I click on one of those colours? They look directly clickable, but I'd imagine what clicking anywhere there will actually do is expand the panel.

Other sections don't show extras when hidden like that, so that seems like an inconsistent design choice.

We should remove the colours from the unexpanded header.

Otherwise looks nice though. 👍

[karmatosed]

That looks nice, but what happens when I click on one of those colours? They look directly clickable, but I'd imagine what clicking anywhere there will actually do is expand the panel.

They click the same way they do right now.

We should remove the colours from the unexpanded header.

I don't agree there, we can see the colors just like we do now in unexpanded. Colors is already a feature and conscious design decision, you can see here already in Gutenberg:

[tofumatt]

Oh, cool, okay, I missed that. Ignore me then, I'm very green. 😅

[gziolo]

This is an excellent issue to get started with Gutenberg for anyone who likes challenges 🥇

[designsimply]

Tested and confirmed that the Paragraph Block options for Background Color and Text Color are not yet combined. Adding a screenshot for reference:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13830&action=edit using WordPress 4.9.6 and Gutenberg 3.1.0 with Firefox 60.0.2 on macOS 10.13.5.}