Composite: use internal context to consume composite store

[ciampo]

What?

Use React context to make sure that Composite sub-components use the correct composite context

Why?

Since multiple ariakit components use composite stores in their internal implementation, sometimes sub-components can consume the wrong composite store (see #63569 (comment))

How?

Add a new context that holds a reference to the correct composite store. Subcomponents get the store from context instead of relying on Ariakit internals

Testing Instructions

• Make sure that all composite instances keep working as expected in Storybook and across the editor
• Apply changes from Composite: stabilize APIs #63569 and make sure that the regression described in Composite: stabilize APIs #63569 (comment) is fixed

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[tyxla]

LGTM 👍 🚀

I'd only add some documentation that includes that the store is passed down through context and should be consumed through useCompositeContext().

Also, let's make sure to update the instances that still provide store explicitly to Composite subcomponents, for example:

gutenberg/packages/block-directory/src/components/downloadable-block-list-item/index.js

Line 117 in 2c62c6a

store={ composite }

and

gutenberg/packages/dataviews/src/dataviews-layouts/list/index.tsx

Line 148 in 22e4cc2

store={ store }

[tyxla]

Let's document this so folks know that if they want to access the store inside a Composite, they can do it with the context.

[ciampo]

Added JSDocs and README section

[ciampo]

I'd only add some documentation that includes that the store is passed down through context and should be consumed through useCompositeContext().

I've added Context as an exported sub-component of Composite, and added relative JSDocs and README section. I won't export useCompositeContext for now because consumers can simply use React.useContext( Composite.Context ). We can always add the custom hook if we think it's necessary.

Also, let's make sure to update the instances that still provide store explicitly to Composite subcomponents, for example:

Passing store explicitly is indeed redundant after this PR. The changes that you suggest will be applied in #63569

[github-actions]

Flaky tests detected in b30b0c4.
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/10387982068
📝 Reported issues:

• [Flaky Test] Sorting #64430 in /test/e2e/specs/site-editor/new-templates-list.spec.js
• [Flaky Test] should not render Block Settings sections #64387 in /test/e2e/specs/widgets/customizing-widgets.spec.js