Duotone images disappear in non-block themes on Firefox, filter not applied on Chrome and Safari

[piermario]

Description

While testing patterns and filters on a fresh 5.9 installation, I added this gallery pattern and applied a Duotone filter on each picture. When I switched from Twenty Twenty-Two to Twenty Twenty and Twenty Twenty-one (that's a lot of Twenties, sorry!) to check if the image blocks were rendered correctly, I noticed that images with a Duotone filter are:

• not shown at all on Firefox
• shown but without the Duotone filter.

The same thing happens with a cover image block. (see gif and screenshot below)

Step-by-step reproduction instructions

1. Add an image block or gallery pattern (I added this one).
2. Apply Duotone filter to an image block or cover
3. View the page using Twenty Twenty-Two theme
4. Switch to an earlier, non-block based theme and view the page. (I tested this on TT21 and TT20)

Screenshots, screen recording, code snippet

Gallery Pattern
https://jumpshare.com/v/OfrhMVFvLZzGTG4bjdvk

Cover Block
https://jumpshare.com/v/DUkULwfiTyTPqZuJvg3b

Browser comparison
https://jumpshare.com/v/0Zx827eh7dl3wkM5aMoE

Environment info

• WordPress 5.9, Gutenberg12.4.1, Twenty Twenty / Twenty Twenty-One

• Firefox Developer Edition 97.0b6 (images not shown)

• Chrome Version 97.0.4692.99 (Official Build) (x86_64) > Duotone filter not applied

• Safari Version 15.1 (17612.2.9.1.20) > Duotone filter not applied

• MacBook Pro with macOS Monterey 12.0.1 (21A559)

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

[annezazu]

This is solved by a PR that will make it into 5.9.1. More information here: #37598 (comment)

[piermario]

Thanks @annezazu! :)