What’s new in Gutenberg 11.9.0 (10 November)

It’s now November, which means this is the final 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/ release for WordPress 5.9! Included are several new Gutenberg blocks for working with post comments, along with a host of enhancements to existing blocks with a lot of focus going into improving the Navigation 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., which will feature heavily in block themes.

Finalizing the Site Editing entry point

In preparation to introduce Site Editing in WordPress 5.9 and following the site editing IA proposal, the Site Editor menu item has been renamed to “Editor”, and now sits under the Appearance menu.

Fullscreen pattern explorer modal

With the increasing number of block patterns available in the pattern directory and bundled with themes, there is now a full-screen modal pattern explorer that can be accessed via an Explore button in the pattern inserter. This explorer allows users to find patterns in a bigger, more advanced tool.

New comment blocks

This release includes a handful of new blocks to allow for granular control over the design of comments in templates for posts. The new Comments Query Loop and Comment Template blocks work similarly to the 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. and Post Template blocks, but for the display of comments via a default template composed of Post Comment Author, Post Comment Date, and Post Comment Content blocks. Site owners can lay out the blocks to suit their designs, for example, by including the newly added Comment Author Avatar block.

Outside of the display of the comments themselves, are two blocks for displaying the Comment Reply Link and Edit Comment Link.

With these new blocks now available, the existing experimental Post Comment block has been deprecated, with the block now hidden in the inserter.

Further iterations on the Navigation block

With its inclusion in 5.9 and all its recent enhancements, the Navigation block is no longer considered experimental. The block has now opted-in to the flex layout block support, the placeholder for the block has been simplified, and the UIUI User interface and naming of navigation entities have been refined. The data layer for the Navigation block has also been improved, as the block’s data is now saved to a wp_navigation 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., allowing greater flexibility surrounding the management of navigation menus used for this block. Among these management improvements, there is an additional menu item for editing and managing navigation menus, found under the Appearance tab, and it is now also possible to create new menus from an existing Navigation block directly within the editor.

Typography tools enhancements

The Typography controls for blocks have been switched to use the ToolsPanel component, which allows blocks’ frequently used settings to be displayed by default, with more advanced controls able to be exposed via a menu. With this in place, typography support across the whole block library has been updated, with many blocks now opting into more controls. For example, most text-based blocks like paragraph, heading, and list blocks now support font style, letter spacing, and text transform, with only the most common font size displayed by default.

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

Performance and accessibility of the block list view have been improved by using a windowing technique that now renders a fixed number of items at a time instead of every block. The post title component is now covered for screen readers, and announcements have been added on formatting changes in rich text fields. Also, the “Save” keyboard shortcut has been rolled out to the site editor.

Other Notable Highlights

As part of contributors’ efforts to provide an outstanding editor performance, the initial loading of the site editor has been improved. A few features common to the block editor have now been rolled out to the site editor, including rich previews in the link editing UI, which also features an extra text field when modifying an existing link. The UI for saving multiple entities (e.g. site, template, and template parts) has also been improved with descriptive text added.

Block enhancements include padding support for the Columns block, and the Post Author, Post Excerpt, Comment Author, and Code blocks now all have spacing support. Support for embedding Wolfram Cloud links has been added, and there is now transparency support in the Duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. that can be applied to images.

In 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. changes, there is a proposed new set of functions to make it easier for plugins and themes to extract data from theme.json settings and styles without having to use WP_Theme_JSON_Resolver. Also, usage of InnerBlocks.Content within blocks’ save functions has been replaced with useInnerBlocksProps.save for better consistency with behavior in edit components.

The full set of changes included in this release can be found below.

Gutenberg 11.9.0

Features

Block Library

  • New Block: Comment Reply Link. (35774)
  • New Block: Comment Link. (35965)
  • New Block: Comment 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.. (35396)
  • New Block: Comments Query Loop. (35231)

Enhancements

Block Library

  • Buttons: Add flex layout and new layout type. (35819)
  • Code: Add support for padding, color, and border styles. (27582)
  • Columns: Add padding support. (35701)
  • Comment Author Name: Add spacing to have same options as Post Author Name. (36213)
  • Comment Edit Link: Add alignment option. (36033)
  • Embed: Add Wolfram Cloud as an embed provider. (35656)
  • Gallery: Replace gallery experimental setting with a check for use_balanceTags. (34979)
  • Image: Add data-id attribute on server side render for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. galleries. (35975)
  • Navigation: Add create new menu button. (36245)
  • Navigation: Add delete nav menu button. (35981)
  • Navigation: Add featured transforms in Link Control for Navigation Link items. (35857)
  • Navigation: Add flex layout. (36169)
  • Navigation: Add missing menu item attributes. (35634)
  • Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. (36024)
  • Navigation: Migrate classic menus to block-based menus on theme switch. (36255)
  • Navigation: Mobile responsive navigation by default. (35917)
  • Navigation: Provide a way to manage wp_navigation posts from wp-adminadmin (and super admin). (36126)
  • Navigation: Reword navigation color labels. (35916)
  • Navigation: Save data to a wp_navigation post type. (35746)
  • Navigation: Show the placeholder again when moving from a valid menu to non-existing menu. (36210)
  • Navigation: Update block entity automatic name generation and refine naming UI. (36238)
  • Navigation: Use a single placeholder for the block. (36023)
  • Page List: Create a JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. version for the editor. (31670)
  • Post Author: Add spacing controls. (35963)
  • Post Comment: Deprecate the block now that the Comment Query Loop block has been added. (36032)
  • Post Comment Author: Add alignment options. (36045)
  • Post Comments: Even out the top margin inside the block. (35887)
  • Post Comments: Hide the “Comments Closed” message. (35743)
  • Post Comment Form: Adds in basic styling for post comment form. (35704)
  • 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.: Add spacing controls. (35959)
  • Post Excerpt: Don’t print the wrapper when there is no excerpt. (35749)
  • Post Title: Return no markup if title is empty. (35861)
  • Search: Add contextual defaults when inserted in Navigation block. (36125)
  • Gallery block: Add a dismissible warning about the need for versions >=18.2 of the mobile app. (36012)

Accessibility

  • Add announcement on formatting change for screen readers. (35896)
  • Add aria-current to navigation link, submenu, page list. (35880)
  • Link editing: Improve focus styles for Link UI preview title. (35853)
  • Site Editor: Enable the “Save” keyboard shortcut. (36138)
  • Try to communicate to screen readers that post title is textarea. (35898)

Block Editor

  • Block toolbar: Remove visual clue from text alignment icon. (35922)
  • Drag and drop: Show drag slot instead of hiding the block being dragged. (33950)
  • Enable rich previews in the Link UI for the Site Editor. (35951)
  • Link editing: Update Link UI design for preview action buttons to use icons for edit and unlink. (35833)
  • Multi-Entity Saving UI Improvements. (35933)
  • Use the block’s name in the “remove block” menu item in the block settings dropdown. (35872)
  • StripHTML: preserve leading and trailing spaces and strip script and on* attributes. (35539)

Full Site Editing

  • Improve the initial loading of the site editor. (36044)
  • Move the Site Editor menu item to sit under Appearance and rename to Editor. (36064)
  • Remove navigation panel in site editor. (36194)
  • Use Heading component on NavigationMenu and NavigationGroup components. (36009)
  • Use SearchControl component inside nav menu. (36011)

Components

  • ColorPicker: Implement new color palette editor component. (35783)
  • Duotone: Add description to clarify that the underlying image will not be affected. (36018)
  • Modal: Wrap the modal contents in a StyleProvider. (36261)
  • ToolsPanel: Update typography panel layout. (35911)
  • LinkControl: Split control for URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org and Text within Link UI. (33849)

Template Editor

  • Add resizer to template part focus mode. (35728)
  • Auto resize the height of template part focus mode. (35974)

Global Styles

  • Remove the duplicated title in background, text and link views. (35583)
  • Typography: Switch to ToolsPanel for block support UI. (33744)
  • Add a Global Styles endpoint and use it in the site editor. (35801)
  • Migrate theme.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. v1 to v2. (36155)
  • Update: Show all color and gradient origins (core, theme, and user). (35970)

Design Tools

  • Duotone: Enable transparency. (34130)
  • Layout: Add flex-wrap control to flex layout. (36003)
  • Typography block support: Add typography support and defaults. (34064)

Media

  • Remove “security” verbiage from warning when filetype does not pass on upload. (36226)

Patterns

  • Add an inserter flag to hide patterns from UI. (36108)

Themes

  • Remove experimental feature notice for block themes. (36083)

General Interface

  • Apply borders to canvas rather than other UI elements. (31081)

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

  • Respect fields param for global styles REST API requests. (36206)
  • URL Details: Update regex to include og:Description. (35875)

New APIs

Global Styles

  • Add API to access global settings, styles, and stylesheet. (34843)

Block Library

  • Inner blocks: Add useInnerBlocksProps.save function for edit/save symmetry, and stabilise API. (26031)

Bug Fixes

Block Library

  • Buttons: Address deprecation issues from Buttons flex layout PR. (36192)
  • Classic: Fix select all blocks side effect that overwrote paragraph block contents. (35999)
  • Column: Only add flex-basis if width contains a number. (35831)
  • Comment Template: Move inner blocks container to separate components. (36174)
  • Blocks: Fix relative URLs for inlined styles. (35538)
  • Navigation: Disable ability to edit wp_navigation menus via Appearance -> Navigation Menus for non-FSE themes. (36257)
  • Fix incorrect attributes definitions. (36264)
  • Fix saving template parts in the site editor by fixing controlled inner blocks parent block attributes updates. (35827)
  • Fix incorrect attributes definitions for Column, Cover, and Group blocks. (36140)
  • Gallery: Make sure the mobile warning notice only runs when images are added to a new block. (36326)
  • Gallery: Only show the gallery upload error message if mixed multiple files are uploaded. (35790)
  • Gallery: Remove the arbitrary alt text that is added to gallery images. (35936)
  • Group: Fix inner container regexes that relied on fixed div 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.). (36256)
  • Heading: Avoid error on split when the paragraph isn’t registered. (35871)
  • Image: Make sure the Image block border radius is inherited if the image is linked. (36289)
  • Navigation Submenu: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice caused by stale id reference. (35984)
  • Navigation overlay menu: Fix submenu spacing. (35823)
  • Navigation: Ensure menus exist before map operation. (36355)
  • Navigation: Fix accessibility issues. (36292)
  • Navigation: Fix dropdown indicator position. (36106)
  • Navigation: Fix issues with responsive justifications. (35913) and (36105)
  • Navigation: Fix padding for social links on mobile. (35824)
  • Navigation: Fix submenus not opening on click. (36290)
  • Navigation: Hide post attributes 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. box. (36358)
  • Navigation: Small styling fixes and tweaks. (36298)
  • Pattern: Remove wrapping div. (36090)
  • Post Comment: Handle the case where a comment does not exist. (35810)
  • Post Navigation Link: Do not translate HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. tag. (35930)
  • Post Template Block: Move inner blocks container to separate component. (35945)
  • Post Terms: Prevent the block from breaking on pages. (35957)
  • Site Logo: Fix center alignment. (35971)
  • Site Logo: Fix fatal error in Site Logo block in WP 5.9. (36195)
  • Prevent PHP notice in Elements block support for blocks with empty content. (35836)

Components

  • AnglePickerControl: Use admin color scheme. (35908)
  • BaseControl: Fix undefined Help text id if no id is passed to component. (35899)
  • ColorListPicker: Fix spacing to accomodate the new color picker. (36017)
  • ColorPalette: Fix className. (36016)
  • ColorPicker: Fix unexpected movements, and closing on first click in the color picker. (35670)
  • Popover: Check anchorDocument default view before removing events. (35832)
  • RangeControl: Fix style issue in RTL. (35777)
  • Storybook: Lazy load LTR/RTL styles for consistent specificity. (35771)
  • Text: Fix text color value to use correct gray color value for Link UI preview description text. (35851)

Global Styles

  • Fix navigation in 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.. (36203)
  • Fix presets data for themes that do not provide any preset. (36054)
  • Generate preset metadata for font-family in the site editor. (36022)
  • Hotfix for leftovers of WP_Theme_JSON_Resolver::Get_merged_data. (36173)
  • Lower the specificity of border & padding styles for the outline block style in the button block. (35968)
  • Theme.json: Remove custom prefixes from properties that did not land in 5.8. (34485)
  • Fix Rest global styles controller accessing configuration that may not exist. (36047)

Block Editor

  • Allow moving metaboxes to previously empty area. (25187)
  • Change console.error to console.warn for enqueued styles in the editor. (35914)
  • Fix inserter with block pattern categories. (36116)
  • Fix navigation block link control zero value in it. (36198)
  • Fix the update of link and suggestions in LinkControl. (32320)
  • Make Link UI inactive if selection extends beyond format bounds or encounters new link. (35946)
  • Fix selection by holding shift key for nested blocks. (35668)
  • Fix shift+click on a child block with its parent selected. (35988)
  • Fix: Crash when resetting user color palette. (36233)
  • Fix: Show user colors on palette indicator. (36232)
  • Fix getPxFromCssUnit test stability and test that memoized function works correctly. (35939)
  • Link editing: Account for link anchor no longer being present when generating unique link instance key. (36357)
  • Preserve highlighted text selection when changing colors (36263)

Design Tools

  • Font Appearance: Improve consistency of label in Typography panel. (35860)
  • Font Family Support: Fix skip serialization check. (36073)
  • Navigation: Force text decoration styles on nav item in editor. (35859)

Template Editor

  • Clear selected block when clicking outside in the template part focus mode. (35816)
  • Templates: Only include templates for the current post types. (35802)

Core Data

  • Avoid showing deleted records in editor saving flow. (36027)
  • Fix getEntityRecords to ensure resolution on REST API failure. (36353)
  • Fix Core Data using hardcoded baseURL prefix for taxonomies and post types API requests. (35850)
  • Make saveEditedEntityRecord use the entity key when available. (36212)

Patterns

  • Update unsaved navigation block flow. (35976)

Full Site Editing

  • Add fallback handling for plugins or themes using 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.. (35877)
  • Fix missing <MainDashboardButton> slot fill in site editor. (36369)
  • Remove duplicate Editor menu item. (36342)
  • Theme resolver: Fix crash from calls to undefined functions. (36248)
  • Unhook _block_template_render_title_tag to prevent duplicate title tags from rendering. (36133)

Widgets Editor

  • Fix layout styles not applying in widgets customizer. (35865)

CSSCSS Cascading Style Sheets. & Styling

  • Editor defaults for themes with no editor styles and when user disables theme styles. (35736)

History

  • Support disabling autosave for native Unsupported Block Editor. (35639)

Performance

List View

  • Fix pagedown/pageup and improve scrolling. (36063)
  • List View: Render a fixed number of items. (35230)

Block Editor

  • Improve opening of the block inserter via manual token-based analysis of reusable blocks. (35763)

Widgets Editor

  • List View: Avoid re-rendering all items on block focus. Enable persistent List View 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. (35706)

Experiments

Block Library

  • Navigation Area block. (36178)

Full Site Editing

  • Always display Customizer menu item. (36168)
  • Revert “Always display Customizer menu item”. (36189)
  • Remove slug and status columns from templates list in Appearance > Templates. (35996)

REST API

  • Show a warning when trying to save unsupported blocks. (35993)

Documentation

  • Added link to Ways to keep up with Gutenberg & Full Site Editing. (36077)

Handbook

  • Add Thunks Tutorial. (36051)
  • Add a more detailed guide for reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. native development. (35529)
  • Blocks: Add view script to block schema and documentation. (36175)
  • Blocks: Document changes to style and editorStyle in block.json. (36218)
  • Add Getting Started level for documentation. (35891)
  • Add section about using the schema during development. (35835)
  • Fix a small typo in the “Getting started” documentation. (36109)
  • Fix Typos in widgets/overview.md. (36078)
  • Fix wording in the Authoring Experience documentation. (35969)
  • Improve Getting Started landing page. (35893)
  • Release Docs: Remove consecutive RCs warning. (35855)
  • Theme.json: Fix typo. (36139)
  • Theme.json docs: Add missing settings & styles. (36137)
  • Tweak organization for getting-started documentation. (34091)
  • Update the recommendation for the cadence of npm releases. (35925)

Packages

  • Components: Update Components CONTRIBUTING.md indentation. (35866)
  • Create Block: Move create-block changelog entries back to Unreleased section. (35886)
  • DOM: Backtick added around <textarea> input tag in readme file. (34813)
  • Env: Update wordpress-develop example to clarify src/build location. (35978)
  • Rich Text: Add usage documentation for Rich Text package. (35885)
  • Schemas: Fix schema file URL. (36157)

Code Quality

REST API

  • Add Theme’s base global styles endpoint. (35985)
  • Improvements for the global styles endpoint. (36071)
  • Remove “experimental” from URL details REST controller and promote to v1 namespace. (35915)

Block Library

  • Heading: Auto-generated anchors hide implementation details. (35747)
  • Mark FSE blocks as non experimental. (35979)
  • Mark Post Comments as stable and Comments Query Loop as experimental. (36132)
  • Mark Post Navigation Link and Term Description blocks as stable. (36163)
  • Remove post- prefix from Comment Template inner blocks. (36171)

Global Styles

Post Editor

  • Migrate to thunks. (35720)
  • Refactor FlatTermSelector into a functional component. (33459)
  • Remove GB prefixed functions from template part. (36180)
  • Translated site properties. (36097)

Components

  • ToolsPanel: Use Grid component to handle layout. (35621)
  • Update spacing in CircularOptionPicker. (36014)
  • Use small button on tools panel toggle. (35935)

Other Packages

  • Create Block: Add block.json schema to generated file. (35843)
  • Data: Rename types file from .d.ts to .ts. (36062)
  • Url: Move getStablePath function into the wordrpess/url package. (35992)
  • Schemas: Add schemas package. (35998)
  • Schemas: Theme.json – Add title to templateParts. (36145)

CSS & Styling

  • Remove 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. buttons block CSS property. (33793)

Tools

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 and backporting to WordPress core

  • Updates WP_Theme_JSON_Resolver and tests to be equal to core. (36223)
  • Changes for FSE 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. in core. (36201)
  • Temporarily pin .wp-env.json to WP 5.8.1. (36333)

Testing

  • Add a method to disable auto-accepting dialogs. (35828)
  • Skip broken widgets test. (36239)
  • Skip flaky test for loading block stylesheets in 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.. (35961)
  • Tests: Run block fixtures through KSES. (35611)
  • theme.json: Make sure tests are pure. (36253)
  • theme.json: Update test data. (35883)
  • Scripts: Increase timeout for end-to-end tests to 30 seconds. (35983)
  • Improve unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. coverage for REST API menus endpoints. (36177)
  • Update child theme.json merge test to match core. (36329)

Debugging

  • Wp-env: Disable Xdebug by default unless specified by user. (34324)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 11.95.58s40.22ms
Gutenberg 11.85.53s38.89ms
WordPress 5.85.86s47.3ms

Thank you to @critterverse for the assets included in this post, @priethor for coordinating the release process, @ramonopoly and @aaronrobertshaw for proofreading the release notes, and @glendaviesnz, @zieladam, @noisysocks, @mamaduka, and @isabel_brison for assisting with troubleshooting and pushing the release to the plugin directory, and to all those who contributed to this big release! 🎉

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