MVP: Attribute filter block powered interactivity API

[dinhtungdu]

What

Partial fixes #10812

This PR adds the initial version of the new attribute filter block powered by Interactivity API. This MVP supports:

• Display product count.
• Filter conditions.
• Display style: Dropdown/List.
• Multiple/single selections ( Dropdown hasn't supported multiple selections yet).

Testing Instructions

Please consider any edge cases this change may have, and also other areas of the product this may impact.

1. Add the Collection Filters block to the Product Collection block.
2. Add the Collection Attribute Filter block to the Collection Filters block.
3. If the site doesn't have any attributes, see the warning informing the merchant.
4. If the site has attributes, see the attribute selector.
5. Select the attribute > Done.
6. See the attribute list loading.
7. Try sidebar settings, see the editor preview react with the change.
8. Save and see the setting applied on the frontend.
9. Ensure other new filter blocks work together.

• Do not include in the Testing Notes
• Should be tested by the development team exclusively

WooCommerce Visibility

Required:

• WooCommerce Core
• Feature plugin
• Experimental
• N/A

Checklist

Required:

• This PR has either a [type] label or a [skip-changelog] label.
• This PR is assigned to a milestone.

Conditional:

• This PR has a UI change and has been cross-browser tested at different viewport sizes on both the frontend and in the editor.
• This PR has a changelog description (if [skip-changelog] label is not present).
• This PR adds/removes a feature flag & I've updated this doc.
• This PR adds/removes an experimental interfaces, and I've updated this doc.
• This PR has been accessibility tested.
• This PR has had any necessary documentation added/updated.

Changelog

Add suggested changelog entry here.

[samueljseay]

The code is looking good. For some reason in testing I couldn't see front-end rendering. Not sure what is going on, I will debug tomorrow.

Anyway for the code aspect everything looks pretty good to me. I had one mention about the deepEqual. I will leave to you what you think is best to do there.

[dinhtungdu]

@samueljseay I added some notices to inform merchant when there isn't any products has the selected attribute as well as when there is no attribute selected. Can you please take another look at this?

[samueljseay]

Nit pick from me, otherwise looks good 🚢

[samueljseay]

This utility type is for optional children, is children optional here?

If children is mandatory and also you have no other props this could just be typed as:

Suggested change

	}: React.PropsWithChildren ) => (
	}: { children: ReactNode } ) => (