What’s new in Gutenberg 15.5? (05 April)

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

Decorative image that reads: "What's new in Gutenberg 15.5"

Gutenberg 15.5 has been released and is available for download!

The latest release brings many user-facing features to improve the creation experience, such as caption styles customization and theme-defined template patterns when adding a new template. Theme creators should enjoy testing the experimental grid layout and template locking support for the Columns 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.. There are many features to cover in this release, so let’s dive right in.

Table of contents

Patterns as template starters

Gutenberg 14.9 added template types support to the Patterns 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.. However, this was only an under-the-hood change, laying the groundwork for future iterations. Version 15.2 introduced a new modal when adding new templates in the Site Editor for users. It only provided two choices: to use a fallback template or start from a blank slate.

In the latest release, those two concepts have been merged to allow users to build a new template from theme-registered template patterns. Theme authors can register custom patterns meant for specific template types (e.g., single post, 404, etc.), and they will appear in the start modal.

WordPress site editor when creating a new 404 template. It shows a grid of patterns to select from.

Style captions via the Styles interface

For a while now, theme authors have been able to create custom styles for <caption> elements directly via theme.json. The latest Gutenberg update brings those design options to the Styles interface, allowing creators and users to customize captions without touching code.

Two images of architecture with captions on the right. To the left is the Styles interface for configuring caption styles.

Experimental grid layout support

Gutenberg 15.5 introduces a new grid layout type. This is still in an early stage and currently only supports a setting for the minimum column width, but it defines the foundation for more configuration options going forward. Theme authors should start testing this now and provide feedback on use cases they envision.

The only coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block to support the grid layout is Group, and this support is currently marked as experimental. To test it, visit Gutenberg > Experiments screen in the WordPress adminadmin (and super admin) and enable the Grid variation for Group block option.

A 4-column grid with two rows of architecture images. Overlaid is the current Grid layout options from the block editor.

Other Notable Highlights

There is now a Post Modified Date variation for the Post Date block. It allows users to display the post’s most recent updated date.

WordPress post title and meta with title and a last modified date. Overlaid is the block editor settings for using either the published or modified date.

Gutenberg 15.3 introduced a Time to Read block for showing the number of estimated minutes it takes to read a post. The latest update adds spacing and typography support to the block, rounding out its design tools set.

The core Columns block now supports template locking, the Image size setting for the Image block has been renamed to Resolution, and the Media & Text block’s alignment is set to “none” by default.

Change log

Enhancements

Block Library

  • Add Post Date block variation for Post Modified Date. (49111)
  • Add typography support to time to read block. (49257)
  • Allow the time to read block to be inserted multiple times. (49253)
  • Image Block: Don’t render if there is no URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org set. (45220)
  • Media & Text: Switch default alignment to none. (48404)
  • Update alternative text labels and help text. (49416)
  • Navigation Submenu: Refactor to use the block supports function. (48936)
  • Replace “Image size” with “Resolution” in image size controls. (49112)
  • Update Gallery block to use consistent 40px components. (49101)
  • columns block: Add support for templateLock attribute. (49132)

Components

  • FormTokenField: Add prop to remove bottom margin. (48609)
  • ImageSizeControl: Remove the “Image Dimensions” label. (49414)
  • ImageSizeControl: Use large 40px sizes. (49113)
  • Tooltip: Refine existing tests. (48397)
  • Update tests from fireEvent to userEvent. (44952)
  • CustomGradientPicker: Improve initial state UIUI User interface. (49146)
  • Storybook: Declare stylesheet dependencies explicitly. (49099)
  • AnglePickerControl: Style to better fit in narrow contexts and improve RTL layout. (49046)

Design Tools

  • Add spacing tools to time to read block. (49392)
  • Position Panel: Open by default if a position type is set. (49151)
  • Revert: Make sticky block action on template part block. (49219)
  • Sticky Position: Add a “Make sticky” action to the Template Part block. (49085)

Testing

  • Adds focus management test for entity undo. (49236)
  • Adds navigation submenu tests. (49351)
  • Cover block: Add integration tests. (45409)
  • test: Expand mobile end-to-end test helpers. (48978)

Layout

  • Make grid layout Group variation an experiment. (49359)
  • Try adding a grid layout type. (49018)

Icons

  • Add unseen icon to library. (49254)

Plugins API

  • Plugins: Refactor the ‘PluginArea’ component to use the sync store. (49220)

Global Styles

  • Add: Story for the full global styles UI. (49031)
  • Caption element UI controls for color and typography. (49141)

Block Editor

  • Rich text: Only consider a format active if active at every selected index. (48789)
  • Update border color on color panel items. (42283)
  • i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Add context to labels related to CSSCSS Cascading Style Sheets. position properties. (49135)

Site Editor

  • Add: Patterns to the template start modal. (47322)

List View

  • Allow the component to show a custom “more” menu. (48097)

Block API

  • 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.: Refactor and stabilize selectors API. (46496)

Bug Fixes

Block Editor

  • BlockHTML: Use correct type when setting ‘htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.’ state onBlur. (49191)
  • Duotone: Pass filters to the Post Editor. (49239)
  • Duotone: Use WP_Theme_JSON_Resolver_Gutenberg instead of WP_Theme_JSON_Resolver. (49199)
  • Fix typo (overriden -> overridden). (48711)
  • Writing flow: Prevent default browser behaviour on input when editable. (49370)
  • Fix onHover error on patterns tab in mobile. (49450)

General Interface

  • 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. Page address displayed when a future page is first scheduled. (49092)

Patterns

  • Block patterns: Use WP_Theme_JSON_Resolver_Gutenberg instead of WP_Theme_JSON_Resolver. (49197)

Block Library

  • Buttons: Disable edit as HTML support. (49097)
  • Fix center alignment on the dropdown in the categories block. (44013)
  • Fix sprintf() arguments. (49439)
  • Fix: Navigation block width constricted on large viewports. (49302)
  • Group Block: Allow blocks to be dragged onto it in its placeholder state. (49361)
  • Group: Fix the ‘double div’ deprecation ‘templateLock ‘ attribute. (49250)
  • Group: Fix the ‘templateLock’ attribute type in deprecations. (49205)
  • Navigation: 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. in calculating the active menu item. (49195)
  • 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.: Fix JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. error and other misc. bug fixes. (48730)
  • 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.: Constraint list item(li) styles to the direct children of the main list. (49303)
  • Query Loop: Show 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. placeholders in all posts. (49301)
  • Query Title: Changes filters for removing archive title prefixes. (49306)
  • Quote: Disable edit as HTML support. (49426)
  • Revert “Make sure the directly inserted block in the Nav block is a Page link”. (49126)
  • Search block: Fix overflow width. (49192)
  • Changes image size description, as it causes confusion. (48478)
  • Post Excerpt Block: Fix unexpected commas in certain site languages. (49123)

Components

  • CircularOptionPicker: Force swatches to visually render on top of the rest of the component’s content. (49245)
  • Fix TabPanel initial rendering. (49368)
  • Fix misaligned textarea input control. (49116)
  • LineHeightControl: Make spin buttons adjust from placeholder value. (49150)
  • ToolsPanel: Make menu item order consistent for SlotFill use cases. (49222)

Layout

  • Fix unstableDisableLayoutClassNames in Group block. (49385)
  • Get orientation for Spacer block from parent layout. (49322)
  • Remove inner wrapper for grid Groups in classic themes. (49387)

Post Editor

  • Fix breaking distraction free. (49317)
  • Post Lock: Fix the 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. position. (49421)

Site Editor

  • Fix site editor redirection after creating new template or template part. (49364)
  • Show the created template title in success notice and not the slug. (49366)
  • Template parts: Use WP_Theme_JSON_Resolver_Gutenberg instead of WP_Theme_JSON_Resolver. (49198)
  • Fix typo in utils.js. (49178)

Media

  • Image: Don’t create an external image ‘blob’ when a user can’t upload files. (49300)
  • MediaReplaceFlow: Check permissions before displaying the ‘Media Library’ menu item. (49298)

Global Styles

  • Selectors API: Fix for global styles hook, style variations, and duotone. (49393)
  • Fix typo for the word accross. (49295)
  • Duotone: Limit SVG 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. output to used filters. (49103)
  • Selectors API: Make duotone selectors fallback and be scoped. (49423)

List View

  • Show close button in List View on mobile. (49200)
  • Add private appender prop. (49137)

History

  • Bring back revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. button for template parts. (49163)

Data Layer

  • useSelect: Incrementally subscribe to stores when first selected from. (47243)
  • Data: Refuse to register an already registered store. (49134)

Tools

  • babel-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-makepot: Fix non-existing translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. handling. (49431)

Navigation

  • Fix fallback not rendering. (49431)

Performance

Post Editor

  • Avoid UI shifting when selecting blocks. (47177)
  • Lodash: Remove _.groupBy() from buildTermsTree() in editor. (49224)

GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ Actions

  • Fix performance testing themes installation. (49063)
  • Speed up npm ci by caching node_modules. (45932)

Testings

  • Fix running performance tests locally via CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress.. (49068)
  • Refactor performance tests artifacts handling. (48684)

Babel Preset

  • Polyfills: Exclude web.immediate. (49234)

Experiments

Navigation Screen

  • Remove ‘edit-navigation’ package leftovers. (49183)

Documentation

  • Add a missing filter documentation. (44342)
  • Add missing pseudo-selectors to theme.json schema and documentation. (49202)
  • Add readme.txt FAQ entry for filing security bugs. (49148)
  • Adds issue template for the plugin release process. (49345)
  • Adds message about usage of block-editor components. (49400)
  • Block Editor Handbook: Improved the readability and phrasing and corrected mistakes. (48756)
  • Docs: Fix incorrect import of apiFetch. (49432)
  • Docs: Put more structure to Architecture page. (49184)
  • Fix failing CI documentation check. (49378)
  • Fix/missing template 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.. (49348)
  • FlexItem: Fix typo line 19 of README. (49284)
  • Mention “testsPort” .wp-env.json setting. (49388)
  • Remove errant line break in versions-and-building documentation. (49353)
  • Theme JSON schema: Add defaultPresets property to shadow. (49204)
  • Theme JSON schema: Add position.sticky and dimensions.minHeight properties to settings. (49335)
  • Update @api-fetch README.md with query args. (49318)
  • Update README.md for wordpress/element. createRoot not available until WordPress 6.2. (49309)
  • docs: Update end-to-end test device documentation. (49441)

Code Quality

Components

  • Animate: Refactor to TypeScript. (49243)
  • ColorPicker: TypeScript refactor. (49214)
  • CustomGradientPicker: Refactor to TypeScript. (48929)
  • DuotonePicker, DuotoneSwatch: Convert to TypeScript. (49060)
  • GradientPicker: Refactor to TypeScript. (48316)

Block Library

  • Home Link Block: Remove leading spaces in class names. (49397)
  • Add column-gap and row-gap as allowed CSS properties for compatibility with WP 6.0. (49118)

Block Editor

  • Duotone: Remove Safari rerender hack. (49232)
  • Replace regex with 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.) processor for duotone class render. (49212)
  • Use immutableSet utility to set style properties. (49365)

Plugins API

  • Plugins: Add unit tests for the ‘PluginArea’ component. (49138)

Global Styles

  • Extract a ColorPanel component as a reusable component between Global Styles and Block Inspector. (48893)
  • Lodash: Refactor away from _.groupBy() from compileCSS(). (49227)

Webfonts

  • Tests: Fix typos in fonts API. (47288)

Compose

  • Refactor useMediaQuery with useSyncExternalStore. (48973)

Patterns

  • Add gutenberg_get_remote_theme_patterns function. (49307)

Element

  • Element: Narrow createInterpolateElement param type. (49182)

Tools

Testing

  • Fix flaky Site Editor title end-to-end tests. (49203)
  • Upgrade Playwright to 1.32. (49296)

Build Tooling

  • Upgrade wp-prettier to 2.8.5. (49258)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release: @aaronrobertshaw @ajlende @andrewserong @aristath @brookewp @carolinan @chad1008 @ciampo @corentin-gautier @dcalhoun @draganescu @ellatrix @enderandpeter @felixarntz @fluiddot @glendaviesnz @gziolo @hareesh-pillai @helgatheviking @janboddez @jeryj @jhnstn @johnbillion @jorgefilipecosta @jsnajdr @kevin940726 @madhusudhand @MaggieCabrera @Mamaduka @mburridge @mirka @ntsekouras @oandregal @renintw @richiecarey @richtabor @ryanwelcher @scruffian @sgomes @shreyasikhar @SiobhyB @Soean @sque89 @stokesman @t-hamano @talldan @tellthemachines @tomdevisser @tyxla @WunderBart @youknowriad @ZebulanStanphill

Props to @welcher for co-managing this release and @jameskoster for the release assets.

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