search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.5k stars 4.19k forks source link

Duotone/Filters: Presets only in block toolbar, advanced filtering in inspector #39452

Open jasmussen opened 2 years ago

jasmussen commented 2 years ago

This ticket extracts and builds upon initial work in https://github.com/WordPress/gutenberg/issues/38556#issuecomment-1031206859.

There are some issues with the Duotone filter dropdown, mainly that it covers content. For simplicity, we could change the block toolbar to only show duotone/filter presets, giving trivial access without covering the image:

Presets toolbar

Note a suggested new Filter icon for the toolbar.

We would still need (as tracked in #38556) an explicit button to toggle off a filter, for example when a theme has set a duotone filter by default:

Explicit none

When a theme sets a default duotone, how should the "Clear" button work? With an explicit "no filter" button, and the theme's intent of showing images duotoned by default, arguably it should reset the image to theme defaults. But we should make that clearer. In this case, the image was explicitly set to "no filter", and clearing reverts to the red/blue theme default:

Clearing

Shown also, the ability to select the filter palette from the dropdown.

How would you customize a duotone filter? To be able to customize duotone presets in Global Styles, there needs to be an inspector interface regardless (#34574), and in that vein, it makes sense to use the same interface here:

Customize duotone

A flyout is used when in the Post Editor context, as the block inspector doesn't use a drilldown, but the contents of the flyout is the same as the panel in Global Styles:

Global styles

At some point in the future, we'd want to consider new filters, and even let you combine multiple, such as duotone plus dithering. Inspired by #39427 from @javierarce, this uses a similar ItemGroup based layer interface:

Additional filters

See also:

ajlende commented 1 year ago

Since there are some accessibility issues with completely replacing the toolbar, maybe we could do something like this for the time being when the detailed controls move to the sidebar.

Presets toolbar

The goal of replacing the toolbar was to not obscure the image so you could see the filter being applied fully. Removing the custom filter makes the dropdown a little smaller to help a little bit. And updating the copy for the clear button, I think, is also a small improvement.

jasmussen commented 1 year ago

We can probably skip the inline buttons in the toolbar for now, yes. They seem valuable to me still, but if it's onerous to implement the value proposition may not be that clear.

I still think it's valuable to surface them in the inspector 👍 👍