Make it easier to quickly turn duotone on/off

[annezazu]

What problem does this address?

Currently, due to a the following reasons, it's a bit tricky to easily turn on/off the duotone filter while continuing to try them out:

• The duotone popover isn't persistent and often closes once more causing you to have to open it again.
• It's not quite clear that clicking again on the same color option will turn duotone off.
• The pop-over covers the image often times making it sometimes tricky to see at a glance what on/off might look like quickly.
• If you add a custom color to a current duotone filter, this flow gets even more difficult as the customization doesn't get reflected in the presets.

Improving this would be advantageous as it'll help folks compare/contrast quickly between the original.

General 5.9 experience:

duotone.on.off.mov

5.9 experience with custom colors added where you can see it's hard to tell which filter was customized:

custom.duotone.mov

This initial feedback came up as part of the latest FSE Outreach Program's All Things Media exploration from @paaljoachim:

Turn duotone filter on and off. To easily see the before and after effects. (In addition to reset.)

What is your proposed solution?

I think there are two technical considerations: the persistence of the pop over & ensuring the duotone filter being altered is properly reflected to make it easier to toggle on/off cc @ajlende. From there, I think there are some design questions around how obtrusive or not the duotone popover is and how the experience could make it easier to turn on/off. Perhaps it means add a "clear" option to the list of colors! I'm not quite sure. Here's a very quick visual of what I just described (see lots of problems with this too):

Could be neat to take some inspiration from tools like Lightroom where, on the mobile app, if you hold down your finger on the image you're editing, it'll toggle back to the original version. Obviously can't duplicate that here but I think seeing what other tools allow here could be interesting since work is planned to evolve these image editing options.

cc @jasmussen who I know has thought lots about these tools :)

[jasmussen]

Nice one! And CC: @ajlende who's also worked on it.

Some of the flow issues, popover closing, covering content, a few of the issues are tracked in #31373. Another thought is to refactor the filter menu to:

• Only show presets in the block toolbar
• Have all other configuration happen in the inspector

Here's a mockup that shows that setup (and also imagines some additional filter properties):

Such an inspector setup would benefit the global styles effort (#34574) in that the inspector setup needs to exist to set defaults there.

To zoom in on one small part of the mockup, there's this:

Note how a "no filter" button is selected. If we introduce this button, it seems like it would address the primary purpose of this ticket, right? The ability to quickly unset a duotone filter if a preset has already been set. Also CC: @scruffian as I recall a PR he made that added this specific button.

[paaljoachim]

Hey Joen @jasmussen

Let's see if I got it correctly. Presets open in the toolbar, and if one decides to create a custom duotone filter one clicks the arrow icon all the way to the right (seen in the image you shared) to open the custom options. I assume that one would then click the no filter to also turn off the custom filter. Creating a custom filter would this automatically be added to the presets? So one can use the same custom filter elsewhere.

[jasmussen]

I imagine you can just click this button to unset any filter applied to a block:

The down-chevron dropdown I imagine lets you choose between default duotones and those provided by the theme.

The inspector would surface options for customizing one of the presets just for this one block, and I imagine any creation and management of new duotone presets would happen in Global Styles, albeit in a very very similar interface. See in #34574 how custom colors are made, with a little plus button; I imagine something similar here.

Edit: Here's a clearer illustration:

[jasmussen]

I extracted a few conversation items for #39452, which also details multiple filters and a refreshed filter management interface.

Two pieces are relevant for this clearing interface. First off, the explicit button to toggle off a filter:

Despite past conversation, this would not be toggled by default when no filter was applied, but would be an explicit option to undo a filter that was, for example, applied by default by a theme.

This would also beckon a change to how you'd "clear" such a filter. Here's a mockup that's more verbose, letting you "clear to theme defaults":

[annezazu]

I think this can be closed out based on the current experience in Gutenberg 14.0.2: the duotone icon itself is a triangle when not in use and there's a new option to clear the duotone filter in the options itself.