Add duotone block supports #26752

ajlende · 2020-11-05T22:45:40Z

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?

Create video, media & text, or cover block
Add custom duotone filter
Add preset duotone filter
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.

docs/designers-developers/developers/block-api/block-supports.md

lib/block-supports/duotone.php

lib/class-wp-theme-json-resolver.php

ajlende · 2021-04-20T08:50:50Z

@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 · 2021-04-21T09:53:07Z

lib/block-supports/duotone.php

+ * @param  string $color_str CSS color string.
+ * @return array             RGB object.
+ */
+function gutenberg_tinycolor_string_to_rgb( $color_str ) {


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.

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 😉

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

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

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.

packages/components/src/index.js

youknowriad · 2021-04-21T10:03:59Z

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 · 2021-04-22T18:05:49Z

🔥

gziolo · 2021-05-17T17:41:31Z

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 · 2021-05-17T17:56:16Z

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 · 2021-05-17T18:08:01Z

@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.

ajlende mentioned this pull request Nov 5, 2020

Add duotone to image block #26751

Closed

6 tasks

ajlende self-assigned this Nov 5, 2020

ajlende mentioned this pull request Nov 5, 2020

Duotone Tracking & History #26361

Closed

ajlende changed the title ~~Add/block supports duotone~~ Add duotone block supports Nov 5, 2020

ajlende force-pushed the add/block-supports-duotone branch 2 times, most recently from 6e89845 to 5260dc3 Compare February 11, 2021 19:40

ajlende marked this pull request as ready for review February 12, 2021 00:07

ajlende requested review from ajitbohra, chrisvanpatten, ellatrix, mkaz, oandregal, spacedmonkey and TimothyBJacobs as code owners February 12, 2021 00:07

ajlende force-pushed the add/block-supports-duotone branch 4 times, most recently from ecd5a45 to 32a37ae Compare February 15, 2021 22:30

ajlende force-pushed the add/block-supports-duotone branch 2 times, most recently from 6860884 to 533b01a Compare February 26, 2021 06:56

youknowriad mentioned this pull request Mar 1, 2021

Add block supports render hook WordPress/wordpress-develop#984

Closed

youknowriad reviewed Mar 1, 2021

View reviewed changes

docs/designers-developers/developers/block-api/block-supports.md Outdated Show resolved Hide resolved

youknowriad reviewed Mar 1, 2021

View reviewed changes

docs/designers-developers/developers/block-api/block-supports.md Outdated Show resolved Hide resolved

youknowriad reviewed Mar 1, 2021

View reviewed changes

docs/designers-developers/developers/block-api/block-supports.md Outdated Show resolved Hide resolved

youknowriad reviewed Mar 1, 2021

View reviewed changes

lib/block-supports/duotone.php Outdated Show resolved Hide resolved

oandregal reviewed Apr 9, 2021

View reviewed changes

lib/class-wp-theme-json-resolver.php Outdated Show resolved Hide resolved

ajlende force-pushed the add/block-supports-duotone branch from 50dbbb0 to 9a0900b Compare April 13, 2021 00:05

oandregal mentioned this pull request Apr 16, 2021

Navigation Block: Add separate overlay color option #29963

Closed

ajlende force-pushed the add/block-supports-duotone branch 2 times, most recently from fc9ff0b to 7a79c4b Compare April 20, 2021 08:31

ajlende added 6 commits April 19, 2021 22:41

Add swatch icon

1f78cd7

Add duotone to theme.json

29e8d71

Add duotone control

e98e138

Add block supports duotone

2299f9b

Add cover block duotone

7e9661a

Add image block duotone with supports

c341bd2

ajlende force-pushed the add/block-supports-duotone branch from 7a79c4b to c341bd2 Compare April 20, 2021 08:42

youknowriad approved these changes Apr 21, 2021

View reviewed changes

ajlende added 2 commits April 21, 2021 09:50

Add README for duotone palette

a0667cd

Update docs manifest

a2de080

ajlende merged commit 503c87f into WordPress:trunk Apr 22, 2021

github-actions bot added this to the Gutenberg 10.6 milestone Apr 22, 2021

This was referenced Apr 28, 2021

Block Styles Breakdown #20331

Closed

Link Color: substitute the CSS Custom Property by the mechanism used in layout and duotone #31488

Closed

gziolo mentioned this pull request May 14, 2021

Editor: Update WordPress packages published for Gutenberg 10.6 WordPress/wordpress-develop#1257

Closed

6 tasks

ajlende mentioned this pull request Sep 7, 2021

Add colord package to block editor; Replace tinycolor2 with colord on duotone #34603

Merged

t-hamano mentioned this pull request Jun 21, 2023

Group Block - add support for Background Images #14744

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add duotone block supports #26752

Add duotone block supports #26752

ajlende commented Nov 5, 2020 •

edited

Loading

ajlende commented Apr 20, 2021

youknowriad left a comment

youknowriad Apr 21, 2021

aristath Apr 21, 2021 •

edited

Loading

youknowriad Apr 21, 2021

aristath Apr 21, 2021

ajlende Apr 21, 2021 •

edited

Loading

youknowriad commented Apr 21, 2021

jasmussen commented Apr 22, 2021

gziolo commented May 17, 2021

ajlende commented May 17, 2021

gziolo commented May 17, 2021

Add duotone block supports #26752

Add duotone block supports #26752

Conversation

ajlende commented Nov 5, 2020 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ajlende commented Apr 20, 2021

youknowriad left a comment

Choose a reason for hiding this comment

youknowriad Apr 21, 2021

Choose a reason for hiding this comment

aristath Apr 21, 2021 • edited Loading

Choose a reason for hiding this comment

youknowriad Apr 21, 2021

Choose a reason for hiding this comment

aristath Apr 21, 2021

Choose a reason for hiding this comment

ajlende Apr 21, 2021 • edited Loading

Choose a reason for hiding this comment

youknowriad commented Apr 21, 2021

jasmussen commented Apr 22, 2021

gziolo commented May 17, 2021

ajlende commented May 17, 2021

gziolo commented May 17, 2021

ajlende commented Nov 5, 2020 •

edited

Loading

aristath Apr 21, 2021 •

edited

Loading

ajlende Apr 21, 2021 •

edited

Loading