BaseControl: Connect to context system

[mirka]

Prerequisite for #56524

What?

Connects the BaseControl component to the context system.

Why?

These days we only connect components to the context system when we specifically need to, and there was a use case for it in #56524.

InputControl uses a BaseControl under the hood, which has __nextHasNoMarginBottom permanently set to true because InputControl never shipped with a margin bottom. However, we are in the process of reimplementing SearchControl with an InputControl, and SearchControl does in fact require an option for a backward compatible margin bottom.

Although we could theoretically add a "hidden" (hidden from docs) margin toggle prop to InputControl, that would be heavy-handed because this is likely the only time we're going to need it. I think contextConnect is the most generic and non-intrusive way to solve this.

Testing Instructions

In Storybook and in your IDE, smoke test the TS types for BaseControl, BaseControl.VisualLabel, and a few other context-connected components to see that they appear as expected.

[mirka]

The changes in this file adds a new use case that was previously unsupported in the WordPressComponentProps type. It can now be used when the component does not pass through the rest props to an underlying element, i.e. when it does not blanket inherit types from an HTML element type. This can now be expressed as WordPressComponentProps< MyProps, null >.

Usually there is no reason to even use the WordPressComponentProps utility type in this case. But it turns out that the way contextConnect() infers its return type relies on the fact that the component prop types were created using WordPressComponentProps.

So I think this is currently the simplest way to get contextConnect() to return the correct component type.

[mirka]

Removed this because the context system actually adds the CSS class for us 😳

gutenberg/packages/components/src/context/use-context-system.js

Lines 53 to 56 in 1f9b753

	const classes = cx(
	getStyledClassNameFromKey( namespace ),
	props.className
	);

[ciampo]

🚀