- Components: Fix
Slot
/Fill
EmotionStyleProvider
(#38237) - Reduce height and min-width of the reset button on
ComboBoxControl
for consistency. (#38020) - Removed unused
rememo
dependency (#38388). - Added
__unstableInputWidth
toUnitControl
type definition (#38429). - Fixed typing errors for
ColorPicker
(#38430). - Updated destructuring of
Dropdown
props to be TypeScript friendly (#38431). - Added
ts-nocheck
toColorIndicator
so it can be used in typed components (#38433). - Added
cx
as a dependency ofuseMemo
across the whole package, in order to recalculate the classnames correctly when a component is rendered across more than oneStyleProvider
(#38541).
- Update the visual design of the
Spinner
component. (#37551) TreeGrid
accessibility enhancements around the expand/collapse functionality. (#38358)TreeGrid
accessibility: improve browser support for Left Arrow focus to parent row in child row. (#38639)TreeGrid
accessibility: Add Home/End keys for better keyboard navigation. (#38679)- Add
resolvePoint
prop toFocalPointPicker
to allow updating the value of the picker after a user interaction (#38247)
Navigator
: renamepush
/pop
togoTo
/goBack
(#38582)
- Refine
ExternalLink
to be same size as the text, to appear more as a glyph than an icon. (#37859) - Updated
ToolsPanel
header icon to only show "plus" icon when all items are optional and all are currently hidden (#38262) TreeGrid
: Fix keyboard navigation for expand/collapse table rows in Firefox (#37983)
- Update
ToggleGroupControl
background active state to use a simple background color instead of animated backdrop (38008) - Update label spacing for the
BoxControl
,CustomGradientPicker
,FormTokenField
,InputControl
, andToolsPanel
components to use a bottom margin of8px
for consistency. (#37844) - Add missing styles to the
BaseControl.VisualLabel
component. (#37747) - Prevent keyDown events from propagating up in
CustomSelectControl
(#30557) - Mark
children
prop as optional inSelectControl
(#37872) - Add memoization of callbacks and context to prevent unnecessary rerenders of the
ToolsPanel
(#38037) - Fix space between icons and rail
RangeControl
(#36935) - Increase z-index of
ConfirmDialog
to render on top of parentPopover
components (#37959)
- Add basic history location support to
Navigator
(#37416). - Add focus restoration to
Navigator
(#38149).
- Reinstated the ability to pass additional props to the
ToolsPanel
(#36428). - Added an
__unstable-large
size variant toInputControl
,SelectControl
, andUnitControl
for selective migration to the larger 40px heights. (#35646). - Fixed inconsistent padding in
UnitControl
(#35646). - Added support for RTL behavior for the
ZStack
'soffset
prop (#36769) - Fixed race conditions causing conditionally displayed
ToolsPanelItem
components to be erroneously deregistered (#36588). - Added
__experimentalHideHeader
prop toModal
component (#36831). - Added experimental
ConfirmDialog
component (#34153). - Divider: improve support for vertical orientation and RTL styles, use start/end logical props instead of top/bottom, change border-color to
currentColor
(#36579). ToggleGroupControl
: Avoid callingonChange
if radio state changed from an incoming value (#37224).ToggleGroupControl
: fix the computation of the backdrop dimensions when rendered in a Popover (#37067).- Add
__experimentalIsRenderedInSidebar
property to theGradientPicker
andCustomGradientPicker
. The property changes the color popover behavior to have a special placement behavior appropriate for sidebar UI's. - Add
first
andlast
classes to displayedToolsPanelItem
group within aToolsPanel
(#37546)
- Fixed spacing between
BaseControl
fields and help text within theToolsPanel
(#36334) - Replaced hardcoded blue in
ColorPicker
with UI theme color (#36153). - Fixed empty
ToolsPanel
height by correcting menu button line-height (#36895). - Normalized label line-height and spacing within the
ToolsPanel
(36387) - Remove unused
reakit-utils
from peer dependencies (#37369). - Update all Emotion dependencies to the latest version to ensure they work correctly with React types (#37365).
DateTimePicker
: Fix the date format associated to theis12Hour
prop (#37465)- Allowed
ToolsPanel
to register items whenpanelId
isnull
due to multiple block selection (37216).
- Wrapped
Modal
in aforwardRef
call (#36831). - Refactor
DateTime
class component to functional component (#36835) - Unify styles for
ColorIndicator
with how they appear in Global Styles (#37028) - Add support for rendering the
ColorPalette
in aDropdown
when opened in the sidebar (#37067) - Show an incremental sequence of numbers (1/2/3/4/5) as a label of the font size, when we have at most five font sizes, where at least one the them contains a complex css value(clamp, var, etc..). We do this because complex css values cannot be calculated properly and the incremental sequence of numbers as labels can help the user better mentally map the different available font sizes. (#37038)
- Add support for proper borders to color indicators (#37500)
- Refactor
SuggestionsList
class component to functional component(#36924)
- Improve accessibility and visibility in
ColorPallete
(#36925)
- Fix missing version information in
CHANGELOG.md
.
- Fixed
GradientPicker
not displayingCustomGradientPicker
when no gradients are provided (#36900). - Fixed error thrown in
ColorPicker
when used in controlled state in color gradients (#36941). - Updated readme to include default value introduced in fix for unexpected movements in the
ColorPicker
(#35670). - Added support for the legacy
extraSmall
value for thesize
prop in theCard
component (#37097).
- Added a
showTooltip
prop toToggleGroupControlOption
in order to display tooltip text (using<Tooltip />
). (#36726).
- Fixed a bug which prevented setting
PM
hours correctly in theDateTimePicker
(#36878).
- Remove erroneous use of
??=
syntax frombuild-module
.
- Updated the
ColorPalette
andGradientPicker
components to the latest designs (#35970).
- Updated the
ToolsPanel
to useGrid
internally to manage panel layout (#35621). - Added experimental
__experimentalHasMultipleOrigins
prop to theColorPalette
andGradientPicker
components (#35970).
- Added support for
step="any"
inNumberControl
andRangeControl
(#34542).
- Removed the separator shown between
ToggleGroupControl
items (#35497). - The
ColorPicker
component propertyonChangeComplete
, a function accepting a color object, was replaced with the propertyonChange
, a function accepting a string on (#35220). - The property
disableAlpha
, was removed from theColorPicker
component. Use the new opposite propertyenableAlpha
instead (#35220).
- Removed the
fieldset
wrapper from theFontAppearanceControl
component (35461). - Refactored the
ToggleGroupControl
component's structure and embeddedToggleGroupControlButton
directly intoToggleGroupControlOption
(#35600). - Added support for showing an experimental hint in
CustomSelectControl
(#35673).
- The
color
property atinycolor2
color object passed ononChangeComplete
property of theColorPicker
component was removed. Please use the newonChange
property that accepts a string color representation (#35562).
- Removed the deprecated
position
andmenuLabel
from theDropdownMenu
component (#34537). - Removed the deprecated
onClickOutside
prop from thePopover
component (#34537). - Changed
RangeControl
component to not applyshiftStep
to inputs from its<input type="range"/>
(35020). - Removed
isAction
prop fromItem
. The component will now rely ononClick
to render as abutton
(35152).
- Add an experimental
Navigator
components (#34904) as a replacement for the previousNavigation
related components. - Update the
ColorPicker
component to the latest design (#35220)
- Fixed rounding of value in
RangeControl
component when it loses focus while theSHIFT
key is held. (#35020).
- Deleted the
createComponent
utility function (#34929). - Deleted the
useJumpStep
utility function (#35561).
- Removed a min-width from the
DropdownMenu
component, allowing the menu to accommodate thin contents like vertical tools menus (#33995).
- Fixed RTL styles in
Flex
component (#33729). - Fixed unit test errors caused by
CSS.supports
being called in a non-browser environment (#34572). - Fixed
ToggleGroupControl
's backdrop not updating when changing theisAdaptiveWidth
property (#34595).
- Renamed
PolymorphicComponent*
types toWordPressComponent*
(#34330).
- Updated the visual styles of the RangeControl component (#33824).
- Add
hideLabelFromVision
prop toRangeControl
(#33714).
- Listen to
resize
events correctly inuseBreakpointIndex
. This hook is used inuseResponsiveValue
and consequently in theFlex
andGrid
components (#33902)
- Upgraded React components to work with v17.0 (#29118). There are no new features in React v17.0 as explained in the blog post.
isScrollable
prop inCardBody
default value changed fromtrue
tofalse
(#33490)
- Added back
box-sizing: border-box
rule toCardBody
,CardHeader
andCardFooter
components #33511.
- Update the border color used in
CardBody
,CardHeader
,CardFooter
, andCardDivider
to a different shade of gray, in order to match the color used in other components (#32566).
isPrimary
,isSecondary
,isTertiary
andisLink
props inButton
have been deprecated. Usevariant
instead (#31713).isElevated
prop inCard
has been deprecated. Useelevation
instead (#32566).
Card
,CardBody
,CardHeader
,CardFooter
,CardMedia
, andCardDivider
components have been re-written from the ground up (#32566).
- Drop support for Internet Explorer 11 (#31110). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
- Increase the minimum Node.js version to v12 matching Long Term Support releases (#31270). Learn more at https://nodejs.org/en/about/releases/.
- The experimental
Text
component has been completely re-written and enhanced with truncation support and separate variant, size, and weight props to allow for greater control. The previousvariant
prop has been completely removed.
isReversed
prop inFlex
component has been deprecated. Usedirection
instead (#31297).
Flex
,FlexBlock
, andFlexItem
components have been re-written from the ground up (#31297).
onChange
prop ofFocalPointPicker
is called at the end of drag operations. Previously, it was called repetitively while dragging.
- Supports ref forwarding in
withNotices
andResizableBox
. - Adds
onDrag
prop ofFocalPointPicker
.
- Allows focus of the
FocalPointPicker
draggable area and adjustment with arrow keys. This was added in #22531 but was no longer working.
- ComboboxControl: Deburr option labels before filter
- Introduce support for other units and advanced CSS properties on
FontSizePicker
. Provided the value passed to theFontSizePicker
is a string or one of the size options passed is a string, onChange will start to be called with a string value instead of a number. On WordPress usage, font size options are now automatically converted to strings with the default "px" unit added.
- Add
ToolbarItem
component. - Support
label
prop on theToolbar
component.
- Deprecate the
Toolbar
component when used without thelabel
prop.ToolbarGroup
should be used instead.
NumberControl
no longer automatically transforms values when renderingvalue
into a<input />
HTML element.Dashicon
component no longer renders SVGs. If you rely on this component, make sure to load the dashicon font.
- Fix and issue that would cause the
Popover
component to throw an error under certain circumstances (#22264).
- The
Guide
component no longer supports passing pages as children. Use thepages
prop instead. - The
GuidePage
component is deprecated. Use thepages
prop inGuide
instead.
- The
Notice
component will speak its message. With this new feature, a developer can control either thespokenMessage
spoken message, or thepoliteness
politeness level of the message. - The
Snackbar
component will speak its message. With this new feature, a developer can control either thespokenMessage
spoken message, or thepoliteness
politeness level of the message. - A
Notice
actions
member can now assignisPrimary
to render a primary button action associated with a notice message.
- Notice will assume a default status of 'info' if none is provided. This resolves an issue where the notice would be assigned a class name
is-undefined
. This was previously the effective default by styled appearance and should not be considered a breaking change in that regard.
- Added a new
Guide
component which allows developers to easily present a user guide.
is-button
classname has been removed from the Button component.- The
is-default
classname is not applied automatically anymore. - By default Button components come with a fixed height and hover styles.
- Fixes a regression published in version 8.5.0 that would prevent some build tools from including styles provided in the packages build-styles directory.
isDefault
prop inButton
has been deprecated. Consider usingisSecondary
instead.IconButton
has been deprecated. Use theButton
component instead.
- The bundled
re-resizable
dependency has been updated from requiring5.0.1
to requiring^6.0.0
(#17011).
- Added a new
popoverProps
prop to theDropdown
component which allows users of theDropdown
component to pass props directly to thePopover
component. - Added and documented
hideLabelFromVision
prop toBaseControl
used bySelectControl
,TextControl
, andTextareaControl
. - Added a new
popoverProps
prop to theDropdownMenu
component which allows to pass props directly to the nestedPopover
component. - Added a new
toggleProps
prop to theDropdownMenu
component which allows to pass props directly to the nestedIconButton
component. - Added a new
menuProps
prop to theDropdownMenu
component which allows to pass props directly to the nestedNavigableMenu
component.
menuLabel
prop inDropdownComponent
has been deprecated. Consider usingmenuProps
object and itsaria-label
property instead.position
prop inDropdownComponent
has been deprecated. Consider usingpopoverProps
object and itsposition
property instead.
- The
Button
component will no longer assign default styling (is-default
class) when explicitly assigned as primary (theisPrimary
prop). This should resolve potential conflicts affecting a combination ofisPrimary
,isDefault
, andisLarge
/isSmall
, where the busy animation would appear with incorrect coloring.
- The
Popover
componentonClickOutside
prop has been deprecated. UseonFocusOutside
instead.
- The
Dropdown
component has been refactored to focus changes using thePopover
component'sonFocusOutside
prop. - The
MenuItem
component will now always use anIconButton
. This prevents a focus loss when clicking a menu item. - Package no longer depends on external
react-click-outside
library.
- Add new
BlockQuotation
block to the primitives folder to support blockquote in a multiplatform way. #15482. DropdownMenu
now supports passing a render prop as children for more advanced customization.
MenuGroup
no longer usesNavigableMenu
internally. It needs to be explicitly wrapped withNavigableMenu
to bring back the same behavior.
- Added missing documentation for
DropdownMenu
propsmenuLabel
,position
,className
.
ServerSideRender
is no longer part of components. It was extracted to an independent package@wordpress/server-side-render
.
- Although
DateTimePicker
does not allow picking the seconds, passed the current seconds as the selected value for seconds when callingonChange
. Now it passes zero.
- Added a new
HorizontalRule
component. - Added a new
Snackbar
component.
- Fixed display of reset button when using RangeControl
allowReset
prop. - Fixed minutes field of
DateTimePicker
missed '0' before single digit values.
- Added a new
render
property toFormFileUpload
component. Allowing users of the component to custom the UI for their needs. - Added a new
BaseControl.VisualLabel
component. - Added a new
preview
prop to thePlaceholder
component which allows to display a preview, for example a media preview when the Placeholder is used in media editing contexts. - Added a new
anchorRect
prop toPopover
which enables a developer to provide a customDOMRect
object at which to position the popover.
- Limit
Base Control Label
to the width of its content.
- Fix
instanceId
prop passed through toButton
component viaMenuItems
producing React console error. Fixed by removing the unnecessary use ofwithInstanceId
on theMenuItems
component #14599
- Make
RangeControl
validation rely on thecheckValidity
provided by the browsers instead of using our own validation.
- Fix a problem that made
RangeControl
not work as expected with float values.
- Added a new
Animate
component.
withFilters
has been optimized to avoid binding hook handlers for each mounted instance of the component, instead using a single centralized hook delegator.withFilters
has been optimized to reuse a single shared component definition for all filtered instances of the component.- Make
RangeControl
validate min and max properties.
- Resolves a conflict where two instance of Slot would produce an inconsistent or duplicated rendering output.
- Allow years between 0 and 1970 in DateTime component.
Dropdown
now has afocusOnMount
prop which is passed directly to the containedPopover
.DatePicker
has new propisInvalidDate
exposing react-dates'isOutsideRange
.DatePicker
allowsnull
as accepted value forcurrentDate
prop to signify no date selection.
Dropdown.refresh()
has been removed. The containedPopover
is now automatically refreshed.
- Avoid constantly recomputing the popover position.
- Remove
<DateTimePicker />
obsoletelocale
prop (and pass-through to child components) and obsoleteis12Hour
prop pass through to<DateTime />
#11649
- The
PanelColor
component has been removed.
- Adjust a11y roles for MenuItem component, so that aria-checked is used properly, related change in Editor/Components/BlockNavigationList (#11431).
Popover
components are now automatically refreshed every 0.5s in order to recalculate their size or position.
Dropdown.refresh()
has been deprecated as the containedPopover
is now automatically refreshed.
- Forward
ref
in thePanelBody
component. - Tooltip are no longer removed when Button becomes disabled, it's left to the component rendering the Tooltip.
- Forward
ref
support inTabbableContainer
andNavigableMenu
components.
AccessibleSVG
component has been removed. Please useSVG
instead.
- The
Notice
component accepts an array of action objects via theactions
prop. Each member object should contain alabel
and either aurl
link string oronClick
callback function.
- Fix importing
react-dates
stylesheet in production.
- Added a new
ColorPicker
component (#10564). MenuItem
now accepts aninfo
prop for including an extended description.
IconButton
correctly respects a passedaria-label
prop.
PanelColor
has been deprecated in favor ofwp.editor.PanelColorSettings
.
- Added a new
ResizableBox
component.
Draggable
as a DOM node drag handler has been removed. Please, useDraggable
as a wrap component for your DOM node drag handler.
- Renamed
AccessibleSVG
component toSVG
.
withAPIData
has been removed. Please use the Core Data module or@wordpress/api-fetch
directly instead.Draggable
as a DOM node drag handler has been deprecated. Please, useDraggable
as a wrap component for your DOM node drag handler.- Change how required built-ins are polyfilled with Babel 7 (#9171). If you're using an environment that has limited or no support for ES2015+ such as lower versions of IE then using core-js or @babel/polyfill will add support for these methods.
withContext
has been removed. Please usewp.element.createContext
instead. See: https://reactjs.org/docs/context.html.
- Added a new
AccessibleSVG
component.