What’s new in Gutenberg 12.0 ( 24 November)

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


It’s the end of November and Gutenberg 12.0.0 has been released! With contributor efforts being geared towards preparing for WordPress 5.9, this release is more maintenance-focused but still offers a few new features as well as many 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.

Table of Contents

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. Styles Preview

Until this release, Block Styles appeared in both the block’s toolbar and in the editor’s 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.. These previews, although rather small, added to the overall height of the sidebar accordion. Gutenberg 12.0 moves the sidebar previews so they only appear when the style is hovered or has keyboard focus. This reduces the overall sidebar footprint and also puts more emphasis on the style’s name.

Before this release, the Featured Image block did not provide a clear representation during its placeholder state, displaying a selection box with a fixed height. With Gutenberg 12.0 the block’s placeholder state is a better representation of how it would look when using real images, as it displays a placeholder image that respects both the height and width settings.

Paragraph block combined typography controls

As of 12.0.0, the Drop Cap setting for the paragraph block has been moved from its own section in the Block Settings sidebar into the Typography section. This change keeps all Typography related controls together for the block to provide a consistent experience.

Site Editor Welcome Guide

In preparation to stabilize and release the block theme Editor in WordPress 5.9, a new welcome guide has been added to help users get started with both the Editor and the Styles sidebar.

Site editor welcome guide modal.

Official JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. Schema updates

Official schemas for block.json and theme.json were introduced with Gutenberg 11.9.0. This release provides some updates as well as new URLs to easily access them:

The URLs above redirect to the latest version of the schema but as WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. versioned are released, they can also target specific versions of WordPress starting with WordPress 5.9!

Theme.json example.

New Developer Experience section in the Changelog

Recently, contributors have been putting an even bigger focus on improving the developer experience, and there is more to come. So much so, that we are introducing a new section for it in the changelog. This speaks to the commitment from contributors to not only create a great experience for users of Gutenberg but also those that extend it. To keep updated or contribute to the discussion, you can check the recent GitHub discussions on Developer Experience.

Changelog

Enhancements

Block Library

  • Move WP_REST_Block_Navigation_Areas_Controller from Gutenberg to Core. (36374)
  • Change all the uses of “website” to “site”. (36220)
  • Featured Image: Let Featured Image block inherit dimensions, look like a placeholder. (36517)
  • Navigation: Enable Previews for Navigation Link Blocks. (36412)
  • Navigation: Apply 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. functions to Nav block menu drops when selecting existing Menu. (36301)
  • Navigation: Refactor and simplify setup state. (36375)
  • Navigation: Rename fse_navigation_area to wp_navigation_area. (36460)
  • Navigation: Return wp error from wp_insert_post. (36483)
  • Paragraph: Merge text settings into typography panel. (36334)
  • Remove textdomain from calendar block. (36500)

Site Editor

  • Add welcome guide. (36172)
  • Update back button URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (36313)
  • Improve compatibility with menu endpoints WordPress 5.9. (36372)
  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. to any errors coming up in gutenberg_migrate_menu_to_navigation_post. (36461)
  • Change edit links for templates and template parts. (36294)
  • Update site editor title truncation. (36436)
  • Add template_type guards. (36318)

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.

  • Update schema to require either a type or an enum. (36267)
  • Add _wp_array_set and _wp_to_kebab_case to 5.8 compat. (36399)

Design Tools

  • Letter spacing: Update label copy. (36385)

Style

  • Add block icon next to blocks list. (36520)
  • theme.json: Adds a setting property that enables some other ones. (36246).
    • This was incorrectly added to the 12.0.0 milestone.
  • Block Styles: Show style preview when hovered or focused. (34522)

Icons

  • Add the missing comment edit link icon. (36565)
  • Remove hard coded color from query pagination icons. (35837)
  • Remove hard-coded values on icons. (36564)

Components

  • ToolsPanel: Allow additional props on ToolsPanel. (36428)
  • Typography Panel: Make letter spacing jsDoc and prop use consistent. (36367)

Bug Fixes

Block Library

  • Fix background colours in nested submenus. (36476)
  • Fix colour rendering in Navigation overlay. (36479)
  • Fix duplicate custom classnames in navigation submenu block. (36478)
  • Fix submenu justification and spacer orientation. (36340)
  • Group – Fix overzealous regex when restoring inner containers. (36221)
  • Hide visilibility and status for navigation posts. (36363)
  • Nav block menu switcher – decode HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities and utilise accessible markup pattern. (36397)
  • Navigation: Fix click-button size, submenu directions, scrollbars. (36215)
  • Page List block: Fix space before href attribute. (36505)
  • Page List: Use core entities instead of direct apiFetch. (36531)
  • Post Comments Form: Ensure typography styles are applied to child elements. (36425)
  • Post title block default CSSCSS Cascading Style Sheets.: Add a break-word rule by default. (35703)

Block API

  • Use firstChild and lastChild when parsing lists from MS Word. (36019)

Full Site Editing

  • Add the ability to opt-out of Core color palette V2. (36492)
  • Fix layout shift in core/post-featured-image block with isLink enabled. (36552)
  • Template Part Block: Add some guards. (36324)
  • Chore: Add rewrite false to global styles CPT. (36273)
  • Revert “theme.json: Adds a setting property that enables some other ones”. (36477)
  • Update more references to __experimental menu endpoints to make them stable. (36386)

Site Editor

  • Fix site editor reset styles in WP 5.9. (36390)
  • Site Editor – prevent loading state from showing the adminadmin (and super admin) menu. (36455)

Global Styles

  • Replace get_theme_file_path in theme_has_support. (36398)
  • Chore: Fix small typos on the rest endpoints. (36272)

Block Editor

  • Strip 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. tags from pasted links in Chromium. (36356)
  • Add webp extension in filePasteHandler and getPasteEventData. (36361)
  • Fix mobile horizontal scrollbar. (36567)
  • Polish metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. container. (36297)

CSS & Styling

  • Update theme styles for the code block. (36282)

Documentation

Handbook

  • “npm install” suggestion provides a better learning experience. (36217)
  • Added specific links to agenda and notes posts related to core editor meetings. (36199)
  • Schemastore – $schema is VS Code-specific. (36179)
  • Update GIF image in documentation with wp.org schema URL. (36456)
  • Update Versions in WordPress to include 5.9. (36156)
  • Update theme.json schema to refer to wp.org URL. (36332)

Components Package

  • Update combobox-control component readme. (36413)
  • Update wordpress/components changelog. (36448)

Developer Experience

  • Add block.json schema definition to core blocks. (35900)
  • Add pattern to name key in block.json Schema. (36343)
  • Update schema URL to wp.org domain. (36316)
  • Allow block.json attribute type to be an array. (36295)
  • Fix schema to allow for custom blocks in theme.json. (36341)

Code Quality

  • Change @Package to WordPress in block-library. (36494)
  • postcss-themes: Fix PostCSS 8 deprecation warning. (36284)
  • Data: Clean up registerGenericStore param names. (36300)
  • Prepare navigation php code for core patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing.. (36336)
  • Add comment to Remove 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. to allow WP variables after min version is 5.8. (36281)
  • Update: Centralize safe_style_css usages. (36280)
  • DEWP: Fix deprecation warning. (36285)

Tools

Testing

  • E2E: Add more Cover block tests. (36321)
  • Fix Performance CI tests and make them always use the latest major as base 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".. (36463)
  • Fix failing tests and compatibility with 5.9. (36368)
  • Add integration tests with core blocks schema validation. (36351)
  • Skip flaky image block test. (36446)
  • Theme switch on the global styles 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/. 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.. (36277)

Build Tooling

  • Add TypeScript for builds and tests. (36260)
  • stylelint-config: Widen the acceptable version range for the ‘stylelint’ peerDependency. (36518)
  • Update Babel packages to 7.16 version. (36244)

Fix not transforming logical assignments for packages. (36484)

Performance  Benchmark

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 12.06.18s39.99ms
Gutenberg 11.95.89s40.75ms
WordPress 5.86.56s49.54ms

Thank you to @shaunandrews for the assets included in this post, @priethor for coordinating the release process and proofreading, @vcanales for the moral support and answering questions about the release process, and to all those who contributed to this release!

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