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.

Changelog

Enhancements

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)

Components

  • 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)

Patterns

  • 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)

Webfonts

  • 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

  • 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)

Performance

  • 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)

Experiments

  • 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)

Documentation

  • 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)

Components

  • BaseControl: Migrate to TypeScript. (39468)

Plugin

  • 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)

Packages

  • 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)

REST API

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

Styles

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

Tools

Linting

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

Testing

  • 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 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

Editor chat summary: Wednesday, 16 March 2022

This post summarizes the weekly editor chat meeting on Wednesday, 16 March 2022, 14:00 UTC held in Slack.

WordPress 5.9.2

@jorgefilipecosta said WordPress 5.9.2 was an important security and maintenance release and asked everyone to update all their sites. There were updates until WordPress 3.7, everyone even if not on the last WordPress major version should be able to update.

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/ 12.8

Gutenberg 12.8 was released around the chat time by @priethor. Details about the release can be backed on the release page.

Key projects updates

Patterns

@jorgefilipecosta shared the following update related to patterns:

The current experience when creating a new page and starting with a blank canvas is not ideal. It would be better if we had something premade ready. On #39147 we are interacting on this experience. Patterns will be able to specify they are full page patterns, and uses will be able to create pages in an easy way. We also merged recently changes to how one inserts and replaces the content of a template part and now are changing the flows for the query 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. #38997.

Styles

@jorgefilipecosta said that we have some improvements to how duotone styles are handled in #38681, and we also fixed the centered image alignment styles at #39422.

Comments 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

@bernhard-reiter shared the following update:

Quite a bit of progress there, thanks to the team: There’s a fix for the broken pagination that’s now ready to merge. The Generic 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. block PR has also been approved. Finally, there’s a bugfix for two rather annoying bugs with inner block selection and duplicated settings in the inspector controls of the Comments Query Loop block.

Native mobile application

@carlosgprim said the team is focused on the following on Drag and Drop project and addressing content uploading issues.

Task coordination

@jorgefilipecosta

I will start for the next week I want to update #38997 and improve the modal UIUI User interface to contain a grid and carousel view. I also plan on working on the base editor experience be it by helping the effort to get partial multi block text selection, helping the nested blocks on quotes and lists and other related tasks. Let’s see how much we can improve the basics.

@paaljoachim

  • I have made multiple videos. Among these one is about going from a classic theme to an FSE theme.
  • Added notes into the fse-outreach-experiment channel.
  • Added feedback to a few Navigation block exploration issues.
  • Made a few new issues: #39490, #39380, #39307.

@mamaduka

  • I’m continuing my work on Block Locking UI and 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.. Here’s my latest proposal on implementing “Locked by System” in the editor.
  • Finished an error handling audit for media blocks. They should correctly display upload errors now 🙂
  • Created PR to make error messages returned via uploadMedia utility more consistent. This is a breaking change, so I’m looking for some feedback.

Open floor

Template part resizing

@paaljoachim said: “With exploring the transition og going from a classic theme and over to Twenty Twenty Two I noticed that I was not able to adjust the 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. template height.I also made an issue for it here: #39490“.

@jorgefilipecosta anwsred “To me template part is just a block to reference an area. It should not deal with the content its styles its size etc. I guess to control the height of an area like an header one can put a group block or cover block inside that header”.

The conversation continued and @paaljoachim said a group was already present, both participants in the discussion agreed there maybe be space for improvements and the conversation will continue on the issue. If you have some thoughts on this please share them.

wordpress/frontend-dx Gutenberg subteam

@bernhard-reiter shared the following:

I’d like to create a GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ team (under the WordPress org, as a sub-team of the Gutenberg team) for those of us that are currently working on Fronted Developer Experience (tentatively named “Frontend DX”, which means we’d use the handle @wordpress/frontend-dx). There’s currently a rather well-defined group of folks focusing on this, so it’d be quite handy for us to be able to @mention the entire team.

The participants showed support for this idea and @bernhard-reiter is going to create the subteam.

PR’s and Issues awareness

@azouamauriac raised the attention of the team to PR #39426 that is ready for review and to issue #39395 which is a 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. that happened on 5.9. @jorgefilipecosta said #39395 probably is something that we should fix in WordPress 5.9.3 release.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg

What’s new in Gutenberg 12.7? (2 March)

“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 12.7 has been released and is available for download!

Table of Contents


Improving the Patterns experience

Gutenberg 12.7 includes new features that will make working with patterns even easier! 

Make Patterns easier to discover

The block quick inserter now prioritizes patterns instead of blocks when all the following conditions are met:

  • We are editing a template, either on site editor or post editor.
  • The inserter is at the root level.
  • The content being inserted is between other blocks (neither as the first 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. nor as the last one).
Patters inserter demonstration animated screenshot

The template part (e.g. 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. / Footer / 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.) creation flow will now also show patterns, making it easier to create more advanced compositions than adding blocks one by one.

Work will continue improving the logic that decides to show a pattern or a block, so feel free to share your feedback in the Gutenberg repository!

Allow themes to highlight Patterns

Themes can now highlight specific patterns to their users!

Recommending patterns to the users is as easy as adding a pattern field to the theme.json file. When handling patterns from the Pattern Directory, you can find their slugs on the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org when browsing them individually.

Adding patterns in theme.json example

List View Improvements

Once more, the List View keeps getting better! Gutenberg 12.7 includes a few iterative improvements to improve the block editor experience.

You will be able to select multiple blocks at the same level, and then drag and drop them to move them around. To select multiple blocks, the keyboard shortcuts are:

  • Shift Key + Click 
  • Shift Key + Up/Down arrow.
List View drag and drop animated screenshot

Also, when you click on a block in the editor, the List View will expand to show the selected block for better visibility of the selection’s context within the block tree.

Block List view expanding animated screenshot

Changes to frontend HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. when using layouts and image blocks

In order to add consistency to the block editor, we are removing some wrappers divs that were generated on the editor in order to add alignment to some blocks.

Keep in note that this div cleaning can affect themes that support layout and many blocks that have this alignment support. Many contributors helped with testing, but theme developers are encouraged to check their themes and leave any feedback they may encounter.

Other notable highlights

Gutenberg 12.7 provides a few other iterative enhancements worth highlighting.

Column options on Column blocks screenshot
Margin options available on Group blocks screenshot
  • To avoid backward compatibility issues reported in WordPress 5.9, the automatic anchor generation for headings introduced in Gutengerg 11.8 is now opt-in. To enable this feature, simply add:
add_filter(
	'block_editor_settings_all',
	static function( $settings ) {
		$settings['__experimentalGenerateAnchors'] = true;
		return $settings;
	}
);

Props to new contributors

Contributors avatars background and contributor text with an applause emoji.

Recognizing and celebrating contributors, both and new, becomes more efficient and effective! A contributor props list has been automated when creating the release and added to the changelog! Any user who merges a PR during a Gutenberg release cycle will be aknowledged.

In Gutenberg 12.7, up to 52 contributors merged PRs of any kind, including 6 new contributors. Props to @Alex-Kostov, @HasnainAshfaq, @mjstoney, @razwan, @sanzeeb3, and @Sisanu for their first PR! 🎉

Changelog

Enhancements

Block Library

  • Columns: Add border support. (31737)
  • Group Blocks: Add margin support (top/bottom). (37344)
  • Comment Template: Improve comment pagination with nested replies. (38187)
  • 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.: Show placeholder comments on site editor. (38072)
  • Navigation: Try unifying submenu arrow positioning. (37003)
  • Submenu: Add revert button. (38203)

Components

  • FocalPointPicker: Allow updating its value while dragging. (38247)
  • General Interface: Simplify site icon animation on hover. (38783)
  • Navigator: Add NavigatorButton and NavigatorBackButton components. (38634)
  • Type Refactor: Use forwardedRef type for all forwarded refs in wordpress/components. (38948)

Block Editor

  • Block Editor: Add settings to enable/disable auto anchor generation. (38780)
  • Block Transforms: Keep additional HTML classes during a block transform. (38964)
  • LineHeightControl: Enhance interactions by migrating internals to NumberControl on Style options. (37160)
  • List View: Add multi-select behaviour for blocks when shift key is selected. (38314)
  • List View: Expand block list tree on selection. (35817)

Styles

  • Add initial version of the style engine. (37978)
  • Style engine: Refine Box type. (38894)

Post Editor

  • Enable tooltip for the main dashboard button. (38790)

Themes

  • Lowered specificity of alignment rules for support layout so wide alignments work. (38947)
  • Remove data-align divs for themes that support layout. (38613)
  • Remove the div wrapper from the aligned image blocks. (38657)

Patterns

  • Quick Inserter: Prioritize showing patterns instead of blocks. (38709)
  • Allow pattern registration from directory with 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.. (38323)
  • Template Parts: Show existing template parts and a list of block patterns at creation flow. (38814)

Bug Fixes

Block Library

  • Block Transforms: Fix Image and Video to Cover block transformations. (38959)
  • Cover: Fix gradient overlay (remove black background color) (38765)
  • File: Fix PDF file block full content fixture. (38725)
  • Latest Posts: Add missing class to post title. (38740)
  • Logo: Avoid division by zero in site logo. (38808)
  • Post navigation link: Use correct closing tag. (38976)
  • Query Loop: Display nothing if we want only sticky posts but no stickies exist. (38909)
  • Template Parts: Decode entities in labels. (38805)
  • Social Links: Only apply the social links block migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. if there’s a need for a migration. (38561)

Block Editor

  • 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. from coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.: Global styles duotone not rendering in post editor. (38897)
  • Block Editor: insertDefaultBlock should not trigger an error if the default block is not registered. (38886)
  • Inserter: Fix focus loss after closing patterns explorer from modal. (38884)
  • Multi-selection: avoid RichText instances becoming disabled after multi selection. (38821)
  • Rehabilitate drag gesture in LineHeightControl. (38930)
  • RichText: Fix wrong block merging when pressing delete consecutively. (38991)

Site Editor

  • Add site editor initial redirect error handling. (38655)
  • Add template check to ‘setPage’ action. (38656)
  • Adds additional check to guard against incompete presets. (38902)
  • Limit template part slugs to Latin chars. (38695)
  • Template List: Decode entities in record titles. (38863)

Styles

  • Allow child classes to be called instead of the parents. (38857)
  • Backport: Allow for classic themes using default presets. (38701)
  • Fix global styles loading logic. (38745)

Components

  • Fix unexpected dragging triggered on spinner buttons on hover in Safari. (38840)
  • Show tooltip on toggle custom size in FontSizePicker. (38985)

List View

  • Fix error triggering after duplicating a block making it unselectable. (38760)
  • Fix UIUI User interface broken due to error when deleting first item in canvas. (38775)

CSSCSS Cascading Style Sheets. & Styling

  • Fix button width on Widgets Editor. (38846)
  • Load block support styles in the <head> for block themes. (38750)
  • Reduce the margin of the block toolbar. (38746)

Block Directory

  • Fix the block activation when metadata registered on server. (38697)

Colors

  • Strip double # char on HexInput. (38335)

Packages

  • Core Data: CanUser resolver always use the OPTIONS method. (38901)
  • Dom: Avoid RangeError in findPrevious method. (38961)

Apps

  • Fix Custom Palette colors and support multiple origins and theme cache issues. (38417)

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)

  • Adds aria-label to the search button, as accessibility enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature.. (38136)
  • Avoid duplicate labels for “Save Draft” and “Save as pending” buttons. (38776)
  • RichText: Reverse disableLineBreaks to determine aria-multiline state. (38652)
  • TreeGrid: Add Home/End keys to jump to start/end of grid. (38679)

Performance

CSS & Styling

  • Use wp_unique_id() instead of uniqid() to generate CSS class names. (38891)

Experiments

New APIs in Core Data

  • Propose useEntityRecords (experimental). (38782)
  • UseEntityRecord (experimental). (38522)

Documentation

Handbook

  • Add documentation for deprecating styles. (38540)
  • Add documentation about the patterns field of theme.json. (38700)
  • Add more info about contextual patterns and pattern transformations. (38809)
  • Add semantic patterns documentation. (38778)
  • Clarify deprecations documentation. (38683)
  • Fix hyperlink in block Metadata page. (38941)
  • Improve point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. documentation to include even more detail. (38631)
  • Increase support for experimental-link-color until WordPress 5.9 is the minimum version. (38711)
  • Group: Update block supports. (38962)
  • Links changed for 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/ on block editor section. (38841)
  • Removing comma so that the code snippet of theme.json represents standard JSON. (38938)
  • theme.json Update version section docs to v2 (38937)
  • Update Getting Started with more granular options. (38682)

Block Library

  • Add instructions on how to add new core blocks to block-library. (38868)

Components

  • FormFileUpload: Add Storybook stories. (38734)
  • Storybook: Move experimental components to correct section. (38640)
  • Storybook: Remove story for Typography Panel. (38867)
  • wp-env: Document some caveats when using xdebug with VSCode. (38882)

Code Quality

Block Library

  • Cover: Remove unnecessary temporaryMinHeight. (38887)
  • Cover block: Update deprecated gradient fixture. (38728)
  • Gallery: Register gallery in block_names dynamic block array. (38689)
  • Navigation: Improve consistency of block hook. (38705)
  • Navigation: Select dropdown encapsulation and further consolidation. (38627)
  • Navigation: Update wp_kses usage to be consistent (use wp_kses_post). (38732)
  • Post Navigation Link: Prefer kses to blanket esc_html on label. (38696)
  • Remove data-controls mock from Image block RN tests. (38852)

Components

  • Block Supports: Improve image block regex. (38742)
  • Block Supports: Load Styles on <head> backport to core. (38880)
  • Context: Omit as prop in types. (38844)
  • Core Data: Remove fallback for OPTIONS response headers in canUser resolver. (38881)
  • Core Data: TypeScript definitions for entity records. (38666)
  • Data: Normalize selector args when handling metadata selectors/actions. (38945)
  • Edit Site: Migrate store to thunks. (38812)
  • Icons: Deprecate duplicate icons. (38849)
  • PostTrash: Call trashPost action with no arguments, rewrite to 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.. (38615)

npm Packages

  • Packages: Automate cherry-picking to 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. commits created during publishing. (38977)
  • Packages: Ensure that private packages do not update when publishing to npm. (38946)

Tools

Testing

  • Add end-to-end test for merging paragraphs and soft line break afterwards. (39009)
  • Post Visibility end-to-end test: Improve XPath selector to avoid reliance on DOM structure. (38717)
  • Replace no-shadow eslint rule with @typescript-eslint/no-shadow. (38665)
  • Remove client ID from fixtures. (38685)
  • Remove originalContent from fixtures. (38638)
  • RichText: Add test for merging and then splitting paragraphs. (39007)
  • Site Editor Tests: Use 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/. to delete templates and template parts. (38524)
  • TreeGrid: Add tests for callback functions. (38942)

Build Tooling

  • Build separate full contributors list. (38777)
  • Bump @svgr/webpack from ^5.5.0 to ^6.2.1 (38866)
  • Generate full release contributors list in release changelog. (38704)
  • Generate sourcemap for production 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 builds. (33718)
  • Mobile: Improve npm clean scripts for reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-native-editor. (38752)
  • PWA: Fix URL query param issue. (38755)
  • Scripts: Do not exit build when no entry found in src directory. (38737)
  • Scripts: Fix Entry points are not detected in Windows OS. (38781)
  • Scripts: Copy PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files from src into build. (38715)

Components

  • BaseControl: Refactor stories to use Controls. (38741)
  • Migrate Post Template Delete button from confirm() to ConfirmDialog. (37535)
  • Migrate the Post ‘Switch to draft’ button to ConfirmDialog component. (37491)
  • Storybook: Ensure rerender for RTL switcher. (38963)

Post Editor

  • Edit Post: Migrate store actions to thunks. (36551)
  • Editor store: Remove a noop SETUP_EDITOR action. (38622)
  • Migrate editor store to thunks. (35929)

Styles

  • Allow to extend the WP_Theme_JSON_Gutenberg class. (38671)
  • Global Styles: Fix PHP warning in WP_REST_Global_Styles_Controller. (38888)
  • Update Global Styles code to continue adding settings & styles. (38883)

Block Library

  • Change Gallery block code ownership. (38722)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) 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 12.75.0 s41 ms
Gutenberg 12.65.1 s40 ms
WordPress 5.95.2 s40 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.74.7 s30 ms
Gutenberg 12.65.2 s29 ms
WordPress 5.95.2 s29 ms

Kudos to all the contributors that helped with the release! 👏

Thanks to @javiarce for the visual assets!

Thanks to @matveb @priethor and @santosguillamot for proofreading.

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

What’s new in Gutenberg 12.5? (February 2nd)

“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 published following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here is an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


Gutenberg 12.5 has been released and is available for download!

Table of Contents

Allow switching theme styles variations

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. allows for a lot of customization on behalf of theme authors. Now there is even more that can be done by providing styles variations that let users quickly and easily switch between different looks in the same theme.

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.: custom taxonomies filtering and more!

The Query Loop 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. now also shows custom taxonomies in the filters panel. Depending on what post type is selected it will update the available filters to show all the taxonomies for that post type. Moreover, the Query Loop block now also supports filtering by multiple authors.

Previously, there was a limited set of controls available on the 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. Block when rendering a placeholder inside a Query Loop compared to using the block isolated. Starting in this version, all Post Featured Image settings can be used when the block is inside the Query Loop, too!

Preserve styling from adjacent buttons when inserting a new one

Inserting new buttons has just become easier: when a new Button Block is inserted it will automatically retain the styling from the adjacent buttons.

Add the Code Editor to Site Editor

Sometimes you just have to peek behind the curtain. Gutenberg 12.5 brings the Code Editor view to the Site Editor, too!

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle: @alanjacobmathew, @imangm, @jorgecontreras, and @knilkantha! If you are interested in contributing but do not know where to start, join the Core Editor weekly meetings on Wednesdays at 14:00 UTC in #core-editor focused on all things Gutenberg.

Changelog

These are all the changes included in this release.

Features

  • Allow switching global styles variations. (35619)
  • Query Loop: Add support for custom taxonomies filtering. (38063)
  • Add: Code editor to edit site. (37765)
  • Post Featured Image: Show all the controls when inside a Query Loop. (37945)
  • Buttons: Preserve styling from adjacent button blocks when inserting a new button block. (37905)

Enhancements

Block Library

  • Add transform between coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./site-logo and core/site-title blocks. (37920)
  • Allow using a text label instead of an icon on overlay menu toggle button. (36149)
  • Query Loop: Add multiple authors support. (38024)
  • Comments Query Loop: Add discuss options to the block. (37297)
  • Comments Query Loop: Rename next and previous to newer an older. (38143)
  • Gallery block: Move add/edit media to block toolbar. (38036)
  • Navigation: Fetch classic Menus and Pages using view (readonly) context. (37884)
  • Navigation: Show menus selection in placeholder only if available. (37980)
  • Navigation: Try not using css variable for block gap support. (37543)
  • Paragraph: Try to avoid a trailing word in the description. (37483)
  • Post Featured Image: Add size selector. (38044)
  • Posts Lists: Unset inherited backgrounds on Posts Lists. (37941)
  • Social Icons: Unset inherited backgrounds on social icons. (37940)

Components

  • CustomSelectControl: Add hints example to storybook. (38056)
  • ToolsPanel: Add CSSCSS Cascading Style Sheets. classes to first and last displayed ToolsPanelItems. (37546)
  • Navigator: Add basic location history. (37416)
  • Add: Hover and Selected states to the palette editor. (37962)
  • Update gray color palette to match base styles. (38109)

Post Editor

  • Post Lock Modal: Update 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. size. (38040)
  • Post Lock: Adjust avatar design and update message. (37979)
  • Block styles: Remove box-sizing rule on Post Editor container to achieve editor/frontend parity. (37902)

Block Editor

  • Identify the site frontpage in link UIUI User interface search results. (36493)
  • Rich text: Use file on internal dependencies. (38005)
  • Transform pasted div tags to p tags. (38042)

Site Editor

  • Update template home, front-page, and search template descriptions. (38132)
  • Add: Copy all content to edit site. (37781)

Global Styles

  • Load the global styles before the theme styles in the editor. (37885)
  • Duotone: Allow users to specify custom filters. (38055)
  • Enable alpha on Block Inspector Color ToolsPanel. (37731)

Internationalization

  • 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.: Create new function addLocaleData to merge domain configuration. (37704)

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

  • [Global Styles]: Add REST API endpoint to fetch variations. (38124)

Bug Fixes

Block Library

  • Add classic menus to menu switcher. (38168)
  • Always allow accessing edit.php?post_type=wp_navigation page. (38170)
  • Fix Post Date block escaping of date HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (38023)
  • Fix duotone render in non-fse themes. (37954)
  • Social Icons: Fix color picker 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. when set to Logos Only. (38006)
  • Temporarily remove text decoration from Nav block. (37963)
  • Query Loop: Reorganise inspector controls + order selection bug. (37949)
  • Revert “Late escape RSS block (#37878)”. (38117)
  • Fix missing default align-items when items are oriented vertically in flex layout. (38069)
  • Update micromodal to 0.4.10 to fix navigation close button. (38032)

Site Editor

  • Fix empty gray circle when site has no logo on template list page. (37474)
  • Fix hiding the bottom of tablet/mobile preview in Site Editor. (38019)
  • Fix resizable box scrollbars in blocks. (38123)
  • Override Site Editor URLs to use 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 page. (38232)
  • Restore ?styles=open functionality. (38093)
  • Site Editor: Fix Inserter classes. (38112)

Block Editor

  • Fix pattern preview expanding height and scrollbar issues. (38175)
  • Remove warning for enqueued styles in Editor. (37937)
  • Fix draft previews. (37952)
  • Add context to font style and font weight related translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. strings. (37939)

Post Editor

  • Editor: Fix post lock data inconsistency. (37914)
  • Fix template queries. (38070)

Block Library

  • Latest Posts: Fix featured image alignment label position. (38125)
  • Remove the aria-label from the site title block. (38432)

Components

  • Increase ConfirmDialog overlay’s z-index to render above popovers. (37959)
  • Label components: Improve consistency by setting to 8px margin-bottom. (37844)
  • RangeControl: Fix space between icons and rail. (36935)
  • SelectControl: Mark the children prop as optional. (37872)
  • ToggleGroupControl: Remove animated backdrop. (38008)

Design Tools

  • Fix: Double border on palette editor. (38035)
  • Fix: PanelColorSettings renders an empty when a color setting is falsy. (38029)

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

  • Load the entities list using the view context. (37685)
  • Fix inconsistent response when preloading OPTIONS type requests. (38051)

Widgets Editor

  • Fix empty 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. overlapping widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor content on mobile viewports. (38017)

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)

  • Make sure when on last block focus cannot enter the block. (37965)
  • Tree Grid: Fix keyboard navigation for expand/collapse table rows in Firefox. (37983)

Performance

Plugin

  • Don’t use WP_Query::Get_posts directly. (38104)

Components

  • ToolsPanel: Memoize callbacks and context to prevent unnecessary rerenders. (38037)

Documentation

  • Add anchors to all terms of the glossary. (38073)
  • Add documentation for useBlockEditContext hook. (36299)
  • Add note about “local styles” in the glossary. (38083)
  • Add some terms related to styles to the glossary. (38076)
  • Add theme.json v1 reference and v1 to v2 migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. documentation. (37886)
  • Block API Reference: Fix ‘isSelected’ property type. (38161)
  • Capitalise the GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ wordmark correctly in the WordPress Gutenberg project. (38092)
  • Component: Update color-picker documentation. (38010)
  • Document that __experimentalSelector requires server-side block registration. (37984)
  • Document the Global Styles Presets. (38129)
  • Fix documentation 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.. (38235)
  • Include partialRight import from lodash in DimensionControl example. (38088)
  • Multiple typos fixed. (38071)
  • Scripts: Corrected “npm start:Hot” in the README file. (38178)
  • Update Block Supports Documentation to better reflect how it works. (37847)
  • Update BlockPreview component readme. (38209)
  • Update versions for 5.8.2 and 5.8.3. (37924)
  • Use consistent punctuation, capitalization in templateParts documentation. (38193)
  • [Type] Documentation Updating Faq.md typo. (38154)

Code Quality

  • Compose: Rework types of createHigherOrderComponent for closer match to API. (37795)
  • Docblockdocblock (phpdoc, xref, inline docs) typos. (38067)
  • Fix two inline typos. (38048)
  • Testing: Upgrade Jest to v27. (33287)
  • Add a missing @since 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.). (38151)
  • Ignore local environment .tool-versions configuration file. (38013)
  • Add allowed-plugins in composer configuration. (38085)
  • Site editor – try redirecting to homepage before the reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. render. (37248)

Block Library

  • Allow for HTML in get_the_title. (38145)
  • Fix double escaping in blocks. (37985)
  • Late escape Latest Posts block. (37866)
  • Late escape Navigation blocks. (37870)
  • Late escape Post blocks. (37876)
  • Late escape Social block. (37881)
  • Late escape comment blocks. (37860)
  • Late escape comments link block. (37875)
  • Late escape latest comments block. (37865)
  • Late escape post author blocks. (37874)
  • Late escape site blocks. (37880)
  • Spacer: No need to use withDispatch HOC. (38206)

Tools

  • Bump dot-prop from 4.2.0 to 4.2.1. (38101)
  • Bump ini from 1.3.5 to 1.3.8. (38106)
  • Bump tar from 4.4.13 to 4.4.19. (37917)
  • Bump tree-kill from 1.2.0 to 1.2.2. (38102)
  • Bump trim-off-newlines from 1.0.1 to 1.0.3. (38095)
  • Update MiniCSSExtractPlugin to version 2.5.1. (38027)
  • Bump follow-redirects from 1.14.1 to 1.14.7. (37957)
  • Bump handlebars from 4.7.6 to 4.7.7. (38054)
  • Bump path-parse from 1.0.5 to 1.0.7. (37990)
  • Bump tmpl from 1.0.4 to 1.0.5. (37916)
  • Add ‘.git-blame-ignore-revs’ to the project. (37822)
  • Require stylelint v14 for stylelint configuration and scripts. (38091)
  • Tested up to WP 5.9. (38162)
  • wp-env: Add install-path command. (35638)
  • Docgen/stop crashing on missing return types. (37929)
  • Add temporary workaround to fix broken common js import of mini-css-extract-plugin. (38004)
  • Fix back button aria name in customizing widgets tests. (38195)

Testing

  • Fix flaky Nav block user permissions end-to-end test. (38025)
  • Fix flaky classic block conversion undo test. (37933)
  • Improve flaky draft creation navigation block end-to-end test. (37931)
  • Skip flaky nav permissions test until fixed. (38099)
  • [docgen] Refactor code to use require() instead of JSON.parse(fs.readFileSync()). (38148)
  • end-to-end Tests: Add coverage for reusable blocks save button state regression. (33151)
  • Add new Testing Instructions section to PR template. (38147)

Performance Benchmark

Post Editor

VersionTime to first blockKeypress event
Gutenberg 12.56.8 s42 ms
Gutenberg 12.46.8 s41 ms
WordPress 5.97.0 s38 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.57.4 s38 ms
Gutenberg 12.46.7 s38 ms
WordPress 5.96.7 s38 ms

Time to first block: firstBlock

Keypress event: type


Thanks to @critterverse@priethor, and @jeffpaul for helping write and proofread this post!

And kudos to all the contributors who have submitted bugs, written code, designed components, added documentation, reviewed others’ contributions, and everything else that goes into making Gutenberg. 👏

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

What’s new in Gutenberg 12.4 (19 January )

“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 12.4 has been released and is available for download!

This week we want to bring special attention to the 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) improvements that are continually happening in the project. Thanks to all those working to make Gutenberg usable by all!

Table of Contents

Accessibility improvements

Focus now correctly returns to the list view button after closing out of list view—saving a lot of trouble to get back to where you were before opening it.

More improvements are in place for the block inserter 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.. The search input now receives focus when it is opened. And, for screen readers, the close button was added to the desktop view to ensure consistency with the mobile view.

Post publish panel categories reminder

It can be easy to forget to add tags or categories to a post before publishing. A suggestion for adding tags already existed in the publish panel, but now there is also a suggestion for assigning a category to the post that will show up if a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. is not already assigned.

New "Suggestion: Assign a category" section in the post publish panel

Site editor keyboard shortcuts help panel

As a part of the border work of UI parity with the post editor, the site editor now has a list of keyboard shortcuts available. They can be accessed by pressing CONTROL + OPTION + H on MacOS or CTRL + ALT + H on Windows or through the “More tools and options” (vertical ellipsis/kebab menu) dropdown. Enjoy streamlined workflows with these shortcuts in more places.

Keyboard shortcuts modal in the site editor

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks recategorization

More blocks have been recategorized as theme blocks in the inserter to help encourage correct usage of these blocks and clarify their functionality. The following blocks can now be found in the theme category:

  • Post Template
  • Pagination
  • Next Page
  • Page Numbers
  • Previous Page

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle: @alberto-marin @ugljanin @mauteri. If you’re interested in contributing but don’t know where to start, join the Core Editor weekly meetings on Wednesdays @ 14:00 UTC in #core-editor focused on all things Gutenberg.

Changelog

Enhancements

Accessibility

  • Accessibility improvements for 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. Inserter. (37357)
    • Try possibly better method for Block Inserter Search focus. (37793)
  • Accessibility improvements for List View Part 1. (37798)
  • Improve successful draft save notification for screen readers. (37683)

Block Library

  • Audio: Add uploading state. (37739)
  • Post 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.: Add to and from Post Content transformations. (37651)
  • Search: Improve escaping on the search block. (37829)
  • Page List: Add menu-item-home class to Navigation for front page. (37301)
  • Tag Cloud: Add outline style. (37092)

Components

  • ExternalLink: Update icon to be smaller, have no margin. (37859)

Post Editor

  • PostLockedModal: Display preview link as part of the text. (37852)
  • Try: Polish post takeover modal. (37821)
  • Suggest picking a category on the pre-publish panel. (37703)

Block Editor

  • Inserter: Update categories for theme blocks. (37723)

Site Editor

  • Add keyboard shortcut help modal. (37650)
  • Update copy on Snackbar that appears when a template is deleted. (37888)

Icons

Bug Fixes

Block Library

  • Code: Remove color from code theme.scss. (37816)
  • Code: Try: Polish code styles to properly apply border properties. (37818)
  • Columns: Avoid using CSSCSS Cascading Style Sheets. variables for block gap styles. (37436)
  • Comments Pagination Next: Fix accidental division by zero. (37788)
  • Gallery: Pass any custom attributes through the gallery v2 migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. script. (37812)
  • Gallery: Remove warning notice about mobile version required. (37842)
  • Navigation: HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. tags like inline images in nav links break submenu layout. (37665)
  • Navigation: Set the default for –navigation-layout-align to “flex-start” when using vertical orientation. (37696)
  • Navigation: Fix overlay menu errant focus style on scrim. (37824)
  • Page List: Show UIUI User interface warning if Pages cannot be retrieved in Page List block. (37486)
  • Page List: Update page list flex variables to match navigation. (37718)
  • Post Comments: Tidy up Post Comments default styling. (37709)
  • Post Content: Check for nextpage to display page links for paginated posts. (37672)
  • Post Excerpt: Fix previews. (37648)
  • 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.: Use gap for the grid view. (37711)
  • Query Loop: Check for zero queryId on initialization. (37867)
  • Site logo: Fix range control on landscape logos. (37733)
  • Simplify and unify a few modal dialogs. (37857)
  • Fix enqueueing additional styles for blocks only when rendered. (37848)
  • Fix typo (hanle -> handle). (37849)
  • Revert “[Paragraph Block] add font family support”. (37815)

Colors

  • Coloring panel is unusable in RTL. (37644)
  • Impossible to clear colors if color palettes are removed. (37791)
  • Use useCallback hook from wordpress/elements in color-picker. (37745)

Components

  • BaseControl: Fix VisualLabel styles. (37747)
  • ConfirmDialog: Use 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. from wordpress/elements. (37771)
  • CustomSelectControl: Stop keypresses being caught by other elements when they happen. (30557)

Post Editor

  • Restore canvas padding for classic themes. (37741)

History

  • Fix broken ‘Redo’ by removing faulty logic for discarding unsaved Logo changes. (37895)
  • Fix redo after update/publish with transient edits. (37840)

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

  • Fix Home template description typo. (37843)
  • Improve user experience with blocks editor when a block is not registered. (37646)

Block Editor

  • Fix LinkPicker freeze when virtual keyboard is hidden. (37782)
  • RichText: Fix dead key input on Windows. (37777)
  • Link control: Translate empty link string. (36975)
  • Add post-type-x classname to 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.. (37429)

Global Styles

  • Reduce specificity of legacy font sizes defined by core. (37819)

Accessibility

  • Fix aria-modal attribution with multiple navs on page. (37813)

Template Editor

  • Template Mode: Trim long post titles in large viewports. (37720)

Site Editor

  • Add the “Help” link to the tools menu. (37647)
  • Contextualize “Export” string to differentiate it from other occurrences in WP Core. (37660)

Documentation

  • 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. Schema: Update fontSize and lineHeight props. (37853)
  • Theme.json Schema: Fix appearanceTools in theme.json schema. (37762)
  • Theme.json Schema: Update theme.json schema to allow for per-block management of settings. (36746)
  • Add checkbox for updating schemas if appropriate. (37780)
  • Fix issue template typo. (37825)
  • Add automated theme.json reference documentation. (37569)
  • Add link to block source for reference. (37750)
  • Add missing end tag for codetabs in stylesheet guide. (37827)
  • Fix broken URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org on block variation page. (37702)
  • Fix type of saved $content. (37688)
  • Fix type of saved content – part two. (37740)
  • Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. failure. (37742)
  • Update create block type how to guide for block.json. (37674)
  • Update stylesheets guide with using block.json file. (37679)
  • OSX Setup guide: Wrap lts/* in quotes for nvm commands. (37722)
  • Remove “experimental” from full site editing documentation. (37655)
  • Update copyright year to 2022 in license.md. (37689)
  • Update wp-plugin.md. (37846)
  • Updated ColorIndicator readme. (37638)
  • Update the Post Author block description. (37836)
  • Fixing broken links and adding colon. (37664)
  • Improve Gutenberg release documentation. (37898)

Code Quality

  • Add the WP version in which some JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. APIs will be removed. (37854)

Block Library

  • Late escape Categories block. (37835)
  • Late escape Page List block. (37873)
  • Late escape Query blocks. (37877)
  • Late escape RSS block. (37878)
  • Late escape Table of Contents block. (37882)
  • Late escape Search block. (37879)
  • Move escaping to point of output in Archives block. (37834)
  • Post Content: No need to pass default get_the_content args. (37701)

Post Editor

  • PostLockedModal: Update action buttons markup. (37837)

Parsing

  • Block API: Separate validation stage during block parsing. (37763)

Components

  • Refactor SuggestionsList to use hooks and change class to function component. (36924)

Tools

Testing

  • Allow type imports for ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. everywhere. (37862)
  • Change the performance job folder structure to avoid nested node_modules. (37775)
  • Fix flaky test by using waitForResponse to ensure the URL details request completes. (37901)
  • Marking test that consistently fails as skipped. (37729)

Build Tooling

  • wp-env: Replace TT1-Blocks with Empty Theme in the wp-env of gutenberg and CI. (37446)
  • wp-env: Show --help when no subcommand is passed. (32755)
  • Scripts: Scan block.json files to detect entry points for the build process. (37661)
  • Scripts: Add plugin-zip command to create a zip file for a WordPress 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. (37687)

Create Block

  • Allow custom folder name for a block. (37612)
  • Speed up scaffolding by omitting WordPress dependencies. (37639)

Performance Benchmark

Post Editor

VersionTime to first blockKeypress event
Gutenberg 12.47.4 s46 ms
Gutenberg 12.37.4 s46 ms
WordPress 5.88.0 s53 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.46.9 s37 ms
Gutenberg 12.36.7 s38 ms
WordPress 5.85.9 s11 ms

Time to first block: firstBlock

Keypress event: type


Thanks to @priethor and @annezazu for helping write and proofread this post!

And kudos to all the contributors who have submitted bugs, written code, designed components, added documentation, reviewed others’ contributions, and everything else that goes into making Gutenberg. 👏

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

Editor chat summary: Wednesday, 12 January 2022

This post summarizes the weekly editor chat meeting on Wednesday, 12 January 2022, 14:00 UTC held in Slack.

WordPress and 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/ Releases

@jorgefilipecosta started the chat by saying Gutenberg 12.3 was released on the 5 of January. Details related to the Gutenberg release can be read in this post. The notable features are new blocks one can use and the gap and typography support additions to the group 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..

Regarding the WordPress release, @jorgefilipecosta said the RC2 was released on 11 of January and things are going smoothly with the WordPress release. The final WordPress 5.9 version is planned for 25 of January 2022.

From the editor side on 5.9 must-have board we still have 9 to-do items and 3 items are in progress.

Project updates

Native mobile app

Shipped

  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native v0.66 upgrade

Fixes

  • Line-height issue on Android
  • Link picker freeze when virtual keyboard is hidden
  • Text formatting issue when backspace is used
  • Cover block 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. related to the color settings

In progress

  • Final tweaks in the GSS Font size/color implementation
  • Finalizing reliability improvements of the mobile translations pipeline

Template editor, site editor, and styles

Two PR’s were submitted (#1, #2) that implement code editing for edit site and the ability to copy the template content. These PR’s when merged will bring UI parity between the site editor and post editor.

Regarding the styles project the focus was on testing things and improving what we have in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. by fixing some bugs, improving the escaping of some parts, and fixing missed backports.

Task coordination

@mamaduka

@jorgefilipecosta

Worked on bringing parity between site editor and post editor. For the next week plans on:

Open floor

WordPress 6.0 project board

@paaljoachim shared the following:

As there are issues that are punted from WP 5.9. Will it be helpful to get a project board up as soon as possible for WP 6.0 to be sure that punted issues and other issues are handled early? Similar to how TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. has a 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.) for 6.0 early tickets.

@jorgefilipecosta answered that we don’t have a board for 6.0 because the assumption is everything that is being worked on will be part of 6.0.

Block editor dependency on user endpoints

@tomjn shared the following:

I had hoped to raise a subject I wanted to talk about last week but I will not be around tomorrow. I’d much appreciate anybody who can look into the issue of the editor making the invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. assumption that the user is always logged in and always has a usable active session.

This has crippled Frontenberg but also doesn’t account for expired WP sessions, cancelled sessions, etc, and does not have an appropriate fallback ( it results in a partial code editor view ). Default behaviour in WordPress has always been to show a modal dialog with the login window, and past Gutenberg behaviour has been to assume the user cannot publish and adjust the UIUI User interface accordingly e.g. submit for review rather than publish/update. It’s also prior precedent that these types of REST request are bundled with the initial page load to avoid the additional request so there are performance consequences

– https://make.wordpress.org/core/2022/01/04/editor-chat-agenda-5-january-2021/#comment-42271

– https://github.com/WordPress/gutenberg/issues/37682

@jorgefilipecosta said this seems like an issue we should address. We just need someone to work on the fix.

@tomjn said that his hunch at the moment is that getEntityRecords handles this and the same pattern would work for getCurrentUser but it’s mainly speculation. If that’s the case the fix is simple.

Typography settings consitency and list block class

@luminuu shared the following:

While testing the 5.9 RC1, I came across the inconsistency of the font family selection at the typography settings. It was reverted from the paragraph block but it is still in use in some other blocks. To avoid confusion with users, I suggested to remove the font family setting from the other blocks as well. Please have a look and share your thoughts: https://github.com/WordPress/gutenberg/issues/37826

I also want to request some help with the PR https://github.com/WordPress/gutenberg/pull/36676 as I’m struggling to have the checks running through properly. This PR is related to an issue of the 5.9 Must Have project: https://github.com/WordPress/gutenberg/issues/37388

@jorgefilipecosta said that regarding #37826 @ntsekouras created a PR to address it. Regarding #36676 the addition of a class to the list block was discussed as part of the fix to the issue #37388. @oandregal proposed an alternative fix and left his thoughts after the chat in this comment.

Unexpected style warnings

@joostdevalk shared the following:

Hey team! I have a problem I want to submit to you all.

  • In this PR an error was introduced that is thrown when Gutenberg thinks styles are not added properly.
  • As becomes clear from the content of the errors, only styles added by blocks or themes are taken into account. However, plugins can add styles as well. At Yoast we add a style sheet to add styling to our metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way..
  • We haven’t changed the way we include those styles in years, but suddenly console errors started showing up. Even though nothing breaks functionally, errors are thrown, which means people will start blaming us if something actually breaks.
  • In this PR the level of the errors was lowered to warnings.
  • In October, Ella drafted a PR that would make sure no warnings were thrown anymore.
  • Because this was quite a big PR, it was decided to extract the fix related to the warnings to a separate PR. This PR has been open since about a month.
  • Earlier this week, the PR was removed from the WordPress 5.9 Must-Haves project board.

We’d really like to have Ella’s PR merged into 5.9 to prevent warnings from being thrown, to prevent support load and getting the blame for broken things that are unrelated to us.

@mamaduka said:

I’m a little worried about including the fix in RCrelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). that hasn’t been well tested.Maybe we should remove the warning from 5.9; since plugins that add CSSCSS Cascading Style Sheets. files to the editor have no way to fix it. And as @joostdevalk mentioned, it will just increase support overhead.Then we can try and ship #37466 in the point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality..

@aristath added:

At this point, the warning does more harm than good. The intention behind it is good, but if we can’t fix the current implementation for 5.9, then temporarily removing these warnings makes sense

@jorgefilipecosta we can have a PR disabling the warnings and discuss in more detail on the PR.

Escaping in bocks

@fabiankaegy said the following:

I just quickly wanted to throw in this discussion I opened regarding how block should handle late escaping the content of inner blocks in dynamic blocks here: https://github.com/WordPress/gutenberg/discussions/37823It is something that keeps popping up in for example WordPress VIP code reviews and there isn’t really any guidance in the docs or in the core codebase.

@jorgefilipecosta shared that applying wp_kses_post to the content like wp_kses_post( $content ) does not seem like a good idea as a block may legitimately need to output unsafe content like javascriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. events etc and if those come from the block they are expected and safe.

@jorgefilipecosta added that the issues arise when a block outputs any information the user can manipulate like attributes. Any kind of output containing use information should be escaped as close to the output as possible. Following the WordPress principle of sanitizing sooner escaping late. @jorgefilipecosta ended the subject by sharing that @getdave is making some improvements to how core escapes information.

#block-editor, #chats, #core-editor, #core-editor-summary, #gutenberg

What’s new in Gutenberg 12.3? (5 January)

“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 published 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 12.3 has just been released and is available to download, making it the first Gutenberg release of 2022!

This release contains fewer contributions than usual due to the holiday season that took place in some parts of the world in the last two weeks. However, it still has many important contributions, which is an excellent reminder of WordPress’ contributor diversity. Let’s dive into some of them.

Table of contents

New blocks to build with

We have three brand new blocks at our disposal.

Author Name 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.

As part of an effort to split the Post Author block into separate blocks to allow for even more layout options, the Author Name block has been released. This means you will have extra options to customize the author name to your liking.

Post Author Name

More atomic author-related blocks will follow in the future, like 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. or Author Bio.

Comments pagination: Next and Previous blocks

Continuing with the work that has been done on the Comments Query Loop blocks in previous Gutenberg releases, the Comments Next Page and Comments Previous Page blocks have been released.

They are the counterparts of the Next Page, and Previous Page blocks of the Query Loop, but built for the 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.. They display links to navigate the comments forward and backward when not all of the comments are shown on the current page.

Comments Previous and Next Page

With the release of these two blocks, we conclude all the planned inner blocks for the Comments Query Loop. However, work on the Comments Query Loop blocks has not finished yet: more improvements are in the works.

More controls to customize

Blocks keep getting more powerful and this release is no exception.

Spacer block: custom units

Custom units can now be used to configure the Spacer block:

  • EM: Relative to parent font size
  • REM: Relative to root font size
  • VH: Viewport height
  • VW: Viewport width
Custom Units in the Spacer block

Group block: gap support & typography support

The Group block can now use the new Gap support, which adds the ability to choose the distance between the children items of the block.

This new gap setting is also available in the Row variation (added in Gutenberg 11.5), except that the gap is added horizontally instead of vertically. This allows you to have even more options to customize the layout to your liking.

Typography was added to the Group/Row blocks. This can come in handy when you need to define the typography settings for a whole section, like a 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., and you don’t want to duplicate the same typography settings over multiple blocks.

Set your site icon using the Site Logo block

There is now a new option in the Site Logo block settings to sync the site icon* to the Site Logo image. When the toggle is switched on, any updates made to the Site Logo block image are also applied to the site icon. This is an important flow that allows for parity between the Site Editor experience and the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings..

* Site icons are what you see in browser tabs, bookmark bars, and within the WordPress mobile apps.

Set site icon with Site Logo settings

Restrict 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. creation for non-adminadmin (and super admin) users

From now on, only admins can create Navigation Menus. This matches the current menu system in WordPress.

When non-admin users add a Navigation block, they will now see a warning telling them they do not have permission to create Navigation Menus and instead will be presented with the option to select an existing one. This allows folks to still add navigation to their content in line with broader WordPress permissions.

Restrict Navigation Menu creation for non-admin users
Non-admin users can still add a Navigation block and select an existing menu.
If non-admin users create a menu, changes won't be saved
If a non-admin user tries to create a menu, changes won’t be saved.

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Blocks Reference

There is a new Handbook page that lists all the core blocks included in the Gutenberg 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. It contains the name, description, categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., supports, and attributes of each block and it is generated automatically using their 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. properties. This resource makes it easier for anyone who wants to extend or customize the core blocks.

Core Blocks Reference section in the Handbook

Changelog

These are all the changes included in this release.

Features

Block Library

  • Group/row blocks:
    • Add Gap support. (37459)
    • Add Typography support. (37456)
  • New Author Name block. (36001)
  • Comments Pagination:
    • New Comments Pagination Next block. (36562)
    • New Comments Pagination Previous block. (36912)

Enhancements

Block Library

  • Navigation:
    • Enable an even more compact setup state. (37089)
    • Use rems for padding. (37478)
  • Site Logo: Add option to set site icon from Site Logo block. (35892)
  • Paragraph: Add font family support. (37586)
  • Comments Template: Add comments pagination. (37610)
  • Embeds: Simplify the embed loading state. (37548)
  • Spacer: Add custom units for height and width. (36186)

Global Styles

  • Make the global styles subtitles font smaller. (37600)
  • Add support for nameless font sizes. (37410)

Colors

  • Allow color gradient popover to be above the color toggle. (37430)
  • Make color style labels simpler. (37493)
  • Use subtitle styles for the palette names. (37460)

Design Tools

  • Border panel: Collapse color controls. (37425)

Document Settings

  • Add class name to post author on edit post sidebar. (36269)

Site Editor

  • Update save panel’s cancel button from icon to visible text. (37310)

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)

  • Latest Posts: Add aria-label to featured links. (36251)

Bug Fixes

Block Library

  • Navigation:
    • Restrict Navigation permissions and show UIUI User interface warning if cannot create. (37454)
    • Ensure the overlay menu works when inserting navigation block patterns and that inner blocks are retained. (37358)
    • Fix navigation appender. (37447)
    • Revert all margins on navigation-item in the editor. (37587)
    • Fix page list issues in the overlay. (37444)
    • Show a UI warning when the user does not have permission to update/edit an existing Navigation block. (37286)
    • Try cascading nav styles through class names. (37473)
  • Query Loop:
    • Fix editable post blocks in Query Loop with zero queryId. (37629)
    • Changed the letter case for Post Type to Post type. (37499)
    • Query Pagination Next: Hide block if the custom query has no results. (37553)
    • Revert Query Pagination Next/Previous placeholder(36681). (37520)
  • Site Logo: Fix block alignment issues. (36627)
  • Gallery: Fix block registration hook priority. (37409)
  • Post Content/Title: Reflect changes when previewing a post. (37622)
  • Post 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.: Specify paragraph as post excerpt 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.) name. (37412)
  • Reusable Block: Fix embed handling. (37554)
  • Site icon: Fix site icon styling to display non-square site icons within a square button. (37570)
  • Template Part: Only display a missing notice in debug mode. (37404)
  • ServerSideRender: Fix loading state. (37623)
  • Comments Avatar Block: Show avatar drag handles only when selected. (37567)

Global Styles

  • Color editor discards colors with the default name. (37496)
  • Gradients are not being applied by class. (37597)
  • Impossible to edit the theme and default colors. (37497)
  • Blank site editor when theme name contains a period. (37167)
  • Lower the specificity of font-size CSSCSS Cascading Style Sheets. Custom Properties in the editor. (37526)
  • Use inset shadow on color indicators and adjust spacing. (37500)

Block Editor

  • Fix Enter handling for nested blocks. (37453)
  • Restrict delete multi-selected blocks shortcut. (37595)
  • Avoid using CSS variables for block gap styles. (37360)

Themes

  • Add comment-form and comment-list to default html5 theme support. (37536)
  • Avoid Duplicated “Theme File Editor” menu. (37592)
  • Fix conditional check “Theme File Editor” menu. (37616)
  • Fix duotone theme cache. (36236)

Template Editor

  • Avoid undoing issues when resetting parent blocks for controlled blocks. (37484)
  • Change the color of the welcome dialog close icon, so it is visible against a black background. (37435)
  • Template Editing Mode: Fix options dropdown. (37442)
  • Try to fix auto-resizing in template part focus mode. (37394)
  • Update the template list action labels. (37576)

Site Editor

  • Add customized indicators to plugin templates that have been customized. (37329)
  • Register block editor shortcuts. (37577)
  • Update regex to handle 404 template slug. (37579)
  • Parse 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. blocks outside the content. (37545)

Accessibility

  • Editor: Focus when navigation toggle receives state false. (37265)
  • Navigation: Only add dialog role when modal is open. (37434)

npm Packages

  • Fix missing peer dependencies where ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. is used indirectly. (37578)

Testing

  • Fix flaky Navigation block end-to-end test by mocking out URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org details endpoint to avoid 404. (37501)

Post Editor

  • Multi-entity saving: Allow publishing a post while not saving changes to non-post entities. (37383)

Components

  • ToolsPanel: Allow items to register when panelId is null. (37273)

Design Tools

  • Make block support tools panels compatible with multi-selection. (37216)

Documentation

Packages

  • Add automated core blocks documentation. (36183)
  • Added README for GradientPicker. (37614)
  • Add a link to 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.-block example in gutenberg-examples repo. (37633)
  • Fix parameter type in the render function of file block. (36262)
  • Add changelog entry for __experimentalIsRenderedInSidebar gradient components flag. (37457)

Handbook

  • Switch code distinction to JSX & Plain. (37348)
  • Fix a grammatical error in the Create Block tutorial. (37636)
  • Fix plugin sidebar tutorial not publishing. (37505)
  • Update plugin sidebar to new how to guide template. (37490)
  • Update “Local by Flywheel” name and URL. (37512)
  • Update Meta Boxes to a single page how to guide. (37621)

Code Quality

Compatibility with Core

  • Adds missing block template class properties. (37556)

Formatting

  • Fix lint issues. (37618)
  • Move block patterns compatibility code to lib/compat folder. (37451)

Packages

  • Data:
    • Block top level useSetting paths. (37428)
    • Deprecate receiveUploadPermissions. (37508)

Site Editor

  • Remove dead code. (37581)

Components

  • Storybook: Tweak configuration for v6.4 update. (37544)

Security

Tools

Testing

  • End to end:
    • Switch to using a $eval to fill user creation fields. (37469)
    • Fix and enable remaining navigation block end-to-end tests. (37437)
    • Add block editor shortcuts end-to-end tests. (37624)

Build Tooling

  • Add npm-run-all package to simplify running scripts. (37558)
  • Update caniuse to latest. (37588)
  • Fix pre-commit hook to build block documentation. (37613)

Performance Benchmark

Post Editor

VersionTime to first blockKeypress event
Gutenberg 12.36.7 s50 ms
Gutenberg 12.26.7 s49 ms
WordPress 5.86.9 s53 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.36.7 s41 ms
Gutenberg 12.26.7 s43 ms
WordPress 5.84.3 s12 ms

Time to first block: firstBlock
Keypress event: type


Thank you, @gziolo and @annezazu for helping me with the release process, proofreading this post, and helping to select the release highlights.

Thank you, @javiarce for creating the assets included in this post.

And finally, thanks to all those who contributed to this release!

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

What’s new in Gutenberg 12.2? (22 December)

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


If you observe the Gregorian Calendar, New Year’s Eve is fast approaching, which means that the time has come for the next release of Gutenberg!

Gutenberg 12.2 has just been released! It’s the last minor Gutenberg release in 2021. This release improves compatibility with the upcoming WordPress 5.9 release and 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. themes. Also, it brings new features, code quality improvements, and 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. You can find the release highlights below.

Table of contents

Seamless navigation between the Site Editor and the Template List

Gutenberg 12.2 takes the Template List one step beyond, improving its user experience and performance. Thanks to its new client-side routing, WordPress doesn’t need to reload the page when navigating between the Site Editor and the Template List, reducing the time spent rendering unneeded HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. code.

Improvements to post comments

Starting with Gutenberg 12.2, the Comments Query Loop block is now able to display nested comments. This improves user experience as it is now much easier to understand if a comment responds to another comment or is just a first-level comment.

Also, the new Comments Pagination Numbers block allows displaying page numbers inside the Comments Pagination block, which in turn can be used inside the Comments Query Loop block. This improves the UIUI User interface because users can quickly navigate the comments using the page number.
Also, the pagination in the Comments Query Loop block now works similar to the pagination for posts.

A new home for border controls

Although lots of blocks are already taking advantage of border supports, this release switches border supports to the ToolsPanel, and sets which border properties are displayed in the ToolsPanel by default. The ToolsPanel, first introduced in Gutenberg 11.3, offers progressive discovery options for those provided through block supports, improving the user experience and consolidating the 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. UI.

New font size labels in the FontSizePicker component

Gutenberg 12.2 improves the way font sizes are displayed in the sidebar by using a sequence of numbers (1, 2, 3, 4, 5) as labels for the font sizes. These simplified labels can accommodate use cases with complex CSSCSS Cascading Style Sheets. values, helping users understand the available font sizes.

Improved color picker

More components are being iterated in this release. In an effort to reduce sidebar clutter and improve the design tools user experience, all blocks, including those that use custom color implementation, can now take advantage of the new dropdown-based color picker. This improved UI is easier to use, especially when editing a few colors back-to-back.

Preview for Block Styles in the WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor

While Gutenberg 12.0 introduced block styles preview on hover for the Block Editor, this release brings this functionality to the Widgets Editor, too. It’s now possible to preview style variations in the Widgets Editor when editing blocks that support this (e.g., Image, Table, Button blocks) by hovering or focusing over the style name, for full 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) support.

Changelog

Enhancements

Block Library

  • New block: Add Comments Pagination Numbers block. (36890)
  • Comment Template block: Handle nested comments. (36065)
  • 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.: Improve context handling in inner blocks. (37196)
  • Image: Reflect media deletion in the editor. (35973)
  • Navigation:
    • Add navigation blocks post-processing after 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 menu items. (36950)
    • Refactor modal padding to be simpler and more flexible. (37323)
    • Remove Navigation Menus from the Appearance menu. (37212)
    • Add clearance for appender in submenus. (36720)
  • Refactor handling of padding for group and column blocks. (37356)
  • Template Part: Add actions that fire during the loading process of block template parts. (36884)

Styles and design tools

  • Add the Welcome Guide option to the More Global Styles Actions dropdown. (37180)
  • Make the Blocks section more distinguishable. (37293)
  • Move the Edit colors button to a standard menu item. (36842)
  • Move Duotone palette to the bottom of global styles gradients. (37253)
  • Border controls: display border properties in the ToolPanel. (34061)

Components

  • FontSizePicker: Use an incremental sequence of numbers as labels for the available font sizes at the segmented control (conditionally). (37038)
  • ColorPalette: Improve accessibility and visibility. (36925)
  • ToolsPanel: Standardize input control label margin. (36387)
  • Unify styles for ColorIndicator with how they appear in Global Styles. (37028)
  • Update PanelColorGradientSettings component to use dropdowns. (37067)

Site Editor

  • Add the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. back to the Appearance menu. (37175)
  • Add client-side routing for Site Editor. (36488)
  • Add a new aria-pressed attribute to the Toggle navigation button. (37351)
  • Template revert flow: Make label description source agnostic. (37004)

Packages

  • Scripts: Enable ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Fast Refresh for block development. (28273)
  • List Reusable Blocks: Refactor ImportForm into a functional component and use 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.. (36938)

Widgets Editor

  • Implement preview for blocks. (37012)

Post Editor

  • Template Part block should not be available in the Post Editor inserter. (37157)

Bug Fixes

  • Remove 4 instances of gutenberg text-domain from CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (37229)

Block Library

  • Fix return type in the DocBlockdocblock (phpdoc, xref, inline docs). (37352)
  • Fix deprecated usage of passing null to explode function. (37392)
  • Gallery:
  • Fix color issue for captions with hyperlinks in the Gallery block. (37033)
  • Fix documentation and function naming for gallery block registration in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (37132)
  • Remove placeholder border. (37050)
  • Post Comments:
  • Fix form-submit styles by adding button classes to the submit button in the post-comments block. (37245)
  • Fix width of the post comment form input. (37238)
  • Use block markup for the comment form button when using a block theme. (37315)
  • Comments Pagination Block: Add default styling. (37057)
  • Image:
  • Set image display mode to grid when no alignment is set to align caption onresize event properly. (35787)
  • Fix resizer controls being hidden in Safari when switching between alignments. (37210)
  • Navigation:
  • Fix gutenberg_ prefixed function references in Core. (37021)
  • Fix navigation justifications. (36991)
  • Fix vertical alignment of page list in the modal. (37321)
  • Remove hardcoded typography units. (37349)
  • Fix vertical layout. (37009)
  • Switch to addEventListener event for load event in the navigation block view script. (37135)
  • Don’t request the deprecated navigation areas endpoint outside of the Gutenberg 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. (37187)
  • Navigation Link Control: Hide the Transforms component when no options are available. (37284)
  • Remove the deprecated navigation area block from the inserter. (37026)
  • Query Loop: Add useBlockPreview component, fix alignment of the Query Loop block in the editor. (36431)
  • Query Pagination: core/query-pagination-next and core/query-pagination-previous blocks: change the markup on the first and last pages of the pagination. (36681)
  • Search: Fix application of border color class in the editor. (37242)
  • Template Part:
  • Fix isMissing condition check. (37370)
  • Use Core version of template and template part post types and REST endpoints for WordPress 5.9, with backward compatibility for WordPress 5.8. (36898)
  • Update the micromodal package to include a click-through fix. (36837)

Components

  • Card: Support the extraSmall option for the size prop. (37097)
  • Drop Zone: Fix HTML drop issues with the Windows browsers. (37151)
  • Don’t load Radio and RadioGroup components directly. (36934)
  • DuotonePicker typo fix. (36662)
  • Element: Ensure that the package uses the up-to-date React types. (37365)
  • Fix incorrect rendering of ToggleGroupControl‘s active state. (37332)
  • Hide the remove control point button because removing it would break gradient control. (37186)
  • Import experimental Heading and Text Components. (37290)
  • Make the color popover on the gradient picker appear as expected. (37115)
  • Remove unused reakit-utils dependency from peer dependencies. (37369)
  • Storybook: Fix deprecated disabled key. (37112)
  • ToggleGroupControl: Fix extra update on incoming change. (37224)

Site Editor

  • Allow global styles sidebar panels to fill vertical space. (36845)
  • Display a notice if export fails. (37131)
  • Fix edit template part link in 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. dropdown. (37249)
  • Fix template resolution to give precedence to PHP templates defined in a child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/.. (37074)
  • Hide the block appender in the Template Part editor. (37213)
  • Improve notification when saving content in the Site Editor. (36897)
  • Improve handling of parsed requests. (37209)
  • Sync Export 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. error codes. (37347)
  • Template Editor Mode: Hide editor mode switcher. (37359)
  • Use server definition for the Template Areas. (37215)
  • Fix the white screen of death on the Templates page when user avatars are disabled. (37458)

Styles

  • Allow selector ordering to ensure theme.json root selector margin takes precedence. (36960)
  • Custom keys from theme.json: Fix kebabCase conversion. (37380)
  • Do not remove theme presets if defaults are hidden. (37008)
  • Fix CSS Custom Properties for presets in the Site Editor. (36851)
  • Fix how appearanceTools works. (37254)
  • Fix styles for previews and patterns. (37296)
  • Font sizes: Update default values. (37381)
  • Remove CSS that causes conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with theme.json. (36424)

Design Tools

  • Border Style Control: Update styling for consistency with border width control. (37244)
  • Border panel:
  • Don’t restore deselected border color when width gets changed. (37049)
  • Update the value of the ColorPicker component when color is cleared. (37048)
  • Gradients
  • Fix clearing a custom gradient from throwing a React warning. (37051)
  • Enable adding custom gradient when gradients are disabled. (36900)

Compatibility with Core and library code

  • Fix array key warning in block supports layout. (37101)
  • Templates: Search for old template names in the parent theme too. (36910)
  • Fix theme requirement validation when using WordPress 5.8. (37226)
  • Fix WordPress 5.9 check for conditionally running code. (37235)
  • Fix mistake in the_remove_theme_attribute_in_block_template_content function. (37137)
  • Gallery: Enable the new gallery block by default if running in Core. (37134)

Packages

  • Core Data: Fix returning empty array in the getEntityRecords function for unknown entities. (36984)
  • Include @babel/core as a dependency where applicable. (37328)
  • Format library: Fix unsetting highlight color. (37062)

Block Editor

  • Mark the last change as persistent on save. (36887)
  • Fix content loss when ungrouping template parts or reusable blocks. (37280)
  • Simplify the RESET_BLOCK action to fix the loss of content when using template part focus mode. (37283)

Post Editor

  • Multi-Entity Saving: Decode HTML entities in item titles. (37353)

Documentation

  • Update documentation related to schemas. (37294)
  • Remove versioning in theme schema descriptions. (37165)
  • Fix the broken link on the plugin description page. (37362)
  • Handbook:
  • Add information about skip links to the block theme overview. (36555)
  • Add closing ticks for blockGap code example. (37338)
  • Add how-to guide documentation template. (36694)
  • Add link and details for npx in create block tutorial. (37376)
  • Consolidate React Native documentation. (36685)
  • Fix a link to the how-to guide template. (37191)
  • Move classes used in the navigation block from the component to the new readme. (37375)
  • Update Format API how-to guide. (37298)
  • Update broken links. (37121)
  • Improve formatting of headings in the contributors’ guide. (36689)
  • Fix type for prefix transformation. (36362)
  • Fix broken links in the Resources section. (37307)
  • Remove the semicolons from the 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. examples. (37129)
  • Packages:
  • Block Editor:
    • Add a documentation note about inner blocks and excerpts. (36405)
    • Update example of usage for suggestionsQuery component. (37281)
  • Componentes:
    • Add missing changelog entries. (37384)
    • Fix code formatting for card components. (37268)
    • Fix importing from the wrong package. (37192)
    • Fix missing link for shortcut documentation. (36800)
    • Update QueryControls README.md. (37233)
  • Site Editor: Update support documentation URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the Welcome Guide. (37176)

Code Quality

Compatibility with Core

  • Better synchronization between Gutenberg and Core code. (37141)
  • Move WordPress 5.9 wp-admin menus compatibility code to lib/compat folder. (37257)
  • Move the block page templates hook into compat/5.9 folder. (37142)
  • Move template loader hooks and functions into lib/compat folder. (37149)
  • Synchronize wp_is_block_theme function and block-templates block support with Core. (37218)

Global Styles

  • Do not register Global Styles custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. in WordPress 5.9. (37282)
  • Port Global Styles code to lib/compat/wordpress-5.9:
  • CSS custom properties. (37334)
  • Front assets. (37335)
  • Rename WP_Theme_JSON_Resolver methods to make them compatible with Core. (37393)

Packages

  • Dependency Extraction Webpack Plugin: Sort externalized dependencies report. (37377)
  • Block Editor:
  • 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. component: Use block settings to pass assets. (37193)
  • Remove duplicate block styles. (37133)
  • Specify the WordPress versions where API is deprecated. (37150)
  • Components
  • Refactor DatePicker into a functional component. (36835)
  • Storybook: Update to version 6.4. (37367)
  • Data
  • Ensure that redux is listed as a dependency. (37364)
  • wordpress/data: Refactor use-select component in preparation for adding types. (37017)
  • Scripts: Update dependencies shared with other WordPress packages. (37395)

Site Editor

  • Remove unused PHP code. (36997)
  • Revert Site Editor: Set the on the list page to be the same as the CPT name. (37270)

Block Library

  • Remove gutenberg_ prefix from @wordpress/block-library. (37341)
  • Block Library: Rename Query Pagination blocks. (37091)

Tools

Testing

  • End-to-end Tests:
  • Increase delay in image block end-to-end test to fix intermittent failure when clearing URL field. (37136)
  • Update Multi-Entity Saving test to improve reliability. (37139)
  • Sanitize flaky test report file names. (37390)
  • Retry login again after a bad nonce request to prevent intermittent test failures. (37219)
  • Fix Multi-entity saving and Template parts related tests. (37333)
  • Fix Heading test. (37382)
  • Re-enable most of the navigation block end-to-end tests. (37214)
  • Use global transients for PHPUnit tests. (37122)
  • Fix usage of useSetting('color.palette'). (37108)
  • Add tests for the new gallery hooks. (36801)

Linting

  • ESLint:
  • Add support for ESLint v8. (36283)
  • Fix Babel config resolution when a custom ESLint config is present. (37406)

Build Tooling

  • Specify PHP version in Composer. (37007)
  • Remove unused jest-serializer-enzyme dependency. (37373)
  • Remove some labels from the Experiments section of the changelog. (37098)
  • npm:
  • Fix package dependencies issues discovered with pnpm. (37396)
  • Use the latest minor version of webpack in Gutenberg. (37371)
  • Fix build failure on Windows. (37189)

Performance benchmark

VersionTime to render first blockKeypress event (typing)
Gutenberg 12.25.672 s42.38 ms
Gutenberg 12.15.484 s37.17 ms
WordPress 5.85.807 s46.5 ms

Thank you, @priethor, for coordinating the release process, proofreading, and helping to select release highlights!
Thank you, @jameskoster and @joen for helping me to prepare visual assets and proofreading the release post!
Thank you, @mamaduka, for uploading the plugin to 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/!
Kudos to all the other contributors who have helped to make this release possible.

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