What’s new in Gutenberg 12.2? (22 December)

“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 published following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


If you observe the Gregorian Calendar, New Year’s Eve is fast approaching, which means that the time has come for the next release of Gutenberg!

Gutenberg 12.2 has just been released! It’s the last minor Gutenberg release in 2021. This release improves compatibility with the upcoming WordPress 5.9 release and 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. Also, it brings new features, code quality improvements, 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. You can find the release highlights below.

Table of contents

Seamless navigation between the Site Editor and the Template List

Gutenberg 12.2 takes the Template List one step beyond, improving its user experience and performance. Thanks to its new client-side routing, WordPress doesn’t need to reload the page when navigating between the Site Editor and the Template List, reducing the time spent rendering unneeded HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. code.

Improvements to post comments

Starting with Gutenberg 12.2, the Comments Query Loop block is now able to display nested comments. This improves user experience as it is now much easier to understand if a comment responds to another comment or is just a first-level comment.

Also, the new Comments Pagination Numbers block allows displaying page numbers inside the Comments Pagination block, which in turn can be used inside the Comments Query Loop block. This improves the UIUI User interface because users can quickly navigate the comments using the page number.
Also, the pagination in the Comments Query Loop block now works similar to the pagination for posts.

A new home for border controls

Although lots of blocks are already taking advantage of border supports, this release switches border supports to the ToolsPanel, and sets which border properties are displayed in the ToolsPanel by default. The ToolsPanel, first introduced in Gutenberg 11.3, offers progressive discovery options for those provided through block supports, improving the user experience and consolidating the 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. UI.

New font size labels in the FontSizePicker component

Gutenberg 12.2 improves the way font sizes are displayed in the sidebar by using a sequence of numbers (1, 2, 3, 4, 5) as labels for the font sizes. These simplified labels can accommodate use cases with complex CSSCSS Cascading Style Sheets. values, helping users understand the available font sizes.

Improved color picker

More components are being iterated in this release. In an effort to reduce sidebar clutter and improve the design tools user experience, all blocks, including those that use custom color implementation, can now take advantage of the new dropdown-based color picker. This improved UI is easier to use, especially when editing a few colors back-to-back.

Preview for Block Styles in the WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor

While Gutenberg 12.0 introduced block styles preview on hover for the Block Editor, this release brings this functionality to the Widgets Editor, too. It’s now possible to preview style variations in the Widgets Editor when editing blocks that support this (e.g., Image, Table, Button blocks) by hovering or focusing over the style name, for full 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) support.

Changelog

Enhancements

Block Library

  • New block: Add Comments Pagination Numbers block. (36890)
  • Comment Template block: Handle nested comments. (36065)
  • Comments 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.: Improve context handling in inner blocks. (37196)
  • Image: Reflect media deletion in the editor. (35973)
  • Navigation:
    • Add navigation blocks post-processing after migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. from menu items. (36950)
    • Refactor modal padding to be simpler and more flexible. (37323)
    • Remove Navigation Menus from the Appearance menu. (37212)
    • Add clearance for appender in submenus. (36720)
  • Refactor handling of padding for group and column blocks. (37356)
  • Template Part: Add actions that fire during the loading process of block template parts. (36884)

Styles and design tools

  • Add the Welcome Guide option to the More Global Styles Actions dropdown. (37180)
  • Make the Blocks section more distinguishable. (37293)
  • Move the Edit colors button to a standard menu item. (36842)
  • Move Duotone palette to the bottom of global styles gradients. (37253)
  • Border controls: display border properties in the ToolPanel. (34061)

Components

  • FontSizePicker: Use an incremental sequence of numbers as labels for the available font sizes at the segmented control (conditionally). (37038)
  • ColorPalette: Improve accessibility and visibility. (36925)
  • ToolsPanel: Standardize input control label margin. (36387)
  • Unify styles for ColorIndicator with how they appear in Global Styles. (37028)
  • Update PanelColorGradientSettings component to use dropdowns. (37067)

Site Editor

  • Add the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. back to the Appearance menu. (37175)
  • Add client-side routing for Site Editor. (36488)
  • Add a new aria-pressed attribute to the Toggle navigation button. (37351)
  • Template revert flow: Make label description source agnostic. (37004)

Packages

  • Scripts: Enable ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Fast Refresh for block development. (28273)
  • List Reusable Blocks: Refactor ImportForm into a functional component and use hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (36938)

Widgets Editor

  • Implement preview for blocks. (37012)

Post Editor

  • Template Part block should not be available in the Post Editor inserter. (37157)

Bug Fixes

  • Remove 4 instances of gutenberg text-domain from CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (37229)

Block Library

  • Fix return type in the DocBlockdocblock (phpdoc, xref, inline docs). (37352)
  • Fix deprecated usage of passing null to explode function. (37392)
  • Gallery:
  • Fix color issue for captions with hyperlinks in the Gallery block. (37033)
  • Fix documentation and function naming for gallery block registration in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (37132)
  • Remove placeholder border. (37050)
  • Post Comments:
  • Fix form-submit styles by adding button classes to the submit button in the post-comments block. (37245)
  • Fix width of the post comment form input. (37238)
  • Use block markup for the comment form button when using a block theme. (37315)
  • Comments Pagination Block: Add default styling. (37057)
  • Image:
  • Set image display mode to grid when no alignment is set to align caption onresize event properly. (35787)
  • Fix resizer controls being hidden in Safari when switching between alignments. (37210)
  • Navigation:
  • Fix gutenberg_ prefixed function references in Core. (37021)
  • Fix navigation justifications. (36991)
  • Fix vertical alignment of page list in the modal. (37321)
  • Remove hardcoded typography units. (37349)
  • Fix vertical layout. (37009)
  • Switch to addEventListener event for load event in the navigation block view script. (37135)
  • Don’t request the deprecated navigation areas endpoint outside of the 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. (37187)
  • Navigation Link Control: Hide the Transforms component when no options are available. (37284)
  • Remove the deprecated navigation area block from the inserter. (37026)
  • Query Loop: Add useBlockPreview component, fix alignment of the Query Loop block in the editor. (36431)
  • Query Pagination: core/query-pagination-next and core/query-pagination-previous blocks: change the markup on the first and last pages of the pagination. (36681)
  • Search: Fix application of border color class in the editor. (37242)
  • Template Part:
  • Fix isMissing condition check. (37370)
  • Use Core version of template and template part post types and REST endpoints for WordPress 5.9, with backward compatibility for WordPress 5.8. (36898)
  • Update the micromodal package to include a click-through fix. (36837)

Components

  • Card: Support the extraSmall option for the size prop. (37097)
  • Drop Zone: Fix HTML drop issues with the Windows browsers. (37151)
  • Don’t load Radio and RadioGroup components directly. (36934)
  • DuotonePicker typo fix. (36662)
  • Element: Ensure that the package uses the up-to-date React types. (37365)
  • Fix incorrect rendering of ToggleGroupControl‘s active state. (37332)
  • Hide the remove control point button because removing it would break gradient control. (37186)
  • Import experimental Heading and Text Components. (37290)
  • Make the color popover on the gradient picker appear as expected. (37115)
  • Remove unused reakit-utils dependency from peer dependencies. (37369)
  • Storybook: Fix deprecated disabled key. (37112)
  • ToggleGroupControl: Fix extra update on incoming change. (37224)

Site Editor

  • Allow global styles sidebar panels to fill vertical space. (36845)
  • Display a notice if export fails. (37131)
  • Fix edit template part link in 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. dropdown. (37249)
  • Fix template resolution to give precedence to PHP templates defined in a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/.. (37074)
  • Hide the block appender in the Template Part editor. (37213)
  • Improve notification when saving content in the Site Editor. (36897)
  • Improve handling of parsed requests. (37209)
  • Sync Export 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. error codes. (37347)
  • Template Editor Mode: Hide editor mode switcher. (37359)
  • Use server definition for the Template Areas. (37215)
  • Fix the white screen of death on the Templates page when user avatars are disabled. (37458)

Styles

  • Allow selector ordering to ensure theme.json root selector margin takes precedence. (36960)
  • Custom keys from theme.json: Fix kebabCase conversion. (37380)
  • Do not remove theme presets if defaults are hidden. (37008)
  • Fix CSS Custom Properties for presets in the Site Editor. (36851)
  • Fix how appearanceTools works. (37254)
  • Fix styles for previews and patterns. (37296)
  • Font sizes: Update default values. (37381)
  • Remove CSS that causes conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with theme.json. (36424)

Design Tools

  • Border Style Control: Update styling for consistency with border width control. (37244)
  • Border panel:
  • Don’t restore deselected border color when width gets changed. (37049)
  • Update the value of the ColorPicker component when color is cleared. (37048)
  • Gradients
  • Fix clearing a custom gradient from throwing a React warning. (37051)
  • Enable adding custom gradient when gradients are disabled. (36900)

Compatibility with Core and library code

  • Fix array key warning in block supports layout. (37101)
  • Templates: Search for old template names in the parent theme too. (36910)
  • Fix theme requirement validation when using WordPress 5.8. (37226)
  • Fix WordPress 5.9 check for conditionally running code. (37235)
  • Fix mistake in the_remove_theme_attribute_in_block_template_content function. (37137)
  • Gallery: Enable the new gallery block by default if running in Core. (37134)

Packages

  • Core Data: Fix returning empty array in the getEntityRecords function for unknown entities. (36984)
  • Include @babel/core as a dependency where applicable. (37328)
  • Format library: Fix unsetting highlight color. (37062)

Block Editor

  • Mark the last change as persistent on save. (36887)
  • Fix content loss when ungrouping template parts or reusable blocks. (37280)
  • Simplify the RESET_BLOCK action to fix the loss of content when using template part focus mode. (37283)

Post Editor

  • Multi-Entity Saving: Decode HTML entities in item titles. (37353)

Documentation

  • Update documentation related to schemas. (37294)
  • Remove versioning in theme schema descriptions. (37165)
  • Fix the broken link on the plugin description page. (37362)
  • Handbook:
  • Add information about skip links to the block theme overview. (36555)
  • Add closing ticks for blockGap code example. (37338)
  • Add how-to guide documentation template. (36694)
  • Add link and details for npx in create block tutorial. (37376)
  • Consolidate React Native documentation. (36685)
  • Fix a link to the how-to guide template. (37191)
  • Move classes used in the navigation block from the component to the new readme. (37375)
  • Update Format API how-to guide. (37298)
  • Update broken links. (37121)
  • Improve formatting of headings in the contributors’ guide. (36689)
  • Fix type for prefix transformation. (36362)
  • Fix broken links in the Resources section. (37307)
  • Remove the semicolons from the 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. examples. (37129)
  • Packages:
  • Block Editor:
    • Add a documentation note about inner blocks and excerpts. (36405)
    • Update example of usage for suggestionsQuery component. (37281)
  • Componentes:
    • Add missing changelog entries. (37384)
    • Fix code formatting for card components. (37268)
    • Fix importing from the wrong package. (37192)
    • Fix missing link for shortcut documentation. (36800)
    • Update QueryControls README.md. (37233)
  • Site Editor: Update support documentation URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the Welcome Guide. (37176)

Code Quality

Compatibility with Core

  • Better synchronization between Gutenberg and Core code. (37141)
  • Move WordPress 5.9 wp-admin menus compatibility code to lib/compat folder. (37257)
  • Move the block page templates hook into compat/5.9 folder. (37142)
  • Move template loader hooks and functions into lib/compat folder. (37149)
  • Synchronize wp_is_block_theme function and block-templates block support with Core. (37218)

Global Styles

  • Do not register Global Styles custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. in WordPress 5.9. (37282)
  • Port Global Styles code to lib/compat/wordpress-5.9:
  • CSS custom properties. (37334)
  • Front assets. (37335)
  • Rename WP_Theme_JSON_Resolver methods to make them compatible with Core. (37393)

Packages

  • Dependency Extraction Webpack Plugin: Sort externalized dependencies report. (37377)
  • Block Editor:
  • 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. component: Use block settings to pass assets. (37193)
  • Remove duplicate block styles. (37133)
  • Specify the WordPress versions where API is deprecated. (37150)
  • Components
  • Refactor DatePicker into a functional component. (36835)
  • Storybook: Update to version 6.4. (37367)
  • Data
  • Ensure that redux is listed as a dependency. (37364)
  • wordpress/data: Refactor use-select component in preparation for adding types. (37017)
  • Scripts: Update dependencies shared with other WordPress packages. (37395)

Site Editor

  • Remove unused PHP code. (36997)
  • Revert Site Editor: Set the on the list page to be the same as the CPT name. (37270)

Block Library

  • Remove gutenberg_ prefix from @wordpress/block-library. (37341)
  • Block Library: Rename Query Pagination blocks. (37091)

Tools

Testing

  • End-to-end Tests:
  • Increase delay in image block end-to-end test to fix intermittent failure when clearing URL field. (37136)
  • Update Multi-Entity Saving test to improve reliability. (37139)
  • Sanitize flaky test report file names. (37390)
  • Retry login again after a bad nonce request to prevent intermittent test failures. (37219)
  • Fix Multi-entity saving and Template parts related tests. (37333)
  • Fix Heading test. (37382)
  • Re-enable most of the navigation block end-to-end tests. (37214)
  • Use global transients for PHPUnit tests. (37122)
  • Fix usage of useSetting('color.palette'). (37108)
  • Add tests for the new gallery hooks. (36801)

Linting

  • ESLint:
  • Add support for ESLint v8. (36283)
  • Fix Babel config resolution when a custom ESLint config is present. (37406)

Build Tooling

  • Specify PHP version in Composer. (37007)
  • Remove unused jest-serializer-enzyme dependency. (37373)
  • Remove some labels from the Experiments section of the changelog. (37098)
  • npm:
  • Fix package dependencies issues discovered with pnpm. (37396)
  • Use the latest minor version of webpack in Gutenberg. (37371)
  • Fix build failure on Windows. (37189)

Performance benchmark

VersionTime to render first blockKeypress event (typing)
Gutenberg 12.25.672 s42.38 ms
Gutenberg 12.15.484 s37.17 ms
WordPress 5.85.807 s46.5 ms

Thank you, @priethor, for coordinating the release process, proofreading, and helping to select release highlights!
Thank you, @jameskoster and @joen for helping me to prepare visual assets and proofreading the release post!
Thank you, @mamaduka, for uploading the plugin to WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/!
Kudos to all the other contributors who have helped to make this release possible.

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