What’s new in Gutenberg 13.2? (May 11)

“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.2 brings a new 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. to save editor preferences on the server, visual guides for padding and margins, and improvements to the Comment 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..

Table of Contents

Save Editor Preferences

Gutenberg now saves editor preferences on the WordPress server, instead of in the browser. This means that no matter which computer or browser you are using, Gutenberg will always be set up just the way you like it.

Image showing settings from the editor that are persisted

Visualize Padding and Margin

Understanding how margins and padding affect a block is important in getting your layout just right. With Gutenberg 13.2, the margins and padding will highlight in blue as you adjust them.

Improvements to the Placeholders

The Post Content, 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., Post Comments, and Post Comments Form blocks will show more realistic placeholders in the editor to give you a better understanding of how your site will look with real content.

Screenshot showing a post with placeholders

Other Notable Highlights

You can now exit the Quote block and move on to a new block by pressing the Enter key at the end.

The Separator block now supports top and bottom margins, giving you more control over the whitespace of your content.

Numerous bugfixes to the Comments block fix styles and correct messaging.

Screenshots showing comment block

Props to new contributors

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

  • @chriszarate: ESLint 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 recommended preset when prettier is not installed. (40634)
  • @danieliser: Fix/block 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. icon prop errors. (40710)
  • @gvgvgvijayan: Fixes broken links. (40578)
  • @iansvo: URLInput now always has an ID and accessible label. (40310)
  • @juhi123: Migrate Image Size to Playwright. (40467)
  • @Trapsta: Close overlay menu when clicking an anchor link. (39625)

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

Features

  • Add new preferences persistence API, and save editor preferences in user meta. (39795)

Enhancements

  • Add visualizers for padding and margin for all blocks. (40505)
  • Remove the spotlight mode from template parts. (40652)

Block Library

  • Placeholders:
    • Update post content placeholder. (40177)
    • Update the placeholder for post excerpt. (40178)
    • Add placeholder to Post Comments block. (40484)
    • Improve the logic for warnings for Post Comments Form placeholder. (40563)
    • Post Comments Form: Add “proper” visual representation in the editor. (40368)
  • 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.: Add Post Comments Form block to Comments Query Loop template. (40256)
  • Post Comments block: Enqueue comment-reply script. (40366)
  • Cover: Avoid unnecessary wrapping when transformed from Group. (40602)
  • Quote v2: Implement exiting on Enter at end. (39911)
  • Separator Block: Add top & bottom margin support. (40551)

Components

  • Fix async timing in tests using user-event. (40790)
  • Add flag for larger default size. (InputControl: 40622, UnitControl: 40627)

Site Editor

  • Use default cursor for non-editable text blocks. (40785)

Block Editor

  • Show add pattern label when patterns are being prioritised. (40598)
  • Improve button spacing in the top right corner of the editor. (40411)

Document Settings

  • Design tweaks to Post Visibility popover. (40530)

Global Styles

  • Global Styles 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.: Tweak separator margin. (40526)

Webfonts

  • Register all fonts before enqueing any. (40489)
  • Turn off WP 6.0 stopgap handler to use Webfonts API. (40555)

Block API

  • Allow using a custom domainpath for viewscripts. (40136)
  • Add settings hook. (40547)

Post Editor

  • Editor: Refactor PostFeaturedImage component to improve uploading state (40126)

Bug Fixes

Block Library

  • Audio: Correctly handle drag and drop upload errors. (40623)
  • Comments:
    • Comment Content: Show moderation message. (40612)
    • Comment Template: With pagination, make sure to request page 1 if there are no comments. (40759)
    • Comments Title: Count toggle working in ‘Singular’ editing mode (fix). (40728)
    • Comments block: Fix glitches found while backporting. (40628)
    • Fix alignment issue with comment author name. (40610)
    • Fix alignment issue with the comment edit link. (40584)
    • Fix alignment issue with the comment reply link. (40582)
    • Fix an alignment issue with the post comments form. (40613)
    • Fix style comment awaiting moderation indentation. (40681)
    • Prevent comments rendering on password protected posts. (40755)
    • Display paragraph breaks in comment contents block.. (40667)
    • Prevent spam links of author’s name in pending moderation comments. (40702)
  • Cover Block: Fix focal point error when 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. is applied. (40643)
  • Cover: Avoid adding a wrapper Group block when transforming to Group, where possible. (40293)
  • Cover Block: Fixed iOSiOS The operating system used on iPhones and iPads. 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. handling background-attachment to properly work with iOS 13+. (40087)
  • Navigation block “Open on click”: Inherit font style and font weight. (40671)
  • Post Author: Switch byline to use kses so that rich text elements are rendered correctly. (40776)
  • Latest Post: 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 featured images in latest posts. (40662)
  • Video: Fix drag and drop upload error state. (40552)
  • Heading: Include text alignment when transforming from paragraph to 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. and back. (40709)
  • No Results: Remove a typo from the no results block. (40573)

Components

  • UnitControl
    • Avoid calling onChange callback twice when unit changes. (40796)
    • Show unit label when units prop has only one unit. (40784)
  • Gradient Tool: Fix closing of popover when the angle control is clicked. (40735)
  • Simpler clear button (40437)

Block Editor

  • Fix dragging in inspector causing block deselection. (40604)
  • [RichText]: Ignore selection changes on non contentEditable nodes. (40611)
  • [Writing Flow]: Try to fix multi-selection with shift+click. (40687)
  • Fix the styles compatibility hook for the editor iframes. (40842)

Patterns

  • Fix core ‘Featured’ pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. registration. (40650)
  • Fix: Page patterns don’t show when only one pattern is available. (40707)

Block Locking

  • Avoid ‘lock’ attribute registration warning. (40654)
  • Register the ‘lock’ attribute on the server. (40468)

Code Editor

  • Commit changes upon switching editors to avoid content loss. (40730)

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

  • Fix Nav Sidebar Site Editor error. (40722)
  • Close overlay menu when clicking an anchor link. (39625)

Icons

  • Fix/block meta icon prop errors. (40710)
  • Fix the Icon component mobile icon. (40748)

Global Styles

  • Element styles: Prevent the WordPress filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. callback from being executed. (40594)
  • Global Styles Sidebar: Fix nav header styles and semantics. (40592)
  • Global Styles Sidebar: Tweak spacing. (40588)

Data Layer

  • useSelect: Prevent nested component update after unmount. (40677)
  • core-data: Change “include” type in getQueryParts. (40570)

Themes

  • Theme Export: Bug: Add .DS_Store to the list of ignored files. (40539)

Reusable Blocks

  • Fix template part / reusable block click through on non-safari browsers. (40339)

Block API

  • Check that a transform matches at the time of running the transform. (40497)

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)

Components

  • Improve tools panel accessibility. (40716)

Block Editor

  • URLInput now always has an ID and accessible label. (40310)

Block Library

  • Post Comments block: Fix missing label in placeholder. (40527)

Performance

Block Editor

  • getBlockTransformItems: Support single block object. (40718)

Block Library

  • Navigation Link: Avoid unnecessary re-renders. (40696)
  • Navigation: Improve selector performance. (40700)

Experiments

CSSCSS Cascading Style Sheets. & Styling

  • Style Engine: Add typography and color to backend. (40332)

Documentation

  • Docs: Omit name from settings object in registerPlugin. (40629)
  • Docs: Update the Block Metadata title. (40482)
  • Fix ColorPalette component’s documentation. (40620)
  • Fix indentation inconsistency in documentation for block variations. (40515)
  • Fix broken links. (40578)

Components

  • Add TypeScript refactor guidelines. (40153)
  • InputControl: Remove default value argument from Storybook. (40410)
  • Components: Fix error in CONTRIBUTING guide. (40682)
  • Components: Update changelog for #40735. (40797)
  • Fix/typos in documentation. (40579)

Themes

  • Adding schema info to 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. reference. (40599)

Code Quality

  • Block Editor: Deprecate ‘BlockColorsStyleSelector’ component. (40502)
  • Global Styles Sidebar: Rename NavigationButton so semantics are clearer. (40590)
  • Handle promise rejections from preferences persistence if the user is offline or the 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/. errors. (40641)
  • Improve the useDisabled hook and Disabled component. (40631)
  • Preferences persistence – mark modified property as not readonly in schema. (40637)
  • Preferences: Improve initial configuration for the new persistence package. (40715)
  • Remove padding prop from popover. (40544)

Components

  • Add DatePicker tests using ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Testing Library. (40754)
  • Borders: Remove unused BorderStyleControl component. (40635)
  • Migrate ConfirmDialog component’s Stories from knobs to controls. (40164)
  • SelectControl: Finish typescript migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.. (40737)
  • [components] Use internal Icon component for ToggleGroupControlOptionIcon. (40717)
  • TextControl: Covert component to TypeScript. (40633)

Block Library

  • Comments Query Loop block: Rename to Comments (but keep ID). (40763)
  • Post Comments Form Block: Mark as stable. (40452)
  • Remove Navigation Area block. (40645)
  • Remove testid and update tests. (40534)
  • Refactor: Reuse code of the editor placeholder across Post Comments and Post Comments Form. (40560)

Data Layer

  • useSelect: Improve transition from async to sync mode. (40680)

List View

  • Rename list view prop expandNested to isExpanded. (40731)
  • Tidy list view props and deprecate BlockNavigationDropdown. (40777)

Post Editor

  • Edit Post: Remove unused code. (40499)

Plugin

  • Remove experimental PWA support for WP-Adminadmin (and super admin). (40475)

Tools

  • Remove @mkaz from CODEOWNERS 😢. (40685)
  • Scripts: Add --dist-tag flag to the packages-update command. (40514)
  • Scripts: Remove broken lint-md-js command. (40511)
  • Scripts: Remove deprecated format-js command. (40512)
  • Update oandregal notifications. (40549)
  • Update native mobile wrangler in rich-text CODEOWNER. (40783)
  • Export hydrate in @wordpress/element. (40723)

Storybook

  • Storybook: Make description-loader more reliable. (40616)

Testing

  • Comment Template 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.: Cover odd/even classes. (40471)
  • Comments block end-to-end test: Remove now-obsolete Post Comments Form block. (40793)
  • Migrate Image Size to Playwright. (40467)
  • Migrate paragraph test to Playwright. (40779)
  • Refactor image-size test to follow Playwright’s best practices. (40644)
  • Remove require editor 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. line from full-content test setup. (40772)
  • Tests: Restore real timers after using Jest’s fake timers. (40760)
  • Update @testing-library/user-event to stable version (14.1.1). (40761)
  • [Automated Testing]: Fix partial selection copy flaky tests. (40607)
  • Retain Playwright end-to-end test’s trace on failure on CI. (40586)
  • Rewrite UnitControl tests in TypeScript. (40697)
  • Fix batchRest not throwing errors in Playwright. (40668)
  • Fix replacing with undefined in stripAnsi. (40384)
  • Nav link block PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher tests replace prefixed function with non-prefixed. (40657)
  • Fix the htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. data is wrong in clipboard emulation in Playwright. (40638)
  • Fix incorrect results in the flaky tests reporter. (40567)

Build Tooling

  • Eslint: Add TypeScript tests and stories to development files. (40504)
  • Fix: npm script(dev:Package) is not working on Windows. (40566)
  • ESLint Plugin: Fix recommended preset when prettier is not installed. (40634)

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.26.51s49.36ms
Gutenberg 13.15.74s44.41ms
WordPress 5.95.67s45.38ms

Site Editor

VersionTime to first blockKeyPress Event
Gutenberg 13.26.49s65.55ms
Gutenberg 13.16.61s75.92ms
WordPress 5.95.59s41.42ms

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

Thanks to @priethor for his contributions and improvements to this draft, and @fcoveram for the visual assets.

#gutenberg, #gutenberg-new

What’s new in Gutenberg 13.1? (27 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.1 brings border support to the Columns 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., a number of improvements to the Comments blocks, along with a range of 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) enhancements.

Table of Contents

Customize any border of the Columns block

The block supports and the global styles border panel have been updated to leverage the new BorderBoxControl component which allows the specifying of custom borders per side. This means you can have each border be exactly the same or completely unique.

This new block support has also been added to the Columns block to allow custom borders to be set for each side of a column.

Individual border settings can also be specified in 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. files:

"core/column": {
		"border": {
			"right": {
				"color": "red",
				"style": "dashed",
				"width": "2px"
			}
		}
	}

Accessibility improvements

A number of accessibility improvements are included in this release that resolve focus loss problems when installing blocks from the directory, creating pages from the link control search results, navigating the guide component, closing the welcome dialogue without any content in the post editor, and after choosing a menu in the navigation block.

Comment block improvements

Gutenberg 13.1 brings a number of improvements to the new Comments block. Most notably, the new Comments Title block enables richer compositions, especially with nested comments!

In efforts to stabilize these blocks for the upcoming WordPress 6.0, several bugs have been fixed. 🐛

Other notable highlights

Duotone keeps iterating, and now renders in the Site Editor when applied through theme.json. Speaking of duotone; check out the new duotone toolbar icon, a two-colored triangle that should better convey the button’s purpose when a duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. hasn’t yet been set. Once a filter has been selected, the original logo will appear to convey a change:

Before Gutenberg 13.1, the Categories block’s default behavior with empty categories was to hide them. Starting with this release, the block provides a new setting to customize this behavior and decide whether to show empty categories or not.

Props to new contributors

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

  • @chintu51: OnNumberOfItemsChange event attribute issue. (39942)
  • @khoipro: Scripts: Exclude BEM class from stylelint wordpress/scripts. (37531)
  • @mauriac: Add new option to show or hide empty categories. (39426)
  • @roseg43: Media & Text: Remove font size declaration from template. (40329)
  • @zutigrm: Update theme.json documentation 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 Editor: Removed the logic that was preventing the toolbar from hiding when typing within formats. (40476)
  • Block settings: Remove redundant block name from “settings” panels. (40275)
  • Components: Unified black color to gray-900. (40391)
  • Design Tools, Borders: Use new border control components in block support. (37770)
  • Document Setting: Removed 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 icon fallback. (40355)
  • Icons: Added new duotone filter icon. (40435)

Block Library

  • Categories: Added new option to show or hide empty categories. (39426)
  • Column: Add border support to column blocks. (39967)
  • Comments: Create comments title with simple styling. (40419)
  • Media & Text: Removed font size declaration from template. (40329)
  • Navigation: Renamed Navigation Menus to Navigation. (40413)

Bug Fixes

  • Patterns 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.: Add ‘inserter’ to the schema. (40416)
  • Toolbar: Fixed block toolbar text button padding. (40438)

Block Library

  • 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.: Used translatable post type label. (40378)
  • Comments:
    • Comment template: Call comment_class() before recursing into child comments. (40455)
    • Fixed 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. pagination not respecting Discussion Settings. (40284)
    • Fixed comments no results placeholder not appearing. (40234)
    • Post Comments Form: Fix layout quirks. (40359)
  • Embed:
    • Fixed inline preview cut-off when editing URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (35326)
    • Use preview htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. for flickr embed previews in editor. (40187)
  • Image: Added window to the optional chaining. (40394)

Styles

  • Add a debounce to the custom color onChange event. (40285)
  • Do not render global styles coming from the server in the site editor. (40185)
  • Elements: Add styles to the footer before the block is rendered. (37728)
  • Fixed duotone rendering in site editor. (37727)

Site Editor

  • Don’t render the 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. in text mode. (40337)
  • Fixed webfont loading in the Site Editor. (40262)

Block Editor

  • Block Locking, useBlockLock: Always check inherited ‘templateLock’ status. (40263)
  • 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.: Fix incorrect ‘_n’ usage. (40292)
  • List View, useBlockDisplayInformation: Return anchor for block variations in list view. (40458)
  • Multi-selection: Copy whole block when selection is collapsed. (40374)

Accessibility

  • Post editing: After closing welcome dialog, if content is empty, focus title field. (40195)
  • Fixed focus loss happening when installing blocks from the directory. (40340)
  • Fixed focus loss when creating pages from link control search results. (40342)
  • Fixed focus loss when navigating the guide component. (40324)
  • Navigation block: After choosing an option from Select Menu, focus after block rerender. (40390)
  • Block Styles: Remove unnecessary button role and ‘onKeyDown’ handler. (40427)

Performance

  • Added a context param to sidebar entity request. (40148)

Developer Experience

  • [wp-env]: Add support to override core by the WP_ENV_CORE environment variable. (40407)
  • Create Block: Fix warnings and errors reported during scaffolding and validation. (40479)

Documentation

  • Added README for Gradient and NavigableToolbar. (25580)
  • Added documentation for ancestor property in block metadata. (40027)
  • Fixed OnNumberOfItemsChange event docs error. (39942)
  • InputControl: Improved type annotations and stories. (40119)
  • Patterns: Documented ‘inserter’ argument. (40425)
  • Removed WordPress 5.9 specific warning from FSE documentation. (40274)
  • Replaced fixtures with inline parsed code. (40428)
  • Updated individual block locking section. (40372)
  • Updates theme.json documentation for theme authors. (40005)
  • Unwrapped wrapped selectors when inferring types of JSDoc params. (40236)

Code Quality

Block Library

  • Navigation: Remove async useEffect. (40373)
  • HTML: Remove pointless <span>s in Custom HTML block controls. (39820)
  • Comments Query Loop: comment 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. data isn’t queued for lazy loading. (40242)
  • Split navigation block view script. (40135)
  • Spacer: Added constants file to Spacer block. (40446)

Components

  • Stop exporting individual color objects from color values file. (40387)
  • Added reusable BlockPopover and BlockPopoverInbetween components. (40441)
  • Cleaned BlockMover component and styles. (40379)

Packages

  • Block Editor: Remove unused sub-components in list view. (40448)
  • Data: Cancel render queue in a more straightforward way. (40433)

Plugin

  • Added edit context to patterns REST controllers. (40259)
  • Add @talldan as a codeowner for wordpress/preferences. (40295)
  • Cleaned up non-dynamic block registration list. (40426)
  • Moved list and quote block registration to experimental blocks. (40350)
  • Moved the logic for iframed editor to WP 6.0 compat. (40278)
  • Post WordPress 6.0 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 1 cleanup. (40349)
  • Rename wp_translate_settings_using_i18n_schema to translate_settings_using_i18n_schema. (40227)

Tools

Testing

  • Playwright migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.:
    • Fixed outdated playwright snapshot directory. (40422)
    • Tried to fix flaky playwright tests not being reported. (40290)
    • E2E: Cross-platform support for Playwright end-to-end tests. (39765)
    • Migrate post-editor-template-mode to Playwright. (40175)
    • Migrate block api test to Playwright. (40217)
    • Migrate document settings test to playwright. (40258)
    • Migrate style variation test to Playwright. (40216)
  • Quote: Verify that user can type right after inserting the quote block. (40466)
  • useSelect:
    • Add async mode test suite and fix two bugs. (40321)
    • Update unit tests to testing-library. (40229)
  • Block supports: Unregister block in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher unit tests. (40239)
  • CreateBlock: Fix escaping for error message in create block test. (40473)
  • Comments Query Loop: Add end-to-end comments tests to stable, wait for selector on set option. (40405)

Build Tooling

  • Added the missing class-wp-style-engine-gutenberg.php in the plugin build. (40191)
  • Fixed commands containing dot-slashes in npm scripts. (39739)
  • Added new TypeScript project for unit tests. (39436)
  • Fixed the flaky template editor mode test. (40325)
  • Excluded BEM class from stylelint wordpress/scripts. (37531)

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.16.59s44.29ms
Gutenberg 13.05.97s46.37ms
WordPress 5.96.08s45.28ms

Site Editor

VersionTime to first blockKeyPress Event
Gutenberg 13.17.19s65.16ms
Gutenberg 13.06.57s61.75ms
WordPress 5.95.85s40.84ms

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

Thanks to @priethor and @annezazu for all the contributions and improvements to this draft, and @critterverse for the visual assets.

#gutenberg, #gutenberg-new

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

What’s new in Gutenberg 12.9? (30 March 2022)

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


Blocks 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 continue to get more and more flexible and easy to work with. The Gutenberg 12.9 release brings over many features that enable both theme developers and website administrators more control over what is editable and presented to users.

Table of Contents


Introducing block locking UIUI User interface

With the introduction of Full Site Editing, more control is needed over how certain blocks can be edited. The new block locking UI lets you disable some actions for locked blocks. When a block is locked, users are either unable to move it, remove it, or both. This is particularly useful with site level blocks like Post Content which many themes will want to lock down.

It’s now easier to make beautiful galleries

Space around your content is just as important as the content itself. Now you can control the space around images in a gallery block, from zero whitespace to large “art gallery” style gaps. You can now build even more beautiful and unique layouts using blocks.

Manage new template types in block themes

Previously, when creating new templates in the Site Editor we were limited to a small set of template types. Now you are able to create a template for many different types of pages on your site including CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging., Author, TaxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. Date, Tag and Attachment pages

Additions for easier building of block themes

We want to make it easier for anyone to create their own theme. Now, when you export your theme from the Site Editor, all theme files are included. This makes it easy to export themes from one site to another, including all your edits. It’s also a big step towards creating new themes from the Site Editor, as the export now uses the theme’s name for the theme bundle file.

In addition, it is now very easy to include patterns with your theme, without needing any PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher  – simply include the patterns in a patterns folder just like we already do with templates and parts. One way to take advantage of this feature would be to build patterns in the block editor, and copy the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. to a new file inside patterns.

But wait, there is more.

Easier management of deeply nested block structures

Things are rarely simple. These updates learn from that and make managing complex content easier and more accessible.

In List View, use shift + Home and End keys for multi block selection

It is now easier and more keyboard friendly to select from a particular block within the list view, to the end or beginning of a post.

The List view is now collapsed by default in all editors. (39611)

Given that block based content is likely to have heavily nested block structures in it, it makes sense to have all nodes collapsed by default in the list view. Hence, Gutenberg 12.9  makes the initial list view experience a lot less overwhelming by defaulting to all nodes collapsed, reducing the initial impact of heavily nested page or post structures.

Better defaults and more intuitive controls

Using the block editor is about creating content in a cursive and engaging manner. Each release makes this a better experience.

Show the name of the custom color in the color palette selection (39386)

Better control your clouds, ahem, your tag clouds, with precise sizes for fonts (37311)

Easily preview a draft right after saving it. (39482)

We now can pick a suggested date format, or a custom date format. (39209)

Props to new contributors

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

  • @alefesouza: Add onClick prop to FormFileUpload. (39268)
  • @brookewp: Show ‘View Preview’ link for ‘Draft Saved’ Snackbar notice. (39482)
  • @HILAYTRIVEDI: Social Icons: Avoid loss of previously selected background color when switching back from “Logos Only” style. (39276)
  • @ironprogrammer: Update 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 readme.txt content for intended audience. (38724)
  • @mhimon: Add missing } to LinkControl code example. (39469)
  • @ParaskP7: (39508)
  • @SantosGuillamot: Fix Comments blocks pagination. (39227)
  • @stefanolissa: Dependency “wp-editor” should be “wp-block-editor” in the code example. (39505)

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.

12.9.0 Changelog

Features

Block Library

  • Block Editor: Introduce block locking UI. (39183)
  • Post Date: Allow user to pick Site Default, a suggested date format, or a custom date format. (39209)
  • Try: “No results” block container for the query block. (38806)

Enhancements

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 aria label to Nav block on front of site. (39161)
  • Add button text labels to site editor. (38317)
  • Prevent focus loss after removing a block from List View. (39031)

Components

  • Add onClick prop to FormFileUpload. (39268)
  • CheckboxControl: Support indeterminate state. (39462)
  • List View: Add multi-select support for shift + Home and End keys. (39272)
  • BoxControl: Stop using UnitControl‘s deprecated unit prop. (39511)
  • FocalPointPicker: Stop using UnitControl‘s deprecated unit prop. (39504)
  • ColorPalette: Refine the label of the custom color button. (39386)
  • Rich text: Allow behaviour to be overridden by ref. (39631)
  • Add id prop to ListView. (39494)
  • Collapse list view by default in Site Editor. (39573)
  • Collapse list view by default in all editors. (39611)
  • Add prop to control default expand/collapse state of ListView nodes. (39486)
  • BaseControl: Add opt-in prop for margin-free styles. (39325)
  • CustomSelectControl: Add flag for larger default size. (39401)
  • RangeControl: Refactor stories to use Controls. (39357)

Block Library

  • Cover: Use Snackbar to display upload errors. (39428)
  • Spacer block: Use same min value resizable box and controls, remove max limit. (39577)
  • Block Title: truncate all block labels/titles. (39416)
  • Add NumberControl to support min/max font size for Tag Cloud Block. (37311)
  • Embeds: Update the Wolfram embed name. (39528)
  • Flag 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. Navigation Link items. (31716)
  • Gallery block: Add gap support. (38164)
  • Separator block: Refactor to use color block supports. (38428)

Post Editor

  • Migrate post editor editorMode to use preferences store and remove localAutosaveInterval preference. (39180)
  • Migrate post editor preferred style variations to preferences store. (39337)
  • Show ‘View Preview’ link for ‘Draft Saved’ Snackbar notice. (39482)

Site editor

  • Add preferences modal to site editor. (39485)
  • Site Editor: Add more template types. (39353)
  • Theme Export: Export the whole theme. (39202)
  • Theme Export: Use the theme name for the zip file. (39471)

Navigation editor

  • Migrate navigation editor selected menu to preferences store. (39606)

Testing

  • Add @testing-library/user-event to the project. (39360)

Webfonts

  • Change class properties from static to instance members. (39361)

Icons

  • Update lock and unlock icons to be smaller. (39252)

Extensibility

  • Set $name on WP_Block_Editor_Context. (39299)

CSSCSS Cascading Style Sheets. & Styling

  • Layout: Use CSS logical properties for margin top and bottom. (38816)

Design Tools

  • Block spacing: Block-level axial gap block support. (37736)

New APIs

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.

  • Blocks: Deprecate isValidBlockContent. (38794)
  • Blocks: Remember raw source block for invalid blocks. (38923)
  • Blocks: Add flag in parse to skip logging migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. details from patterns parsing. (39404)

Block Library

  • Block Patterns: Automatically load files with headers from a theme’s /patterns directory. (36751)

Bug Fixes

Core data

  • Revert addition of Navigation entity. (39572)
  • Add raw attributes configuration for media entity. (39512)

Block editor

  • Revert: Fix/editor content z-index stack context. (39620)

Widgets editor

  • Preload paths: Avoid fatal error on Widgets page. (39470)

Block Library

  • Fix Comments blocks pagination. (39227)
  • Fix center aligned images styles. (39422)
  • Fix experimental full site editing blocks not being registered. (39415)
  • Fix: Comment Query Loop‘s inner block selection and duplicate inspector control settings. (39472)
  • Fix: Table block doesn’t keep background color. (39445)
  • Gallery block: Disable edit as html support. (39318)
  • Gallery block: Fix image upload 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.. (39269)
  • Image: Allow authors to select image sizes from dropdown. (39580)
  • Image: Restore baseline responsiveness in the block. (39340)
  • Media & Text: Allow authors to select image sizes from dropdown. (39608)
  • Pullquote block: Fix citation markup in Editor. (39414)
  • Pullquote block: Remove deprecated pullquote style. (39413)
  • [Site Logo] Fix center alignment. (39579)
  • Hide the orientation switcher from the group block. (39650)
  • Image Block: Move any is-style and custom classnames up to deprecated alignment wrapper. (39330)
  • Social Icons: Avoid loss of previously selected background color when switching back from “Logos Only” style. (39276)
  • Fix the block toolbar styles to evenly space buttons. (39630)
  • Fix Image block link rel handling. (39319)

Components

  • BlockSettingsMenuControls don’t render empty MenuGroup. (39537)
  • Fix UnitControl resets unit when value is cleared. (39531)
  • Fix changelog entry in wrong version. (39450)
  • ResizableBox: Ensure tooltip text remains on a single line. (39623)
  • [Block Library]: Use UnitControl from components package in Cover and Search blocks. (39383)
  • NumberControl: Commit (and constrain) value on blur event. (39186)

Testing

  • Fix Gallery block flaky test image captions. (39689)
  • Fix performance tests – attempt 2. (39333)
  • Env: Fix PHP unit tests for “non-standard” cloned directories. (39362)

Accessibility

  • Fix useFocusFirstElement in non-contenteditable Blocks. (37934)
  • Use the post-title as the featured-image’s alt text when linked to the post. (39634)

Design Tools

  • Fix Border Radius Control showing Mixed when switching between units in an empty control. (39563)
  • Flex Layout: Fix visibility control of allowOrientation. (39532)

Block Conversion

  • Blocks: Disable Grouping when block removal is locked. (39541)

Post Editor

  • Add default as prop to PluginMoreMenuItem component. (39517)

Patterns

  • [Patterns]: Load theme patterns only in block and site editor. (39493)

npm Packages

  • Packages: Ensure that @wordpress/preferences gets published to npm. (39390)

Global Styles

  • Fix display of color palettes for border panel. (38798)

Performance

Block editor and site editor

  • Optimise preload paths for post and site editors. (39256)

Parsing

  • Optimise block parser by avoiding repeated HTML parsing and matcher creation. (39424)

Experiments

Block Library

  • New block: list block v2. Add an empty list block v2. (39459), implement the nested block behaviour in list block v2. (39487), add transforms for the list v2 block. (39652), add start, ordered and reversed list block attributes. (39605), add simple list item splitting and merging. (39542).
  • New block: 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.. Create a Generic Avatar block for Authors. (38591)

Block editor

  • Add __experimentalGetGlobalBlocksByName selector. (39610)

Documentation

Themes

  • Add some detail to handbook about different theme types. (39562)
  • Remove duplicate theme documentation. (38800)

Block library

  • Block Title: Update documentation. (39328)
  • Dependency wp-editor should be wp-block-editor in the code example. (39505)
  • Document __experimentalGenerateAnchors default setting. (39554)

Contributing

  • Plugin: Document the project structure and conventions used in the lib folder for PHP code. (39603)
  • Update plugin readme.txt content for intended audience. (38724)
  • Fix the missing page in the manifest file. (39507)

Components

  • Divider: Improve default behaviour when in vertical orientation. (39316)
  • UnitControl: Convert Storybook example to TypeScript and Controls. (39320)
  • UnitControl: Mark unit prop as deprecated. (39503)
  • Add missing } to LinkControl code example. (39469)

Code Quality

Core data

  • Use consistent terminology across wordpress/core-data. (39349) without renaming useEntityId hook. (39683)
  • Add an “enabled” option to useEntityRecord and useEntityRecords. (39288)
  • Add 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. to known entities. (39498)
  • Use the word record for the entity record TypeScript types. (39251)
  • throwOnError option for saveEntityRecord and deleteEntityRecord actions. (39258)
  • Fix preferences actions/selectors deprecated calls. (39640)
  • Check for nullity in experimental fetch methods. (39480)
  • Check for presence of entity configuration before testing plural form. (39476)
  • Import types before exporting them. (39479)
  • Pass explicit undefined initial value to createContext. (39526)
  • Replace spread arguments with non-spread variants. (39477)
  • Fix minor type-related issues. (39525)
  • Do not suppress errors in the getEntityRecord and getEntityRecords resolvers. (39317)

Block Library

  • Cover block: Stop using UnitControl‘s deprecated unit prop. (39522)
  • Search block: Stop using UnitControl‘s deprecated unit prop. (39514)
  • Spacer block: Stop using UnitControl‘s deprecated unit prop. (39513)
  • [Blocks]: Add flag in parse to skip logging migration details from patterns parsing. (39404)
  • Use block specific filters for the backward compatibility markup 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.. (39321)

Testing

  • Fix Nav block flaky end-to-end test by correctly waiting on menu creation resolution. (39637)

Plugin

  • Fix PHP notice in gutenberg_get_block_editor_settings. (39543)

Components

  • Drop composeStateReducers. (39262)
  • BorderRadiusControl: Stop using UnitControl’s deprecated unit prop. (39549)

Tools

Codeowners updates

Testing

  • Add infrastructure for writing Playwright end-to-end tests. (38570)
  • Gallery block: Reduce end-to-end flakiness. (39565)

Build Tooling

  • Simplify vendor scripts handling. (39534)
  • ing: Remove unused npm scripts. (39369)
  • Use android artefacts 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 libraries in react-native-bridge. (39294)
  • ESlint: Exempt TS files from jsdoc/require-param. (39458)

NPM Packages

  • Packages: Finalise the revised strategy for NPM publishing. (39389)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable 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 12.95161.02 ms45.6 ms
Gutenberg 12.85322.34 ms44.15 ms
WordPress 5.95669.52 ms41.51 ms

Site Editor

VersionTime to first blockKeyPress Event
Gutenberg 12.95161.02 ms45.6 ms
Gutenberg 12.85322.34 ms44.15 ms
WordPress 5.95669.52 ms41.51 ms

Gutenberg 12.9 includes many performance improvements, among which we can highlight:

  • Optimise preload paths for post and site editors. (39256)
  • Optimise block parser by avoiding repeated HTML parsing and matcher creation (39424)

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

Thanks to @critterverse for the release post assets, @scruffian for the help, and to @priethor for proofreading.

#gutenberg-new #gutenberg #core-editor

What’s new in Gutenberg 12.8? (16 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.


Depending on which hemisphere of the Earth you are at right now, either Spring or Autumn are coming soon. In either case, and regardless of your location, Gutenberg 12.8 is already here for everybody! This release comes with new APIs, iterative UXUX User experience enhancements, and, as always, many bugfixes to increase the editor’s stability.

Table of Contents


New Webfonts 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.

Since 2007, WordPress has provided a framework to help theme and 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 developers load scripts and styles in a standardized, integrated way. Now, for the first time, web fonts have the same types of tooling.

This API is the first step in helping people load fonts in a performance-friendly, privacy-friendly, and future-proof manner – something which has been tremendously difficult to do without such a framework.

That it’s taken so long to reach this point is a testament to how complex web fonts can be and evidence of how much work has gone into ‘getting this right.’ Now that this framework exists, more tools and optimizations can be built on top of it to ensure that WordPress delivers the best possible experience (and privacy) to end-users.

With a few weeks left until the next WordPress Beta release and because of the complexity to achieve this milestone, testing the API is encouraged, and as always, feedback is welcome!

Swift inline insertion of internal links

Gutenberg seeks to provide the best editing experience to all kinds of users, and power users will enjoy seeing inline links can now be inserted with a direct keyboard shortcut. If you thought using the slash inserter was fast, try the new [[ keyboard trigger to add an inline link without going through the inserter.

As with other enhancements aiming to improve the user experience, this new feature is gathering feedback; don’t hesitate to share your thoughts on the keyboard trigger and the overall experience.

Steps towards full visual theme creation

The Gutenberg team keeps making progress towards the goal of full visual theme building within the editor. When using the export tool available in the Site Editor, the theme.json file including the Styles settings is included in the zip, too, together with the index.php and styles.css files as well!

Iterating on placeholder and loading states

In continuation of work done in previous releases, Gutenberg 12.8 keeps iterating on placeholder and loading states. The Navigation block now provides a clear loading state for initial setup and subsequent loading of existing blocks, and thanks to the improved UIUI User interface feedback, creating a new menu is snappier.

The Media & Text 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. also comes with improved loading states. Starting in this version, the media being uploaded is also displayed behind the spinner.

Props to new contributors

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

  • @ahsanshaheen199: fix: Code example in flyout component. (39156)
  • @alshakerM: Render SVG props that have dashes correctly. (38936)
  • @awps: Missing ,toggleFormat from last code block. (39146)
  • @francisei: Docs: Emphasized requirement to enclose in quotation marks wp-env run…. (39101)
  • @ironprogrammer: Raise z-index of content div relative to sidebars. (38893)
  • @joshuafredrickson: Add a resolvable 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/. entry point to base-styles. (39240)
  • @jostnes: Remove rename rn UI tests. (39042)
  • @mashikag: Fix Blocks list ordering in Global Styles. (39093)
  • @tomasztunik: Fix Global styles overriding block’s element styles. (39012)
  • @Tumas2: Spelling error in JustifyContentControl example. (39234)

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.

12.8.0 Changelog

Enhancements

Block Library

  • Group: Show group option in Group blocks. (39094)
  • Navigation: Improve loading and placeholder states. (38907)
  • Navigation: Improve create new UI feedback in Nav block. (39219)
  • Media & Text: Display media while uploading. (39275)
  • Tag Cloud: Use flex for the Outline style. (38995)

Components

  • ConfirmDialog: add custom button text. (38994)
  • InputControl: Allow onBlur for empty values to commit the change, move reset behaviour to ESCAPE key. (39109)

Block Editor

  • Add a link completer for inline links to posts. (29172)

Site Editor

  • Add 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. to export file. (39048)
  • Resolve homepage template on server-side. (38817)
  • Theme Export: Add index.php and style.css. (39173)

Icons

  • Update drag handle footprint. (39342)
  • Update Pin icon, add new Post icon. (39139)

General Interface

  • Raise z-index of content div relative to sidebars. (38893)

Media

  • MediaReplaceFlow: Add ‘onError’ prop to handle error notifications. (39197)

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)

  • Block settings dropdown: Use block display title in remove label. (39110)
  • Try allowing tab into block placeholder. (39085)

New APIs

  • Webfonts API. (37140)
  • Add new @wordpress/preferences package. (38873)
  • Add reusable preferences modal to interface package. (39153)
    • Add interface preferences modal to edit post. (39176)
    • Migrate hidden block types (block manager data) to new preferences packages. (39132)
    • Migrate post editor feature preferences to use new preferences package. (39115)
    • Migrate customize widgets editor to use new preferences package. (39112)
    • Migrate standalone widgets editor to use new preferences package. (39084)
    • Migrate site editor to use new preferences package. (39158)
    • Deprecate interface package’s preference APIs. (39418)
  • Create Block: Add support for more plugin 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. fields. (39096)

Bug Fixes

Block Library

  • Buttons: Added aria label to the button block with icon. (38966)
  • Buttons: Fixes Button highlight popover overflow 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 link popover. (38771)
  • Buttons: Don’t set a placeholder text color. (39034)
  • Code: Restructure code block styling. (38712)
  • Comments Pagination Number_ Fix Comments Pagination Number with no pagination settings. (39204)
  • Cover: Fix keep selected unit on deleting minHeight value. (39145)
  • Cover: Fixes #38761 by removing obsolete ::Before pseudo element. (38762)
  • File: Check if ‘fileId’ exists before setting the attribute. (39088)
  • File: Don’t display loading animation on upload error. (39213)
  • File: Fix file block validation error by not outputting aria-describedby if there’s no description. (39083)
  • File: Fix the undo trap. (39215)
  • Hide border panel when all border features have been disabled. (36791)
  • Hide current menu from dropdown list in Nav block. (38916)
  • Image: Fix image responsive rules. (39045)
  • Image: Display errors after failed upload. (39178)
  • Media & Text: Display errors after failed upload. (39245)
  • Navigation: Fix 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. error when menus are not yet fetched. (39151)
  • Post Comments Form: Show correctwarning relative to post/page context. (38011)
  • Post Expert: Fix missing class in 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.. (38747)
  • Post Terms: Unescape HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities in term names. (39216)
  • 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. Group: Make save() markup the same as render_callback markup. (38510)

Styles

  • Fix Blocks list ordering in Global Styles. (39093)
  • Fix default duotone preset SVG and style generation. (38681)
  • Fix header panel height. (39119)
  • Fix Global styles overriding block’s element styles. (39012)

Components

  • Update drag gesture of InputControl-based controls with axial constraint. (38968)
  • UnitControl: Fix controlled unit behavior. (39148)
  • Normalize font-family. (38969)

Block Editor

  • Fixes block highlight after block move. (38915)
  • Improve in_footer handling in gutenberg_override_script(). (39497)

Post Editor

  • Avoid error when ‘styles’ settings are removed. (39091)
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Fix code drift in the Editor package by removing duplicate cleanForSlug function. (39033)

Site Editor

  • Expose plugin area to site editor’s List page. (39078)

Other Packages

  • apiFetch: Handle urlencoded and rest_route query params. (38914)
  • Base Styles: Add a resolvable JavaScript entry point to base-styles. (39240)
  • Compose: Avoid memory leak in use-drop-zone. (39038)
  • Render SVG props that have dashes correctly. (38936)
  • Url: Improvement to prototype handling. (39365)

Developer experience

  • Change copying PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files to dist directory to opt-in via a CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. flag. (39171)
  • Create Block: Add confirm prompt before showing the plugin options. (39105)
  • Create Block: Improve custom project template configuration. (39049)
  • Handle resolution errors in wordpress/data. (38669)

Documentation

  • Add import useBlockProps. (39072)
  • Components: Update changelog follow up for #38985. (39013)
  • Emphasized requirement to enclose in quotation marks wp-env run…. (39101)
  • Element: Add changelog notes for serialize attribute casing. (39141)
  • Gutenberg Data Tutorial Part 3: Building an edit form. (38581)
  • Fix code example in flyout component. (39156)
  • Missing ,toggleFormat from last code block. (39146)
  • Move recent CHANGELOG entry to Unreleased section. (39169)
  • Spelling error in JustifyContentControl example. (39234)
  • Storybook: Support proper extraction of TypeScript prop types. (38842)
  • Storybook: Add webpack loader for easier story descriptions. (39165)

Code Quality

  • Componentes, UnitControl: Tidy up utils and types. (38987)
  • Components, FontSizePicker: Refactor stories to use Controls. (38727)
  • Components, ToggleGroupControlOption: Calculate width from button content and remove LabelPlaceholderView. (39345)
  • Core Data: Rename types directory to entity-types. (39225)
  • Core data: Fix some typing issues. (39212)
  • Core data: Fix some typing issues. (39214)
  • Fix @wordpress/comment-case ESlint errors but without adding the disable-rule pragma. (37006)
  • Delete widget editor redundant css for more menu. (39113)
  • Layout: Remove duplicate var declaration. (39111)
  • Move editor settings code to compat folder. (39030)
  • Refactor useSelect usages to useEntityRecords. (38827)
  • Refactor classic menu conversion process. (38858)
  • Post author name: Add “post” prefix to CSSCSS Cascading Style Sheets. class. (38320)
  • TreeGrid: Update callback unit tests to use TreeGridRow and TreeGridCell sub components. (39002)
  • Update framer motion to 6.2.8. (38999)
  • useBlockEditorSettings: Remove unused unstableBase fetch. (39221)

Tools

Project Management

  • Code owners: Remove users without write access and fix typos. (39238)
  • Simplify Pull Request template. (39229)

Testing

  • Add end-to-end testing for experimental nav menu deletion. (38955)
  • Add Home/End keyboard end-to-end test for List View. (39265)
  • Add some tests for TreeGrid. Update README to reflect latest functionality. (39302)
  • Add test case for post locking feature saving. (39022)
  • Add tests for media replace flow. (39005)
  • Block Test Fixtures: Add additional error message for serialized test fixtures that reserialize identically. (39039)
  • ESLint Plugin: Make Prettier integration optional. (39244)
  • Fix performance tests by adding backwards compatibility to welcome guide utility. (39300)
  • Improve switch to draft button end-to-end test robustness. (38971)
  • Remove rename rn UI tests. (39042)
  • Social Icons: Begin Automating Existing Manual Test Cases. (39027)
  • Update ‘clickMenuItem’ test util to use full label matching. (39274)
  • Update preview test to wait for publish panel to appear before closing it. (39100)

Build Tooling

  • Fix spelling of contributors in changelog script. (39029)
  • Resolve peer dependency warnings. (39043)

npm Packages

  • Fix npm run docs:Build crashing when a block.json lacks supports key. (39241)
  • Packages: Automate npm publishing as part of Gutenberg release workflow. (39259)
  • Packages: Automatically acceppt all Lerna commands when run with CI flag. (39199)
  • Packages: Update CLI publishing tool to run in CI mode. (38993)

Plugin

  • Account for upcoming changes in styles metadata in WordPress 5.9. (36327)
  • Don’t filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. ‘theme_templates’ when running WP 5.9. (39017)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable 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 12.85.01s38.86ms
Gutenberg 12.75.07s40.42ms
WordPress 5.95.22s38.11ms

Site Editor

VersionTime to first blockKeyPress Event
Gutenberg 12.84.99s33.12ms
Gutenberg 12.75.01s37.61ms
WordPress 5.94.74s32.03ms

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

Thanks to @jameskoster for the release post assets, @jonoaldersonwp for crafting the Webfonts API summary,  and to @cbringmann and @hellofromtonya for proofreading.

#gutenberg-new #gutenberg #core-editor

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.6? (16 February)

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

Table of Contents


New color panel and updated default color controls

In the same way Gutenberg 11.9 and Gutenberg 12.2 switched typography tools and border controls to use the ToolsPanel component, this release brings the ToolsPanel to the color sidebar.

Text, Background, and Link colors can now be expanded and collapsed in different contexts. This improves the color editing experience and unifies the controls with other design tools. In addition, coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks have been audited and their default color options have been updated accordingly.


New Post Author Biography and Read More blocks

Two new blocks have been included in this release. The Post Author Biography 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. is part of a bigger effort to split out the existing Post Author block into its separate components.

The Read More block provides a simple way to link to a single page or post within the Query block.


Keeping styles when transforming blocks

Block transforms keep improving upon each release. Starting in Gutenberg 12.6, some styles like color and font size are maintained when transforming between blocks.

Moreover, this release adds new block transforms, such as Tag Cloud to Categories, Calendar to Archives, Paragraph to Code, and Group to Row variation, as shown below.


Error boundary for 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 exceptions

Thanks to the new error boundary for plugins, the editor is now more robust against plugin issues. Starting in Gutenberg 12.6, plugin errors are displayed at the top of the editor to let users know which specific plugins are causing issue. This minimizes the potential impact of malfunctioning plugins when editing.


Iterative polishing of the loading states

Streamlining a blocks’ loading state has been a part of previous releases. For example in Gutenberg 12.3 the loading state of the Embed block was reduced to a spinner. With the latest improvements, Gutenberg 12.6 goes one step further and polishes the Spinner component to refine the experience.


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

Accessibility is always top of mind in Gutenberg, and Gutenberg 12.6 is no exception. Building upon the work done in Gutenberg 12.4, the List View is even more accessible when working with keyboard navigation and screen readers.

Other accessibility improvements include placeholder descriptions being now read by VoiceOver, and search results in the block manager are now announced, too.

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle: @JeffMatsonPagely, @angelistudio, and @sunyatasattva! 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

Enhancements

Block Library

  • New block: Add post author biography block. (38269)
  • New block: Add new Read More block (post link). (37649)
  • Transforms: Add transform between Tag Cloud and Categories. (38566)
  • Transforms: Add transform between Calendar and Archives. (38324)
  • Transforms: Add transform to row variation. (36202)
  • Transforms: Add core/paragraph in transforms object. (38295)
  • Heading: Omit anchor when transforming to paragraph. (38604)
  • Images: Try moving responsive rule to common.scss. (38399)
  • Navigation: Try removing “Add all pages” from placeholder. (36775)
  • 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.: Prompt to keep or replace Featured Image when replacing Image block media that is set as the Featured Image. (34666)
  • Quote: Remove the Large style option from the quote block. (37580)
  • Social Icons: Add the ability to show/hide labels. (38152)

Components

  • Dropdown: Tweak prop destructuring to be TypeScript friendly. (38431)
  • Tools Panel: Only show 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. ➕ icon when all items are optional. (38262)
  • Update the Spinner design. (37551)
  • Navigator: Add focus restoration. (38149)
  • Navigator: Rename push/pop to goTo/goBack. (38582)
  • Migrate Edit Navigation screen “Delete menu” button from confirm() …. (37492)

Post Editor

  • Export FlatTermSelector and HierarchicalTermSelector. (38419)
  • Migrate post privacy confirmation from confirm() to ConfirmDialog. (37602)
  • Most Used Terms: Update show terms condition. (38513)

Block Editor

  • [Inserter]: Prioritize core blocks over core block variations when they have the same rank. (38616)

Design Tools

  • Block Support: Update color panel default controls. (38511)
  • Color Block Support: Switch to ToolsPanel for displaying UIUI User interface. (34027)
  • Duotone: Allow users to specify custom filters. (38442)

Site Editor

  • Update footer breadcrumb text. (38477)

Developer Experience

  • Plugins: Add error boundary. (38397)
  • Adding the “env” script when –wp-env or wpEnv is present. (38530)

Widgets Editor

  • Add tools slot on the navigation and widgets page settings menu. (37928)

Styles

  • Allow child classes to use the private methods and constants. (38625)
  • Add mechanism to keep styles during block transforms. (37596)
  • Use the 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. classes defined by the plugin in the REST controller. (38663)

Icons

  • Add Tip icon to library and use in the Tip component. (38424)
  • Update pagination icons, add new query title and post terms icons. (38521)

New APIs

  • Introduce the customScripts property to allow templates to define additional scripts in package.json. (38535)

Bug Fixes

Block Library

  • Block Library: Remove unnecessary usages of RawHTML. (38527)
  • Audio: Avoid error when locked. (38282)
  • Comment Template: Improve UXUX User experience of inner block selection. (38263)
  • Cover :Add back missing styles. (38362)
  • Gallery: Copy all attributes when transforming to Image blocks. (38642)
  • Gallery: Fix 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. with link destination default option not being set. (38310)
  • Gallery: Fix bug with uploaded images being replaced with same image during selection phase. (38259)
  • Gallery: Ensure last image takes up all available space. (38189)
  • Navigation: Try fixing issue with submenu button in dark contexts. (38270)
  • Navigation: Try inheriting orientation in setup state. (36778)
  • Navigation: Remove blobs that look like a loading state. (37099)
  • Navigation: Try always showing appender even when child is selected. (37637)
  • Read more: Fix filtering of content when rendering read more block. (38650)
  • Separator: Remove width from wide style. (38635)
  • Search: Fix border radius reset. (38478)
  • Search: Fix search block htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. handling for label and button text. (38649)
  • Site Tagline: Disable line breaks. (38475)
  • Tag Cloud: Add the style to the block.json file. (38403)

Components

  • Add cx as a dependency of useMemo across wordpress/components package. (38541)
  • Fix Slot/Fill Emotion StyleProvider. (38237)
  • UnitControl: Add __unstableInputWidth to prop types. (38429)
  • ComboBox: Fix reset button’s height. (38020)
  • DateTimePicker: Fix date format when switching to 12-hour time format. (37465)

Block Editor

  • Don’t ignore legitimate files when pasting mixed content. (38459)
  • Handle the absence of href attrib in links. (37034)
  • Block preview: Fix resize listener. (38516)
  • Guard against undefined entity in site editor page setter. (38503)
  • Page for Posts: Display notice in template panel. (38607)
  • Editor store: Remove createUndoLevel and refreshPost actions. (38585)

Template Editor

  • Fix horizontal scrollbar. (38612)
  • Improve compat with 3rd party 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. links. (38598)
  • Remove extra div on post content. (38451)

Scripts

  • Wp-scripts command does not generate assets on Windows OS. (38348)
  • Ensure that start works when 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 scripts missing. (38318)
  • Fallback to src/index.js when no valid scripts in metadata for build command. (38367)
  • Improve the handling for build entry points. (38584)

Apps

  • Declare package visibility to query URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org handler apps. (38377)
  • Drop jcenter repository from react-native Android projects. (38142)
  • Mobile – Rich Text – Validate link colors. (38474)

Accessibility

  • Accessibility improvements for List View Part 2. (38358)
  • Contrast Checker: Check link color. (38100)
  • Block Manager: Announce search results. (38654)
  • Ensure placeholder description is read by VoiceOver. (38366)
  • Remove role attributes on SVGs meant for “decoration” to improve a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility). (38301)
  • TreeGrid accessibility: Improve browser support for Left Arrow focus to parent row in child row. (38639)

Performance

Block Library

  • Latest Posts: Avoid unnecessary re-renders. (38402)
  • Site Logo: Avoid unnecessary re-renders. (38316)

Post Editor

  • Avoid unnecessary Post Formats re-renders. (38285)
  • Avoid unnecessary Template panel re-renders. (38292)

Documentation

  • Add a block supports chapter to the block creation tutorial. (38210)
  • Add a block supports for dynamic blocks chapter to the block creation tutorial. (38249)
  • Add a high-level intro to styles in the block editor. (38208)
  • Add contributing information to packages. (38122)
  • Add documentation for schema in 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.. (36839)
  • Add the Gutenberg data tutorial to the block editor handbook. (38587)
  • Fix components package README contributing link and duplicate footers. (38605)
  • Fix relative links in main package READMEs so that they work in npm. (38609)
  • Fix: npm script error on Windows (api-docs:Ref). (38326)
  • Move design documentation to user interface explanations. (37807)
  • Move backward compatibility documentation under Contributors Guide. (37654)
  • Provide proper path to image in the handbook. (38480)
  • Remove reference to upcoming WordPress 5.9 release. (38272)
  • Scripts: Fix copypasta typo in README file. (38531)
  • Show the block supports for static blocks tutorial in the handbook. (38452)
  • ToolsPanel StoryBook: Removing knobs in favour of controls. (38308)
  • Tutorial: Create your First App with Gutenberg Data. (38250)
  • Update attributes.md. (38626)
  • Update core/archive block schema to reflect no block-level settings support. (37778)
  • Update explanation of block.json file scanning. (38379)
  • Update theme support documentation. (38514)
  • Update Contributing Guidelines to reflect Dual-License. (38303)
  • Update version required before gutenberg_safe_style_attrs filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. can be removed. (38359)
  • Updated changelog to reflect new tip icon. (38450)
  • Use a fixed link to the latest release in readme.txt. (38550)
  • VisuallyHidden: Remove stray readme file. (38641)

Components

  • Add CHANGELOG entries for recent TreeGrid improvements. (38661)
  • Add missing changelog entry. (38325)
  • Changelog: Add missed entries for recent typing fixes and tweaks. (38469)
  • Fix missing link in wordpress/components’s CHANGELOG. (38611)

Code Quality

  • Chore: Fix: Remove isReversed usage. (38484)
  • Remove APIs deprecated on WordPress 5.4. (38564)
  • Update the minimum supported version to WordPress 5.8. (38273)

Plugin

  • Bump bl from 4.0.2 to 4.1.0. (38396)
  • Bump follow-redirects from 1.14.1 to 1.14.7. (38371)
  • Bump jszip from 3.6.0 to 3.7.1. (38410)
  • Bump ssri from 6.0.1 to 6.0.2. (38382)

Components

  • ColorIndicator: Add ts-nocheck to color indicator. (38433)
  • ColorPicker: Fix typing errors. (38430)
  • Refresh object-keys version in package-lock. (38645)

Block Library

  • Consolidate select menus dropdown in Nav block code. (38179)
  • Cover block: Background element’s classname consistency. (38392)
  • Image Block: Explicitly check for false from strpos(). (38505)

npm Packages

  • Remove unused dependencies. (38388)

Tools

Testing

  • Add: End to end test for the block transforms. (38300)
  • Add: End to end tests for style variations. (38485)
  • E2E: Fix flakey gallery and template end-to-end specs. (38342)
  • First Time Contributor check: Update args for getByUsername. (38467)
  • Include tests-mysqlMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. port in dev:Start output. (38590)
  • Minor retouches to test-create-block script. (38482)
  • Refactor Site Editor test utils to the e2e-test-utils package. (38463)
  • Scripts: Update Puppeteer to v13. (37078)
  • Silence editor initialization act warnings triggered by asynchronous resolvers during unmount. (38344)
  • Test Create Block with more OS and Node versions. (38368)
  • Tests: Enable post type UI for templates and template parts. (38486)

Build Tooling

  • Build workflow: Don’t update version in readme.txt. (38596)
  • Changelog: Append a generated list of first time contributors by PR label. (38372)
  • Rename GUTENBERG_PHASE to IS_GUTENBERG_PLUGIN. (38202)
  • Bump axios from 0.21.1 to 0.21.4. (38369)
  • Bump hosted-git-info from 2.7.1 to 2.8.9. (38327)
  • Bump addressable from 2.7.0 to 2.8.0 in /packages/react-native-editor/ios. (38234)
  • Bump shelljs from 0.8.4 to 0.8.5. (38370)
  • Update kotlin version for react-native Android projects to 1.5.32. (37970)
  • ESLint Plugin: Add flanking whitespace and hyphenated range rules. (38225)
  • Avoid first time contributor workflows for bots. (38393)
  • WP Env: Fix infinite redirection with custom site URL. (38352)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable 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 (typing)
Gutenberg 12.63.8 s27 ms
Gutenberg 12.53.9 s26 ms
WordPress 5.93.3 s26 ms

Site Editor

VersionTime to first blockKeyPress Event (typing)
Gutenberg 12.63.1 s24 ms
Gutenberg 12.53.1 s24 ms
WordPress 5.92.1 s25 ms

Thanks to @critterverse for the visual assets!

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

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