Skip to content

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

@jasmussen

Description

@jasmussen

This ticket extracts and builds upon initial work in #38556 (comment).

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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackNeeds general design feedback.[Block] ImageAffects the Image Block[Feature] Design ToolsTools that impact the appearance of blocks both to expand the number of tools and improve the experi[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions