BaseControl: Deprecate bottom margin

[mirka]

What problem does this address?

The BaseControl component currently has an inherent margin-bottom, making it hard to reuse in different contexts, since it requires a style override of an internal element. This kind of internal override is something we want to discourage.

Additionally, the current margin-bottom leads to inconsistent results when help text is supplied, because the margin is inserted before and not after the help text.

What is your proposed solution?

Deprecate the bottom margin (similar to #37160), following the guidelines stipulated in the devdocs.

Because this change impacts a large number of components (even just inside the Gutenberg codebase), I suggest we approach this in phases:

• 1. Add a __nextHasNoMarginBottom prop to BaseControl to opt-in to the correct styles, without adding a deprecation warning
  • BaseControl BaseControl: Add opt-in prop for margin-free styles #39325
  • CheckboxControl CheckboxControl: Add flag to remove bottom margin #43720
  • ComboboxControl ComboboxControl: Add flag to remove bottom margin #43165
  • DimensionControl DimensionControl: Add flag to remove bottom margin #64346
  • FocalPointPicker FocalPointControl: Add flag to remove bottom margin #43996
  • RadioControl (cleanup of ad hoc override styles) RadioControl: Clean up CSS #43868
  • RangeControl FontSizePicker: Add flag to remove bottom margin #43062
  • SearchControl SearchControl: Convert to TypeScript and add flag to remove bottom margin #43871
  • SelectControl Allow removing bottom margin from SelectControl #41269
  • TextControl TextControl, TextareaControl: Add flag to remove bottom margin #43782
  • TextareaControl TextControl, TextareaControl: Add flag to remove bottom margin #43782
  • ToggleControl (also tweak spacing before help text) ToggleControl: Convert to TypeScript #43717
  • ToggleGroupControl FontSizePicker: Add flag to remove bottom margin #43062
  • TreeSelect (Based on SelectControl)
• 2. Migrate all usages in the Gutenberg codebase (some components may require official deprecations)
  • CheckboxControl CheckboxControl: replace margin overrides with new opt-in prop #45434
  • ComboboxControl ComboboxControl: add new opt-in prop #45796
  • FocalPointPicker FocalPointPicker: add new opt-in prop #45958
  • RadioControl (cleanup of adhoc override styles) RadioControl: Clean up CSS #43868
  • RangeControl RangeControl: remove margin override and add new opt-in prop #45985
  • SearchControl SearchControl: remove margin overrides and add new opt-in prop #46081
  • SelectControl SelectControl: remove margin overrides and add new opt-in prop #46448
  • TextControl
    • TextControl: remove margin overrides and add new opt-in prop (pt 1/2) #47157
    • TextControl: remove margin overrides and add new opt-in prop (pt 2/2) #47158
    • Migrate from TextControl to NumberControl to remove margin overrides #47160
    • Migrate from TextControl to InputControl to remove margin overrides #47161
  • TextareaControl TextareaControl: add new opt-in prop #46559
  • ToggleControl ToggleControl: remove margin overrides and add opt-in prop #47866
  • ToggleGroupControl ToggleGroupControl: add new opt-in prop #47269
  • TreeSelect (Based on SelectControl) TreeSelect: remove margin overrides and add new opt-in prop #47515
  • Other usages in Block Editor, Block Library, and Edit Site packages (TBD)
    • URLInput URLInput: Deprecate bottom margin #46692
    • FontFamilyControl FontFamilyControl: Deprecate bottom margin #64280
• 3. Add eslint rules to prevent backslides within the Gutenberg codebase
  • BaseControl Add margin-bottom lint rules for BaseControl #64355
  • CheckboxControl Add margin-bottom lint rules for CheckboxControl, ComboboxControl, SearchControl #63679
  • ComboboxControl Add margin-bottom lint rules for CheckboxControl, ComboboxControl, SearchControl #63679
  • DimensionControl DimensionControl: Add flag to remove bottom margin #64346
  • FocalPointPicker Add margin-bottom lint rules for FocalPointPicker, TextareaControl, TreeSelect #63633
  • RangeControl Add margin-bottom lint rules for RangeControl #63821
  • SearchControl Add margin-bottom lint rules for CheckboxControl, ComboboxControl, SearchControl #63679
  • SelectControl Add margin-bottom lint rules for SelectControl #64283
  • TextControl Add margin-bottom lint rules for TextControl #64212
  • TextareaControl Add margin-bottom lint rules for FocalPointPicker, TextareaControl, TreeSelect #63633
  • ToggleControl Add margin-bottom lint rules for ToggleControl #64213
  • ToggleGroupControl Add margin-bottom lint rules for ToggleGroupControl #63960
  • TreeSelect Add margin-bottom lint rules for FocalPointPicker, TextareaControl, TreeSelect #63633
• 4. Add an official deprecation warning for BaseControl, with a relatively long grace period Deprecate bottom margin on BaseControl-based components #64408

✍️ Dev Note (WordPress 6.2 release)

A number of UI components currently ship with styles that give them top and/or bottom margins. This can make it hard to reuse them in arbitrary layouts, where you want different amounts of gap or margin between components.

To better suit modern layout needs, we will gradually deprecate these outer margins. A deprecation will begin with an opt-in period where you can choose to apply the new margin-free styles on a given component instance. Eventually in a future version, the margins will be completely removed.

Continuing the effort started in previous releases, for the WordPress 6.2 release we focused on the BaseControl component and its consumers. While the effort is still ongoing, the outer margins on the following components have been deprecated.

• BaseControl
• CheckboxControl
• ComboboxControl
• FocalPointPicker
• RadioControl
• RangeControl
• SearchControl
• SelectControl
• TextControl
• TextareaControl
• ToggleControl
• ToggleGroupControl
• TreeSelect

To start opting into the new margin-free styles, set the __nextHasNoMarginBottom prop to true.

<SelectControl
  options={ selectOptions }
  value={ selectValue }
  label={ __( 'Label' ) }
  onChange={ onSelectChange }
  __nextHasNoMarginBottom={ true }
/>

We're in the process of migrating all internal usages to use the new __nextHasNoMarginBottom prop. Once all usages are migrated, an official deprecation will be added to the BaseControl component

[ciampo]

Just flagging that, with #41269, the __nextHasNoMarginBottom prop was added to the SelectControl component.

[ciampo]

Related:

• Block Inspector: Margin bottom applied to BaseControls affects layout of some components #49796