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