What’s new in Gutenberg 21.6? (10 September)

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

What’s New In
Gutenberg 21.6?

Gutenberg 21.6 has been released and is available for download!

It brings several enhancements, including improvements to the new Accordion 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. and the Dataviews grid. This release also incorporates various 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 and code refactoring, continuing the migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. to TypeScript. Additionally, it lays the groundwork for a future upgrade to ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 19.

  1. New add accordion button
  2. Improved Dataviews grid interface.
  3. Select, dropdown and text inputs now support global styles.
  4. Changelog

New “add” accordion button

A new “add” button has been incorporated into the accordion block, simplifying the process of creating new content items by allowing direct additions to the accordion toolbar.

Improved Dataviews grid interface.

The dataviews grid now offers a cleaner interface. Titles can be hidden, and actions are accessible on hover, allowing for a simplified grid without sacrificing the ability to add actions to individual items.

Select, dropdown and text inputs now support global styles

This release brings global styles support to selects, dropdowns, and text inputs, giving themes consistent control over these common form elements. By defining styles in theme.json, authors can customize colors, borders, and typography without extra CSSCSS Cascading Style Sheets.. This update makes forms feel more cohesive with the rest of a site’s design.

Changelog

Enhancements

  • Add support for precision type placeholders to translator comments eslint. (71145)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Commands: Add Dashboard option to return to dashboard. (71261)
  • Core Data: Add ‘supportsPagination’ to all appropriate entities. (71302)
  • Core Data: Forward resolvers for pagination selectors. (71304)
  • Core Data: Include pagination 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. while receiving intermediate results. (71401)
  • Create Block: Add lifecycle script execution support. (71072)
  • Display names for Context providers. (71208)

DataViews

  • DataForm: Add description support for the combined fields and show the description in the Card layout. (71380)
  • DataForm: Streamline validation behavior. (71345)
  • Revert “DataForm: Streamline validation behavior”. (71359)
  • Support hiding the title in Grid layout, with actions available on hover. (71369)
  • Support the “Minimal UIUI User interface” story by using DataViews.Footer. (71276)

Block Library

  • Accordion Panel: Remove unnecessary wrapper div and simplify save. (71454)
  • Accordion: Add an “Add” button. (71388)
  • 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: Fix broken placeholder. (70840)

Offline

  • api-fetch: Check navigator.onLine to improve failure notices. (71438)

Meta Boxes

  • Edit Post: Check for meta box container before adding constraints. (71423)

Commands

  • feat: Added keyword support & added basic keywords for post/page. (70624)

New APIs

Global Styles

  • Add support for select or dropdown elements. (70379)
  • Global styles: add element support for text related inputs. (70378)

Bug Fixes

  • Add permission checks to Command Palette commands. (71267)
  • Components: Fix Tab font size when used outside WP. (71346)
  • Core Data: Fix error in ‘getEntityRecordsTotalPages’ selector. (71303)
  • Scripts: Do not access window global. (71348)
  • wp-scripts: Remove clean-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 dependency. (71080)

Block Library

  • Accordion 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.: Fix RTL toggle button layout. (71480)
  • Fix issue of css affecting the nested accordion icon. (71445)
  • Fix timezone in Date block. (71430)
  • Fix: Randomization in Gallery Block doesn’t work when Lightbox is enabled. (71408)
  • Group Block variation:Remove variation text color. (71429)
  • Properly apply styles and classes to the experimental form block. (55755)
  • Template Part: Display icons correctly when in placeholder state. (71327)
  • fix: Prevent accordion toggle button overflow at full width. (71446)
  • fix: Prevent scrollbars on accordion header and toggle. (71484)

Write mode

  • Allow adding “content” role blocks to containers that also have a “content” role in write mode. (71232)
  • Audio and Video: Hide caption controls in contentOnly mode. (71368)
  • Hide ‘Add block’ control in Link UI when Navigation Link block is in contentOnly mode. (71213)
  • Image: Don’t allow convert to cover controls in contentOnly mode. (71329)

Post Editor

  • Edit Post: Fix misplaced icon on back button. (71406)
  • Editor: Fix theme stylesheet injection in ‘useAvailablePatterns’. (71332)

DataViews

  • Fix grid padding values on mobile viewports. (71455)

Block Editor

  • Inserter: Fix InserterListbox rendering for React 19. (71410)

Style Book

  • Accordion Content, Header, Panel: Remove example field. (71407)

Zoom Out

  • Fix Zoom out should be disabled when Show Template is toggled off. (71361)

Components

  • ControlWithError: Show validating state when transitioning from error state. (71260)

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 state getters to be updated asynchronously with store(). (70974)

Performance

  • Add wp-env SPX profiler option. (70693)

Post Editor

  • Editor: Improve the ‘Design’ 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. panel performance. (71333)

Documentation

  • Core Data: Improve ‘registry.batch’ documentation. (71325)
  • DataForm: Better story for validation. (71298)
  • DataViews: Fix defaultLayouts documentation error. (71334)
  • Field Types: Update storybook. (71440)
  • HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.: Document ‘hookName’ and ‘namespace’ parameters. (71288)
  • Storybook: Set DateCalendar and DateRangeCalendar components as private. (71453)

Code Quality

  • A11yAccessibility 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): Remove redundant styles. (65409)
  • Command Palette: Enqueue assets globally. (71264)
  • Convert api-fetch package to TypeScript. (67669)
  • Convert date package to TypeScript. (67665)
  • Core Data: Remove unused reducers. (71305)
  • Fix: Add JSON_HEX_TAG flag to wp_json_encode in script tags. (71280)
  • Interface: Remove leftover comment. (71331)
  • Types: Update to be compatible with React 19. (71374)
  • api-fetch: Clean up error handling. (71458)
  • api-fetch: Cleanup and improve unit tests. (71439)
  • core-data: Use Object.fromEntries instead of reduce when generating entities reducer. (36296)
  • Deps: Bump framer-motion to v11.15.0. (71442)
  • Move Site Editor command from wordpress/editor package to wordpress/core-commands. (71262)

Block Editor

  • Fold uniqueByBlock into options object. (71279)
  • Remove duplicate ‘InsertionPointOpenRef’ context definition. (71465)

Block Library

  • Image block: Remove unused code. (71292)
  • refactor: Remove unnecessary fields from accordion 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. files. (71441)

Post Editor

  • Update types of getCurrentPostId. (71347)

Global Styles

  • Remove unecessary useEffect from ScreenStyleVariations. (71344)

Tools

Testing

  • Avoid using *-latest for runner images. (71201)
  • Fix failing command center end-to-end tests. (71293)
  • 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: Try to fix storybook smoke tests. (71284)
  • Upgrade Playwright to v1.55. (71285)

Build Tooling

  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher unit testing jobs to not include version. (71396)
  • Release Workflow: Add github.ref validation. (71404)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@Adity @andrewserong @aristath @DAreRodz @desrosj @dinhtungdu @getdave @himanshupathak95 @im3dabasia @jsnajdr @juanfra @kmanijak @lalitkumawat1m @levinbaria @MaggieCabrera @Mamaduka @manzoorwanijk @Mayank-Tripathi32 @mcsf @mikachan @mirka @nerrad @oandregal @R1shabh-Gupta @ramonjd @shimotmk @sirreal @swissspidy @t-hamano @talldan @tellthemachines @tyxla @USERSATOSHI @vipul0425 @westonruter @youknowriad

Props @mamaduka and @jorbin for peer review. Props @joen for visual assets.

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