What’s New in Gutenberg 13.3.0 ( May 25 )

“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.3.0 introduces a new Table of Contents 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., some enhancements to existing blocks to provide more ways to display content, and many more improvements.

Table Of Contents

New Table of Contents Block

After over a year of work and iterations, the Table Of Contents block is now available as an experimental block. Once placed into the content, the Table Of Contents block will detect any Heading blocks added and display them with anchor links to allow users to jump to a section on the page.

Post Terms Block variations to display custom 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. terms

A Post Term block variation is now generated for each custom taxonomy registered. For example, if you register a “Product categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.” taxonomy, you will be able to add a “Product categories” block that lists all the product category terms assigned to the current post.

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. Block now supports a “parent” 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.

When working with a Page or any hierarchical content type a new “parent” filter is available to display content that is children of the defined parent.

Other Notable Highlights

Heading block now supports Font Family controls

Save Block List default view preference

Users can now set a preference to determine if the Block List view is open or closed by default.

New transforms between the Cover and Media & Text blocks

First-time contributors

The following PRs were merged by first-time contributors:

  • @bjorsch: dependency-extraction-webpack-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: Calculate vendor hash from file output rather than Webpack internal state. (34969)
  • @daymobrew: Typo – enqueue to enqueued. (40880)
  • @JessicaGosselin: Fix typo in Panel readme. (41111)
  • @luminuu: Create single template via site editor if not existing. (40830)
  • @neffff: env :: Support ssh protocol for githubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ repos. (40451)
  • @phillsav: Update broken links. (41071)
  • @shanjidah: Migrated popovers.test.js to Playwright. (39910)
  • @tomjdv: Corrected the order in the code tabs. (40569)

Changelog

Enhancements

Preferences

  • Avoid persisting preference every time 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. tab is changed. (40923)
  • Editor preferences: Update order and copy. (40981)

Components

  • BorderControl
    • Make border color consistent with other controls. (40921)
    • Make height consistent with other controls. (40920)
    • Make reset to default button only display when required. (40917)
  • Select Component: Remove the lineheight setting to fix issue with font descenders being cut off. (40985)

Block Library

  • Add an explicit error message if an image block fails to load the image. (40982)
  • Add transform between cover and media & text. (38458)
  • Post Terms: Add dynamic variations of custom taxonomies. (39837)
  • Query Loop: Add parents filter. (40933)
  • Add: Space to indent list item. (39949)
  • Separator Block: Add border property for dots style to editor stylesheet. (40855)
  • Button: Add text transform control. (40858)

Build Tooling

  • dependency-extraction-webpack-plugin: Calculate vendor hash from file output rather than Webpack internal state. (34969)
  • Dependency Extraction Webpack Plugin: Use OpenSSL provider supported in Node 17+. (40503)
  • Update actions/setup-node GitHub action. (40816)

Design Tools

  • BorderRadiusControl: Add tooltips to split border radius controls. (40983)

CSSCSS Cascading Style Sheets. & Styling

  • BorderRadiusControl: Tweak spacing between input and range control to line up with BorderControl. (40958)

Template Editor

  • Use the label ‘Clear customizations’ when changes are revertable. (40935)

npm Packages

  • Packages: Add command to publish to npm targeting WP major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.. (40927)

List View

  • Block list: Add option in editor settings to show open list view as default. (40757)

Bug Fixes

  • Add missing styling panels for uncontrolled navigation. (41114)
  • DOM: Allow copying text from non-text input elements. (40192)
  • DOM: Deprecate isNumberInput and fix its handling of value=0. (40896)
  • FlatTermSelector: Avoid errors when returned terms aren’t iterable. (41099)
  • Provide translators comment for Font size and Letter Case. (40879)

Block Library

  • BorderControl: Fix focus styling. (40951)
  • Add missing “type” to the search field on the editor. (40782)
  • Comments Title
    • Fix post title translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization.. (40972)
    • Make non-editable. (40817)
  • Cover: Update background type when using 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.. (40873)
  • Fix Comments Form Title text alignment. (40795)
  • Fix external styles leaking into Warning component. (40868)
  • Image Editor: Remove HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. from error messages. (40812)
  • Post Comments:
    • Allow placeholders to reorder items in translations. (40849)
    • Fix 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. date format in placeholder. (40929)
  • Quote: Fix the embed discovery. (41134)
  • Return immediately from 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. block’s render_callback if $comment is null. (40835)
  • Use get_the_post_thumbnail function in the cover block.. (40853)
  • List v2
    • Fix outdent on empty list item if we press enter. (40939)
    • Focus new list item added from sibling inserter. (41051)
    • Fixes an issue where pressing enter deletes innerblocks. (41109)
  • CircularOptionPicker: Fix focused styles. (40990)
  • Gallery block
    • Fix 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. with initial image size. (41079)
    • Include image caption when converting a classic block gallery. (40872)
  • Post Author block: Hide select author controle if there is no postId. (40910)

Site Editor

  • Avoid previous content flash when a new template is created. (40841)
  • Decode entities in the site title. (40956)
  • Fix opinionated block styles loading in editor. (40937)
  • Post Comments: Fix Older/Newer comments links styling. (40948)
  • Template List: Fix word break for the ‘Added by’ column. (40959)
  • Template editor: Show the inserter if the template part is empty. (41024)

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)

  • Prevent navigation on URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input suggestion selection via enter key. (40906)
  • Table block: Fix focus loss after Create Table button is selected. (40399)
  • Block Library – Latest Posts: Prevent opening the links in editor. (40593)

Global Styles

  • Fix: Global Styles are always resettable. (40887)
  • Fix: Global Styles: Impossible to open welcome guide if global styles are empty. (40888)
  • Site editor: Preset custom color duplicates. (40837)
  • Reduce active tab accent weight. (40998)

Post Editor

  • Fix typo in the test description didPostSaveRequestSucceed. (41064)
  • Post saved draft button: Overwrite default button component margin. (40834)

Themes

  • Theme Export: Use a better method to determine the theme name. (40829)
  • Theme Export: Use basename when determining the theme slug. (41058)

Template Editor

  • Create single template via site editor if not existing. (40830)
  • Templates: Only allow renaming user-created and non-default templates. (40881)

Components

  • Fix Storybook builds. (41089)

Design Tools

  • Layout: Remove double output of align-items in horizontal layouts. (41018)

Code Editor

  • Fix save shortcut. (40848)

Global Styles

  • 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.: Don’t output double selectors for elements inside blocks. (40889)

Performance

Block Library

  • Ensure that post thumbnail is cached in latest post block. (40571)
  • Ensure that post thumbnail is cached in post template block. (40572)
  • Navigation link: Prime caches for all posts in menu items. (40752)
  • useShortCodeTransform: Fetch media data in single request. (40945)
  • Update the block overlay to rely on useDisabled hook. (40649)

Experiments

  • Style Engine: Add typography and color to frontend. (40665)
  • Add: Raw handling to the new list block. (39954)

Block Library

  • List v2
  • Indent multiple list items. (40991)
  • Outdent list item when pressing Backspace at the start. (40962)
  • ToC block
    • Re-enable + use static markup and only support coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Heading and Page Break blocks. (29739)
    • Mark Table of Contents block as experimental using block.json flag. (40905)

Data Layer

  • Add suspense support to the data module. (37261)

Documentation

  • Add “How To Get Your Pull Request Reviewed?” to developer handbook. (40589)
  • Add link to npm release details to the release documentation. (40867)
  • Corrected the order in the code tabs. (40569)
  • Docs: Git.io deprecation – Replace links. (40734)
  • Document useEntityRecord/s in README.md and CHANGELOG.md. (40932)
  • Fix typo in Panel readme. (41111)
  • Remove mid-paragraph line breaks from 2-building-a-list-of-pages.md markdown. (41025)
  • Typo – enqueue to enqueued. (40880)
  • Update broken links. (41071)
  • [Gutenberg Data Tutorial] Part 4: Building a new record form. (39261)

Components

  • Use TypeScript and controls for DateTimePicker‘s stories. (40986)

Code Quality

  • Convert core-data selectors from jsDoc annotations into TypeScript type signatures. (40025)
  • Dependency extraction
    • Improve calculation of contentHash. (40930)
    • Respect hashDigestLength option for version field. (40977)
  • Improve function name for finding navigation links that use the featured image. (40904)
  • Interface: Fix deprecation messages. (40825)
  • Make the useDisabled hook stable. (40890)
  • Packages [Dependency Extraction Webpack Plugin]: Add new line at the end of *.assets.php. (40753)
  • Remove unreachable inserter component. (41103)
  • Styles hook: Swap out lodash methods with their JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. equivalents. (40918)
  • Update reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-resize-aware with use-resize-observer. (40509)
  • useRefEffect: Replace undefined with void in callback return type. (40798)
  • Remove Flyout leftovers. (41129)
  • Send registered patterns in HTML and combine them with REST ones. (40818)
  • Refactor the Popover component to use the floatingUI library. (40740)
  • Table of Contents block: Remove editor-only wrapper
    . (40899)
  • Color Controls: Merge color dropdown components. (40084)
  • Block Library

    • Cover:
      • Refactor controls. (40832)
      • Correct resizeable spelling to US resizable. (41100)
    • Post Terms:
      • Add wp_kses_post to prefix/suffix for consistency. (40803)
      • Post Terms: Insert defaultBlock on suffix end split. (40934)
    • Replace hardcoded core/paragraph with getDefaultBlockName in onSplitAtEnd callbacks. (40954)
    • Query Loop: Move sticky control to separate file. (41101)
    • Search Block: Remove id attribute from svg. (40828)
    • ButtonGroup: Convert to TypeScript. (41007)

    Components

    • Add jest-console typings and convert DateTimePicker tests to TypeScript. (40957)
    • Rewrite DatePicker, TimePicker and DateTimePicker in TypeScript. (40775)
    • Update react-dates to 21.8.0. (40801)
    • Stabilize useEntityRecord and useEntityRecords. (40162)
    • CheckboxControl: Convert component to TypeScript. (40915)

    Plugin

    • Declare blocks as __experimental in block.json to automate syncing Gutenberg packages to WordPress. (40655)
    • Tools: Improve configuration for formatting files. (40994)
    • Packages: Add command to publish to npm targeting WP major release. (40927)

    Code Editor

    • Don’t commit ‘non-dirty’ changes. (41092)

    Media

    • Media Utils: Don’t convert error messages into an array. (39448)

    Block Editor

    • Add constants for link entry types. (36490)

    Post Editor

    • DevicePreview: Remove unnecessary div tag. (40911)

    Tools

    • Fix pull-request-automation CI check (temporarily until an upstream fix lands). (41044)
    • Update package-lock.json. (41045)
    • env :: Support ssh protocol for github repos. (40451)
    • Add @fabiankaegy as a code owner for the docs/ directory. (41057)

    Testing

    • Add eslint warning about use of waitForTimeout to playwright eslint. (40802)
    • Comment Template: Reorganize block tests to ease 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. process. (40739)
    • Fix: Env 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. fails on Windows. (41070)
    • Migrate ‘block-locking’ to Playwright. (41050)
    • Migrate and refactor image block end-to-end tests to Playwright. (40804)
    • Migrated popovers.test.js to Playwright. (39910)
    • Reorganize playwright utils and make canvas utils usable in the site editor. (40815)
    • Setup user-event inline once per test. (40839)
    • Test block insertion after title post blur. (32944)
    • Tests: Remove comment template unit tests. (40965)
    • useSelect: Add unit tests for usage without deps. (40732)

    npm Packages

    • Packages: Add GitHub workflow for publishing to npm. (40976)
    • Packages: Add more npm release types to the GitHub workflow. (41046)

    Block Library

    • Heading block – add font family support. (40970)
    • Only allow template part to be replaced if its a 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. or footer. (40787)
    • Try a single icon for title blocks. (40596)

    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.34.49s43.62ms
    Gutenberg 13.25.57s45ms
    WordPress 6.04.93s41.89ms

    Site Editor

    VersionTime to first blockKeyPress Event
    Gutenberg 13.35.20s35.86ms
    Gutenberg 13.26.17s52.71ms
    WordPress 6.05.05s33.27ms

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

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

    #gutenberg