Polish duotone filter #143
Conversation
|
This is what I see:
First thought: oh wow this is so excellent. I cannot wait for this to land. I love it so much. 2nd thought — for this to ship as a filter for the image block, I can think of two things we'll probably want to address. The first one is shift that happens as soon as you apply a duotone filter. This happens, best as I an inspect, because the SVG that contains the filter is inserted before the image. Now in my example above, that has to do with margin collapsing. Here's with no SVG:
You can see the top margin I apply to the
Suddenly the top-margin on my The easiest fix, perhaps, is to output that SVG after the The other issue is that the duotone effect is only applied if you actually define two colors, and until you choose the 2nd color, nothing happens. What can we do here to improve that flow? One thing we might do is to set the 2nd for you. I think that's what the pullquote block does:
I'm not entirely sure on the best heuristic for that to happen, any thoughts? Other than that, this is so cool! |
|
@jasmussen thanks for taking a look!
That must be a theme thing because I don't see the issue on Twenty Twenty. What theme are you seeing the issue on so I can test it out? I'm also already writing a stylesheet to apply the filter, so it's not too difficult to just add some extra CSS too. If it is collapsing margins, you'll have a similar problem pushing the block below down if you move the SVG below the block.
I like your suggestion for automatically setting the second color. The pullquote heuristic is optimizing for contrast, so you'd end up with an "inverted color" image if you chose white, for example, for the dark color. Maybe that's fine for the image block, but when this makes it's way to the cover block, I think folks will end up wanting a subtle texture for their background, not high contrast. I think instead, if I can choose the darkest and lightest colors from the palette, I can use them as the default dark and light colors. Not only will this fix the inverted colors problem, but it will also be trivial to set either the dark or light color and have the other one automatically set. Whereas the pullquote heuristic only works when setting the background color. Thoughts on that approach? |
It's a theme I'm working on myself. But the key is that the first block in the block list must have a top margin. That top margin usually collapses down with the title above it, but when an element is inserted, it doesn't collapse. It's rather edgecasey, but if the filter SVG can be output after the block it should fix it. Is that hard?
I don't think we need to optimize for any contrast here, applying a duotone filter would intrinsically be a decorative act. I think the only thing we need to optimize for is that something happens as soon as you choose a color, but also that whatever 2nd color is chosen is not identical to the first one.
I like the sound of "trivial" — because all we need to happen is something, so it's clear that the effect is working. It's of course important to be able to clear the colors after the fact if you decide you don't want duotone after all — I guess that just means we allow you to break the duotone effect if you clear the 2nd color after it's auto-set. But yes, if you can do any kind of calculation of whether the first color you choose is light or dark, and then choose a highly contrasting color as the 2nd one, that would be great. Honestly it'd even be fine to set the 2nd color to be black or white depending on the lightness of color 1 — while duotone is technically two colors of your choice, it's often used as black + color, like so:
And honestly, black works really well as the 2nd color nearly always. |
When a theme uses margin-top on the block, the editor styles override the margin-top on the first child. When the SVG is the first child, that style isn't applied to the correct element.
Not difficult, I just wanted to be able to test it out myself. After a couple modifications to the gutenberg starter theme I was able to reproduce the issue. The actual problem was that the block editor adds some styles to the first child. .block-editor-block-list__layout > .wp-block:first-child {
margin-top: 0;
}With the SVG being the first child, the
This is what I ended up doing: I grabbed the darkest and lightest color based on luminance. When a dark color was selected and no light color had been selected, the lightest color was auto-selected for the light color. And vice versa, when a light color was selected and no dark color had been selected, the darkest color was auto-selected for the dark color. I wanted to avoid having inverted looking colors (dark luminance > light luminance), so when a color identical to the opposite default color (i.e. choosing the darkest color for the light color or vice versa), I fall back to pure black or pure white. This still breaks if the darkest color in your palette is pure black and you select it for the light color, but it didn't seem right to me to auto-select a lighter color for the dark color in that case.
For clearing colors, I didn't want to auto-clear a custom color if the auto-color was cleared, and it seemed strange to only auto-clear colors that were also auto-set (I tried in 508c9b7 if you wanted to see what that's like), so I ended up just keeping it simple and not bothering with auto-clearing at all. A color may be auto-set, but it will never be auto-cleared. When only one duotone color is selected from clearing just one of the colors, the duotone effect disables as it did before. |
|
@jasmussen since this is getting ready to ship, we're going to need some plugin directory assets. If you can get those to me, I can start the submission process. |
|
Latest status:
Love it. The effect is instant, the color choice is totally fine, and there isn't any shift. This is superb.
Agree, I think it works excellently as is. |
Followup from #88 with some improvements on the duotone filter to get this ready to ship
wp_pre_kses_block_attributescalled fromdefault-filters.php