Filter (duotone) setting set to a block type in theme.json is rendered to the wrong elements on server side

[matiasbenedetto]

Description

When you define a block filter in theme.json, the output CSS is not written using the right selectors, so the filter ends up applied to the main block element instead the one indicated in block.json.

This causes several problems, for example:

• Discrepancies between what is shown in the editor and the public version of the post.
• Overriding the default filter/duotone using the editor has an unexpected result.

Step-by-step reproduction instructions

1. Use Skatepark or another theme with default duotone filters applied to some blocks such as Image and Cover.
2. Create a new post and add an Image block, and also a Cover Block.
3. Select a different duotone filter for each of those blocks recently added.
4. Save and see the public version of the post (pay attention to the discrepancies between the editor and the public version).

Screenshots, screen recording, code snippet

Comparison. To the left is the editor and to the right is the public version of the post:

Step by step video:

default.duotone.mp4

Environment info

• Wordpress 6.0
• Latest Gutenberg trunk branch

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

[matiasbenedetto]

Potential fix here: #41335

[annezazu]

@matiasbenedetto looks like your fix was merged! I'm going to close this issue as a result. Let me know if this needs to be reopened.