Block Inspector: Deprecate bottom margin on BaseControl components

[mirka]

What problem does this address?

The block inspector currently sets a margin bottom on all BaseControl components.

gutenberg/packages/block-editor/src/components/block-inspector/style.scss

Lines 13 to 19 in cf8aeba

	.components-base-control {
	margin-bottom: #{ $grid-unit-30 };
	&:last-child {
	margin-bottom: $grid-unit-10;
	}
	}

This was probably convenient at the time, when flexbox was yet to be widely available. Now, it is hindering our ability to use modern layout methods like flex and grid. And devs are going to need a way to space out elements that are not BaseControl-based anyway.

Some consumers are forced to override the margin added by the block inspector so they can handle their own layout:

gutenberg/packages/block-library/src/search/editor.scss

Lines 20 to 25 in 20a0eda

	.wp-block-search__inspector-controls {
	.components-base-control {
	// Counteract the margin added by the block inspector.
	margin-bottom: 0;
	}
	}

What is your proposed solution?

The pathway I have in mind at the moment is:

• Normalize the bottom margins. Normalize block inspector controls spacing #64526
• Add a __next prop and/or data attribute so certain container components can opt out of the automatic margin-bottom on BaseControl. Ideally we'd expose the prop only on InspectorControls and not on any @wordpress/components components.
• Figure out a standard way we can recommend to WP devs for spacing out their inspector controls. Is it VStack (not ideal because the current default spacing is 8px instead of the 16px we want in the inspector)? Is it a new, dedicated layout component (Implement a standard "controls grid" component for sidebar #43423)? To be decided.
• Migrate everything in the codebase.
• Deprecate the automatic margin-bottom on BaseControl.

[youknowriad]

@mirka Doing some triage, I've seen you're assigned to this issue. What's the next step here. Should we be slightly more aggressive now and try remove to go straight to the last step (removing the margins and the props). There might be some small visual regressions at times but it doesn't feel too concerning.

[mirka]

If we go straight to removing the margins, I think stuff in ToolsPanel will be fine, but controls laid out in Panels will lose their margins. I'll need to look into the severity of that within our codebase and see what the minimal approach is.