Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make it easier to quickly turn duotone on/off #38556

Closed
annezazu opened this issue Feb 7, 2022 · 5 comments
Closed

Make it easier to quickly turn duotone on/off #38556

annezazu opened this issue Feb 7, 2022 · 5 comments
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.

Comments

@annezazu
Copy link
Contributor

annezazu commented Feb 7, 2022

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):

Screen Shot 2022-02-06 at 7 21 54 PM

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 :)

@annezazu annezazu added [Type] Enhancement A suggestion for improvement. Needs Design Feedback Needs general design feedback. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels Feb 7, 2022
@jasmussen
Copy link
Contributor

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):
Applying filters

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:

Screenshot 2022-02-07 at 09 40 45

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
Copy link
Contributor

paaljoachim commented Feb 7, 2022

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
Copy link
Contributor

jasmussen commented Feb 7, 2022

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

Screenshot 2022-02-07 at 12 55 06

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:
turn off duotone

@jasmussen
Copy link
Contributor

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:
Explicit none

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":
Clearing

@annezazu
Copy link
Contributor Author

annezazu commented Sep 5, 2022

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.

Screen Shot 2022-09-05 at 4 22 04 PM

@annezazu annezazu closed this as completed Sep 5, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

3 participants