Duotone filter not showing on Covers inside Query Loops

[henriqueiamarino]

Description

As I am exploring different ways to use Cover blocks I may have found a possible bug. I am using Covers inside Query loops (Query loops > Post template > Cover) and duotone filters set to those covers do not show in Frontend site.
While previewing in the Editor they are there but once published the site they're gone.

The issue is repeated in two different sites, both Jazzers and Nested.

We had a discussion about it on this Slack thread but we couldn't get to a solution.

Step-by-step reproduction instructions

1. Create a group on the root and add a Query Loop to it;
2. Inside Post Template add a Cover and pull the post content into this cover;
3. Add a duotone filter to this Cover. Please test with duotones available on preset and custom colors;
4. Check the published site.

Screenshots, screen recording, code snippet

Check the site here: https://jazzers.mystagingwebsite.com/

Environment info

• WordPress 6.2.2, Gutenberg 15.8.1
• Create Block Theme generated theme called Jazzers

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

[mrfoxtalbot]

Mmmm... I tried to replicate this but it seems to be working correctly on my end. Here's an example from one of my testing sites:

https://twentytwenty.mystagingwebsite.com/2023/

Any thoughts on what could I be missing @henriqueiamarino? Thank you!

[henriqueiamarino]

I really have no clue @mrfoxtalbot. I'll attach some thoughts from a teammate in a conversation we had a couple of days ago. In time, did you try some custom colors instead of this Blue and Red available on preset?

[mrfoxtalbot]

Thank you @henriqueiamarino. So it does sound like Joen can replicate it, right? 🤔

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[jordesign]

@henriqueiamarino @jasmussen Just checking back on this to see if you're still able to recreate this issue with the Cover Block?

[henriqueiamarino]

@mrfoxtalbot @jordesign I'd appreciate it if you could test the theme and see if there's something you can do. No, it is not fixed; the duotones are there while you use the Editor but still doesn't work on the frontend.
Here's the theme design: jazzers.zip

I remember @jasmussen mentioned an issue here. Can I actively do something to fix this?

[henriqueiamarino]

In time, I discovered that once I disable Fixed background and Repeat background on Media Settings, the duotones show up on the frontend. It's not a fix but it's good enough to be shipped — and I'll do that.

[jasmussen]

Hmm that's curious, I can still use a cover image with a duotone background that is fixed position in my blink and safari browsers. 🤔

[iamtakashi]

The duotone filter seems to be broken when the cover block uses a featured image with a fixed background setting on. The breakage appears only on the front of the site. It works in the editor.

The selectors to apply the filter don't catch the markup in that case (using the F.I. + fixed background.)

[jasmussen]

@ajlende any instincts on what might be going on here? Thanks for looking.

[annezazu]

Noting that I just ran into this too and it's such a bummer! Was using a really cool theme and now I am torn about whether to use it without this as an option. Would love to see a fix.