WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.49k stars 4.18k forks source link

Compound components: throw when subcomponents are not children of their top-level component #66530

Open ciampo opened 4 days ago

ciampo commented 4 days ago

Compound components enable greater flexibility and modularity, at the cost of a slightly added complexity for the consumer.

One of the most frequent mistakes that we witness is when consumers render a subcomponent outside of its compound component's "context" — for example, rendering a Composite.Item without nesting it under a Composite item.

While we want to help consumers in several ways, including proving better documentation and examples, one (complementary) approach is to have compound components throw when they are not rendered inside the relative top-level component.

We should, therefore, implement this standard behaviour across all compound components in the @wordpress/components library:

ciampo commented 4 days ago

@WordPress/gutenberg-components let's collaborate on writing down a complete list of all components that should be affected by this change.

tyxla commented 3 days ago

Perhaps SlotFill qualifies as well:

https://github.com/WordPress/gutenberg/blob/9725060a5b18904c6cc5fdbe4b06fbde7419e02c/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts#L16-L21