FontSizePicker
: Convert to TypeScript (#44449).
Popover
: added newanchor
prop, supposed to supersede all previous anchor-related props (anchorRef
,anchorRect
,getAnchorRect
). These older anchor-related props are now marked as deprecated and are scheduled to be removed in WordPress 6.3 (#43691).
Button
: Remove unexpectedhas-text
class when empty children are passed (#44198).- The
LinkedButton
to unlink sides inBoxControl
,BorderBoxControl
andBorderRadiusControl
have changed from a rectangular primary button to an icon-only button, with a sentence case tooltip, and default-size icon for better legibility. TheButton
component has been fixed so whenisSmall
andicon
props are set, and no text is present, the button shape is square rather than rectangular. Popover
: fix limitShift logic by adding iframe offset correctly #42950).
NavigationMenu
updated to ignorereact/exhaustive-deps
eslint rule (#44090).Mobile
updated to ignorereact/exhaustive-deps
eslint rule (#44207).RangeControl
: updated to passreact/exhaustive-deps
eslint rule (#44271).UnitControl
updated to pass thereact/exhaustive-deps
eslint rule (#44161).Notice
: updated to satisfyreact/exhaustive-deps
eslint rule (#44157)
FontSizePicker
: Deprecate bottom margin style. Add a__nextHasNoMarginBottom
prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 (#43870).AnglePickerControl
: Deprecate bottom margin style. Add a__nextHasNoMarginBottom
prop to start opting into the margin-free styles that will become the default in a future version, currently scheduled to be WordPress 6.4 (#43867).Popover
: deprecate__unstableShift
prop in favour of newshift
prop. The__unstableShift
is currently scheduled for removal in WordPress 6.3 (#43845).Popover
: removed the__unstableObserveElement
prop, which is not necessary anymore. The functionality is now supported directly by the component without the need of an external prop (#43617).
Button
,Icon
: FixiconSize
prop doesn't work with some icons (#43821).InputControl
,NumberControl
,UnitControl
: Fix margin whenlabelPosition
isbottom
(#43995).Popover
: enable auto-updating every animation frame (#43617).Popover
: improve the component's performance and reactivity to prop changes by reworking its internals (#43335).NavigatorScreen
: updated to satisfyreact/exhaustive-deps
eslint rule (#43876)Popover
: fix positioning when reference and floating elements are both within an iframe (#43971)
ToggleControl
: Add__nextHasNoMargin
prop for opting into the new margin-free styles (#43717).CheckboxControl
: Add__nextHasNoMargin
prop for opting into the new margin-free styles (#43720).FocalPointControl
: Add__nextHasNoMargin
prop for opting into the new margin-free styles (#43996).TextControl
,TextareaControl
: Add__nextHasNoMargin
prop for opting into the new margin-free styles (#43782).Flex
: Remove margin-based polyfill implementation of flexgap
(#43995).RangeControl
: Tweak dark gray marking color to be consistent with the grays in@wordpress/base-styles
(#43773).UnitControl
: Tweak unit dropdown color to be consistent with the grays in@wordpress/base-styles
(#43773).SearchControl
: Add__nextHasNoMargin
prop for opting into the new margin-free styles (#43871).UnitControl
: Consistently hide spin buttons (#43985).CardHeader
,CardBody
,CardFooter
: TweakisShady
background colors to be consistent with the grays in@wordpress/base-styles
(#43719).InputControl
,SelectControl
: Tweakdisabled
colors to be consistent with the grays in@wordpress/base-styles
(#43719).FocalPointPicker
: Tweak media placeholder background color to be consistent with the grays in@wordpress/base-styles
(#43994).RangeControl
: Tweak rail, track, and mark colors to be consistent with the grays in@wordpress/base-styles
(#43994).UnitControl
: Tweak unit dropdown hover color to be consistent with the grays in@wordpress/base-styles
(#43994).
Icon
: Refactor tests to@testing-library/react
(#44051).- Fix TypeScript types for
isValueDefined()
andisValueEmpty()
utility functions (#43983). RadioControl
: Clean up styles to use less custom CSS (#43868).- Remove unused
normalizeArrowKey
utility function (#43640). SearchControl
: Convert to TypeScript (#43871).FormFileUpload
: Convert to TypeScript (#43960).DropZone
: Convert to TypeScript (#43962).ToggleGroupControl
: Rename__experimentalIsIconGroup
prop to__experimentalIsBorderless
(#43771).NumberControl
: Add TypeScript types (#43791).- Refactor
FocalPointPicker
to function component (#39168). Guide
: usecode
instead ofkeyCode
for keyboard events (#43604).ToggleControl
: Convert to TypeScript and streamline CSS (#43717).FocalPointPicker
: Convert to TypeScript (#43872).Navigation
: usecode
instead ofkeyCode
for keyboard events (#43644).ComboboxControl
: Add unit tests (#42403).NavigableContainer
: usecode
instead ofkeyCode
for keyboard events, rewrite tests using RTL anduser-event
(#43606).ComboboxControl
: updated to satisfyreact/exhuastive-deps
eslint rule (#41417)FormTokenField
: Refactor away from Lodash (#43744).NavigatorButton
: updated to satisfyreact/exhaustive-deps
eslint rule (#42051)TabPanel
: Refactor away from_.partial()
(#43895).Panel
: Refactor tests to@testing-library/react
(#43896).Popover
: refactor to TypeScript (#43823).BorderControl
andBorderBoxControl
: replace temporary types withPopover
's types (#43823).DimensionControl
: Refactor tests to@testing-library/react
(#43916).withFilters
: Refactor tests to@testing-library/react
(#44017).IsolatedEventContainer
: Refactor tests to@testing-library/react
(#44073).KeyboardShortcuts
: Refactor tests to@testing-library/react
(#44075).Slot
/Fill
: Refactor tests to@testing-library/react
(#44084).ColorPalette
: Refactor tests to@testing-library/react
(#44108).
CustomSelectControl
: Deprecate constrained width style. Add a__nextUnconstrainedWidth
prop to start opting into the unconstrained width that will become the default in a future version, currently scheduled to be WordPress 6.4 (#43230).Popover
: deprecate__unstableForcePosition
prop in favour of newflip
andresize
props. The__unstableForcePosition
is currently scheduled for removal in WordPress 6.3 (#43546).
AlignmentMatrixControl
: keep the physical direction in RTL languages (#43126).AlignmentMatrixControl
: Fix thewidth
prop so it works as intended (#43482).SelectControl
,CustomSelectControl
: Truncate long option strings (#43301).ToggleGroupControl
: Fix minor inconsistency in label height (#43331).Popover
: fix and improve opening animation (#43186).Popover
: fix incorrect deps in hooks resulting in incorrect positioning after callingupdate
(#43267).FontSizePicker
: Fix excessive margin between label and input (#43304).- Ensure all dependencies allow version ranges (#43355).
Popover
: make sure offset middleware always applies the latest frame offset values (#43329).Dropdown
: anchor popover to the dropdown wrapper (instead of the toggle) (#43377).Guide
: Fix error when rendering with no pages (#43380).Disabled
: preserve input values when toggling theisDisabled
prop (#43508)
GradientPicker
: Show custom picker before swatches (#43577).CustomGradientPicker
,GradientPicker
: Add__nextHasNoMargin
prop for opting into the new margin-free styles (#43387).ToolsPanel
: Tighten grid gaps (#43424).ColorPalette
: Make popover style consistent (#43570).ToggleGroupControl
: Improve TypeScript documentation (#43265).ComboboxControl
: Normalize hyphen-like characters to an ASCII hyphen (#42942).FormTokenField
: Refactor away from_.difference()
(#43224).Autocomplete
: useKeyboardEvent.code
instead ofKeyboardEvent.keyCode
(#43432).ConfirmDialog
: replace (almost) every usage offireEvent
with@testing-library/user-event
(#43429).Popover
: Introduce newflip
andresize
props (#43546).
Tooltip
: Refactor tests to@testing-library/react
(#43061).ClipboardButton
,FocusableIframe
,IsolatedEventContainer
,withConstrainedTabbing
,withSpokenMessages
: Improve TypeScript types (#43579).- Clean up unused and duplicate
COLORS
values (#43445). - Update
floating-ui
to the latest version (#43206). DateTimePicker
,TimePicker
,DatePicker
: Switch frommoment
todate-fns
(#43005).DatePicker
: Switch fromreact-dates
touse-lilius
(#43005).DateTimePicker
: address feedback after recent refactor todate-fns
anduse-lilius
(#43495).convertLTRToRTL()
: Refactor away from_.mapKeys()
(#43258).withSpokenMessages
: Update to use@testing-library/react
(#43273).MenuGroup
: Refactor unit tests to use@testing-library/react
(#43275).FormTokenField
: Refactor away from_.uniq()
(#43330).contextConnect
: Refactor away from_.uniq()
(#43330).ColorPalette
: Refactor away from_.uniq()
(#43330).Guide
: Refactor away from_.times()
(#43374).Disabled
: Convert to TypeScript (#42708).Guide
: Update tests to use@testing-library/react
(#43380).Modal
: useKeyboardEvent.code
instead of deprecatedKeyboardEvent.keyCode
. improve unit tests (#43429).FocalPointPicker
: useKeyboardEvent.code
, partially refactor tests to modern RTL anduser-event
(#43441).CustomGradientPicker
: useKeyboardEvent.code
instead ofKeyboardEvent.keyCode
(#43437).Card
: Convert to TypeScript (#42941).NavigableContainer
: Refactor away from_.omit()
(#43474).Notice
: Refactor away from_.omit()
(#43474).Snackbar
: Refactor away from_.omit()
(#43474).UnitControl
: Refactor away from_.omit()
(#43474).BottomSheet
: Refactor away from_.omit()
(#43474).DropZone
: Refactor away from_.includes()
(#43518).NavigableMenu
: Refactor away from_.includes()
(#43518).Tooltip
: Refactor away from_.includes()
(#43518).TreeGrid
: Refactor away from_.includes()
(#43518).FormTokenField
: useKeyboardEvent.code
, refactor tests to modern RTL anduser-event
(#43442).DropdownMenu
: useKeyboardEvent.code
, refactor tests to model RTL anduser-event
(#43439).Autocomplete
: Refactor away from_.escapeRegExp()
(#43629).TextHighlight
: Refactor away from_.escapeRegExp()
(#43629).
FormTokenField
: add__experimentalAutoSelectFirstMatch
prop to auto select the first matching suggestion on typing (#42527).Popover
: Deprecate__unstableForcePosition
, now replaced by newflip
andresize
props (#43546).
Popover
: make sure thatownerDocument
is always defined (#42886).ExternalLink
: Check if the link is an internal anchor link and prevent anchor links from being opened. (#42259).BorderControl
: Ensure box-sizing is reset for the control (#42754).InputControl
: Fix acceptance of falsy values in controlled updates (#42484).Tooltip (Experimental)
,CustomSelectControl
,TimePicker
: Add missing font-size styles which were necessary in non-WordPress contexts (#42844).TextControl
,TextareaControl
,ToggleGroupControl
: Addbox-sizing
reset style (#42889).Popover
: fix arrow placement and design (#42874).Popover
: fix minor glitch in arrow #42903).ColorPicker
: fix layout overflow #42992).ToolsPanel
: Constrain grid columns to 50% max-width (#42795).Popover
: anchor correctly to parent node when no explicit anchor is passed (#42971).ColorPalette
: forward correctlypopoverProps
in theCustomColorPickerDropdown
component #42989).ColorPalette
,CustomGradientBar
: restore correct color picker popover position #42989).Popover
: fix iframe offset not updating when iframe resizes (#42971).
ToggleGroupControlOptionIcon
: Maintain square proportions (#43060).ToggleGroupControlOptionIcon
: Add a requiredlabel
prop so the button is always accessibly labeled. Also removesshowTooltip
from the accepted prop types, as the tooltip will now always be shown. (#43060).SelectControl
,CustomSelectControl
: Refresh and refactor chevron down icon (#42962).FontSizePicker
: Add large size variant (#42716).Popover
: tidy up code, add more comments (#42944).- Add
box-sizing
reset style mixin to utils (#42754). ResizableBox
: Make tooltip background matchTooltip
component's (#42800).- Update control labels to the new uppercase styles (#42789).
UnitControl
: Update unit dropdown design for the large size variant (#42000).BaseControl
: Addbox-sizing
reset style (#42889).ToggleGroupControl
,RangeControl
,FontSizePicker
: Add__nextHasNoMarginBottom
prop for opting into the new margin-free styles (#43062).BoxControl
: ExportapplyValueToSides
util function. (#42733).ColorPalette
: use index while iterating over color entries to avoid React "duplicated key" warning (#43096).AnglePickerControl
: Add__nextHasNoMarginBottom
prop for opting into the new margin-free styles (#43160).ComboboxControl
: Add__nextHasNoMarginBottom
prop for opting into the new margin-free styles (#43165).
ToggleGroupControl
: Add__experimentalIsIconGroup
prop (#43060).Flex
,FlexItem
,FlexBlock
: Convert to TypeScript (#42537).InputControl
: Fix incorrectsize
prop passing (#42793).Placeholder
: Convert to TypeScript (#42990).Popover
: rewrite Storybook examples using controls #42903).Swatch
: Remove component in favor ofColorIndicator
#43068).
- Context System: Stop explicitly setting
undefined
to thechildren
prop. This fixes a bug whereIcon
could not be correctly rendered via theas
prop of a context-connected component (#42686). Popover
,Dropdown
: Fix width whenexpandOnMobile
is enabled (#42635).CustomSelectControl
: Fix font size and hover/focus style inconsistencies withSelectControl
(#42460).AnglePickerControl
: Fix gap between elements in RTL mode (#42534).ColorPalette
: Fix background image in RTL mode (#42510).RangeControl
: clamp initialPosition between min and max values (#42571).Tooltip
: avoid unnecessary re-renders of select child elements (#42483).Popover
: Fix offset when the reference element is within an iframe. (#42417).
BorderControl
: Improve labelling, tooltips and DOM structure (#42348).BaseControl
: Set zero padding onStyledLabel
to ensure cross-browser styling (#42348).InputControl
: Implement wrapper subcomponents for adding responsive padding toprefix
/suffix
(#42378).SelectControl
: Add flag for larger default size (#42456).UnitControl
: Update unit select's focus styles to match input's (#42383).ColorPalette
: Display checkered preview background whenvalue
is transparent (#42232).CustomSelectControl
: Add size variants (#42460).CustomSelectControl
: Add flag to opt in to unconstrained width (#42460).Dropdown
: Implement wrapper subcomponent for adding different padding to the dropdown content (#42595).BorderControl
: Render dropdown as prefix within itsUnitControl
(#42212)UnitControl
: Update prop types to allow ReactNode as prefix (#42212)ToolsPanel
: Updated README with panel layout information and more expansive usage example (#42615).ComboboxControl
,FormTokenField
: Add custom render callback for options in suggestions list (#42597).
ColorPicker
: Clean up implementation of 40px size (#42002).Divider
: Complete TypeScript migration (#41991).Divider
,Flex
,Spacer
: Improve documentation for theSpaceInput
prop (#42376).Elevation
: Convert to TypeScript (#42302).ScrollLock
: Convert to TypeScript (#42303).Shortcut
: Convert to TypeScript (#42272).TreeSelect
: Refactor away from_.compact()
(#42438).MediaEdit
: Refactor away from_.compact()
for mobile (#42438).BoxControl
: Refactor away from_.isEmpty()
(#42468).RadioControl
: Refactor away from_.isEmpty()
(#42468).SelectControl
: Refactor away from_.isEmpty()
(#42468).StyleProvider
: Convert to TypeScript (#42541).ComboboxControl
: ReplacekeyboardEvent.keyCode
withkeyboardEvent.code
(#42569).ComboboxControl
: Add support for uncontrolled mode (#42752).
BoxControl
: Change ARIA role fromregion
togroup
to avoid unwanted ARIA landmark regions (#42094).FocalPointPicker
,FormTokenField
,ResizableBox
: Fixed SSR breakage (#42248).ComboboxControl
: use custom prefix when generating the instanceId (#42134.Popover
: pass missing anchor ref to thegetAnchorRect
callback prop. (#42076).Popover
: callgetAnchorRect
callback prop even ifanchorRefFallback
has no value. (#42329).- Fix
ToolTip
position to ensure it is always positioned relative to the first child of the ToolTip. (#41268)
ToggleGroupControl
: Add large size variant (#42008).InputControl
: Ensure that the padding between aprefix
/suffix
and the text input stays at a reasonable 8px, even in larger size variants (#42166).
Grid
: Convert to TypeScript (#41923).TextHighlight
: Convert to TypeScript (#41698).Tip
: Convert to TypeScript (#42262).Scrollable
: Convert to TypeScript (#42016).Spacer
: Complete TypeScript migration (#42013).VisuallyHidden
: Convert to TypeScript (#42220).TreeSelect
: Refactor away from_.repeat()
(#42070).FocalPointPicker
updated to satisfyreact/exhaustive-deps
eslint rule (#41520).ColorPicker
updated to satisfyreact/exhaustive-deps
eslint rule (#41294).Slot
/Fill
: Refactor away from Lodash (#42153).ComboboxControl
: Refactor away from_.deburr()
(#42169).FormTokenField
: Refactor away from_.identity()
(#42215).SelectControl
: Use roles and@testing-library/user-event
in unit tests (#42308).DropdownMenu
: Refactor away from Lodash (#42218).ToolbarGroup
: Refactor away from_.flatMap()
(#42223).TreeSelect
: Refactor away from_.flatMap()
(#42223).Autocomplete
: Refactor away from_.deburr()
(#42266).MenuItem
: Refactor away from_.isString()
(#42268).Shortcut
: Refactor away from_.isString()
(#42268).Shortcut
: Refactor away from_.isObject()
(#42336).RangeControl
: Convert to TypeScript (#40535).ExternalLink
: Refactor away from Lodash (#42341).Navigation
: updated to satisfyreact/exhaustive-deps
eslint rule (#41612)
ColorPicker
: Remove horizontal scrollbar when using HSL or RGB color input types. (#41646)ColorPicker
: Widen hex input field for mobile. (#42004)
- Wrapped
ColorIndicator
in aforwardRef
call (#41587). ComboboxControl
&FormTokenField
: Add__next36pxDefaultSize
flag for larger default size (#40746).BorderControl
: Improve TypeScript support. (#41843).DatePicker
: highlight today's date. (#41647).- Allow automatic repositioning of
BorderBoxControl
andColorPalette
popovers within smaller viewports (#41930).
Spinner
: Convert to TypeScript and update storybook (#41540).InputControl
: Add tests and update to use@testing-library/user-event
(#41421).FormToggle
: Convert to TypeScript (#41729).ColorIndicator
: Convert to TypeScript (#41587).Truncate
: Convert to TypeScript (#41697).FocalPointPicker
: Refactor away from_.clamp()
(#41735).RangeControl
: Refactor away from_.clamp()
(#41735).- Refactor components
utils
away from_.clamp()
(#41735). BoxControl
: Refactor utils away from_.isNumber()
(#41776).Elevation
: Refactor away from_.isNil()
(#41785).HStack
: Refactor away from_.isNil()
(#41785).Truncate
: Refactor away from_.isNil()
(#41785).VStack
: Convert to TypeScript (#41850).AlignmentMatrixControl
: Refactor away from_.flattenDeep()
in utils (#41814).AutoComplete
: Revert recentexhaustive-deps
refactor (#41820).Spacer
: Convert knobs to controls in Storybook (#41851).Heading
: Complete TypeScript migration (#41921).Navigation
: Refactor away from Lodash functions (#41865).CustomGradientPicker
: Refactor away from Lodash (#41901).SegmentedControl
: Refactor away from_.values()
(#41905).DimensionControl
: Refactor docs away from_.partialRight()
(#41909).NavigationItem
updated to ignorereact/exhaustive-deps
eslint rule (#41639).
Tooltip
: Opt in to__unstableShift
to ensure that the Tooltip is always within the viewport. (#41524)FormTokenField
: Do not suggest the selected one even if{ value: string }
is passed (#41216).CustomGradientBar
: Fix insertion and control point positioning to more closely follow cursor. (#41492)FormTokenField
: Added Padding to resolve close button overlap issue (#41556).ComboboxControl
: fix the autofocus behavior after resetting the value. (#41737).
AnglePickerControl
: Use NumberControl as input field (#41472).
FormTokenField
: Convert to TypeScript and refactor to functional component (#41216).Draggable
: updated to satisfyreact/exhaustive-deps
eslint rule (#41499)RadioControl
: Convert to TypeScript (#41568).Flex
updated to satisfyreact/exhaustive-deps
eslint rule (#41507).CustomGradientBar
updated to satisfyreact/exhaustive-deps
eslint rule (#41463)TreeSelect
: Convert to TypeScript (#41536).FontSizePicker
: updated to satisfyreact/exhaustive-deps
eslint rule (#41600).ZStack
: Convert component story to TypeScript and add inline docs (#41694).Dropdown
: Make sure cleanup (closing the dropdown) only runs when the menu has actually been opened.- Enhance the TypeScript migration guidelines (#41669).
ExternalLink
: Convert to TypeScript (#41681).InputControl
updated to satisfyreact/exhaustive-deps
eslint rule (#41601)Modal
: updated to satisfyreact/exhaustive-deps
eslint rule (#41610)
Navigation
: improve unit tests by using@testing-library/user-event
and modern@testing-library
assertions; add unit test for controlled component (#41668).
Popover
,Dropdown
,CustomGradientPicker
: Fix dropdown positioning by always targeting the rendered toggle, and switch off width in the Popover size middleware to stop reducing the width of the popover. (#41361)- Fix
InputControl
blocking undo/redo while focused. (#40518) ColorPalette
: Correctly update color name label when CSS variables are involved (#41461).
SelectControl
: Add__nextHasNoMarginBottom
prop for opting into the new margin-free styles (#41269).ColorPicker
: Strip leading hash character from hex values pasted into input. (#41223)ColorPicker
: Display detailed color inputs by default. (#41222)- Updated design for the
DateTimePicker
,DatePicker
andTimePicker
components (#41097). DateTimePicker
: Add__nextRemoveHelpButton
and__nextRemoveResetButton
for opting into new behaviour where there is no Help and Reset button (#41097).
AlignmentMatrixControl
updated to satisfyreact/exhaustive-deps
eslint rule (#41167)BorderControl
updated to satisfyreact/exhaustive-deps
eslint rule (#41259)CheckboxControl
: Add unit tests (#41165).BorderBoxControl
: fix some layout misalignments, especially for RTL users (#41254).TimePicker
: Update unit tests to use@testing-library/user-event
(#41270).DateTimePicker
: Updatemoment
to 2.26.0 and updatereact-date
typings (#41266).TextareaControl
: Convert to TypeScript (#41215).BoxControl
: Update unit tests to use@testing-library/user-event
(#41422).Surface
: Convert to TypeScript (#41212).Autocomplete
updated to satisfyreact/exhaustive-deps
eslint rule (#41382)Dropdown
updated to satisfyreact/exhaustive-deps
eslint rule (#41505)DateDayPicker
updated to satisfyreact/exhaustive-deps
eslint rule (#41470).
Spacer
: Add RTL support. (#41172)
BorderControl
now only displays the reset button in its popover when selections have already been made. (#40917)BorderControl
&BorderBoxControl
: Add__next36pxDefaultSize
flag for larger default size (#40920).BorderControl
improved focus and border radius styling for component. (#40951)- Improve focused
CircularOptionPicker
styling (#40990) BorderControl
: Make border color consistent with other controls (#40921)SelectControl
: RemovelineHeight
setting to fix issue with font descenders being cut off (#40985)
DateTimePicker
: Convert to TypeScript (#40775).DateTimePicker
: Convert unit tests to TypeScript (#40957).CheckboxControl
: Convert to TypeScript (#40915).ButtonGroup
: Convert to TypeScript (#41007).Popover
: refactor component to use thefloating-ui
library internally (#40740).
UnitControl
: migrate unit tests to TypeScript (#40697).DatePicker
: Add improved unit tests (#40754).- Setup
user-event
in unit tests inline, once per test (#40839). DatePicker
: Updatereact-dates
to 21.8.0 (#40801).
InputControl
: Add__next36pxDefaultSize
flag for larger default size (#40622).UnitControl
: Add__next36pxDefaultSize
flag for larger default size (#40627).Modal
design adjustments: Blur elements outside of the modal, increase modal title size, use larger close icon, remove header border when modal contents are scrolled. (#40781).SelectControl
: Improved TypeScript support (#40737).ToggleControlGroup
: Switch to internalIcon
component for dashicon support (40717).- Improve
ToolsPanel
accessibility. (#40716)
- The
Button
component now displays the label as the tooltip for icon only buttons. (#40716) - Use fake timers and fix usage of async methods from
@testing-library/user-event
. (#40790) - UnitControl: avoid calling onChange callback twice when unit changes. (#40796)
UnitControl
: show unit label when units prop has only one unit. (#40784)AnglePickerControl
: Fix closing of gradient popover when the angle control is clicked. (#40735)
TextControl
: Convert to TypeScript (#40633).
- Consolidate the main black colors to gray-900. Affects
AlignmentMatrixControl
,InputControl
,Heading
,SelectControl
,Spinner (Experimental)
, andText
(#40391).
- Remove individual color object exports from the
utils/colors-values.js
file. Colors should now be used from the mainCOLORS
export(#40387).
InputControl
: allow user to input a value interactively in Storybook, by removing default value argument (#40410).
- Update
BorderControl
andBorderBoxControl
to allow the passing of custom class names to popovers (#39753). ToggleGroupControl
: Reintroduce backdrop animation (#40021).Card
: Adjust border radius effective size (#40032).InputControl
: Improved TypeScript type annotations (#40119).
BaseControl
: Convert to TypeScript (#39468).
- Add
BorderControl
component (#37769). - Add
BorderBoxControl
component (#38876). - Add
ToggleGroupControlOptionIcon
component (#39760).
- Use
Object.assign
instead of{ ...spread }
syntax to avoid errors in the code generated by TypeScript (#39932). ItemGroup
: Ensure that the Item's text color is not overriden by the user agent's button color (#40055).Surface
: Use updated UI text color#1e1e1e
instead of#000
(#40055).CustomSelectControl
: Make chevron consistent withSelectControl
(#40049).
CustomSelectControl
: Add__next36pxDefaultSize
flag for larger default size (#39401).BaseControl
: Add__nextHasNoMarginBottom
prop for opting into the new margin-free styles (#39325).Divider
: Make the divider visible by default (display: inline
) in flow layout containers when the divider orientation is vertical (#39316).- Stop using deprecated
event.keyCode
in favor ofevent.key
for keyboard events inUnitControl
andInputControl
. (#39360) ColorPalette
: refine custom color button's label. (#39386)- Add
onClick
prop onFormFileUpload
. (#39268) FocalPointPicker
: stop usingUnitControl
's deprecatedunit
prop (#39504).CheckboxControl
: Add support for theindeterminate
state (#39462).UnitControl
: add support for theonBlur
prop (#39589).
- Delete the
composeStateReducers
utility function (#39262). BoxControl
: stop usingUnitControl
's deprecatedunit
prop (#39511).
NumberControl
: commit (and constrain) value onblur
event (#39186).- Fix
UnitControl
's reset of unit when the quantity value is cleared. (#39531). ResizableBox
: Ensure tooltip text remains on a single line. (#39623).
unit
prop inUnitControl
marked as deprecated (#39503).
ConfirmDialog
: Add support for custom label text on the confirmation and cancelation buttons (#38994)InputControl
: AllowonBlur
for empty values to commit the change whenisPressEnterToChange
is true, and move reset behavior to the ESCAPE key. (#39109).TreeGrid
: Add tests for Home/End keyboard navigation. AddonFocusRow
callback for Home/End keyboard navigation, this was missed in the implementation PR. Modify test for expanding/collapsing a row as row 1 implements this now. Update README with latest changes. (#39302)ToggleGroupControlOption
: Calculate width from button content and removeLabelPlaceholderView
(#39345)
- Normalize
font-family
onButton
,ColorPalette
,ComoboboxControl
,DateTimePicker
,FormTokenField
,InputControl
,SelectControl
, andToggleGroupControl
(#38969). - Fix input value selection of
InputControl
-based controls in Firefox and Safari with axial constraint of drag gesture (#38968). - Fix
UnitControl
's behavior around updating the unit when a newvalue
is passed (i.e. in controlled mode). (#39148).
- Fix spin buttons of number inputs in Safari (#38840)
- Show tooltip on toggle custom size button in FontSizePicker (#38985)
TreeGrid
: Add tests foronCollapseRow
,onExpandRow
, andonFocusRow
callback functions. (#38942).TreeGrid
: Update callback tests to useTreeGridRow
andTreeGridCell
sub-components. (#39002).
- 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) TreeGrid
: Allow SHIFT key to be held, and addonFocusRow
callback to theTreeGrid
component, fired when focus is shifted from one row to another via Up and Down arrow keys. (#38314)
Navigator
: renamepush
/pop
togoTo
/goBack
(#38582)Navigator
: addNavigatorButton
andNavigatorBackButton
components (#38634)UnitControl
: tidy up utilities and types. In particular, change the type of parsed quantities tonumber
(previously it could have been astring
too). (#38987)
- 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 the
HexInput
component to accept a pasted value that contains a starting # - 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.