Editor Components updates in WordPress 6.1

This post lists notable changes to the @wordpress/components package for the WordPress 6.1 release:

Updated 26 October: (@mciampini):

• deleted the statement about the anchorRef, anchorRect, getAnchorRect and __unstableShift props being scheduled for removal in the Popover component. The related deprecation messaged will be updated in the WordPress 6.1.1 release;
• deleted the statement about the useAnchorRef hook being scheduled for removal. The related deprecation messaged will be updated in the WordPress 6.1.1 release;
• added a statement about the removal of the range prop in the Popover component.

---

Changes to the Popover component

The Popover component from the @wordpress/components package has been almost entirely rewritten, in an effort to make it more stable, more reliable and more performant.

Below is a list with the main APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. changes:

• a new placement prop has been introduced. This prop is meant to replace the legacy position prop (which will be marked as deprecated in the near future);
• a new anchor prop has been introduced. This prop is meant to replace all previous anchor-related props (anchorRef, anchorRect, getAnchorRect). These older anchor-related props are now marked as deprecated;
• the __unstableForcePosition prop has been marked as deprecated, in favor of new flip and resize props. The __unstableForcePosition is currently scheduled for removal in WordPress 6.3;
• the __unstableObserveElement prop has been removed, since it’s not necessary anymore after the recent updates to the Popover;
• the range prop has been removed, as it hasn’t been having any effects on the component for a while.

For more details, view the updated component’s README and the Storybook examples and interactive docs.

The changes to the Popover component also affected the @wordpress/rich-text package, where a new useAnchor hook was introduced. The older useAnchorRef hook has been marked as deprecated.

For more information visit #43691, #43845, #43546, #43617, #44195 and #45195. (top)

Preparing CustomSelectControl to take up the entire width of its parent.

To improve consistency with SelectControl, the CSSCSS Cascading Style Sheets. styles for CustomSelectControl will be changed to take up the full width available, regardless of how short the option strings are. To start opting into these new unconstrained width styles, set the __nextUnconstrainedWidth prop to true. These styles will become the default in 6.4.

To keep your CustomSelectControl similar to the previous styling, add width constraints to a wrapper div.

.my-custom-select-control-wrapper {
  width: fit-content;
  min-width: 130px;
}

<div className="my-custom-select-control-wrapper">
  <CustomSelectControl __nextUnconstrainedWidth />
</div>

For more information visit #43230.

Props to @0mirka00 for writing this dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase.. (top)

Components with deprecated margin styles.

Several UIUI User interface components currently ship with styles that give them top and/or 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 will gradually deprecate these outer margins. A deprecation will begin 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.

In WordPress 6.1, the outer margins on the following components have been deprecated.

• AnglePickerControl
• FontSizePicker
• GradientPicker
• CustomGradientPicker

To start opting into the new margin-free styles, set the __nextHasNoMarginBottom prop to true.

<AnglePickerControl
  value={ angle }
  onChange={ setAngle }
  __nextHasNoMarginBottom={ true }
/>

For more info see #43867, #43436, and #43870.

Props to @0mirka00 for writing this dev note. (top)

Props to @bph and @webcommsat for review of this post.

#6-1, #dev-notes, #dev-notes-6-1