What’s new in Gutenberg 12.1 ( 8 December)

“What’s new in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are published following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


Gutenberg 12.1 is here! the contributors continue to work tirelessly to prepare WordPress 5.9 and fix the remaining flows and bugs for the release.

Table of Contents

Template List View

This release marks the return of the template list view allowing users to navigate between the home page and the different templates and template parts in the site editor. It’s an important piece of the site editor puzzle. The current iteration of the design favors simplicity and usability. Iterations implementing client side navigation and mosaic view might be added in the future.

Global Styles

The global styles panel saw a big number of improvements in this cycle including:

  • The typography panel has been updated to show a simplified elements view allowing users to switch easily between text and link elements typography styles.
  • The color palette views now show the duotone presets. Also, users can now define custom gradients to be made available throughout the website.
  • Transparency support for the different color pickers in the Global Styles panel.

Gutenberg 12.1 includes several Navigation block improvements once again. For starters, users are not prompted to name their menus when adding starting a new one, as it is generated automatically, although the name can still be edited in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. Also, the UXUX User experience around configuring the menu dropdown options has been improved, only displaying the options when the selected menu actually has submenus, and disabling toggling the Show arrow option when `Open on click` is enabled, to avoid confusion.

Ensuring a frontend fallback in case no menu is selected in the Navigation block has received lots of thought in the last weeks. Thanks to this, the Navigation block will now render a Page List block when visiting a page with empty navigation. However, this default behavior can be changed by developers via the new block_core_navigation_render_fallback 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., and completely opt-out by simply adding:

add_filter('block_core_navigation_render_fallback', '__return_false');

Last, but not least, as the block becomes stable for its release in WordPress 5.9, an 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. change should be noted: the menuId attribute has been renamed to ref to better align with other blocks’ attribute names. A new deprecation has been added to accommodate this change and existing Navigation blocks will get migrated to the new version.

Miscellaneous editor UX improvements

If you ever tested the editor, you’ve probably already noticed these little plus buttons or what we call block appenders that appear as you navigate and click throughout the editor. These appenders would often create layout shifts and jumps as you select different blocks. The issue is now finally resolved as the behavior of the block appenders has been changed to rely on fixed positioning.

Another small but important change to the user experience in the editor is the addition of a new keyboard shortcut to unselect all blocks. Users could hit Escape to enter navigation mode for better keyboard navigation in the canvas, and starting in Gutenberg 12.1, you can also Escape a second time when in navigation mode to unselect all blocks.

Block Themes

The contributors also focused on improving the developer experience for block themes. If you’re a block theme author, there are two important changes that you should be aware of in Gutenberg 12.1.

First, the block-templates and block-template-parts folders have been renamed to just templates and parts respectively in preparation for upcoming features, like the addition of styles and patterns folders. Existing block themes will continue to work without any change, the former folders are still supported but we encourage you to use the updated names from now on. The documentation has been updated to reflect that change.

The second is the addition of a new flag to the theme.json settings section called appearanceTools. Theme authors can set this flag to true to opt-in into all the various appearance tools available including border color, radius and width, link color, block gap, margin, padding, line height and any appearance tool that might be added in the future. Generic block themes in the repository may consider enabling this flag automatically to avoid having to keep track of all the additions that come over time.

Changelog

Enhancements

Site Editor

  • Add Template List View. (36379)
    • Show theme, 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 or author in Added By column with appropriate icon or 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.. (36763)
    • Add success and error snackbars. (36808)
    • Implement “Add New”. (36592)
    • Use table layout. (36707)
    • Set the document title properly. (36805)
    • Add rename action. (36879)
    • Update delete template button. (36815)
  • Make Reusable blocks available in the Site Editor. (36511)
  • Remove the Styles link in Site Editor. (36637)
  • Update and align template descriptions. (36000)
  • Add icons to navigation sidebar items. (36893)
  • Allow editing custom template title. (36933)
  • Only render the site editor canvas when the global styles are loaded. (36643)
  • Remove extra border radius from the canvas. (37022)
  • Update navigation sidebar responsiveness. (36638)
  • Update resize handle styling in template part focus mode. (36410)

Global Styles

  • Add elements support to the typography panel. (36718)
  • Add the gradient palette editor. (36820)
  • Add transparency support to the colors panel. (36840)
  • Add read-only duotone palette. (36920)
  • Do not show default palette if theme opts-out. (36639)
  • Make user able to change all color palette origins. (36674) (36747) (36817)
  • Rename core origin key to default for presets. (36645)
  • Count all color palette origins on the palette counter. (36922)
  • Add appearanceTools flag 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. to opt-in into appearance UIUI User interface controls. (36646)
  • Switch the borders panel to ToolsPanel for displaying UI. (33743)
  • Improve the design and copy of the color panels. (36959) (36994) (37015) (37016) (36921) (36963) (36622) (36965) (36819) (36748) (36940) (36684)
  • Schemas: Allow custom blocks in theme.json styles. (36411)

Block Editor

  • Improve the position of the block appenders and behavior. (36656) (36605)
  • Keyboard shortcuts: Double escape unselects all blocks. (36945)
  • Adjust order of theme blocks and reorder inserter items. (36719)
  • Block Editor List View: Use anchor elements instead of buttons. (35655)

Block Library

  • Block Library: Add the Comments Pagination block. (36872)
  • Comment Author Avatar block: Add spacing support. (36322)
  • Navigation block: Only show submenu options and Show arrow button when relevant. (36826)
  • Navigation block: Implement suitable fallback for Nav block on front end of site when no menu selected. (36849) (36724) (36850) (36854) (36740)
  • Navigation block: Rename navigationMenuId to ref. (36739)
  • Navigation block: Automatically generate navigation post title. (36760)
  • Template Part block: Remove color, spacing, layout options and reusable block conversion. (36571) (36918)
  • Gallery block: Turn on auto-migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of v1 Gallery blocks to v2 format when edited. (36191)
  • Update 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. placeholder graphic. (36712)
  • Post Featured Image: Move width and height controls into the Dimensions panel via SlotFill. (36540)

Components

  • Font Size Picker: Allow non-integers as simple CSSCSS Cascading Style Sheets. values and in hints. (36636)
  • Divider: Improve vertical and RTL support. (36579)
  • ItemGroup: Experimenting with chevron icon. (36654)
  • Toggle Group Control: Add tooltip. (36726)
  • Modal: Support ref forwarding. (36831)
  • ZStack: Support RTL layouts when applying offset. (36769)

Themes

  • Move the theme editor under tools for FSE themes. (36723)
  • Update the block theme folders to templates and parts. (36647)

Bug Fixes

Global Styles

  • Make the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. color palette opt-in for themes with not theme.json. (36496)
  • Fix: Apply by slug on all origins. (36841)
  • Fix: Theme colors cannot override defaults. (36811)

Block Library

  • Cover block: Fix undo trap. (36807)
  • Navigation block: Add page list to navigation direct insert conditions. (36591)
  • Navigation block: Fix Nav block editing wrong entity on creation of new Menu. (36880)
  • Navigation block: Scale submenu icon. (36714) (36948)
  • Navigation block: Fix non existent menu handling. (36507)
  • Navigation block: Fix page list missing button styles when set to open on click. (36601)
  • Navigation block: Include cascading properties in deprecation. (36432)
  • Navigation block: Remove absorb toolbar prop. (36990)
  • Navigation block: Add accessible labelling to submenu buttons. (36631)
  • Navigation block: Fix space-between. (36441)
  • Template Part block: Fix slug generation when creating through the block placeholder. (36764)
  • Gallery block: Allow clicks within replace media placeholder state. (36804)
  • Gallery block: Fix stuck image size options loader. (36806)
  • Post Featured Image: Add a “Reset” button. (36572)
  • Post Title block: Fix render error when setting Page to homepage. (36786)
  • Query Pagination Next/Previous blocks: Remove text and link color support. (36954)

Site Editor

  • Stabilize theme export 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/. endpoint. (36559) (36908)
  • Template list view fixes. (36947) (36822) (36705)
  • Templates Rest API endpoint: Add missing ‘is_custom’ prop. (36911)
  • Templates Rest API endpoint: Add origin and author. (36896)
  • Validate the postType query argument. (36706)
  • Fix site editor region navigation. (36709)
  • Navigation Sidebar: Add aria-current=”page” to active navigation item. (36946)
  • Navigation Sidebar: Highlight “Site” in the navigation panel. (36762)
  • Navigation Sidebar: Show all templates and template parts on the site editor list screens. (36761)

Components

  • Color Picker: Re-instate debounce and controlled value to fix issue with gradient picker. (36941)
  • ColorPicker: Replace hardcoded “blue” with theme color. (36153)
  • Tools Panel: Fix race conditions caused by conditionally displayed ToolsPanelItems. (36588)
  • DateTimePicker: Set PM hours correctly. (36878)
  • LinkControl: Fix wordbreak for URLs. (36993)
  • Offset the parent 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. when computing Popover position. (36876)
  • ToolsPanel: Prevent tools panel menu increasing empty panel height. (36895)
  • Update destructive tertiary button styles, and template list. (36915)

Themes

  • Block Templates: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notices on WP 5.8. (36964)
  • Don’t try and render unstable location if Nav block has ID. (36863)

Design Tools

  • Border panel: Update to display multiple palette origins. (36753)
  • Cover: Move BoxControlVisualizer in the markup to make it visible. (36635)
  • Fix duotone first render in Safari. (36754)

Icons

  • [Icons]: Fix Comment Author Name icon. (36738)
  • [Icons]: Fix property names for Comment Author Avatar icon. (36737)

Milaceanous

  • Block Styles: Add a separating margin to the default picker. (36976)
  • Block Styles: Check for existence of scroll container. (37010)
  • Data package: Update types and fix type error. (36190)
  • Writing Flow Multi-select: Ensure post title content editable after multi-select. (36843)
  • Insertion point bar: Hide onBlur and onMouseLeave. (36798)
  • Dependency Extraction Webpack Plugin: Make the plugin work when using optimizations.runtimeChunk = 'single'. (26214)
  • Fix document typo. (36776)
  • Prevent CleanWebpackPlugin webpack plugin from deleting webpack assets. (35986)
  • Hide the columns inserter in pattern previews. (36626)
  • Update theme.json version. (36917)
  • Multi-entity save: Only set site entity to pending if really saving. (36573)
  • Widgets Editor: Add CSS fix for wp_footer called multiple times. (36759)
  • Fix the templates REST API endpoint for the almost pretty permalink config. (36881)

Performance

  • Improve performance of wp_navigation lookup. (36891)

Experiments

  • Add __unstable-large size variant on InputControl SelectControl UnitControl. (35646)
  • Add experimental ConfirmDialog. (34153)

Documentation

  • Add brief information about blockGap to the theme.json how-to guide. (36558)
  • Add placeholder in URLInput documentation. (36799)
  • Block Supports: Update block supports documentation after typography reshaping. (36894)
  • Alphabetize the How to Guides section. (35904)
  • Fix broken link to wordpress/stylelint-config. (36936)
  • Improvements on Create a Block Tutorial from Block Editor handbook. (36553)
  • Update history.md with description of the page. (36888)
  • Update Getting Started with info to stay informed. (36498)
  • Update Pattern block categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and add documentation. (36144)
  • Various inline docblockdocblock (phpdoc, xref, inline docs) corrections. (36793)
  • ToolsPanel: Update panel readme and stories. (36557)
  • Change .nvmrc and documentation for Node.js version (LTS to 14.18.1). (36744)

Code Quality

  • Blocks: Refactor generator-based actions to thunks. (36468)
  • Remove useless bubblesVirtually prop from BlockInspector. (37024)
  • Remove EditPostSettings context provider. (36949)
  • Report dependencies externalized with Dependency Extraction Plugin. (35106)
  • Comment Author Avatar block: Escape styles attribute. (36988)
  • Clarify 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. context for PostTemplateActions’s “New” label. (36679)
  • Data: Remove usage of deprecated register methods. (36344)

Global Styles

  • Move Global Styles code to lib/compat/wordpress-5.9 folder. (36978)
  • Rename gutenberg_ to wp_ for some functions that land in WordPress 5.9. (36913)
  • Update global styles public API. (36610)
  • Update the WP_Theme_JSON_Gutenberg class to be like the core one. (36973)
  • Update the WP_Theme_JSON_Resolver_Gutenberg class to be like the core one. (36974)
  • theme.json: Sort keys alphabetically. (36968)
  • Update function names for the public global styles API functions. (36907)

Block Library

  • Navigation: Remove outdated separate “Home” link styles. (36608)
  • Post Featured Image: Remove withNotices HOC. (36596)
  • [Comment Author Avatar]: Remove extraneous color link support flag. (36956)
  • Deprecate navigation areas. (36981) (36727)
  • Remove unstable max pages attribute from Nav block. (36877)
  • Remove reference to gutenberg_, swap with wp_. (36652)
  • Add plugin 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 to Nav Area block deprecation notice. (36777)

Testing

  • Reorganize end-to-end tests folders and files. (36734)
  • Scripts: Upgrade Puppeteer to v11. (36040)
  • Update template controller 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. now that author support is in WP core. (36987)
  • end-to-end Tests: Fix failing image end-to-end test by waiting for required element. (36982)
  • Remove block template resolution unit tests. (36855)

Performance  Benchmark

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 12.17.22s38.68ms
Gutenberg 12.06.96s38.34ms
WordPress 5.87.46s48.96ms

Thank you to @critterverse for the assets included in this post, @priethor for coordinating the release process and proofreading and to all those who contributed to this release!

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