Duotone: Fix CSS Selectors rendered by theme.json duotone/filter settings for blocks on public pages

[matiasbenedetto]

What?

This PR fixes the selectors rendered in the CSS generated by the theme.json filter/duotone settings for block types.
The issue is described here: #41333

Why?

Currently, we are rendering all the CSS generated on the server based on theme.json block styles pointing to a single CSS selector targeting the main block container element. This situation causes the problems described in the issue. This change filters the definition to render the CSS regarding filter to the selector defined by the block definition.

The fix is necessary to avoid:

• 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.

How?

The change introduced here filters the CSS rules to be able to write different CSS selectors. A selector for the main block container and a selector for the duotone element indicated in the block definition (block.json).

Testing 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.

Screenshots or screencast

Before (left: editor, right: public post):

After (left: editor, right: public post):

[scruffian]

This is looking good but I think these rules are duplicated from another function. Can we extract them to a shared function?

[scruffian]

I don't think we should do this by changing what's in the 6.0 compat folder as these changes have already shipped in 6.0. Instead we need to make the changes in 6.1. I think that means redefining get_block_classes to call get_styles_for_block in wp-class-theme-json-6-1.php...

[matiasbenedetto]

😃 Thanks for the review!

[scruffian]

Thanks for persevering. LGTM