What’s new in Gutenberg 22.9? (8 April)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Editor.

Image

What’s New In
Gutenberg 22.9?

Gutenberg 22.9 has been released and is available for download!

This release introduces background gradients that work alongside background images in the Group blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., and adds organized sections to the command palette for better action discovery (experimental). The wordpress/ui package gains a foundational component for consistent empty states, while real-time collaboration receives stability improvements for multi-user editing sessions.

A total of 131 PRs were merged in Gutenberg 22.9, with 5 first-time contributors!

Table of contents

Background gradients alongside background images

Image

The Group block now supports background gradients through a new background.gradient block support, allowing gradients and background images to work together without conflicts. You’ll find a gradient picker in the Background panel that works independently of the existing color gradient controls, making it possible to create gradient overlays on images or combine multiple background effects.

The new background.gradient block support is available to block authors. This also lays the groundwork for eventually migrating color.gradient to background.gradient across all blocks, providing a more consistent and capable background styling system, including clipping and text gradients. (75859)

Command palette history and suggestions (experimental)

Image

The command palette (Cmd+K/Ctrl+K) now features organized sections that make it easier to find and reuse actions. Instead of showing just a search field and search results, users see sections for Recent commands and Suggestions based on current context. This change is experimental; to give it a try, first go to WP-Adminadmin (and super admin) > Gutenberg > Experiments and enable “Workflow Palette”.

Other Notable Highlights

The wordpress/ui package adds a new EmptyState component for displaying placeholder content when sections have no data. This compound component provides flexible composition with sub-components for icons, titles, descriptions, and actions, laying groundwork for consistent empty state patterns across the interface (74719).

Image

Real-time collaboration has received some fixes that improve the multi-user editing experience and stability. Block comments (notes) now properly sync between collaborative editors instead of requiring page refreshes to appear. In the post list, the action button correctly updates from “Join” back to “Edit” when collaboration locks expire. Behind the scenes, error recovery has been enhanced to prevent cascading failures that could previously cause memory issues during collaborative sessions. (76873, 76795, 76872, 76716)

The experimental Forms block now supports hidden input fields, filling an important gap for many applications. Hidden fields appear as selectable placeholder blocks in the editor, while remaining invisible on the frontend with values configurable through the Advanced panel. (74131)

Changelog

Enhancements

Block Editor

  • DOM: Prefer standard caretPositionFromPoint over deprecated caretRangeFromPoint. (76921)

Components

  • Add EmptyState component to wordpress/ui. (74719)
  • Admin UIUI User interface: Update Page background color. (76548)
  • Button: hide focus outline on :Active for click feedback in forced-colors mode. (76833)
  • Card: Use Text component for Title typography. (76642)
  • InputControl: Add to wordpress/ui. (76653)
  • Snackbar: Use surface-width design token for max-width. (76592)
  • Storybook: Make “introduction” top level. (76671)
  • Tabs: Add runtime validation for tab/panel mismatches. (75170)
  • Theme: Change default control cursor to pointer. (76762)
  • ThemeProvider: Add cursor prop. (76410)
  • UI/Dialog: Deprioritize close icon for initial focus. (76910)
  • UI/Dialog: Expose initialFocus and finalFocus on Dialog.Popup. (76860)
  • UI: Add AlertDialog primitive. (76847)
  • UI: Update @base-ui/reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org from 1.2.0 to 1.3.0. (76603)

Data Layer

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Remove offset param from stableKey, use pagination logic. (76808)

Block Library

  • Block Supports: Add background gradient support that can combine with background images. (75859)
  • Forms Block: Add hidden input field variation. (74131)
  • Image/Site Logo: Hide crop toolbar when editMediaEntity is unavailable. (76626)
  • Login/out block: Add button block class names to the submit button. (76746)

DataViews

  • CollapsibleCard: Add HeaderDescription subcomponent. (76867)
  • Improvements to dataviews infinite scroll. (74378)

Site Editor

  • Site Editor > Pages: Move view configuration to the server. (76573)
  • Site Editor > Patterns & Parts: Generate sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. from view configuration. (76823)
  • Site Editor > Patterns: Move configuration to the server. (76734)
  • Site Editor > Quick Edit: Add form configuration to endpoint. (76953)
  • Site Editor > Templates: Move configuration to the server. (76622)

Post Editor

  • DataForm: Add compact configuration option to the datetime control. (76905)
  • Site Editor v2: Add missing menu items to navigation leaf more menu. (76804)

Connectors

  • Improve AI pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party. button. (76759)

Collaboration

  • Add backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. for WP_ALLOW_COLLABORATION. (76716)

Guidelines

  • Improvements to the UXUX User experience. (76383)

Icon

  • Icons: Enforce strict name validation in register method. (76079)

Commands

  • Add sections to command palette and introduce Recently used functionality. (75691)

Bug Fixes

  • wordpress/date: Recover WP timezone after third-party reload. (75831)

Block Library

  • Icon: Fix center alignment in the editor for classic themes. (76878)
  • Image block media placeholder: Remove duotone. (76721)
  • Latest Comments: Fix v1 block deprecation. (76877)
  • List Item: Disable edit as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. support. (76897)
  • Navigation: Avoid List View changing position when navigation block saves. (76659)
  • Reduce specificity of nav link default padding so global styles apply. (76876)
  • Show fallback label in MediaControl when filename is empty. (76888)
  • Site Tagline: Fix block error when migrating deprecated textAlign attribute. (76821)

Connectors

  • Boot: Fix black area below content when sidebar is taller than page content. (76764)
  • Add Akismet as a default connector. (76828)
  • Align client registration 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. with server. (76737)
  • Fix button size. (76582)
  • Replace plugin.slug with plugin.file. (76909)
  • Support non-AI provider types and add JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. extensibility end-to-end test. (76722)

Block Editor

  • Block visibility badge: Use canvas iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. for viewport detection. (76889)
  • Cross Origin Isolation: Remove img from the list of elements that get mutated. (76618)
  • Fix locked content when switching to a different template without exiting ‘Edit pattern’. (76710)
  • Hide Additional CSSCSS Cascading Style Sheets. controls when block is inside contentOnly editing mode. (76512)
  • Reset blockEditingModes on RESET_BLOCKS. (76529)
  • Stop keeping stale controlled blocks after reset. (76591)

Components

  • Admin UI: Fix Page HeaderHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. not rendering with only actions and add stories. (76695)
  • Button: Restore specificity of high-contrast mode focus ring. (76719)
  • Card: Add overflow: Clip to root container. (76678)
  • Fix Color Picker Angle Reset on Gradient Type Change. (76595)
  • Storybook: Disable autodocs for Icon library. (76620)
  • compose/useDialog: Add stopPropagation() to Escape handler. (76861)
  • ui/CollapsibleCard: Do not animate focus ring. (76682)

Post Editor

  • Fix: Create custom template modal content width. (76713)
  • Reduce the added halo for selected block. (76619)
  • RevisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.: Add MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. fields diff panel to document sidebar. (76341)
  • Revisions: Fix template revisions retrieval and sorting. (76760)
  • Style Book: Fix missing styles for classic themes in stylebook route. (76843)

Collaboration

  • RTC: Fix notes not syncing between collaborative editors. (76873)
  • RTC: Fix stuck “Join” link in post list when lock expires. (76795)
  • RTC: Restore on failed request with compaction update. (76872)

Client Side Media

  • Build: Remove unused JXL WASM module from vips worker. (76639)
  • Gate client-side media processing as plugin-only. (76700)
  • vips: Ensure single instance. (76780)

CSS & Styling

  • MetaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way.: Fix checkbox style in sidebar. (76718)

Data Layer

  • Properly resolve getTemplateId for hybrid themes. (76532)

Site Editor

  • Fix unsupported theme flash on direct URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org navigation. (76465)

AccessibilityAccessibility 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)

Components

  • ComboboxControl: Fix accessible association of help text. (76761)
  • RadioControl: Add role=”radiogroup” to fieldset. (76745)
  • ToggleGroupControl: Fix accessible association of help text. (76740)
  • ControlWithError: Connect validation messages to controls via aria-describedby. (76742)

Block Editor

  • Stretchy Text: Fix focus loss. (75092)

Experiments

Post Editor

  • Fields: Add excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. field. (76829)
  • Fields: Add sticky field. (76922)
  • Fields: Tweak excerpt field. (76903)
  • Add revisions panel. (76735)
  • Add template panel to include the existing template actions. (76539)

Guidelines

  • Refactor components and improve TypeScript typing. (76394)

Documentation

  • Abilities: Improve JSDoc for public API. (76824)
  • DOM: Document class wildcard matcher for ‘cleanNodeList’. (76920)
  • Docs: Remove Puppeteer references and update to Playwright. (76766)
  • Docs: Update PHP_CodeSniffer repository link and schema URL. (76816)
  • Storybook: Add redirect for moved introduction page. (76701)
  • Storybook: Try changing to collapsed folders. (76361)
  • UI Tooltip: Improve documentation to cover intended accessibility practices. (76705)
  • Updating versions in WordPress ahead of 7.0. (76723)
  • admin-ui: Update package README to clarify purpose and distinguish from ui package. (76943)
  • docs(create-block-interactive-template): Document available variants in README. (76831)
  • iAPI Docs: Add client-side navigation compatibility guide. (76242)

Code Quality

  • Core Abilities: Fix sideEffects flag. (76763)
  • Admin UI: Add CSS files to sideEffects array. (76609)
  • admin-ui / Breadcrumbs: Stricter items[].to prop types. (76493)
  • Refactor: Use null coalescing operator for improved readability. (76777)
  • element: Make createInterpolateElement TS/type smart. (71513)

Data Layer

  • Core Data: Optimize getRawEntityRecord selector. (76632)
  • Core Data: Remove ‘isRawAttribute’ internal util. (76806)

Block Library

  • Navigation: Add a shared helper for font sizes in Navigation Link and Navigation Submenu blocks. (74855)
  • Tab Block: Remove anchor from save function. (76511)

Site Editor

  • Simplify sidebar for Pages & Templates. (76868)

Commands

  • Fix useSelect warning in command palette. (76822)

Block Editor

  • Deprecate ‘__unstableSaveReusableBlock’ action. (76807)

Components

  • UI: Clarify public APIs and component naming, remove NoticeIntent typings. (76791)

DataViews

  • wordpress/dataviews: Migrate card layout to wordpress/ui. (76282)

Tools

  • Add TypeScript parser tests for shouldSkipReference. (76611)
  • ESLint: Add no-unmerged-classname rule. (76458)
  • create-block-interactive-template: Enhance block registration by using blocks-manifest for improved performance. (76317)

Build Tooling

  • wp-build: Hash transformed CSS for data-wp-hash dedupe key. (76743)
  • Build: Fix vips worker 404 when SCRIPT_DEBUG is true. (76657)
  • Build: Skip non-minified build for WASM-inlined workers. (76615)
  • Changelog: Add missing label-to-feature mappings. (76646)
  • React vendor script: Avoid warning on createRoot. (76825)
  • Set milestone on PRs after cherry-picking to release branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch".. (76652)
  • react-dom vendor script: Remove __esModule flag. (76925)

Testing

  • Fix: Flaky RichText format end-to-end test. (76958)
  • RTC: Add end-to-end block gauntlet. (76849)
  • e2e: Add end-to-end tests for template and template part revisions. (76923)
  • end-to-end Tests: Enable client-side media processing for site editor image test. (76648)

Collaboration

  • RTC: Update post lock backport PR. (76661)

First-time contributors

The following PRs were merged by first-time contributors:

  • @jigangz: Block Library: Show fallback label in MediaControl when filename is empty. (76888)
  • @meravi: Docs: Remove Puppeteer references and update to Playwright. (76766)
  • @rodrigoprimo: Docs: Update PHP_CodeSniffer repository link and schema URL. (76816)
  • @sandipmaurya2611: Boot: Fix black area below content when sidebar is taller than page content. (76764)
  • @Vedant-Gandhi: Fix Color Picker Angle Reset on Gradient Type Change. (76595)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamsilverstein @aduth @alecgeatches @andrewserong @annezazu @aswasif007 @carolinan @CGastrell @chriszarate @ciampo@DAreRodz @dhasilva @dsas @ellatrix @epeicher @gziolo @im3dabasia @ingeniumed @jameskoster @jasmussen @jigangz @jorgefilipecosta @jsnajdr@juanmaguitar @Mamaduka @manzoorwanijk @maxschmeling @meravi @mirka @ntsekouras @oandregal @pento @ramonjd @retrofox @rodrigoprimo@sandipmaurya2611 @scruffian @senadir @sgomes @Shekhar0109 @shekharnwagh @shimotmk @SirLouen @Soean @t-hamano @talldan@tellthemachines @Vedant-Gandhi

#block-editor, #core-editor, #gutenberg, #gutenberg-new