Global styles don't work in the Featured Product and Featured Category blocks

[Aljullu]

To reproduce

1. Install a block theme.
2. Open Appearance > Site Editor.
3. Add a Featured Product and a Featured Category block.
4. Customize the global styles related to those blocks (click on the styles button on the top toolbar and then the Blocks section).

5. Notice the styles aren't applied.

Expected behavior

Global styles should work for those two blocks.

Additional context

According to this comment from @oandregal, the issue might be that we are not adding the correct class name to the blocks.

[danielwrobert]

Continuing to explore this but I'll share some initial findings after a first pass:

This comment from @oandregal (also linked above) states that these blocks use the wc-block-featured-product instead of the expected wp-block-woocommerce-featured-product class. What I'm seeing is that they use both classes - which is also consistent with the other blocks.

There are two key differences I've found with these two blocks and, for the sake of comparison, the Mini Cart block:

1. The structure of the blocks - these Featured blocks apply the wc-block-featured-product class to a child element of the main block container and the wp-block-woocommerce-featured-product class to the main container. The Mini Cart block applies both classes to the main block container.
2. There seems to be a missing CSS selector on these Featured blocks of .editor-styles-wrapper .wp-block-woocommerce-featured-product. Both of the classes are applied individually but they are not applied together, which is the selector that the Global Styles seem to use to apply the changes.

To give an example of the second point above, adding the following CSS block in Dev Tools will apply the expected Global Style visual adjustments in the editor:

.editor-styles-wrapper .wp-block-woocommerce-featured-product {
    background-color: var(--wp--preset--color--light-green-cyan);
    border-radius: 5px;
    border-color: #cf2e2e;
    border-width: 2px;
    border-style: solid;
    color: var(--wp--preset--color--vivid-purple);
}

I was viewing this with the following versions:

• WP 6.0.1
• WC 6.8.2 (also tested with 6.9.0 Beta 2)
• WC Blocks 8.4.0-dev (also tested with 8.3.1)

In my findings, this only seems to be an issue in the Editor (Beta) part of the admin. When adding the block to a Post or Page, you can see the applied Global Styles, as expected. I'm also seeing the styles applied on the frontend, when saved. See the following screenshots for additional details.

Frontend view of block added via Editor (Beta) vs via Page:

Template (Home)	Page

Admin/editor view of block added via Editor (Beta) vs via Page:

Template (Home)	Page

Editor (Beta) Template with CSS (added via Dev Tools) vs Mini Cart Block (for comparison):

Featured Product (modified)	Mini Cart (current state)

[danielwrobert]

After further exploration, it seems that the culprit is the __experimentalDuotone property on the Supports attribute for these blocks.

After removing the property, everything seems to work as expected.

I'm not sure if it's the direction we want to go but I've made a PR (#7000) to remove this property from both of the impacted blocks.

Note that these were the only two blocks in the repository using this experimental property.