What’s new in Gutenberg 22.0? (5 November)

“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.

What’s New In
Gutenberg 22.0?

Gutenberg 22.0 has been released and is available for download!

Typically, the Gutenberg release following a WordPress point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. focuses on coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. quality and bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes over new enhancements. As such, this will be a relatively quiet release.

  1. Real-time Collaboration: Post Meta Synchronization
  2. A new theme package
  3. Changelog

Real-time Collaboration: Post 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. Synchronization

This release introduces real-time synchronization for post meta, enhancing the collaborative editing experience with your custom post-meta or footnotes!

An example of synced footnotes.

A new theme package

A new package of design tokens, which will be the new foundation for Gutenberg’s design system, is now available. This package is also a prerequisite for the new UIUI User interface components package.

Changelog

Enhancements

  • Add theme package. (72305)
  • Consistently use font-weight 499 instead of 500. (72473)
  • Label enforcement workflow: Add Iteration label to PR enforcement workflow. (72670)
  • Template activation: Update 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. icons. (72772)
  • Try using DataViewsPicker in an updated media modal. (71944)
  • Update: Label of “Move to 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.” action to “Trash”. (72596)

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. Library

  • Math Block: Use monospaced font for LaTeX input. (72557)
  • Add snackbar notices for page creation in Navigation block. (72627)
  • Breadcrumbs: Add archives support. (72478)
  • Categories Block: Add taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. css class. (72662)
  • Fit text: Update help text to clarify override of font-size. (72303)
  • Latest Comments: Add option to display full comments. (72665)

DataViews

  • Add isCollapsible to the card layout in DataForm. (72540)
  • DataForm: Set spacing for regular and card layouts. (72249)
  • Keep icon-only buttons on mobile for bulk actions. (72761)
  • Update: Hide primary action buttons on mobile. (72597)

Components

  • ComboboxControl: Display reset button only if there’s a value. (72595)
  • TabPanel: Update tab font-weight. (72455)

Collaboration

  • Notes: Update delete confirmation message. (72737)

Global Styles

  • Allow access in the post editor. (72681)

Block bindings

  • Add source label to the modal title UI. (72632)

Bug Fixes

  • Core Data: Avoid extraneous when creating a new record. (72666)
  • Fix build command for tokens package on Windows. (72605)
  • Global Styles: Fix the save panel changes. (72701)
  • Packages: Do not limit the exports of the template packages. (72694)
  • PluginSidebar: Fix auto more menu item props. (72630)
  • Template activation: Fix isActive and isCustom values. (72641)
  • Template activation: Fix undefined array key PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher warning. (72729)
  • Use default popover placement for image format popover. (72550)

Collaboration

  • Block Notes: Fix issue where box shadow is cut off when active note is the last one. (72606)
  • Ensure “Add Note” component floats next to block in unpinned mode. (72494)
  • Notes: Always open histroy sidebar if note is resolved. (72708)
  • Notes: Disable floating notes for ‘template-locked’ mode. (72646)
  • Notes: Fix ‘View notes’ on mobile screens. (72546)
  • Notes: Fix PHPUnit tests. (72781)
  • Notes: Fix block toolbar indicator logic. (72736)
  • Notes: Fix strange default sidebar animation. (72710)
  • Notes: Fix the ‘glitch’ when selecting a note with a missing block. (72516)
  • Notes: Fix the focus transfer issue when switching the sidebars. (72486)
  • Notes: Load all records. (72692)
  • Notes: Prevent 403 error for low capabilitycapability capability is permission to perform one or more types of task. Checking if a user has a capability is performed by the current_user_can function. Each user of a WordPress site might have some permissions but not others, depending on their role. For example, users who have the Author role usually have permission to edit their own posts (the “edit_posts” capability), but not permission to edit other users’ posts (the “edit_others_posts” capability). users. (72767)

Block Library

  • Accordion: Update block descriptions. (72602)
  • Breadcrumbs: Fix date archives with plain permalinks. (72709)
  • Date block: Update block description. (72565)
  • Fix empty URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org value from unbinding entity from inspector sidebar. (72447)
  • Fix: Force LTR direction in Math block textarea for RTL languages. (72684)
  • Image block: Add guard for null refs in setButtonStyles callback. (72715)
  • Math: Enable horizontal auto-scrolling. (72633)
  • Post Date: Fix variations for Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.. (72617)
  • Terms Query: Show nested terms toggle when inheriting. (72510)
  • Update: Disable font size when fit text is enabled and the opposite. (72533)

Components

  • Badge: Add max-width for text truncation. (72653)
  • Button: Ensure that icons don’t shrink. (72474)
  • Fix Popover closing unexpectedly when a Menu inside it is closed. (72376)
  • Fix label markup for ‘FocalPointPicker’. (70835)
  • Fix selection of font size presets if presets have the same size value. (71703)
  • Stop using rems. (72669)

Templates 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.

  • Template activation: Allow duplicates of ‘custom’ 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 templates to be activated. (72713)
  • Template activation: Remove the ability to deactivate registered templates. (72636)
  • Templates: Adds ‘type’ property to activeField as boolean in page templates. (72648)

Command Palette

  • Disable site editor navigation commands on Networknetwork (versus site, blog) Adminadmin (and super admin) – Take 2. (72698)
  • Disable site editor navigation commands on Network Admin. (72572)

Interactivity API

  • iAPI: Fix derived state closures processing on client-side navigation. (72725)

Write mode

  • Accordion: Dont’ show Add button in contentOnly mode. (72704)

Icons

  • Fix irregular shape in not-found icon. (72645)

Block bindings

  • Add bindableAttributes in preview context. (72625)

Typography

  • Fit text: Remove sizing limitation when the block is selected. (72570)

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.

  • Notes: Fix ‘children’ embedding via REST API. (72561)

Style Book

  • Fix error with display of Heading block style variations in style book. (72551)

DataViews

  • Fix password suffix alignment. (72524)

Block Transforms

  • Add metadata transformation. (72462)

Patterns

  • Fix contentOnly insertion, removal, and moving. (72416)

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)

  • Notes: Don’t collapse note on Escape if the event has been prevented. (72657)

Block Library

  • Fix focus loss from unsync and edit button in navigation link inspector sidebar. (72436)

Components

  • Button: Update font-weight to 500. (70787)

Performance

  • Don’t subscribe to store unless fitText option is enabled. (72634)
  • Optimize build using shared package cache. (72667)

Block Editor

  • Perf: Avoid rich-text binding subscription if block does not have bindings. (72496)

Experiments

Collaboration

  • Real-time collaboration: Add support for syncing post meta. (72332)
  • Real-time collaboration: Ensure Yjs imports are inside experimental flag check. (72503)
  • Real-time collaboration: Implement CRDT persistence for collaborative editing. (72373)

Documentation

  • Fix incorrectly tabbed code blocks. (72745)
  • Move 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. to 7.0 because it was punted to future release. (72472)
  • Theme: Add Storybook stories. (72747)
  • add: Missing 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 for blocks. (72590)

Code Quality

  • Build: Fix primitives package warning. (72456)
  • Bundled packages should expose their styles in exports. (72438)
  • Fix TS types for e2e-test-utils-playwright package. (72741)
  • Global Styles: Add UI package. (72599)
  • Global Styles: Cleanup the previous global styles private exports in block-editor. (72702)
  • Move grid experiment changelog to 7.0 folder. (72508)
  • Remove specific logger in test environments. (72457)
  • Styles Canvas: Refactor state and rendering. (72635)
  • Styles: Move global styles data logic to a dedicated package. (72464)
  • Template activation: Remove fake post type for registered templates. (72674)
  • Template activation: Rename new endpoints. (72700)
  • Template activation: Revert to old endpoint for post template picker. (72661)
  • preferences: Convert the package to TypeScript. (71915)

Block Library

  • Accordion Heading: Update description. (72777)
  • Cleanup clearBinding usage. (72439)
  • Post Date: Update logic when to show the edit control. (72631)
  • Remove broken content only settings menu items feature. (72470)

Templates API

  • Template activation: Initialise old autosave and 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. endpoints. (72680)
  • Template activation: Remove reset action. (72679)

Collaboration

  • Notes: Remove custom ‘PluginMoreMenuItem’ handler. (72640)
  • Notes: Render the sidebar next to the default editor sidebar. (72618)

Block Editor

  • Switch from selector to useBlockEditingMode for AllowedBlocksControl. (72728)

Block bindings

  • Remove editorUI and modal versions. (72723)

Plugin

  • Notes: Backport REST API changes in core. (72554)

Interactivity API

  • iAPI: Update deprecated usage of data-wp-on-async. (72445)

Tools

Build Tooling

  • Build: Add a step to auto-register scripts in the build tool. (72628)
  • Build: Auto register styles from packages. (72699)
  • Build: Auto-register script modules. (72541)
  • Build: Cleanup the build script. (72740)
  • Build: Fix script_debug modules and scripts. (72485)
  • Build: Generate plugin version and make the build script plugin agnostic. (72707)
  • Build: Move the build tool to a dedicated package. (72743)
  • Build: Support third-party plugin scripts properly. (72760)
  • Build: Update output folders for scripts and modules. (72482)
  • Enqueue non-minified JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. files when SCRIPT_DEBUG is enabled. (72480)
  • FIX PHPUnit failure in previous WordPress version. (72705)
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions: Allow writing PRs when auto-cherry-picking. (72573)
  • Persist credentials when cherry-picking commits to a 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".. (72556)
  • Storybook: Fix dev script. (72487)

Testing

  • Add end to end tests for Fit Text. (72406)
  • Change bin script type-checking from inclusion to exclusion. (72675)
  • Improve output buffer for sending server-timing 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.. (72536)
  • Notes: Improve pinned sidebar end-to-end test. (72652)
  • Update guidance around unique element IDs. (72748)
  • Upgrade Playwright to v1.56. (72751)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@adamsilverstein @aduth @cbravobernal @chriszarate @ciampo @DAreRodz @elazzabi @ellatrix @harshbhonsle @heavyweight @ItsRoy69 @jameskoster @jeryj @jorgefilipecosta @joshualip-plaudit @juanfra @levinbaria @lezama @luminuu @Mamaduka @manzoorwanijk @mikachan @mirka @ntsekouras @oandregal @ockham @priethor @ramonjd @roseg43 @ryanwelcher @sidharthpandita1 @stokesman @t-hamano @talldan @tellthemachines @Utsav-Ladani @westonruter @youknowriadhamano @talldan @tellthemachines @theaminuli @theminaldiwan @Utsav-Ladani @yashjawale @youknowriad

Props @sirlouen and @priethor for peer review.

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