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

[ciampo]

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:

• BaseControl
• Composite
• CustomSelectControl (internal implementation)
• ItemGroup
• Menu
• SlotFill
• Tabs
• ToggleGroupControl
• Toolbar

[ciampo]

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

[tyxla]

Perhaps SlotFill qualifies as well:

gutenberg/packages/components/src/slot-fill/bubbles-virtually/slot-fill-context.ts

Lines 16 to 21 in 9725060

	registerSlot: () => {
	warning(
	'Components must be wrapped within `SlotFillProvider`. ' +
	'See https://developer.wordpress.org/block-editor/components/slot-fill/'
	);
	},