Add duotone block supports

[ajlende]

Description

This is a subset of #26361 focusing just on adding duotone as a "block supports" feature. It required some PHP changes to server-render the SVG and stylesheet, so those changes can be found at WordPress/wordpress-develop#984.

See #26751 for adding duotone to the image block which doesn't require the core changes.

• Add duotone to theme.json (included in Add duotone to image block #26751)
• Add duotone filter component (included in Add duotone to image block #26751)
• Add disableInserter and disableAlpha props to CustomGradientBar (included in Add duotone to image block #26751)
• Add duotone toolbar (included in Add duotone to image block #26751)
• Add duotone block supports
• Add duotone to video block
• Add duotone to media & text block (and transformations to and from video and image blocks)
• Add duotone to cover block (and transformations to and from the video and image blocks)
• Add duotone to image block (See Add duotone to image block #26751 (comment))

The effect is applied as an SVG filter which is supported all the way back to IE 10. Since it's working with SVG, a server-rendered component was required. The SVG is hidden with inline styles, and a stylesheet is written to apply the filter to a specific component using a unique (to the filter) classname.

One concern I have for applying this to videos is that the duotone effect is also applied to the video controls. This may be a problem if the duotone effect does not have high enough contrast.

EDIT: After some feedback, support was removed for the blocks that have video controls until separate controls can be added without the duotone filter applied. There are also no longer core changes required to make this work.

How has this been tested?

1. Create video, media & text, or cover block
2. Add custom duotone filter
3. Add preset duotone filter
4. Test keyboard accessibility

Screenshots

cover-block-duotone.mp4

Old Screenshots

media-text--block-duotone.mp4

video-block-duotone.mp4

Types of changes

New feature

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[ajlende]

@youknowriad @nosolosw I've gone through and updated things based on your comments. It should be ready for another review pass. Thank you!

[youknowriad]

This is a very well driven PR. Thanks a lot for your work and iterations. I really appreciate the documentation effort as well for the block support.

I left some small comments and I think it's lacking some testing (php unit tests for the block support or e2e tests) but most of these can be good follow-ups.

[youknowriad]

I wonder if can add a couple of unit tests for these functions. Or maybe if an existing php library could be used for that.

[aristath]

Well... I'm currently maintaining https://aristath.github.io/ariColor/ so I could definitely improve it, give up ownership, and even rewrite it if we want to use a library. It's been battle-tested in hundreds of themes already since it was part of a customizer framework 😉

[youknowriad]

@aristath Does it mean this is already in Core? in which case we could just directly use It here?

[aristath]

No, not in core... It was in a customizer framework that themes were (are?) embedding to get extra controls & functionality.

[ajlende]

Tinycolor also has some quirks with rounding numbers with colors and doesn't follow the whole CSS spec. I was going for consistency over everything else for this which is why things are the way they are.

I've been slowly working on https://github.com/ajlende/color-fns/ which avoids the problems that I have with tinycolor, but it's a long ways from being able to be used. I'll take a look at what @aristath has to see if they'd work better together as a followup.

[youknowriad]

Oh I didn't check whether this works with theme.json yet. @nosolosw would know but even if it doesn't, I'm personally fine for this being a separate concern/PR.

[jasmussen]

🔥

[gziolo]

Hello, this feature is amazing. Awesome work 👏🏻

I'm currently working on backporting PHP changes to WordPress core in WordPress/wordpress-develop#1257. I have two questions:

• Are there unit tests for the duotone support?
• There are several functions ported from TinyColor and react-color. Should we include their licenses and make it more obvious that this code is derived?

[ajlende]

Are there unit tests for the duotone support?

No, there are not any at the moment. There was some discussion about adding some, but that discussion ended with holding off for this PR. https://github.com/WordPress/gutenberg/pull/26752/files?file-filters%5B%5D=.php#r617376509

There are several functions ported from TinyColor and react-color. Should we include their licenses and make it more obvious that this code is derived?

Nothing was ported from react-color, just TinyColor. It would be a good idea to include that license. The note in the code about react-color was to indicate that only the formats supported by react-color were copied from TinyColor, so its license doesn't need to be included.

[gziolo]

@youknowriad added some unit tests in WordPress core for block supports in this file:

https://github.com/WordPress/wordpress-develop/blob/master/tests/phpunit/includes/testcase-block-supports.php

I'm not sure if this is the best place to add test coverage for duotone, but at least it's a good place to look at.