What’s new in Gutenberg 13.2? (May 11)

“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, 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 13.2 brings a new 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. to save editor preferences on the server, visual guides for padding and margins, and improvements to the Comment 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..

Table of Contents

Save Editor Preferences

Gutenberg now saves editor preferences on the WordPress server, instead of in the browser. This means that no matter which computer or browser you are using, Gutenberg will always be set up just the way you like it.

Image showing settings from the editor that are persisted

Visualize Padding and Margin

Understanding how margins and padding affect a block is important in getting your layout just right. With Gutenberg 13.2, the margins and padding will highlight in blue as you adjust them.

Improvements to the Placeholders

The Post Content, 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., Post Comments, and Post Comments Form blocks will show more realistic placeholders in the editor to give you a better understanding of how your site will look with real content.

Screenshot showing a post with placeholders

Other Notable Highlights

You can now exit the Quote block and move on to a new block by pressing the Enter key at the end.

The Separator block now supports top and bottom margins, giving you more control over the whitespace of your content.

Numerous bugfixes to the Comments block fix styles and correct messaging.

Screenshots showing comment block

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle!

  • @chriszarate: ESLint 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: Fix recommended preset when prettier is not installed. (40634)
  • @danieliser: Fix/block 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. icon prop errors. (40710)
  • @gvgvgvijayan: Fixes broken links. (40578)
  • @iansvo: URLInput now always has an ID and accessible label. (40310)
  • @juhi123: Migrate Image Size to Playwright. (40467)
  • @Trapsta: Close overlay menu when clicking an anchor link. (39625)

If you are interested in contributing but do not know where to start, join the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor weekly meetings on Wednesdays at 14:00 UTC in #core-editor focused on all things Gutenberg.

Changelog

Features

  • Add new preferences persistence API, and save editor preferences in user meta. (39795)

Enhancements

  • Add visualizers for padding and margin for all blocks. (40505)
  • Remove the spotlight mode from template parts. (40652)

Block Library

  • Placeholders:
    • Update post content placeholder. (40177)
    • Update the placeholder for post excerpt. (40178)
    • Add placeholder to Post Comments block. (40484)
    • Improve the logic for warnings for Post Comments Form placeholder. (40563)
    • Post Comments Form: Add “proper” visual representation in the editor. (40368)
  • 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.: Add Post Comments Form block to Comments Query Loop template. (40256)
  • Post Comments block: Enqueue comment-reply script. (40366)
  • Cover: Avoid unnecessary wrapping when transformed from Group. (40602)
  • Quote v2: Implement exiting on Enter at end. (39911)
  • Separator Block: Add top & bottom margin support. (40551)

Components

  • Fix async timing in tests using user-event. (40790)
  • Add flag for larger default size. (InputControl: 40622, UnitControl: 40627)

Site Editor

  • Use default cursor for non-editable text blocks. (40785)

Block Editor

  • Show add pattern label when patterns are being prioritised. (40598)
  • Improve button spacing in the top right corner of the editor. (40411)

Document Settings

  • Design tweaks to Post Visibility popover. (40530)

Global Styles

  • 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.: Tweak separator margin. (40526)

Webfonts

  • Register all fonts before enqueing any. (40489)
  • Turn off WP 6.0 stopgap handler to use Webfonts API. (40555)

Block API

  • Allow using a custom domainpath for viewscripts. (40136)
  • Add settings hook. (40547)

Post Editor

  • Editor: Refactor PostFeaturedImage component to improve uploading state (40126)

Bug Fixes

Block Library

  • Audio: Correctly handle drag and drop upload errors. (40623)
  • Comments:
    • Comment Content: Show moderation message. (40612)
    • Comment Template: With pagination, make sure to request page 1 if there are no comments. (40759)
    • Comments Title: Count toggle working in ‘Singular’ editing mode (fix). (40728)
    • Comments block: Fix glitches found while backporting. (40628)
    • Fix alignment issue with comment author name. (40610)
    • Fix alignment issue with the comment edit link. (40584)
    • Fix alignment issue with the comment reply link. (40582)
    • Fix an alignment issue with the post comments form. (40613)
    • Fix style comment awaiting moderation indentation. (40681)
    • Prevent comments rendering on password protected posts. (40755)
    • Display paragraph breaks in comment contents block.. (40667)
    • Prevent spam links of author’s name in pending moderation comments. (40702)
  • Cover Block: Fix focal point error when the Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. is applied. (40643)
  • Cover: Avoid adding a wrapper Group block when transforming to Group, where possible. (40293)
  • Cover Block: Fixed iOSiOS The operating system used on iPhones and iPads. 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. handling background-attachment to properly work with iOS 13+. (40087)
  • Navigation block “Open on click”: Inherit font style and font weight. (40671)
  • Post Author: Switch byline to use kses so that rich text elements are rendered correctly. (40776)
  • Latest Post: Fix regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. with featured images in latest posts. (40662)
  • Video: Fix drag and drop upload error state. (40552)
  • Heading: Include text alignment when transforming from paragraph to 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. and back. (40709)
  • No Results: Remove a typo from the no results block. (40573)

Components

  • UnitControl
    • Avoid calling onChange callback twice when unit changes. (40796)
    • Show unit label when units prop has only one unit. (40784)
  • Gradient Tool: Fix closing of popover when the angle control is clicked. (40735)
  • Simpler clear button (40437)

Block Editor

  • Fix dragging in inspector causing block deselection. (40604)
  • [RichText]: Ignore selection changes on non contentEditable nodes. (40611)
  • [Writing Flow]: Try to fix multi-selection with shift+click. (40687)
  • Fix the styles compatibility hook for the editor iframes. (40842)

Patterns

  • Fix core ‘Featured’ pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. registration. (40650)
  • Fix: Page patterns don’t show when only one pattern is available. (40707)

Block Locking

  • Avoid ‘lock’ attribute registration warning. (40654)
  • Register the ‘lock’ attribute on the server. (40468)

Code Editor

  • Commit changes upon switching editors to avoid content loss. (40730)

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

  • Fix Nav Sidebar Site Editor error. (40722)
  • Close overlay menu when clicking an anchor link. (39625)

Icons

  • Fix/block meta icon prop errors. (40710)
  • Fix the Icon component mobile icon. (40748)

Global Styles

  • Element styles: Prevent the WordPress 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. callback from being executed. (40594)
  • Global Styles Sidebar: Fix nav header styles and semantics. (40592)
  • Global Styles Sidebar: Tweak spacing. (40588)

Data Layer

  • useSelect: Prevent nested component update after unmount. (40677)
  • core-data: Change “include” type in getQueryParts. (40570)

Themes

  • Theme Export: Bug: Add .DS_Store to the list of ignored files. (40539)

Reusable Blocks

  • Fix template part / reusable block click through on non-safari browsers. (40339)

Block API

  • Check that a transform matches at the time of running the transform. (40497)

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)

Components

  • Improve tools panel accessibility. (40716)

Block Editor

  • URLInput now always has an ID and accessible label. (40310)

Block Library

  • Post Comments block: Fix missing label in placeholder. (40527)

Performance

Block Editor

  • getBlockTransformItems: Support single block object. (40718)

Block Library

  • Navigation Link: Avoid unnecessary re-renders. (40696)
  • Navigation: Improve selector performance. (40700)

Experiments

CSSCSS Cascading Style Sheets. & Styling

  • Style Engine: Add typography and color to backend. (40332)

Documentation

  • Docs: Omit name from settings object in registerPlugin. (40629)
  • Docs: Update the Block Metadata title. (40482)
  • Fix ColorPalette component’s documentation. (40620)
  • Fix indentation inconsistency in documentation for block variations. (40515)
  • Fix broken links. (40578)

Components

  • Add TypeScript refactor guidelines. (40153)
  • InputControl: Remove default value argument from Storybook. (40410)
  • Components: Fix error in CONTRIBUTING guide. (40682)
  • Components: Update changelog for #40735. (40797)
  • Fix/typos in documentation. (40579)

Themes

  • Adding schema info to 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. reference. (40599)

Code Quality

  • Block Editor: Deprecate ‘BlockColorsStyleSelector’ component. (40502)
  • Global Styles Sidebar: Rename NavigationButton so semantics are clearer. (40590)
  • Handle promise rejections from preferences persistence if the user is offline or the 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/. errors. (40641)
  • Improve the useDisabled hook and Disabled component. (40631)
  • Preferences persistence – mark modified property as not readonly in schema. (40637)
  • Preferences: Improve initial configuration for the new persistence package. (40715)
  • Remove padding prop from popover. (40544)

Components

  • Add DatePicker tests using ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Testing Library. (40754)
  • Borders: Remove unused BorderStyleControl component. (40635)
  • Migrate ConfirmDialog component’s Stories from knobs to controls. (40164)
  • SelectControl: Finish typescript migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.. (40737)
  • [components] Use internal Icon component for ToggleGroupControlOptionIcon. (40717)
  • TextControl: Covert component to TypeScript. (40633)

Block Library

  • Comments Query Loop block: Rename to Comments (but keep ID). (40763)
  • Post Comments Form Block: Mark as stable. (40452)
  • Remove Navigation Area block. (40645)
  • Remove testid and update tests. (40534)
  • Refactor: Reuse code of the editor placeholder across Post Comments and Post Comments Form. (40560)

Data Layer

  • useSelect: Improve transition from async to sync mode. (40680)

List View

  • Rename list view prop expandNested to isExpanded. (40731)
  • Tidy list view props and deprecate BlockNavigationDropdown. (40777)

Post Editor

  • Edit Post: Remove unused code. (40499)

Plugin

  • Remove experimental PWA support for WP-Adminadmin (and super admin). (40475)

Tools

  • Remove @mkaz from CODEOWNERS 😢. (40685)
  • Scripts: Add --dist-tag flag to the packages-update command. (40514)
  • Scripts: Remove broken lint-md-js command. (40511)
  • Scripts: Remove deprecated format-js command. (40512)
  • Update oandregal notifications. (40549)
  • Update native mobile wrangler in rich-text CODEOWNER. (40783)
  • Export hydrate in @wordpress/element. (40723)

Storybook

  • Storybook: Make description-loader more reliable. (40616)

Testing

  • Comment Template 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.: Cover odd/even classes. (40471)
  • Comments block end-to-end test: Remove now-obsolete Post Comments Form block. (40793)
  • Migrate Image Size to Playwright. (40467)
  • Migrate paragraph test to Playwright. (40779)
  • Refactor image-size test to follow Playwright’s best practices. (40644)
  • Remove require editor 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. line from full-content test setup. (40772)
  • Tests: Restore real timers after using Jest’s fake timers. (40760)
  • Update @testing-library/user-event to stable version (14.1.1). (40761)
  • [Automated Testing]: Fix partial selection copy flaky tests. (40607)
  • Retain Playwright end-to-end test’s trace on failure on CI. (40586)
  • Rewrite UnitControl tests in TypeScript. (40697)
  • Fix batchRest not throwing errors in Playwright. (40668)
  • Fix replacing with undefined in stripAnsi. (40384)
  • Nav link block PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher tests replace prefixed function with non-prefixed. (40657)
  • Fix the htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. data is wrong in clipboard emulation in Playwright. (40638)
  • Fix incorrect results in the flaky tests reporter. (40567)

Build Tooling

  • Eslint: Add TypeScript tests and stories to development files. (40504)
  • Fix: npm script(dev:Package) is not working on Windows. (40566)
  • ESLint Plugin: Fix recommended preset when prettier is not installed. (40634)

Performance Benchmark

The following benchmark compares performance for a particularly sizable post over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Post Editor

VersionTime to first blockKeyPress Event
Gutenberg 13.26.51s49.36ms
Gutenberg 13.15.74s44.41ms
WordPress 5.95.67s45.38ms

Site Editor

VersionTime to first blockKeyPress Event
Gutenberg 13.26.49s65.55ms
Gutenberg 13.16.61s75.92ms
WordPress 5.95.59s41.42ms

Kudos to all 58 contributors that participated in the release! 👏

Thanks to @priethor for his contributions and improvements to this draft, and @fcoveram for the visual assets.

#gutenberg, #gutenberg-new