Experiment: Duotone filter in Image block lightbox not working

[artemiomorales]

Description

Description

Duotone filters are not applied when using the experimental Lightbox behavior.

Follow-up to #50373

Step-by-step reproduction instructions

1. Enable Core blocks in the Gutenberg Experiments settings page
2. Add an image to a post
3. Go to the image block styles, and select a filter under Filters > Duotone
4. Enable the lightbox by selecting the image block setting Advanced > Behaviors > Lightbox
5. Save and view the post
6. Notice that the duotone filter is not applied

Screenshots, screen recording, code snippet

duotone-bug.mov

Environment info

WordPress 6.2.2, Gutenberg 15.9.0-rc.1
Chrome 113.0.5672.92
MacOS 12.5

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[SantosGuillamot]

I was taking a quick look at the bug, and it seems the duotone is added by using a class. Something like wp-duotone-purple-yellow. The problem is that it seems it is added to the parent element, which is different depending if the lightbox is enabled or not:

• Lightbox NOT enabled: The parent element is the <figure>.
• Lightbox enabled: The parent element is the <div> wrapper.

Taking a quick look at the code, it seems that the logic to add that class is this one. One idea that comes to my mind is to modify that processor to insert the class into the figure. Something like this:

$tags = new WP_HTML_Tag_Processor( $block_content );
while ( $tags->next_tag(
    array(
        'tag_name'   => 'FIGURE',
        'class_name' => 'wp-block-image',
    )
) ) {
    $tags->add_class( $filter_id );
}

I quickly tested it, and it seems to work. But I am not familiar with the duotone so it could be breaking other parts.

[artemiomorales]

@SantosGuillamot Thanks for taking a look at this. It looks good and is also working for me; I'll create a pull request.

[artemiomorales]

Here I'm pinging @jasmussen @SaxonF and @jameskoster for feedback, on recommendation from @mtias, to verify that the lightbox should be enabled for duotoned images, or if there should be any other special considerations when it comes to duotoned images and the lightbox.

[MaggieCabrera]

Duotone is only a class if we are using one of the presets. If we create a custom duotone (via selecting the colors manually) we will generate a specific svg filter for it with those colors, so Mario's solution will probably not be enough.

[jasmussen]

Hey Artemio, thanks for the ping. I would check with @ajlende as well, as he's worked a bit on this. From my understanding duotone comes with a tag-selector, we might simply be able to point to additional tags inside the container so it is able to work with whatever changes the interactivity API makes to the markup. Ultimately I'll defer the technical solution to you and others, however.

From a behavior point of view, however, my instinct is that duotone should invisibly just work, and just be the same regardless of what behaviors are applied. That is, if you apply a duotone, it should remain when the lightbox behavior is applied, both for zoomed and unzoomed states.

I understand the behaviors API is meant to expand beyond just lightboxes, and is essentially more of a system of adding said behaviors than specific to images or otherwise. As the API gets refined, and if we find out it's causing similar issues with filters or otherwise due to markup or structural changes, if no elegant solution is found, we could simply disable behaviors for Duotone images or something similar. It'd be nice if it just works, but it wouldn't be world-ending if we have to disable. Then we just need a UI to indicate why duotone, or behaviors, disable one or the other, e.g. grayed dropdown with help-text.