Block selectors API: use whole selectors for duotone

[oandregal]

What

Tentative fix for #49393 (comment)

Why

The Block Selectors API is meant to land in 15.5 but duotone works differently than any other selector. The global-level duotone style is also broken.

How

• The block selectors API for duotone takes the whole selector, not a partial one 17ab41d
• wp_get_block_css_selector returns the whole selector for duotone, even if the old API is in use 7f6b31d
• The duotone block-level is updated to work with whole selectors, not with partial ones 8fc3110

TODO

• Make it work in the front-end.
• Make it work in the post editor.
• Make it work in the site editor.

Test

• Create a post that contains two images (uses selectors.filter.duotone) and two cover blocks (supports.color.__experimentalDuotone).
• Block level duotone: set the purple-green duotone for one of the images and one of the covers.
• Global level duotone: go to the site editor > global styles > blocks. Set the midnight duotone for the image and cover blocks.

The expected result is that the blocks with block-level duotone have it applied and the other ones use the global-level duotone in any context (front-end, post editor, site editor).

No other img elements of the page have any duotone applied (check the user avatar at the top-right, for example).

[github-actions]

Flaky tests detected in dac72ae.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4553951873
📝 Reported issues:

• [Flaky Test] doesn't throw a block error when clicking on a link #47747 in /test/e2e/specs/site-editor/template-part.spec.js

[oandregal]

Current status in post editor:

• block-level duotone for image not working
• global-level duotone for cover not working

[oandregal]

I wish I hadn't to paste this here, but I need this to work differently than the WP_Theme_JSON_Gutenberg::scope_selector.

Ideas for a follow-up PR:

• Create a utility css_scope_selector( $scope, $selector ) function somewhere and make it work like this code (no spaces added).
• The consumer should be responsible for adding or not adding spaces:
  • css_scope_selector( $scope . ' ', $selector ) if the consumer wants spaces.
  • css_scope_selector( $scope . ' ', $selector ) if the consumer doesn't want spaces.

Thoughts?

[oandregal]

This could use the existing WP_Theme_JSON_Gutenberg::scope_selectors function, I guess. This function merits to be its own utility, given how much it has expanded: settings, duotone, WP_Theme_JSON class.

[oandregal]

This is something I found by reviewing the duotone code (not related to this PR):

gutenberg/lib/class-wp-duotone-gutenberg.php

Line 281 in 70198b9

$duotone_support = (bool) $duotone_selector;

[scruffian]

I think this is needed to enable the filter controls in the block toolbar.

[oandregal]

Closing in favor of #49423