Duotone filter does not work on front end for non FSE themes as of 12.1.0

[nick6352683]

Description

As the title says, the Duotone filter does not work (display) on front end for non FSE themes as of 12.1.0, which now includes 12.2.0. In the backend (Editor), the duotone filters work fine.

Deactivating the Gutenberg plugin, the duotone works fine for ALL themes.

Step-by-step reproduction instructions

1. Install and activate Gut. 12.1.x or 12.2.0
2. Create a duotone for an image or on a Background image of the Cover block.
3. Make sure you are using a non FSE theme.
4. Notice that the duotone is working in the Editor.
5. On the front end the duotone is not showing up, you just get the original image without the filter.
6. To fix the issue, EITHER replace the activated theme with a FSE theme, or deactivate the Gutenberg plugin.

NOTE: I did not check with the latest (beta 3) version of WP 5.9 (but I'm guessing the issue will be there too)...

Screenshots, screen recording, code snippet

No response

Environment info

WP 5.8.2, Gutenberg 12.2.0, Xampp with PHP 7.4.x, on a Windows 7 PRO, or Windows 10 Home editions, Chrome browser.

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

[drewcauchi77]

Having same issue as described by @nick6352683. I am using a custom built VueJS theme.

[nick6352683]

Update: The issue does not show up in WP 5.9 beta 4... However the moment you activate the Gutenberg plugin, the duotone filter stops working on the front end, which I'm guessing that WP 5.9 is merged with a Gutenberg version older than 12.1.0. But sooner or later when a newer version of Gutenberg will be merged to the core, this ugly bug will reappear again.

[annezazu]

I experienced this earlier this week but found it went away with beta 4 :D To be safe, went digging and found this. Either way, tagging in @ajlende to take a look! Thanks so much for reporting this.

[annezazu]

Noting I can still confirm this with 12.3 but only with certain themes. For example, TT2 and Tove work but with Blank Canvas duotone only shows up in the editor but not on the front end.

[simison]

@mcsf @youknowriad is this bug in someone's radar already? It's such a highlight feature that it's bummer to be broken for almost a month.

[ajlende]

It's on my radar. I've been focused on #37727, but have this in my queue next.

[nick6352683]

If I understand correctly this issue is now "fixed" and merged with Gutenberg 12.4. On my end however, the issue still exists, so it should be reopened. They only thing that my testing environment has changes, instead of testing with WP 5.8.2, I'm now using WP 5.9 RC3.

Here is a 35 second video proof.

https://www.youtube.com/watch?v=ZHPO8rRfqvM

[ajlende]

@nick6352683 unfortunately this didn't make it into 12.4, and it wasn't able to be backported for the initial WP 5.9 release because it depends of a more complicated change. However, it will be in Gutenberg 12.5 and WP 5.9.1 for sure.

[nick6352683]

@ajlende , Thanks for the update, I was confused from the Closure of this issue and the fixed being labeled as merged, and yet, I was still seeing the problem. Thanks for correcting me, and looking forward for the next series of updates.

[nick6352683]

Just a quick confirmation that Gutenberg 12.5.0-rc.1 fully fixes the issue for me... I can't thank you people enough, I can sleep well again !