This post lists notable changes to the @wordpress/components package for the WordPress 6.8 release.
Table of Contents
RadioGroup: Log deprecation warning
The RadioGroup component has been deprecated. To be consistent with the current WordPress design system, use RadioControl or ToggleGroupControl instead.
For more information visit #68067.
Navigation: Prepare for hard deprecation
The Navigation component (and all its subcomponents) are deprecated, planned for hard removal in WordPress 7.1. Use the Navigator component instead.
For more information, visit #68158.
SearchControl: Deprecated onClose prop
This prop was originally intended for adding a custom click handler to the suffix button to close the search field entirely, rather than just clear the input value.
The pattern of repurposing the search clear button as a search close button is no longer used in WordPress, and is no longer recommended as a UI User interface pattern since it can be confusing to users.
If you were relying on this prop, we recommend adding a separate close button to your UI.
For more information, visit #65988.
The ButtonGroup component has been deprecated, as it can easily lead to accessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues. For simpler adherence to accessibility best practices and to be consistent with the current WordPress design system, use ToggleGroupControl instead.
For more information, visit #65429.
Default 36px sizes are now deprecated
UI components across the editor (input fields, buttons, etc.) are currently rendering in a range of heights between 30px and 40px. To add consistency and visual polish to the editor’s UI, we started working on standardizing components toward a default height of 40px.
Continuing the standardization effort started in previous releases, for the WordPress 6.8 release, we will start logging deprecation warnings for the following components if they are not yet opting into the new default size:
BorderBoxControlBorderControlBoxControlComboboxControlCustomSelectControlDimensionControlFontAppearanceControlFontFamilyControlFontSizePickerFormFileUploadFormTokenFieldInputControlLineHeightControlNumberControlRadioRangeControlSelectControlTextControlToggleGroupControlTreeSelectUnitControl
To start opting into the new 40px default height, set the __next40pxDefaultSize prop.
<SelectControl
options={ selectOptions }
value={ selectValue }
label={ __( 'Label' ) }
onChange={ onSelectChange }
__next40pxDefaultSize
/>
For more information, visit #65751.
The close button in the Modal component has been enlarged from the “small” button size (24px) to use the “compact” button size (32px).
If you are using the headerActions prop to inject buttons beside the close button, we recommend you also use the “compact” button size variant to match.
<Modal
headerActions={ <Button icon={ fullscreen } label="Fullscreen mode" size="compact" /> }
/>
For more information, visit #66792.
Reducing experimental APIs
Stabilized BorderBoxControl
The __experimentalBorderBoxControl component can now be imported as BorderBoxControl.
The legacy __experimentalBorderBoxControl export is marked as deprecated.
For more information, visit #65586.
Stabilized BorderControl
The __experimentalBorderControl component can now be imported as BorderControl.
The legacy __experimentalBorderControl export is marked as deprecated.
For more information, visit #65475.
Stabilized BoxControl
The __experimentalBoxControl component can now be imported as BoxControl.
The legacy __experimentalBoxControl export is marked as deprecated.
For more information, visit #65469.
Stabilized Navigator
The legacy set of __experimentalNavigator* APIs is deprecated and should instead be imported as Navigator. All of the sub-components are also available via the Navigator namespace.
Moreover, the __experimentalNavigatorToParentButton component and the goToParent method available via the __experimentalUseNavigator hook are now deprecated, and they now behave identically to the __experimentalNavigatorBackButton and the goBack method.
To recap:
__experimentalNavigatorProvider => Navigator__experimentalNavigatorScreen => Navigator.Screen__experimentalNavigatorButton => Navigator.Button__experimentalNavigatorBackButton => Navigator.BackButton__experimentalNavigatorToParentButton => Navigator.BackButton__experimentalUseNavigator => useNavigator
Co-authored by @mamaduka, @mciampini.
Props @mirka @jeffpaul @mamaduka for review.
#6-8, #dev-notes, #dev-notes-6-8
