BaseControl: Support accessible, flexible layouts

[mirka]

What problem does this address?

We are running into issues where we want to tweak the layout of the help text, or reuse just the styles of the help text. Currently, it requires CSS overrides of BaseControl internals, or copy-pasting styles.

What is your proposed solution?

For example, export a BaseControl.VisualHelp like we do with BaseControl.VisualLabel. This must be accompanied by clear accessibility guidance in the docs. This is just a potential solution, there may be better solutions.

[ciampo]

https://github.com/WordPress/gutenberg/pull/61382#issuecomment-2240017470 is another example of the need for BaseControl to me more flexible.

Ideally, I'd love to reach a point where:

• BaseControl is flexible enough to be used on all controls, for maximum consistency
• BaseControl can handle composed / multiple / nested controls (see https://github.com/WordPress/gutenberg/issues/42630)

What do you think of those goals?

How can we balance short and long term goals?

[ciampo]

Couple more feedback items:

• StyledHelp comes with a top margin, which makes it less easy to drop in other components. We should ideally move spacing between components to dedicated grid/flex parents, instead of using margin
• BaseControl should be more flexible about allowing consumers to read/write IDs used to label/describe inputs (comment)

[ciampo]

Another note: if we plan for BaseControl's individual component to be used independently (like we do in a bunch of places for StyledLabel and StyledHelp), we should reduce any differences caused by rendering such components in isolation vs when they're rendered in BaseControl.

One example is how white space is not trimmed around StyledLabel (see https://github.com/WordPress/gutenberg/issues/63886#issuecomment-2247336435)