Add duotone support to Media & Text block

[thisissandip]

Fixes #32972

Description

Add duotone filters support to Media and Text block

How has this been tested?

1. Select Media and Text Block
2. Add Image
3. Duotone filters should be available for Image

Screenshots

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[annezazu]

@ajlende perhaps you can take a look at this :)

[ajlende]

The media and text block doesn't support duotone because it allows for video elements with controls, and the SVG filter applies to the video controls as well causing contrast accessibility issues. (See #26361 (comment))

If you want to have a duotone image next to text, I'd suggest using columns to arrange the image and text side-by-side.

#31373 includes conditionally enabling duotone for a block which would allow us to disable duotone when the video is shown and preventing the accessibility issue. It can also be applied to the video block when controls are disabled once that is in place.

Longer-term I've been experimenting with rendering out videos with the duotone effect on the server so the effect is only applied to the video. There's also the suggestion from #26361 (comment) that could be explored if the server-side rendering doesn't work out.

So for now, we'll have to wait for conditional duotone to land. I hope you understand. Thanks! 🙂

[jasmussen]

Thanks for exploring this. Another solution to enabling soft-duotone (as opposed to video baked-in) on videos, is to create a custom set of overlay video controls, which would arguably be a customization benefit for the video block overall. This would allow the SVG to target just the video, without affecting the controls.

[thisissandip]

@jasmussen I would love to give this a try. Are there any design mockups or styles that I should be aware of?

[jasmussen]

No mockups that I'm aware of, no. I'm unsure of how big of an effort it would be, my instinct tells me it's quite an undertaking to make sure such JS-based overlay controls work correctly with all the accessibility that entails. If you find a good path forward, I'd be happy to take a look!