Daniel Richards 9:06 am on July 2, 2025
Tags: , , ,   

What’s new in Gutenberg 21.1? (2nd July)

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

What’s New In
Gutenberg 21.1?

Gutenberg 21.1 has been released and is available for download!

This release contains improvements to the 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., refinements to 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. tools, and more extensibility features. Below is a curated summary of the most notable changes in this release.

Developers can now add new icons to the Social Links block by registering additional block variations. The pull request description has code examples for anyone interested.

Now you can add links for all your pet’s socials:

ToolsPanel refactoring continues

Similar to the last release, more blocks have had their settings panels updated to a newer UIUI User interface. This includes the Author, 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., Post Navigation Link and Site Logo blocks.

Changelog

Enhancements

Block Library

  • Author Block: Refactor Settings panel to use Toolspanel. (67965)
  • Avatar: Refactor settings panel to use ToolsPanel. (67952)
  • Comments Pagination: Remove unwanted bottom margin from links. (70360)
  • Navigation Block: Flip submenu indicator icon on submenu expansion. (70307)
  • Navigation Block: Rotate submenu indicator icons on submenu expansion. (70442)
  • Navigation Link: Add dropdownMenuProps and a resetAll function. (70505)
  • Post Navigation Link: Refactor settings panel to use ToolsPanel. (70276)
  • Refactor Site Logo “Settings” Panel to Use ToolsPanel. (67972)
  • [ Experimental Form ]: Add example block previews. (70436)

Interactivity API

  • iAPI Router: Add support for new router regions with attachTo. (70421)
  • iAPI Router: Support new styles and script modules on client-side navigation. (70353)
  • iAPI: Export NavigateOptions and PrefetchOptions types. (70315)
  • iAPI: Introduce AsyncAction and TypeYield type helpers. (70422)

Extensibility

  • Social: Allow custom link icons using block variations. (70261)

Bug Fixes

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data: getHomePage: Do not return object until resolved. (70345)

Block Library

  • Fix : Calendar block: Colors do not change between global styles and theme.json. (70184)
  • Form Block: Apply class names correctly in the block editor. (70394)
  • FormFileUpload: Extend audio accept MIME types for iOSiOS The operating system used on iPhones and iPads. compatibility. (70354)
  • Image: Fix outdated 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) hint on native component. (70346)
  • Image: Fixed resetAll to return image resolution to default value. (70398)
  • Revert “Flip submenu indicator icon on submenu expansion (#70307)”. (70427)
  • Social Links: Allow icon size to be reset and honor 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. styles. (70380)
  • Video Block: Guard against duplicate tracks. (70295)

Interactivity API

  • Fix image lightbox issues in new full client-side navigation logic. (70416)
  • iAPI Router: Fix dynamic imports on new visited pages. (70489)
  • iAPI: Fix captured errors in withScope generators. (70303)
  • iAPI: Fix duplicated nested regions. (70302)
  • iAPI: Fix parsing of comments without siblings. (70304)

Global Styles

  • Fix: Global styles affect all form elements ( Form Block ). (70392)
  • Implement uniform 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. layout. (70464)

DataViews

  • Data forms: Achieve vertical spacing with vertical spacing rather than cell padding. (70435)

Post Editor

Media

  • Invalidate entities when new media is uploaded. (70405)

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: Incorrect style handle in RTL style registration for wp-list-reusable-blocks. (70402)

Data Layer

  • Add private selector support to resolveSelect and suspendSelect. (52036)

Accessibility

Templates API

  • Templates: Add back button & fix focus loss when navigating through template creation flow. (70091)

Performance

Block Library

  • Avatar: Optimize user control query. (70511)

Documentation

  • Add isPostSavingLocked  example to doc block. (70370)
  • Commands: Add stylesheet requirements to README. (70323)
  • Create Block: Add documentation for custom block namespace. (70215)
  • Docs: Fix broken links on Developer.WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. (70473)
  • Fix some typos. (70419)
  • Fix typo folder-structure.md. (70375)
  • block-attributes: Add role attribute explanation. (70361)

Code Quality

  • Patterns: Delete unused property. (70321)
  • TypeScript: Converts HtmlEntities Package to TS. (69326)
  • TypeScript: Migrate deprecated package to TS. (70362)
  • TypeScript: Migrate is-shallow-equal package to TS. (70407)
  • iAPI: Fix the changelog to include PR 70296 in 6.25. (70309)

Block Editor

  • Media List: Use ‘placement’ prop for popover positioning. (70350)
  • Refactor: URLInputButton component to functional reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. component. (70384)
  • Warning: Replace popoverProps.position to popoverProps.placement. (70347)

Components

  • Circular Option Picker: Use ‘placement’ prop for popover positioning. (70359)
  • FormFileUpload: Remove temporary fix for selecting .heic file in Chromium browsers. (70383)

Post Editor

  • PostAuthorCombobox: Simplify ‘onFilterValueChange’ debounced callback. (70512)

Interactivity API

  • iAPI: Minor fixes to the Interactivity and Interactivity Router comments. (70420)

Block Library

  • Social Link: Use placement prop for popover positioning. (70348)

Tools

Testing

  • Test: Improve document settings 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. locator. (70331)
  • Ensure the actual tests environment is used for end-to-end tests. (70280)
  • Skip falling end-to-end tests. (70460)
  • end-to-end Tests: Add test case for Link color support. (69141)
  • end-to-end Tests: Minor code quality improvement in some tests. (70382)

Various

Block Library

  • Remove screencast.com embed block variation. (70480)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@alejandrogonzalvo @BugReportOnWeb @DAreRodz @dd32 @ellatrix @himanshupathak95 @iamsandeepdahiya @im3dabasia @Infinite-Null @jsnajdr @karthikeya-io @kushagra-goyal-14 @Maikuolan @Mamaduka @Mayank-Tripathi32 @NidhiDhandhukiya74 @peterwilsoncc @ramonjd @Rishit30G @SainathPoojary @SantosGuillamot @shimotmk @shrivastavanolo @t-hamano @talldan @USERSATOSHI @vk17-starlord @Vrishabhsk @westonruter @yashjawale @yogeshbhutkar

Props @ramonopoly, @isabel_brison and @andrewserong for peer review. Props @karmatosed for visual assets.

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