Gutenberg 22.3 (December 17)

“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 tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) 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.

What’s New In
Gutenberg 22.3?

Gutenberg 22.3 is here and ready for download!

This release brings a dedicated Fonts page for easier typography management, responsive Grid layouts, continued progress on the Site Editor’s routing infrastructure, and improvements to the image editing experience.

Dedicated Fonts page for easier typography management

A dedicated Fonts page is now available under the Appearance menu for 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. themes. Until now, font management has lived deep inside Global Styles, requiring navigation through several panels to install or preview a font. This new standalone page lets block theme users browse, install, and manage their typography collection in one dedicated space. Support for non-block themes will come next.

Under the hood, this page is built on a new routing infrastructure for the Site Editor, designed to improve navigation and support new top-level pages in wp-adminadmin (and super admin). View transitions are now wired into this routing layer, providing early zoom/slide animations when navigating between pages.

Image editing improvements

The in-editor image cropper has been rebuilt on a new foundation. While the workflow remains familiar, you’ll notice improvements: aspect ratios and zoom levels now persist when rotating images, fixing a long-standing frustration. This refactor also lays the groundwork for future image-editing enhancements. (#72414#73277)

Responsive Grid block

The Grid block now adapts to different screen sizes when columns are set. Layouts will adjust naturally across devices, providing a more consistent experience for visitors on mobile and desktop alike.

Other highlights

A few more highlights worth mentioning:

Changelog

Enhancements

Block Editor

  • Image Cropper: Add package and basic stories. (72414)
  • Implements the image-cropper package in the editor. (73277)

Block Library

  • Add support for ‘align’ to the Breadcrumbs block. (73794)
  • Breadcrumbs: Support paged comments. (73670)
  • Button: Migrate to text-align block support. (73732)
  • Comments Pagination Numbers: Add spacing controls for margin and padding. (67267)

Components

  • Chore: Shorten timeout duration for Snackbar component. (73814)
  • Try: 32px tall menu items. (73429)

Data Layer

  • wordpress/data: Migrate index.js to index.ts. (73597)

DataViews

  • Add min/max validation support to DataForm inputs. (73465)
  • Field 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.: Display formats for number and integer types. (73644)
  • Try using 24px padding for consistency across different uses. (73334)
  • Update operator labels and deprecate the isNotAll. (73671)

Internationalization

  • Fields: Update “TrashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. to provide verb context. (73704)

Layout

  • Enable grid block to be responsive when columns are set. (73662)
  • Try removing top and left grid drag handles in stable (auto) mode. (73864)

Media

  • Add media-specific fields for use with Attachment post types and DataViews/DataForm. (73071)

Notes

  • Notes: Add email notification. (73645)

Offline

  • Editor: Improve offline error notices. (73874)

Packages

  • Remove WordPress dependencies from abilities package. (73428)

Patterns

  • Add pattern name to document toolbar when editing in spotlight. (73208)
  • ContentOnly: For template parts and synced patterns, ensure ‘Edit section’ button goes to the isolated editor. (73736)

Post Editor

  • Use relevance pattern matching for parent page search. (73836)

Site Editor

  • Site Editor Pages: Add “notes count” field. (73609)

Theme

  • Expand error family of tokens. (73793)

Bug Fixes

Block API

  • Fallback to all attributes when checking for unmodified block. (73867)

Block Editor

  • Link Control: Clear entity metadata when selecting custom URLs. (73825)
  • Block Styles: Fix dynamic block previews. (73709)
  • Pattern insertion: Drag chip when multiple blocks of the same type in a pattern are dragged. (73681)

Block Library

  • Accordion Heading: Add default style for classic themes. (73608)
  • Add i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill. support for math block error messages. (73643)
  • Breadcrumbs: Improve home page and front page handling. (73487)
  • Classic Block: Restore HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. editing option. (73865)
  • Fix Page List block HTML rendering in editor. (73614)
  • Fix Page List block button HTML rendering to escape at output. (73641)
  • Fix align right issue on avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. component. (67494)
  • Post Title: Add fallback no title in edit mode when is readOnly. (73750)
  • Post Title: Fix empty heading element when post_title is empty but get_the_title returns markup V2. (73841)
  • Prevent flipping the border style when creating RTL stylesheets. (44170)
  • Verse Block: Prevent text overflow off-screen when the previous block has float. (45221)

Block Transforms

  • Gallery: Fix missing captions shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. transform. (73748)

Command Palette

  • Commands: Restrict editor UIUI User interface commands to entity-edit context. (73717)
  • Fix layout for long label. (73837)
  • Remove context from editor commands. (73807)

Components

  • Fix Notice component action button margins. (69430)
  • Reduce modal style specificity so it can be overridden more easily. (73739)

DataViews

  • Apply primary style to first column if there is no title field. (73729)
  • Fields: Fix suffix button in Slug field. (73829)
  • Fix sticky footer in dataviews grid view. (73661)

Font Library

  • Fix button background and focus outline styles. (73722)

Global Styles

  • Fix: Default color variations not showing in global styles. (73742)
  • Global Styles UI: Remove unnecessary padding for Navigatior component. (73810)
  • Global Styles UI: Restore borders for preview items. (73741)
  • Global Styles UI: Revert some of the padding / markup changes from #73334. (73834)
  • Gutenberg 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: Override coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. classic theme styles. (73580)

Inspector Controls

  • Fix Hstack prop in PostCardPanel. (73842)

Notes

  • Notes: Avoid incrementing comment_count when notes are resolved or reopened. (73689)
  • Notes: Ensure notes never show on the comments page. (73640)

Paste

  • Raw Handling: Fix grok markdown pasting issues. (73019)

Patterns

  • contentOnly patterns: Mark patterns as contentOnly by adding metadata.patternName to the root block. (73477)

Templates API

  • Template Activation: Update template ID format test. (73629)

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)

Block Editor

  • Fix block toolbar icon CSSCSS Cascading Style Sheets. when using show icon label preference. (73674)

Performance

Block Editor

  • Block Styles: Avoid re-rendering when typing. (73701)

Theme

  • Theme: Better max chroma detection for taperChroma. (73625)

Experiments

Block API

  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher-only blocks: Pass all metadata from PHP registration to the client. (73556)

Collaboration

  • Real-time collaboration: Add UndoManager support for collaborative editing. (72407)
  • Real-time collaboration: Disable syncing for “synthetic” template posts. (73526)

Font Library

  • Add dedicated font library page. (73630)
  • Add Overlay template part area behind Experiment. (73359)
  • Add overlay template part selector to Navigation block (behind experiment). (73760)

Routing

  • Boot: Add conditional inspector rendering via route.inspector(). (73703)
  • Routing Boot package: Add mobile rendering. (73620)
  • Routing: Add page title support. (73847)
  • Routing: Add view transitions to the new routing infrastructure. (73586)

UI Components

  • UI: Add border support to Box component. (73530)
  • UI: Add Stack component leveraging gap spacing design tokens. (73308)
  • UI: Update Stack component to support only gap tokens. (73852)

Documentation

Block API

  • Block JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. schema: Add visibility key to supports definition. (73612)
  • Docs: Add “Migrating Blocks for 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. Editor Compatibility” page. (73778)
  • Docs: Add missing periods to example descriptions in block-attributes.md. (73666)
  • Update Default block example code. (65229)

Components

  • Docs: Add JSDoc for getUserLabel in users autocompleter. (73651)

DataViews

  • DataViews docs: Add missing props. (73611)
  • DataViews stories: Update empty story. (73619)

General

  • Fix a typo in the documentation. (73658)

Packages

  • Docs: Update package documentation with general guidelines. (73633)

Storybook

  • Storybook: Add keywords to icon stories. (73524)

Code Quality

Block bindings

  • Block Bindings: Componentize. (73579)

Block Editor

  • Fix ESLint warnings for the ‘useInsertionPoint’ hook. (73868)
  • Fix block edit component hook dependencies. (73302)
  • Remove unused ‘__unstableBlockNameContext’. (73783)
  • Remove usage of Emotion. (73799)
  • Simplify ‘useSelect’ deps in ‘InserterDraggableBlocks’. (73687)

Collaboration

  • Notes: Simplify editing mode change position tracking. (73696)

Components

  • AlignmentMatrixControl: Fixup style names and nesting. (73757)
  • AlignmentMatrixControl: Migrate Emotion to style.module. (73714)
  • AnglePickerColor: Migrate Emotion to style.module. (73786)
  • FormTokenField, FlatTermSelector: Hard deprecate bottom margin. (73846)

DataViews

  • Field API: Move validation to the field type. (73642)
  • Remove extra wrapper for GridItem. (73665)

Font Library

  • Move Font Collection fetching to core-data entities. (73635)
  • Move font family fetching and types to core-data. (73637)
  • Simplify cache invalidation. (73639)

Global Styles

  • Fix ‘useSelect’ warning. (73728)
  • Fix browser warnings in Global Styles. (73279)
  • WP_Theme_JSON: use self:: For class private static methods. (73566)

Patterns

  • ContentOnlyControls: Refactor ad hoc fields to use setValue instead of updateBlockAttributes. (73680)

Site Editor

  • Fix ‘useNavigateToPreviousEntityRecord’ internal deps. (73740)

Style Book

  • Fix ESLint warnings. (73882)

Theme

  • Theme: Repurpose Figma token plugin to extract JSON override files for modes. (73860)
  • Theme: Restructure theme tokens to embed prefix, flattened modifiers. (73859)
  • Theme: Use valid DTCG color format for primitive values. (73858)

Write mode

  • Block Editor: Restore ToolSelector component for backward compatibility. (73592)

Tools

Build Tooling

  • Attachments controller: Use 6.7 compat method. (73634)
  • Fix package side effects for esbuild. (73795)
  • Linting: Disable the wordpress dependency group lint rule. (73616)
  • 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.: Add Carlos Bravo to mailmap. (73840)
  • Meta: Introduce .mailmap for transforming author names. (72412)
  • Scripts: Update license checker to ignore invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. package entries. (73528)
  • Storybook: Skip transpilation of build-modules files. (73780)
  • wp-build: Fix invalid package references for peer dependencies. (73676)
  • wp-ui: Add legacy export fields to package.json. (73850)
  • Fix CI static analysis on Windows. (73911)

Testing

  • Remove custom import resolvers and package subpath syntax rules. (72978)
  • Tests: Emulate form blocks experiments in integration tests. (73705)
  • Tests: Update assertion for ‘Global styles 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.’ end-to-end test. (73685)
  • Upgrade Playwright to v1.57. (73686)

Patterns

  • Content only and patterns: Detach edit fields from the content only experience. (73605)

First-time contributors

The following PRs were merged by first-time contributors:

  • @badasswp: Chore: Shorten timeout duration for Snackbar component. (73814)
  • @dhasilva: DataViews: Apply primary style to first column if there is no title field. (73729)
  • @manhphuc: Docs: Add missing periods to example descriptions in block-attributes.md. (73666)
  • @metodiew: Fix a typo in the documentation. (73658)

Contributors

The following contributors merged PRs in this release:

@aduth @Aljullu @andrewserong @annezazu @badasswp @cbravobernal @chriszarate @dhasilva @dmsnell @getdave @gigitux @huzaifaalmesbah @Infinite-Null @ingeniumed @jameskoster @jasmussen @jeryj @jonathanbossenger @jorgefilipecosta @jsnajdr @juanfra @lezama @Mamaduka @manhphuc @Mayank-Tripathi32 @metodiew @mikachan @mirka @ntsekouras @oandregal @ockham @priethor @ramonjd @ryelle @scruffian @shimotmk @SirLouen @t-hamano @tellthemachines @tyxla @Utsav-Ladani @yogeshbhutkar @youknowriad


Props to @youknowriad for the peer review.