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