Duotone: Try moving to the block toolbar

[jasmussen]

I've been tinkering with some mockups that move the duotone feature to the block toolbar of the image block. I'm picturing this — when you click the "Edit image" button that currently has a crop icon:

You get a new button in that mode, Duotone:

And when you pick one of the presets (and those presets should include some really nice black and white filters), you get a duotone image:

The above mockups go a bit further with some ideas I've been toying with for general image tools enhancements. Please ignore those.

CC: @ajlende

[ajlende]

@joen I could use some guidance on the duotone toolbar UI. It's pushed up under the add/duotone-filter branch if you wanted to play around with it. I figured it would be better to wait for the Gutenberg RC to come out before opening a PR so people don't get too excited too soon and so it's open when they will be less distracted by getting a release out the door.

The base layout seems fine. And I haven't finished the keyboard interactions yet, but I was planning on having the arrow keys to navigate around the dropdown since we're within the context of a toolbar.

Where it starts getting tricky is with the custom color palette. I made the dark and light color buttons to expand to show the color picker underneath. It still needs an expandable indicator, the button should probably be 100% width, the clear button needs to be hidden, and I need to add arrow key navigation since it's within a toolbar. I haven't gone that far with it because I'm starting to think this isn't the right way to go.

Then things start getting really gnarly when you add on the custom color picker as another popover on top of the existing popover. This part would need a good bit of rework for keyboard interaction. And the additional popover seems messy.

The text color toolbar works like this right now, but keyboard navigation is also currently broken there (see WordPress/gutenberg#26115 and WordPress/gutenberg#26114)

With the amount of rework needed to get this going, do you think it would be better to start with this in the sidebar and do another pass to get it in the toolbar? I like having it in the toolbar, but there's just too many accessibility issues with doing that right now.

The toolbar interaction for all color/gradient pickers could really use a redesign instead of trying to use what we have in the sidebar in a toolbar context where it doesn't work. We can do better than popovers on popovers on popovers and make it easier to use.

[jasmussen]

Thanks so much both for the effort moving to the toolbar, and for the exhaustive writeup. It's very clear from those notes that what we need here is a much better color component, that works whether in the sidebar or otherwise.

I still think that the block toolbar is the correct place for this control. It's a better experience, and it surfaces much more visibly and intuitively just what a cool feature this is, so I don't think we should move it back to the sidebar to ship it earlier, despite how excited I am about the feature.

Some thoughts:

1. I'm working on some designs for an improved color picker for the sidebar. Hopefully once the design stabilizes, it can receive some help to land for, for example, the Paragraph block, and hopefully it should then be easier to port that to the toolbar, without the issues you mention.

2. Is there a minimal version of this we can ship, keeping the interaction in the toolbar? What if selecting a duotone preset simply surfaces two color swatches below, and clicking any of those invokes the custom color picker overlay? I guess that puts us back to the point where we have popovers inside popovers.

But to frame it differently, the long view is a substantially improved color picker component. What's the near view?

[jasmussen]

Done!