What’s new in Gutenberg 12.3? (5 January)

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


Gutenberg 12.3 has just been released and is available to download, making it the first Gutenberg release of 2022!

This release contains fewer contributions than usual due to the holiday season that took place in some parts of the world in the last two weeks. However, it still has many important contributions, which is an excellent reminder of WordPress’ contributor diversity. Let’s dive into some of them.

Table of contents

New blocks to build with

We have three brand new blocks at our disposal.

Author Name 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.

As part of an effort to split the Post Author block into separate blocks to allow for even more layout options, the Author Name block has been released. This means you will have extra options to customize the author name to your liking.

Post Author Name

More atomic author-related blocks will follow in the future, like Author 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. or Author Bio.

Comments pagination: Next and Previous blocks

Continuing with the work that has been done on the Comments Query Loop blocks in previous Gutenberg releases, the Comments Next Page and Comments Previous Page blocks have been released.

They are the counterparts of the Next Page, and Previous Page blocks of the Query Loop, but built for the 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.. They display links to navigate the comments forward and backward when not all of the comments are shown on the current page.

Comments Previous and Next Page

With the release of these two blocks, we conclude all the planned inner blocks for the Comments Query Loop. However, work on the Comments Query Loop blocks has not finished yet: more improvements are in the works.

More controls to customize

Blocks keep getting more powerful and this release is no exception.

Spacer block: custom units

Custom units can now be used to configure the Spacer block:

  • EM: Relative to parent font size
  • REM: Relative to root font size
  • VH: Viewport height
  • VW: Viewport width
Custom Units in the Spacer block

Group block: gap support & typography support

The Group block can now use the new Gap support, which adds the ability to choose the distance between the children items of the block.

This new gap setting is also available in the Row variation (added in Gutenberg 11.5), except that the gap is added horizontally instead of vertically. This allows you to have even more options to customize the layout to your liking.

Typography was added to the Group/Row blocks. This can come in handy when you need to define the typography settings for a whole section, like a 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., and you don’t want to duplicate the same typography settings over multiple blocks.

Set your site icon using the Site Logo block

There is now a new option in the Site Logo block settings to sync the site icon* to the Site Logo image. When the toggle is switched on, any updates made to the Site Logo block image are also applied to the site icon. This is an important flow that allows for parity between the Site Editor experience and 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..

* Site icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps.

Set site icon with Site Logo settings

Restrict Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. creation for non-adminadmin (and super admin) users

From now on, only admins can create Navigation Menus. This matches the current menu system in WordPress.

When non-admin users add a Navigation block, they will now see a warning telling them they do not have permission to create Navigation Menus and instead will be presented with the option to select an existing one. This allows folks to still add navigation to their content in line with broader WordPress permissions.

Restrict Navigation Menu creation for non-admin users
Non-admin users can still add a Navigation block and select an existing menu.
If non-admin users create a menu, changes won't be saved
If a non-admin user tries to create a menu, changes won’t be saved.

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Blocks Reference

There is a new Handbook page that lists all the core blocks included in 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. It contains the name, description, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., supports, and attributes of each block and it is generated automatically using their 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. properties. This resource makes it easier for anyone who wants to extend or customize the core blocks.

Core Blocks Reference section in the Handbook

Changelog

These are all the changes included in this release.

Features

Block Library

  • Group/row blocks:
    • Add Gap support. (37459)
    • Add Typography support. (37456)
  • New Author Name block. (36001)
  • Comments Pagination:
    • New Comments Pagination Next block. (36562)
    • New Comments Pagination Previous block. (36912)

Enhancements

Block Library

  • Navigation:
    • Enable an even more compact setup state. (37089)
    • Use rems for padding. (37478)
  • Site Logo: Add option to set site icon from Site Logo block. (35892)
  • Paragraph: Add font family support. (37586)
  • Comments Template: Add comments pagination. (37610)
  • Embeds: Simplify the embed loading state. (37548)
  • Spacer: Add custom units for height and width. (36186)

Global Styles

  • Make the global styles subtitles font smaller. (37600)
  • Add support for nameless font sizes. (37410)

Colors

  • Allow color gradient popover to be above the color toggle. (37430)
  • Make color style labels simpler. (37493)
  • Use subtitle styles for the palette names. (37460)

Design Tools

  • Border panel: Collapse color controls. (37425)

Document Settings

  • Add class name to post author on edit post sidebar. (36269)

Site Editor

  • Update save panel’s cancel button from icon to visible text. (37310)

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)

  • Latest Posts: Add aria-label to featured links. (36251)

Bug Fixes

Block Library

  • Navigation:
    • Restrict Navigation permissions and show UIUI User interface warning if cannot create. (37454)
    • Ensure the overlay menu works when inserting navigation block patterns and that inner blocks are retained. (37358)
    • Fix navigation appender. (37447)
    • Revert all margins on navigation-item in the editor. (37587)
    • Fix page list issues in the overlay. (37444)
    • Show a UI warning when the user does not have permission to update/edit an existing Navigation block. (37286)
    • Try cascading nav styles through class names. (37473)
  • Query Loop:
    • Fix editable post blocks in Query Loop with zero queryId. (37629)
    • Changed the letter case for Post Type to Post type. (37499)
    • Query Pagination Next: Hide block if the custom query has no results. (37553)
    • Revert Query Pagination Next/Previous placeholder(36681). (37520)
  • Site Logo: Fix block alignment issues. (36627)
  • Gallery: Fix block registration hook priority. (37409)
  • Post Content/Title: Reflect changes when previewing a post. (37622)
  • Post 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.: Specify paragraph as post excerpt 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.) name. (37412)
  • Reusable Block: Fix embed handling. (37554)
  • Site icon: Fix site icon styling to display non-square site icons within a square button. (37570)
  • Template Part: Only display a missing notice in debug mode. (37404)
  • ServerSideRender: Fix loading state. (37623)
  • Comments Avatar Block: Show avatar drag handles only when selected. (37567)

Global Styles

  • Color editor discards colors with the default name. (37496)
  • Gradients are not being applied by class. (37597)
  • Impossible to edit the theme and default colors. (37497)
  • Blank site editor when theme name contains a period. (37167)
  • Lower the specificity of font-size CSSCSS Cascading Style Sheets. Custom Properties in the editor. (37526)
  • Use inset shadow on color indicators and adjust spacing. (37500)

Block Editor

  • Fix Enter handling for nested blocks. (37453)
  • Restrict delete multi-selected blocks shortcut. (37595)
  • Avoid using CSS variables for block gap styles. (37360)

Themes

  • Add comment-form and comment-list to default html5 theme support. (37536)
  • Avoid Duplicated “Theme File Editor” menu. (37592)
  • Fix conditional check “Theme File Editor” menu. (37616)
  • Fix duotone theme cache. (36236)

Template Editor

  • Avoid undoing issues when resetting parent blocks for controlled blocks. (37484)
  • Change the color of the welcome dialog close icon, so it is visible against a black background. (37435)
  • Template Editing Mode: Fix options dropdown. (37442)
  • Try to fix auto-resizing in template part focus mode. (37394)
  • Update the template list action labels. (37576)

Site Editor

  • Add customized indicators to plugin templates that have been customized. (37329)
  • Register block editor shortcuts. (37577)
  • Update regex to handle 404 template slug. (37579)
  • Parse 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. blocks outside the content. (37545)

Accessibility

  • Editor: Focus when navigation toggle receives state false. (37265)
  • Navigation: Only add dialog role when modal is open. (37434)

npm Packages

  • Fix missing peer dependencies where ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. is used indirectly. (37578)

Testing

  • Fix flaky Navigation block end-to-end test by mocking out URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org details endpoint to avoid 404. (37501)

Post Editor

  • Multi-entity saving: Allow publishing a post while not saving changes to non-post entities. (37383)

Components

  • ToolsPanel: Allow items to register when panelId is null. (37273)

Design Tools

  • Make block support tools panels compatible with multi-selection. (37216)

Documentation

Packages

  • Add automated core blocks documentation. (36183)
  • Added README for GradientPicker. (37614)
  • Add a link to 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.-block example in gutenberg-examples repo. (37633)
  • Fix parameter type in the render function of file block. (36262)
  • Add changelog entry for __experimentalIsRenderedInSidebar gradient components flag. (37457)

Handbook

  • Switch code distinction to JSX & Plain. (37348)
  • Fix a grammatical error in the Create Block tutorial. (37636)
  • Fix plugin sidebar tutorial not publishing. (37505)
  • Update plugin sidebar to new how to guide template. (37490)
  • Update “Local by Flywheel” name and URL. (37512)
  • Update Meta Boxes to a single page how to guide. (37621)

Code Quality

Compatibility with Core

  • Adds missing block template class properties. (37556)

Formatting

  • Fix lint issues. (37618)
  • Move block patterns compatibility code to lib/compat folder. (37451)

Packages

  • Data:
    • Block top level useSetting paths. (37428)
    • Deprecate receiveUploadPermissions. (37508)

Site Editor

  • Remove dead code. (37581)

Components

  • Storybook: Tweak configuration for v6.4 update. (37544)

Security

Tools

Testing

  • End to end:
    • Switch to using a $eval to fill user creation fields. (37469)
    • Fix and enable remaining navigation block end-to-end tests. (37437)
    • Add block editor shortcuts end-to-end tests. (37624)

Build Tooling

  • Add npm-run-all package to simplify running scripts. (37558)
  • Update caniuse to latest. (37588)
  • Fix pre-commit hook to build block documentation. (37613)

Performance Benchmark

Post Editor

VersionTime to first blockKeypress event
Gutenberg 12.36.7 s50 ms
Gutenberg 12.26.7 s49 ms
WordPress 5.86.9 s53 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.36.7 s41 ms
Gutenberg 12.26.7 s43 ms
WordPress 5.84.3 s12 ms

Time to first block: firstBlock
Keypress event: type


Thank you, @gziolo and @annezazu for helping me with the release process, proofreading this post, and helping to select the release highlights.

Thank you, @javiarce for creating the assets included in this post.

And finally, thanks to all those who contributed to this release!

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