What’s new in Gutenberg 13.1? (27 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 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.1 brings border support to 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., a number of improvements to the Comments blocks, along with a range of 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) enhancements.

Table of Contents

• Columns block border support
• Accessibility improvements
• Comment block improvements
• Other notable highlights
• Props to new contributors
• Changelog
• Performance benchmark

Customize any border of the Columns block

The block supports and the global styles border panel have been updated to leverage the new BorderBoxControl component which allows the specifying of custom borders per side. This means you can have each border be exactly the same or completely unique.

This new block support has also been added to the Columns block to allow custom borders to be set for each side of a column.

Individual border settings can also be specified in 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. files:

"core/column": {
		"border": {
			"right": {
				"color": "red",
				"style": "dashed",
				"width": "2px"
			}
		}
	}

Accessibility improvements

A number of accessibility improvements are included in this release that resolve focus loss problems when installing blocks from the directory, creating pages from the link control search results, navigating the guide component, closing the welcome dialogue without any content in the post editor, and after choosing a menu in the navigation block.

Comment block improvements

Gutenberg 13.1 brings a number of improvements to the new Comments block. Most notably, the new Comments Title block enables richer compositions, especially with nested comments!

In efforts to stabilize these blocks for the upcoming WordPress 6.0, several bugs have been fixed. 🐛

Other notable highlights

Duotone keeps iterating, and now renders in the Site Editor when applied through theme.json. Speaking of duotone; check out the new duotone toolbar icon, a two-colored triangle that should better convey the button’s purpose when a 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. hasn’t yet been set. Once a filter has been selected, the original logo will appear to convey a change:

Before Gutenberg 13.1, the Categories block’s default behavior with empty categories was to hide them. Starting with this release, the block provides a new setting to customize this behavior and decide whether to show empty categories or not.

Props to new contributors

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

• @chintu51: OnNumberOfItemsChange event attribute issue. (39942)
• @khoipro: Scripts: Exclude BEM class from stylelint wordpress/scripts. (37531)
• @mauriac: Add new option to show or hide empty categories. (39426)
• @roseg43: Media & Text: Remove font size declaration from template. (40329)
• @zutigrm: Update theme.json documentation for theme authors. (40005)

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

Enhancements

• Block Editor: Removed the logic that was preventing the toolbar from hiding when typing within formats. (40476)
• Block settings: Remove redundant block name from “settings” panels. (40275)
• Components: Unified black color to gray-900. (40391)
• Design Tools, Borders: Use new border control components in block support. (37770)
• Document Setting: Removed 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 icon fallback. (40355)
• Icons: Added new duotone filter icon. (40435)

Block Library

• Categories: Added new option to show or hide empty categories. (39426)
• Column: Add border support to column blocks. (39967)
• Comments: Create comments title with simple styling. (40419)
• Media & Text: Removed font size declaration from template. (40329)
• Navigation: Renamed Navigation Menus to Navigation. (40413)

Bug Fixes

• 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.: Add ‘inserter’ to the schema. (40416)
• Toolbar: Fixed block toolbar text button padding. (40438)

Block Library

• Post 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.: Used translatable post type label. (40378)
• Comments:
  • Comment template: Call comment_class() before recursing into child comments. (40455)
  • Fixed 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. pagination not respecting Discussion Settings. (40284)
  • Fixed comments no results placeholder not appearing. (40234)
  • Post Comments Form: Fix layout quirks. (40359)
• Embed:
  • Fixed inline preview cut-off when editing URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (35326)
  • Use preview htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. for flickr embed previews in editor. (40187)
• Image: Added window to the optional chaining. (40394)

Styles

• Add a debounce to the custom color onChange event. (40285)
• Do not render global styles coming from the server in the site editor. (40185)
• Elements: Add styles to the footer before the block is rendered. (37728)
• Fixed duotone rendering in site editor. (37727)

Site Editor

• Don’t render the secondary 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. in text mode. (40337)
• Fixed webfont loading in the Site Editor. (40262)

Block Editor

• Block Locking, useBlockLock: Always check inherited ‘templateLock’ status. (40263)
• 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.: Fix incorrect ‘_n’ usage. (40292)
• List View, useBlockDisplayInformation: Return anchor for block variations in list view. (40458)
• Multi-selection: Copy whole block when selection is collapsed. (40374)

Accessibility

• Post editing: After closing welcome dialog, if content is empty, focus title field. (40195)
• Fixed focus loss happening when installing blocks from the directory. (40340)
• Fixed focus loss when creating pages from link control search results. (40342)
• Fixed focus loss when navigating the guide component. (40324)
• Navigation block: After choosing an option from Select Menu, focus after block rerender. (40390)
• Block Styles: Remove unnecessary button role and ‘onKeyDown’ handler. (40427)

Performance

• Added a context param to sidebar entity request. (40148)

Developer Experience

• [wp-env]: Add support to override core by the WP_ENV_CORE environment variable. (40407)
• Create Block: Fix warnings and errors reported during scaffolding and validation. (40479)

Documentation

• Added README for Gradient and NavigableToolbar. (25580)
• Added documentation for ancestor property in block metadata. (40027)
• Fixed OnNumberOfItemsChange event docs error. (39942)
• InputControl: Improved type annotations and stories. (40119)
• Patterns: Documented ‘inserter’ argument. (40425)
• Removed WordPress 5.9 specific warning from FSE documentation. (40274)
• Replaced fixtures with inline parsed code. (40428)
• Updated individual block locking section. (40372)
• Updates theme.json documentation for theme authors. (40005)
• Unwrapped wrapped selectors when inferring types of JSDoc params. (40236)

Code Quality

Block Library

• Navigation: Remove async useEffect. (40373)
• HTML: Remove pointless <span>s in Custom HTML block controls. (39820)
• Comments Query Loop: comment 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. data isn’t queued for lazy loading. (40242)
• Split navigation block view script. (40135)
• Spacer: Added constants file to Spacer block. (40446)

Components

• Stop exporting individual color objects from color values file. (40387)
• Added reusable BlockPopover and BlockPopoverInbetween components. (40441)
• Cleaned BlockMover component and styles. (40379)

Packages

• Block Editor: Remove unused sub-components in list view. (40448)
• Data: Cancel render queue in a more straightforward way. (40433)

Plugin

• Added edit context to patterns REST controllers. (40259)
• Add @talldan as a codeowner for wordpress/preferences. (40295)
• Cleaned up non-dynamic block registration list. (40426)
• Moved list and quote block registration to experimental blocks. (40350)
• Moved the logic for iframed editor to WP 6.0 compat. (40278)
• Post WordPress 6.0 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 cleanup. (40349)
• Rename wp_translate_settings_using_i18n_schema to translate_settings_using_i18n_schema. (40227)

Tools

Testing

• Playwright migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.:
  • Fixed outdated playwright snapshot directory. (40422)
  • Tried to fix flaky playwright tests not being reported. (40290)
  • E2E: Cross-platform support for Playwright end-to-end tests. (39765)
  • Migrate post-editor-template-mode to Playwright. (40175)
  • Migrate block api test to Playwright. (40217)
  • Migrate document settings test to playwright. (40258)
  • Migrate style variation test to Playwright. (40216)
• Quote: Verify that user can type right after inserting the quote block. (40466)
• useSelect:
  • Add async mode test suite and fix two bugs. (40321)
  • Update unit tests to testing-library. (40229)
• Block supports: Unregister block in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher unit tests. (40239)
• CreateBlock: Fix escaping for error message in create block test. (40473)
• Comments Query Loop: Add end-to-end comments tests to stable, wait for selector on set option. (40405)

Build Tooling

• Added the missing class-wp-style-engine-gutenberg.php in the plugin build. (40191)
• Fixed commands containing dot-slashes in npm scripts. (39739)
• Added new TypeScript project for unit tests. (39436)
• Fixed the flaky template editor mode test. (40325)
• Excluded BEM class from stylelint wordpress/scripts. (37531)

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

Version	Time to first block	KeyPress Event
Gutenberg 13.1	6.59s	44.29ms
Gutenberg 13.0	5.97s	46.37ms
WordPress 5.9	6.08s	45.28ms

Site Editor

Version	Time to first block	KeyPress Event
Gutenberg 13.1	7.19s	65.16ms
Gutenberg 13.0	6.57s	61.75ms
WordPress 5.9	5.85s	40.84ms

Kudos to all 42 contributors that participated in the release! 

Thanks to @priethor and @annezazu for all the contributions and improvements to this draft, and @critterverse for the visual assets.

#gutenberg, #gutenberg-new