Duotone effect also applied to the Image block border color

[richtabor]

I expected that the duotone filter would be applied to the image, not the image's border.

To reproduce:

1. Add an image block.
2. Add a white border to it.
3. Add a duotone filter.
4. See effect also applied to the image block border.

Visual

I've added an image with a white border applied:

CleanShot.2023-06-29.at.14.55.33.mp4

And here's the Cover block performing as expected:

CleanShot.2023-06-29.at.14.59.07.mp4

[justintadlock]

Not sure if this is strictly a bug because the CSS filter property is working correctly.

Thinking out loud... The usual workaround for this in is to apply the border to a wrapping element, like a <div>. That would mean adding extra HTML to the block markup.

Applying the border to the existing <figure> would be problematic since it also wraps <figcaption>. There might be some possibilities with pseudo-elements, but we'd run the risk of breaking block styles in themes.

[richtabor]

Not sure if this is strictly a bug because the CSS filter property is working correctly.
Thinking out loud... The usual workaround for this in is to apply the border to a wrapping element, like a div.

It's not doing it on the Cover block though. I'd expect the same result for both. 😅

[justintadlock]

It's not doing it on the Cover block though. I'd expect the same result for both. 😅

Agreed. It looks like the big difference between the two is that the border on the Cover is applied to the wrapper, but the border on the Image is applied to the <img>.

The best course of action might be to introduce a wrapping <div> for the <img> element for the Image block and apply the border props to it. That's the path I'm seeing with the least disruption. Just with some quick testing, it could make for some minor compatibility breaks (but not insurmountable) for some custom block styles.

[carolinan]

I am also not sure if this is a bug or a feature. I kind of like it but I can see why it would not be wanted at all times.

One more inconsistency: When the block has a duotone filter and a border, and you select the "crop" image editing tool from the block toolbar, the border no longer has the duotone applied.

[richtabor]

In my opinion, duotone should apply to the image, not the other effects added to the image. Having the border visually be a different color than what's selected in the control is not an ideal experience.