What’s new in Gutenberg 13.0? (14 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.0 is the release containing all the updates that will be part of WordPress 6.0. This version also brings an improved editor experience, better responsive blocks, granular control over new design details, and prominently exposed 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. patterns.

Table of Contents

Select text across blocks

You can now select and copy text fragments that span multiple blocks.

This is a step towards bridging the gap between Gutenberg as a block editor and Gutenberg as a text editor. While blocks enable powerful page-shaping capabilities, they also compete with text for selection and clipboard space. Gutenberg 13.0 is a step towards an editor where blocks and text coexist frictionlessly.

Show the 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. in the Cover block

With the updated Cover block, the post’s featured image is no longer an afterthought – it is an integral part of the post. Just click the “Use Featured Image” button, and that’s it!

Build responsive Groups, Rows, and Stacks

Blocks are now easily grouped into either a Stack layout or a Row layout with a single click.

In Gutenberg 13.0, selecting many blocks at once exposes the Stack and Row variations of the Group block right in the toolbar.

One advantage is convenience, but an even more important one is responsiveness. The Stack block automatically adjusts to the smaller screen sizes, making it easier to build truly responsive layouts.

Make your blocks stand out with customizable borders

You can now fine-tune the borders of your blocks thanks to the new `BorderControl` component. Whether it’s border color, style, or width – it got you covered!

Build beautiful pages in no time using Patterns

Building a website starting from a blank page can be overwhelming – where do you even begin?

Fortunately, there is a way of kickstarting the creative process with a buffet of patterns!

As a developer, you can register post-content block patterns to will be then proposed both in the new page editor and in the 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.

Enjoy the improved Navigation Block

Adding a new Navigation Block in the editor now defaults to the first available menu when only one exists – no manual selection required.

Text decorations such as underline and line-through are supported in the block. You can also add link descriptions to the Navigation Link blocks.

The Navigation block also received additional 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 improvements that can be reviewed in the detailed changelog below.

Other notable highlights

Props to new contributors

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

  • @arcangelini: 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.: update post editor help links to use newer documentation (#39688)
  • @AlanSyue: Document: add the default database password to the getting started document (#39780)
  • @chintu51: Documentation: Import the Notice package in the example (#40022)
  • @dali-rajab: Documentation: Fix linguistic error in theme-json.md (#39995)
  • @EliezerSPP: Scripts: Fix typo in the webpack config (#39867)
  • @jezemery: Docs: Update typo in the code comment (#39429)
  • @JustinyAhin: Fix collapsing issue with the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input suggestion container #40147
  • @karolinakulinska: Add missing props mediaPreview in the ReadMe (#38114)
  • @mburridge: Adds links to contributing pages to README file. (#39959)
  • @kadimi: Fix grammar error in documentation (#40009)
  • @shimotmk: Fix duplicate Additional CSSCSS Cascading Style Sheets. classes post author, etc. (#39759)
  • @sunil25393: Site Logo: Correctly reset the site icon (#40046)
  • @roseg43: Media & Text: Remove font size declaration from template (#40329)
  • @zutigrm: Update 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. docs 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.



Block Library

  • Archives: Add yearly, weekly and daily archive settings to the archives block. (38440)
  • 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.: Increase the size of the Avatar image to be 2x of the width chosen. (39728)
  • Code: Preserves source of unrecognized blocks inside of Code Editor. (39523)
  • Column Block: Add blockGap support. (40122)
  • Comment blocks: Update block descriptions. (39735)
  • Comments Query Loop:
    • Always inherit from core Discussion settings. (39664)
    • Update default template. (40165)
  • Cover: Makes cover block dynamic and adds featured image binding. (39658)
  • Gallery: Add css var to enable theme authors to set a default gallery gap. (40008)
  • Group:
    • New Group, Stack, Row block descriptions. (40176)
    • Add the stack block variation to the group block. (39690)
    • Add group block variations to Group toolbar. (39920)
    • Block Variations Transforms: Display as icon buttons if each block variation has a unique icon. (40036)
    • Improve Stack and Row setup states. (39935)
    • Turn the wrap to multiple lines option off by default on the row block. (40171)
  • List: Add a box-sizing border-box to lists. (39895)
  • Navigation:
    • Avoid automatic saving of uncontrolled Nav blocks. (39883)
    • Auto set first Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. as current if only 1 exists. (39880)
    • Enable navigation nesting to be filtered and manually set. (38621)
    • Improve feedback on Nav Menu deletion. (39677)
    • Skip text decoration support serialization and apply as CSS class. (36345)
    • Navigation Link: Add support for navigation-link descriptions. (39808)
  • Post Comments: Deprecate the Post Comments block. (40167)
  • Post Tags: Update the Post Tags block icon. (40096)
  • Query Loop: Update query block creation and replacement flows. (38997)
  • Query page numbers block: Add same supports that next/prev page have. (39835)
  • Quote: Add color support to the quote block. (39899)
  • Read more: Add support for text color. (39796)
  • RSS:
    • Add missing classnames. (39716)
    • Try prepending HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. to a URL. (39758)
    • Update max items. (39819)
  • Site Logo and Featured Image: Add duotone to placeholders. (40085)
  • Social Links: Disable vertical alignment controls for navigation and social links. (40182)
  • Template Part: Adjust the layout of thumbnails in the template part replacement modal. (39766)


  • Borders: Add new BorderControl component. (37769)
  • Borders: Add BorderBoxControl component. (38876)
  • BorderControl: Add ability to apply custom CSS classes to popover content. (39753)
  • BorderControl: Fix vertical alignment of inner slider control. (39750)
  • Card: Adjust border radius size. (40032)
  • ColorPalette: Add SlotFillProvider to story to correct tooltip positioning. (39674)
  • UnitControl: Forward onBlur prop as expected. (39589)
  • Add ToggleGroupControlOptionIcon component. (39760)
  • CustomSelectControl: Make chevron consistent with SelectControl. (40049)

Styles Sidebar

  • Add search in the block types list. (39117)
  • Add labels to the global styles variations. (39322)
  • Show translated strings coming from global styles variations. (39960)
  • Adjust icon vertical alignment with labels. (39982)
  • Tweak preview box. (39978)
  • Update Other styles to Browse styles. (39752)
  • Wrap the preview box in the CardMedia component. (39980)

Block Editor

  • BlockToolbar: Show Group button in toolbar when multiple blocks are selected. (39710)
  • Improvements to use-focus-first-element and utils (dom). (39461)
  • Multi-selection: Allow partial block selection. (38892)
  • Order ids in getClientIdsOfDescendants and getClientIdsWithDescendants selectors. (39985)
  • Revert Try: Summary panel 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. max-height.. (40127)
  • Link directly to files stored in the Media Library using the Link UI. (39701)
  • Partial multi-select: Fix error with dead key. (39850)

Post Editor

  • Document Settings: Summary panel excerpt max-height. (40090)
  • Migrate editor package isPublishSidebarEnabled to preferences store. (39707)
  • Migrate post editor panels state to preferences store. (39604)
  • Migrate interface enableItems data to preferences package. (39449)
  • Try: Remove iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. 100% width rule. (38614)

Site Editor

  • Add a dedicated sidebar for managing layout of navigation menus. (39290, 40083)

Block Locking

  • Add the useBlockLock hook. (40210, 40220)
  • Display lock status in List View. (40088)
  • Styling changes for modal. (39998)
  • Try: Reusable block edit locking. (39950)

Reusable Blocks

  • Make the Cancel button tertiary. (39872)
  • Use the symbol icon for Reusable Block menu item. (40020)

CSS & Styling

  • Revert Global styles: Remove block gap control. (39845)
  • Block Styles: Revert changing default overflow-wrap to all headers, lists, and paragraphs. (39846)
  • Style Engine:
    • Add margin support. (39790)
    • Block supports backend. (39446)

Design Tools

  • Add vertical alignment to blocks using flex control. (40013)
  • Block Supports: Allow skipping serialization of individual features. (36293)

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

  • Allow multiple view scripts per block. (36176)


  • Option to pick a pattern on page creation. (40034)
  • Translate pattern metadata (title & description). (40047)
  • Remove batch support declaration from block patterns REST, fix navigation areas. (39834)

Theme Export

  • Change the schema URL. (40106)
  • Convert spaces to tabs in theme.json. (39751)
  • If the theme declares a version number then add a schema. (39775)
  • Remove default theme.json properties on export. (39848)
  • Restore appearanceTools when exporting a theme. (39840)
  • Sort theme.json properties. (39842)
  • Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. changes for Theme Export from 6.0. (40215)


  • Do not trigger warning on already enqueued font families. (40060)
  • Register webfonts defined in styles variations. (39886)
  • Register and enqueue fonts by font-family. (39559)
  • Return font family slug when registering a webfont. (40120)

Bug Fixes

Block Library

  • Avatar:
    • Do not show User Selection inside Comments Loop, on the Site Editor. (40100)
    • Fix wrong aligment. (39794)
  • Buttons: Fix focus on insert. (39684)
  • Comments Query Loop: Fix pagination setting not being applied on frontend. (40146)
  • Group: Fix variation isActive check to cover case where type is not set, but inherit is. (40065)
  • Post Author: Fix duplicate Additional CSS classes post author, etc. (39759)
  • Post Comments Form: Allow to add it to the Site Editor. (40108)
  • Post Template: Add missing wp-block-post class in the editor. (40010)
  • Post Terms: Use variation title in placeholder. (40092)
  • Query Loop: Fix some missing term sanitizations. (39970)
  • RSS: Add missing self-URL check. (39756)
  • Site Logo:
    • Correctly reset the site icon. (40046)
    • Fix duplicate Additional CSS classes site-logo Block & social-link Block. (39777)
    • Fix adding the site icon. (40041)
  • Template Parts: Limit slug to Latin chars. (38861)


  • Components utils: Use Object.assign instead of { …spread } syntax. (39932)
  • ToggleGroupControl: Reintroduce backdrop animation. (40021)

Block Editor

  • List View:
    • Only show ellipsis on first selected item or when focused. (40174)
    • Wrap title of block in <ListView> in a span. (39687)
    • Disable dragging when block movement is locked. (40086)
    • Fix list-view focus radius. (39969)
  • MultiSelectSidebar: Fix spacing of color panel items. (40071)
  • Fix Block Editor Iframe component to render in standards mode. (38855)
  • Fix collapsing issue with the URL input suggestion container. (40147)
  • Try: Fix regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. with mover and block control sizes. (40037)

Site Editor

  • Add block styles slot to the site editor so block style previews can be rendered. (40245)

Block Locking

  • Reusable Blocks: Hide Convert to Blocks when locked. (39939)
  • Template Parts: Hide Detach blocks when locked. (40000)
  • Stabilize settings. (40145)
  • Display block title when no switcher is available. (40207)

Styles Sidebar

  • Fix global style variations previews not showing correct height. (39737)
  • Restore defaultPalette/defaultGradients to only hide UI. (39966)
  • Global Styles: Fix alignment of Global Styles color controls. (40081)
  • Global Styles: Fix black inconsistencies in sidebar. (40055)

Design Tools

  • Block gap: Check for splitOnAxis in the onChange callback. (39788)
  • Duotone: Backport changes made to duotone in core. (40067)
  • Layout: Only show inherit toggle in default layout (hide on Row block variation). (39665)

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

  • Fix incorrect meta box position when switching device preview. (38910)

Other packages

  • Data: Exclude all meta-selectors, handle selectors without resolvers. (39976)
  • Date: Fix ordinal token (S), RFC2822 token (r), and timezone offset handling. (39670)
  • RichText: Fix splitValue with undefined selection. (39822)
  • Scripts: Add vendor/ to .markdownlintignore. (39724)

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 REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. class redeclaration. (40265)

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)

  • Add select-parent button to block toolbar More options menu. (40105)
  • Hide block movers in new navigation sidebar. (40039)
  • Accessibility improvements to the query pagination block. (39536)


  • Optimize getClientIdsOfDescendants and getClientIdsWithDescendants selectors. (40054)
  • Try to optimize getClientIdsOfDescendants using createSelector memoization. (40112)

Developer Experience

  • create-block: Add npmDevDependencies as a template variable. (39723)
  • Schemas, block.json:
    • Add ancestor prop to schema. (39894)
    • Add supports.lock to schema. (40161)
  • Schemas, theme.json:
    • Add Avatar to schema. (40189)
    • Add title key to 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. schema. (39936)
  • Scripts: Add new flag to allow customization of the src directory. (39618)


  • List v2:
    • Add migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. from v1 to v2. (39799, 39892)
    • Add new list item icon. (39929)
    • Avoid using global select. (39821, 39849)
    • Handle Enter in empty list items. (39858)
    • Outdent and Indent actions for the list block v2. (39773)
  • Quote v2:
    • Add __experimentalEnableQuoteBlockV2 flag. (40089)
    • Add align feature to have feature parity with v1. (39876)
    • Add innerblocks support. (39704)
    • Add migration. (39844)
    • Add transforms. (39718)
    • Bootstrap flag in experiments page. (39703)
    • Retain selection after transform. (39838)
    • Revert markup changes. (39824)
    • Fix how attributes are registered. (39729)
  • __experimentalBlockPatterns: Load them with REST API. (39185)


  • Add missing props mediaPreview in the ReadMe. (38114)
  • Add note to Handbook themes page about FSE eligible themes. (39662)
  • Adds links to contributing pages to README file. (39959)
  • Block-Editor Docs: Link to component readme. (37975)
  • Components: Add changelogs for new border control components. (39747)
  • Components: Add more prominent documentation around popover use. (39709)
  • Disabled: Add documentation for Disabled.Context. (39627)
  • Docs: Update README.md for FormToggle component. (36932)
  • Docs: Update block-filters.md. (38462)
  • FIX missing images of Gutenberg Data Apps document. (39499)
  • Fix grammar error in documentation. (40009)
  • Fix linguistic error in theme-json.md. (39995)
  • Import the Notice package in the example. (40022)
  • Sidebar: Update post editor help links to use newer documentation. (39688)
  • Style Engine: Remove since 6.0 comment. (40006)
  • Update typo in the code comment. (39429)
  • Updating versions in WordPress to add 5.9.x & 6.0. (39866)

Code Quality

Block Library

  • Avatar: Two unneeded spaces removed. (39902)
  • List: List block indent outdent naming. (39956)
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.: Use Disabled.Context. (39669)
  • Gallery: Use wp_unique_id() instead of uniqid() in block_core_gallery_render(). (39983)

Block Editor

  • Block Lock toolbar remove leftovers. (39881)
  • List View: Remove unwanted default false in ListView branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch". component. (39719)


  • BaseControl: Migrate to TypeScript. (39468)


  • Add the missing class-wp-style-engine-gutenberg.php in the plugin build (40191)
  • Block Editor: Stabilize generateAnchors setting. (40143)
  • Correctly classify functionality in the lib folder. (39972)
  • Consolidate WP_Theme_JSON_Resolver changes in both lib/compat/wordpress-6.0 and lib/experimental. (40140)
  • Don’t run preg_match() on null values. (39927)
  • Guard code from redeclaration errors after WP core merge. (39888)
  • Move files from lib to the compat subfolder. (39904)
  • Move changes from #38681 and #39966 to compat 6.0. (40123)
  • Plugin: Ensure that PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher code for blocks is correctly assigned to WP releases. (40179)
  • Remove the experimental Progressive Web Apps (PWA) integration. (38810)
  • Revert Plugin: Remove the experimental Progressive Web Apps (PWA) integration. (39930)
  • Theme JSON compat: Refer to static instead of self for ROOT_BLOCK_SELECTOR const. (39921)


  • Core Data:
    • Migrate entities.js to Typescript. (39547)
    • Rename core-data/src/selectors.js to selectors.ts (TypeScript). (40026)
    • Fixes necessary for converting to TypeScript. (39211)
    • Create type for undo state and initialize atomically. (39659)
    • Expand type signature of useQuerySelect. (39656)
    • Fix minor type issue in onSubKey. (39655)
  • Data:
    • Mark/data apis unstable. (40028)
    • Two code improvements. (39975)
  • Scripts: Fix typo in the webpack configuration. (39867)


  • Block patterns REST endpoint: Use snake case for field names. (40254)
  • Update patterns REST controllers namespace to stable. (40252)


  • Rename name to title in the global style variations. (39715)



  • Revert unwanted breaking changes in eslint-plugin. (39745)
  • UseBlockDisplayTitle fix ESLint warning. (39815)
  • UseEntityRecord(s) fix ESLint warning. (39852)


  • ActivateTheme wait for the user to switch. (39873)
  • Add a unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. for wp_recursive_ksort. (40149)
  • Check for missing figcaption before clicking gallery image again from list view. (39666)
  • Comments Query Loop: Add end-to-end tests for the block. (39502)
  • waitForNavigation in Comments Query Loop test. (39818)
  • Fix flaky issue reporter not splitting … separator. (40129)
  • Fix flaky test results overflowing the character limits of 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/’s issue. (39928)
  • ListView: Fix end-to-end flakiness. (39742)
  • Migrate customizing-widgets to Playwright. (39540)
  • Migrate cut-copy-paste-whole-blocks to Playwright. (39807)
  • Migrate new-post to Playwright. (39539)
  • Navigaton block: Fix flaky test by finalising request resolution in Nav block end-to-end test. (39633)
  • Navigation Editor: Skip failing navigation editor tests. (39746)
  • Style variations: Apply style variations using labels. (39725)
  • Template Mode: Try fix flaky tests. (39711)
  • Template parts: Try fixing template part tests again. (40007)
  • Use a description that matches the filename for the annotations end-to-end tests. (40011)
  • Use templates endpoint to delete templates. (39965)

Build Tooling

  • Add peer deps for postcss and end-to-end tests. (39080)
  • Plugin: Pin dependencies that slipped into trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (39865)
  • Mark new blocks to be included in WordPress core. (40186)
  • Style engine: Move backend scripts to package. (39736)
  • Scripts: Add .jsx file extension to Webpack. (39613)
  • Tooling: Escape quotes in npm scripts. (39447)

Project management

  • Remove Antonis as codeowner. (39697)

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

VersionTime to first blockKeyPress Event
Gutenberg 13.05.00s45.08ms
Gutenberg 12.95.03s44.21ms
WordPress 5.95.32s41.91ms

Site Editor

VersionTime to first blockKeyPress Event
Gutenberg 13.05.65s50.04ms
Gutenberg 12.95.06s42.07ms
WordPress 5.95.42s37.19ms

Kudos to all 70 contributors that participated in the release! 👏

Thanks to @joen for the release post assets, and to @priethor for all the contributions and improvements to this draft.

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