What’s new in Gutenberg 21.0? (11 June)

“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).


Gutenberg 21.0 has been released and is available for download!

This release continues the ongoing effort to refine the editing experience, improve 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), and streamline 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. customization. Below is a curated summary of the most notable changes in this release.

The HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Element is now selectable on Button and Separator blocks.

Users can now choose between <a> and <button> elements for better accessibility in the Advanced panel of the Button block.

For the Separator block, they can choose between <hr> and <div>.

Extensive ToolsPanel Refactoring

Many block settings panels—including Button, Comment blocks, Embed, File, List, Navigation, Post Title, RSS, and more—have been refactored to use the unified ToolsPanel interface, providing a more consistent and organized editing experience.

Accessibility and usability

Several blocks, including Button, Columns, and Details, received keyboard accessibility improvements and better focus management.

Numerous 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. fixes address issues with block controls, gallery image captions, social link translations, and more, resulting in a smoother editing workflow.

Changelog

Enhancements

Block Library

  • Button Block: Add HTML Element selection in Advanced settings. (70139)
  • Comment Date: Convert Comment Date block settings to ToolsPanel. (70248)
  • Comment Author Name Block: Refactor setting panel to use ToolsPanel. (69407)
  • Comment Edit Link: Refactor settings panel to use ToolsPanel. (70247)
  • Comment Title: Refactor settings panel to use ToolsPanel. (70246)
  • Comments Pagination Block: Refactor settings panel to use ToolsPanel. (70245)
  • Embed Block: Refactor setting panel to use ToolsPanel. (69636)
  • File Block: Refactor setting panel to use ToolsPanel. (70189)
  • Form Input: Convert Form Input block settings to ToolsPanel. (70249)
  • Form: Convert Form block settings to ToolsPanel. (70253)
  • Latest posts: Change panel body to tools panel. (70200)
  • List Block: Refactor setting panel to use ToolsPanel. (69387)
  • Navigation Link, Navigation Submenu: Hide title UIUI User interface controls while keeping attribute support. (70234)
  • Navigation: Refactor display panel to use ToolsPanel. (68011)
  • Post Title: Refactor settings panel to use ToolsPanel. (70229)
  • RSS: Refactor setting panel to use ToolsPanel. (70213)
  • Separator: Change html element option visibility. (70185)
  • ShortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site.: Add role attribute to content in 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.. (70164)
  • Video: Add option to set a track as default. (70227)

Components

  • ComboboxControl: Handle Unicode characters when matching values. (70180)
  • DropZone: Allow overriding the default icon. (70236)

Block Transforms

  • Adds transforms functionality to Post comments link and post comments number. (70287)

Bug Fixes

Block Library

  • Button: Avoid empty block control slot. (70191)
  • Fix: Click-through blur effect when gallery images have a caption. (69067)
  • Pullquote block: Cannot override cite element style via theme.json. (70260)
  • Social Link: Localize social service names for translations. (70199)
  • Social: Moves size settings to inspector controls. (70186)

Components

  • Ensure SVG Images Without a Width Attribute Are Displayed Correctly in FocalPointPicker. (70061)
  • FormTokenField: Fix filtering with full-width string. (70232)

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

  • iAPI: Make storePart argument optional in overloads. (70296)

Post Editor

  • Editor: Better normalize strings for hierarchical term filtering. (70178)

Block Editor

  • Flex Layout: Fix incorrect default alignment values for Vertical Alignment Control component. (68866)

Accessibility

Block Library

  • Button: Avoid focus loss when unlinking using keyboard. (70192)
  • Columns block: Don’t use ToolsPanelItem for Columns setting. (70210)
  • Details Block: Fix keyboard accessibility issues and allow list view selection to show up inner blocks. (70056)

Components

  • Toolbar: Adjust colors for dark mode support. (69278)

Experiments

Interactivity API

  • iAPI: Remove the full-page client-side navigation experiment. (70228)

Documentation

  • Docs: Added the missing ALT attribute to all images. (70225)
  • Docs: Remove misleading section from curating the editor experience. (70262)
  • Fix parameter hint for canInsertBlocks. (70305)
  • Fix: Render_block_core_site_title function doc has missing return type. (70269)
  • Improve default ALT attribute value for images in documentation. (70226)
  • JSON schema: Clean reference URLs. (70274)
  • Removed Empty line and corrected typo in inline document. (70203)
  • Replace “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.” with “panel” in tutorial.md. (70257)
  • Small grammar fix in glossary.md. (70292)
  • The wp_admin_notice() function should be called instead of custom HTML for adminadmin (and super admin) notice in docs/how-to-guides/notices/README.md. (70231)
  • Updated small typo in inline documentation. (70187)
  • useDropZone: Refactor documentation to use the correct function syntax. (70286)
  • block.json schema: Add role field. (70272)

Code Quality

Block Editor

  • Clarify ‘clientId’ prop use for ‘HTMLElementControl’. (70258)
  • ImageSizeControl: Use margin-free style. (70202)

Components

  • Remove forced focus of InputControl on mousedown. (41118)
  • SuggestionsList: Remove unused code. (70195)

Block Library

  • Video: Use a unique ‘key’ in the ‘TrackList’ component. (70263)

Tools

Testing

  • Cover Block: Add E2E Test for FocalPointPicker. (69077)
  • E2E: Add general end-to-end tests for templateLock functionality. (70160)
  • Fix end-to-end test for block API / filtered blocks. (51882)
  • Format .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/ workflows .yml file. (70219)
  • Account for tests env port being overridden from 8889 in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher unit tests. (70267)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@aurooba @catgofire @DAreRodz @dhruvikpatel18 @himanshupathak95 @im3dabasia @Infinite-Null @Mamaduka @Mayank-Tripathi32 @Mukulsingh27 @nani-samireddy @OpuRockey @pmbaldha @ravigadhiya007 @Rishit30G @SainathPoojary @shail-mehta @shimotmk @stokesman @t-hamano @troychaplin @vipul0425 @vk17-starlord @westonruter @yogeshbhutkar

Props @luminuu, @priethor and @mamaduka for peer review. Props @joen for visual assets.

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