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.
Block Editor Components
(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:
BaseControlCheckboxControlComboboxControlDimensionControlFocalPointPickerFormTokenFieldRangeControlSearchControlSelectControlTextControlTextareaControlToggleControlToggleGroupControlTreeSelect
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 }
/>
✍️ Dev Note (WordPress 7.0 release)
Bottom margin styles have been removed
In WordPress 6.7, we began logging deprecation warnings for a number of UI components that shipped with built-in bottom margins. These components offered a __nextHasNoMarginBottom prop to opt into the new margin-free styles ahead of the removal.
As of WordPress 7.0, the deprecation cycle is complete. The bottom margins have been removed from the following components, and margin-free styles are now the permanent default:
@wordpress/components
BaseControlCheckboxControlComboboxControlFocalPointPickerFormTokenFieldRangeControlSearchControlSelectControlTextControlTextareaControlToggleControlToggleGroupControlTreeSelect
@wordpress/editor
PostTaxonomiesFlatTermSelector
The __nextHasNoMarginBottom prop is no longer functional and can be safely removed from your code. It will continue to be accepted without error to avoid breaking existing builds, but it has no effect.
If you were already setting __nextHasNoMarginBottom to true, no visual changes are expected. If you were relying on the built-in bottom margins, you will need to add your own spacing — for example, by wrapping the component in a container with appropriate gap styles.
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
__nextHasNoMarginBottomprop to opt in, and then they also need to be officially deprecated after all in-repo usage has been migrated.duotonePalette={ [] }andunsetable={ false })Block Editor Components
NumberControlon Style options. #37160(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:
BaseControlCheckboxControlComboboxControlDimensionControlFocalPointPickerFormTokenFieldRangeControlSearchControlSelectControlTextControlTextareaControlToggleControlToggleGroupControlTreeSelectTo start opting into the new margin-free styles, set the
__nextHasNoMarginBottomprop totrue.✍️ Dev Note (WordPress 7.0 release)
Bottom margin styles have been removed
In WordPress 6.7, we began logging deprecation warnings for a number of UI components that shipped with built-in bottom margins. These components offered a
__nextHasNoMarginBottomprop to opt into the new margin-free styles ahead of the removal.As of WordPress 7.0, the deprecation cycle is complete. The bottom margins have been removed from the following components, and margin-free styles are now the permanent default:
@wordpress/componentsBaseControlCheckboxControlComboboxControlFocalPointPickerFormTokenFieldRangeControlSearchControlSelectControlTextControlTextareaControlToggleControlToggleGroupControlTreeSelect@wordpress/editorPostTaxonomiesFlatTermSelectorThe
__nextHasNoMarginBottomprop is no longer functional and can be safely removed from your code. It will continue to be accepted without error to avoid breaking existing builds, but it has no effect.If you were already setting
__nextHasNoMarginBottomtotrue, no visual changes are expected. If you were relying on the built-in bottom margins, you will need to add your own spacing — for example, by wrapping the component in a container with appropriate gap styles.