Components: Deprecate outer margins

[mirka]

What problem does this address?

A lot of components currently have inherent outer margins, making it hard to reuse in different contexts since it requires a style override (often of an internal element). This kind of style override is something we want to discourage.

What is your proposed solution?

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

Components

Each component first needs a __nextHasNoMarginBottom prop to opt in, and then they also need to be officially deprecated after all in-repo usage has been migrated.

• AnglePickerControl
  • prop added AnglePickerControl: Add flag to remove bottom margin #43160
  • deprecated AnglePickerControl: Deprecate margin bottom #43867
  • hard deprecated AnglePickerControl: Hard deprecate bottom margin #58700
• BaseControl
  • prop added BaseControl: Add opt-in prop for margin-free styles #39325
  • deprecated Deprecate bottom margin on BaseControl-based components #64408
  • Components built with BaseControl tracked in BaseControl: Deprecate bottom margin #38730
• CustomGradientPicker
  • prop added (Custom)GradientPicker: Add flag to remove margins #43387
  • deprecated (Custom)GradientPicker: Remove and deprecate outer margins #43436
  • hard deprecated CustomGradientPicker: Hard deprecate outer margins #58699
• DuotonePicker (when duotonePalette={ [] } and unsetable={ false })
  • fix as bug DuotonePicker: Fix top margin when no duotone options #57489
• FontSizePicker FontSizePicker: Deprecate bottom margin #38720
  • prop added FontSizePicker: Add flag to remove bottom margin #43062
  • deprecated FontSizePicker: Deprecate bottom margin #43870
  • hard deprecated FontSizePicker: Hard deprecate bottom margin #58702
• GradientPicker
  • prop added (Custom)GradientPicker: Add flag to remove margins #43387
  • deprecated (Custom)GradientPicker: Remove and deprecate outer margins #43436
  • hard deprecated GradientPicker: Hard deprecate outer margins #58701
• FormTokenField (encountered here)
  • prop added FormTokenField: Add prop to remove bottom margin #48609
  • deprecated FormTokenField: Deprecate bottom margin #63491
  • hard deprecated

Block Editor Components

• LineHeightControl: Enhance interactions by migrating internals to NumberControl on Style options. #37160
• URLInput: Deprecate bottom margin #46692

(Component lists may not be exhaustive, please add)

---

✍️ Dev Note (WordPress 6.7 release)

Bottom margin styles are deprecated

A number of UI components currently ship with styles that give them 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 have gradually been deprecating these margins. A deprecation begins 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.7 release we will start logging deprecation warnings for the following components if they are not yet opting into the new margin-free styles:

• BaseControl
• CheckboxControl
• ComboboxControl
• DimensionControl
• FocalPointPicker
• FormTokenField
• 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 }
/>

[Ugoku]

I'm the developer of a plugin that uses several of these components in a Gutenberg block. What is the proper way of using a component with some margin at the bottom? Should I add a class to the components, or add a wrapper, or something else?

[mirka]

@Ugoku Good question!

We are in a somewhat transitional state right now, so most components injected into the Block Inspector will continue to have an automatic bottom margin (see #65191 for context).

Otherwise, feel free to do whatever makes sense for your use case — put them in a flexbox wrapper div with gap, or add your own class name to certain components.

[Ugoku]

Thanks for your reply @mirka ! If here's no preferred way, I will have a look to see what best suits us.