What’s new in Gutenberg 12.5? (February 2nd)

“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 tag) are published following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here is an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


Gutenberg 12.5 has been released and is available for download!

Table of Contents

Allow switching theme styles variations

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. allows for a lot of customization on behalf of theme authors. Now there is even more that can be done by providing styles variations that let users quickly and easily switch between different looks in the same theme.

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.: custom taxonomies filtering and more!

The Query Loop 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. now also shows custom taxonomies in the filters panel. Depending on what post type is selected it will update the available filters to show all the taxonomies for that post type. Moreover, the Query Loop block now also supports filtering by multiple authors.

Previously, there was a limited set of controls available on the 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. Block when rendering a placeholder inside a Query Loop compared to using the block isolated. Starting in this version, all Post Featured Image settings can be used when the block is inside the Query Loop, too!

Preserve styling from adjacent buttons when inserting a new one

Inserting new buttons has just become easier: when a new Button Block is inserted it will automatically retain the styling from the adjacent buttons.

Add the Code Editor to Site Editor

Sometimes you just have to peek behind the curtain. Gutenberg 12.5 brings the Code Editor view to the Site Editor, too!

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle: @alanjacobmathew, @imangm, @jorgecontreras, and @knilkantha! 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

These are all the changes included in this release.

Features

  • Allow switching global styles variations. (35619)
  • Query Loop: Add support for custom taxonomies filtering. (38063)
  • Add: Code editor to edit site. (37765)
  • Post Featured Image: Show all the controls when inside a Query Loop. (37945)
  • Buttons: Preserve styling from adjacent button blocks when inserting a new button block. (37905)

Enhancements

Block Library

  • Add transform between coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./site-logo and core/site-title blocks. (37920)
  • Allow using a text label instead of an icon on overlay menu toggle button. (36149)
  • Query Loop: Add multiple authors support. (38024)
  • Comments Query Loop: Add discuss options to the block. (37297)
  • Comments Query Loop: Rename next and previous to newer an older. (38143)
  • Gallery block: Move add/edit media to block toolbar. (38036)
  • Navigation: Fetch classic Menus and Pages using view (readonly) context. (37884)
  • Navigation: Show menus selection in placeholder only if available. (37980)
  • Navigation: Try not using css variable for block gap support. (37543)
  • Paragraph: Try to avoid a trailing word in the description. (37483)
  • Post Featured Image: Add size selector. (38044)
  • Posts Lists: Unset inherited backgrounds on Posts Lists. (37941)
  • Social Icons: Unset inherited backgrounds on social icons. (37940)

Components

  • CustomSelectControl: Add hints example to storybook. (38056)
  • ToolsPanel: Add CSSCSS Cascading Style Sheets. classes to first and last displayed ToolsPanelItems. (37546)
  • Navigator: Add basic location history. (37416)
  • Add: Hover and Selected states to the palette editor. (37962)
  • Update gray color palette to match base styles. (38109)

Post Editor

  • Post Lock Modal: Update 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. size. (38040)
  • Post Lock: Adjust avatar design and update message. (37979)
  • Block styles: Remove box-sizing rule on Post Editor container to achieve editor/frontend parity. (37902)

Block Editor

  • Identify the site frontpage in link UIUI User interface search results. (36493)
  • Rich text: Use file on internal dependencies. (38005)
  • Transform pasted div tags to p tags. (38042)

Site Editor

  • Update template home, front-page, and search template descriptions. (38132)
  • Add: Copy all content to edit site. (37781)

Global Styles

  • Load the global styles before the theme styles in the editor. (37885)
  • Duotone: Allow users to specify custom filters. (38055)
  • Enable alpha on Block Inspector Color ToolsPanel. (37731)

Internationalization

  • 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.: Create new function addLocaleData to merge domain configuration. (37704)

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

  • [Global Styles]: Add REST API endpoint to fetch variations. (38124)

Bug Fixes

Block Library

  • Add classic menus to menu switcher. (38168)
  • Always allow accessing edit.php?post_type=wp_navigation page. (38170)
  • Fix Post Date block escaping of date HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (38023)
  • Fix duotone render in non-fse themes. (37954)
  • Social Icons: Fix color picker 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. when set to Logos Only. (38006)
  • Temporarily remove text decoration from Nav block. (37963)
  • Query Loop: Reorganise inspector controls + order selection bug. (37949)
  • Revert “Late escape RSS block (#37878)”. (38117)
  • Fix missing default align-items when items are oriented vertically in flex layout. (38069)
  • Update micromodal to 0.4.10 to fix navigation close button. (38032)

Site Editor

  • Fix empty gray circle when site has no logo on template list page. (37474)
  • Fix hiding the bottom of tablet/mobile preview in Site Editor. (38019)
  • Fix resizable box scrollbars in blocks. (38123)
  • Override Site Editor URLs to use 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 page. (38232)
  • Restore ?styles=open functionality. (38093)
  • Site Editor: Fix Inserter classes. (38112)

Block Editor

  • Fix pattern preview expanding height and scrollbar issues. (38175)
  • Remove warning for enqueued styles in Editor. (37937)
  • Fix draft previews. (37952)
  • Add context to font style and font weight related translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. strings. (37939)

Post Editor

  • Editor: Fix post lock data inconsistency. (37914)
  • Fix template queries. (38070)

Block Library

  • Latest Posts: Fix featured image alignment label position. (38125)
  • Remove the aria-label from the site title block. (38432)

Components

  • Increase ConfirmDialog overlay’s z-index to render above popovers. (37959)
  • Label components: Improve consistency by setting to 8px margin-bottom. (37844)
  • RangeControl: Fix space between icons and rail. (36935)
  • SelectControl: Mark the children prop as optional. (37872)
  • ToggleGroupControl: Remove animated backdrop. (38008)

Design Tools

  • Fix: Double border on palette editor. (38035)
  • Fix: PanelColorSettings renders an empty when a color setting is falsy. (38029)

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

  • Load the entities list using the view context. (37685)
  • Fix inconsistent response when preloading OPTIONS type requests. (38051)

Widgets Editor

  • Fix empty 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. overlapping 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. editor content on mobile viewports. (38017)

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)

  • Make sure when on last block focus cannot enter the block. (37965)
  • Tree Grid: Fix keyboard navigation for expand/collapse table rows in Firefox. (37983)

Performance

Plugin

  • Don’t use WP_Query::Get_posts directly. (38104)

Components

  • ToolsPanel: Memoize callbacks and context to prevent unnecessary rerenders. (38037)

Documentation

  • Add anchors to all terms of the glossary. (38073)
  • Add documentation for useBlockEditContext hook. (36299)
  • Add note about “local styles” in the glossary. (38083)
  • Add some terms related to styles to the glossary. (38076)
  • Add theme.json v1 reference and v1 to v2 migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. documentation. (37886)
  • Block API Reference: Fix ‘isSelected’ property type. (38161)
  • Capitalise the 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/ wordmark correctly in the WordPress Gutenberg project. (38092)
  • Component: Update color-picker documentation. (38010)
  • Document that __experimentalSelector requires server-side block registration. (37984)
  • Document the Global Styles Presets. (38129)
  • Fix documentation 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.. (38235)
  • Include partialRight import from lodash in DimensionControl example. (38088)
  • Multiple typos fixed. (38071)
  • Scripts: Corrected “npm start:Hot” in the README file. (38178)
  • Update Block Supports Documentation to better reflect how it works. (37847)
  • Update BlockPreview component readme. (38209)
  • Update versions for 5.8.2 and 5.8.3. (37924)
  • Use consistent punctuation, capitalization in templateParts documentation. (38193)
  • [Type] Documentation Updating Faq.md typo. (38154)

Code Quality

  • Compose: Rework types of createHigherOrderComponent for closer match to API. (37795)
  • Docblockdocblock (phpdoc, xref, inline docs) typos. (38067)
  • Fix two inline typos. (38048)
  • Testing: Upgrade Jest to v27. (33287)
  • Add a missing @since 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.). (38151)
  • Ignore local environment .tool-versions configuration file. (38013)
  • Add allowed-plugins in composer configuration. (38085)
  • Site editor – try redirecting to homepage before the reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. render. (37248)

Block Library

  • Allow for HTML in get_the_title. (38145)
  • Fix double escaping in blocks. (37985)
  • Late escape Latest Posts block. (37866)
  • Late escape Navigation blocks. (37870)
  • Late escape Post blocks. (37876)
  • Late escape Social block. (37881)
  • Late escape comment blocks. (37860)
  • Late escape comments link block. (37875)
  • Late escape latest comments block. (37865)
  • Late escape post author blocks. (37874)
  • Late escape site blocks. (37880)
  • Spacer: No need to use withDispatch HOC. (38206)

Tools

  • Bump dot-prop from 4.2.0 to 4.2.1. (38101)
  • Bump ini from 1.3.5 to 1.3.8. (38106)
  • Bump tar from 4.4.13 to 4.4.19. (37917)
  • Bump tree-kill from 1.2.0 to 1.2.2. (38102)
  • Bump trim-off-newlines from 1.0.1 to 1.0.3. (38095)
  • Update MiniCSSExtractPlugin to version 2.5.1. (38027)
  • Bump follow-redirects from 1.14.1 to 1.14.7. (37957)
  • Bump handlebars from 4.7.6 to 4.7.7. (38054)
  • Bump path-parse from 1.0.5 to 1.0.7. (37990)
  • Bump tmpl from 1.0.4 to 1.0.5. (37916)
  • Add ‘.git-blame-ignore-revs’ to the project. (37822)
  • Require stylelint v14 for stylelint configuration and scripts. (38091)
  • Tested up to WP 5.9. (38162)
  • wp-env: Add install-path command. (35638)
  • Docgen/stop crashing on missing return types. (37929)
  • Add temporary workaround to fix broken common js import of mini-css-extract-plugin. (38004)
  • Fix back button aria name in customizing widgets tests. (38195)

Testing

  • Fix flaky Nav block user permissions end-to-end test. (38025)
  • Fix flaky classic block conversion undo test. (37933)
  • Improve flaky draft creation navigation block end-to-end test. (37931)
  • Skip flaky nav permissions test until fixed. (38099)
  • [docgen] Refactor code to use require() instead of JSON.parse(fs.readFileSync()). (38148)
  • end-to-end Tests: Add coverage for reusable blocks save button state regression. (33151)
  • Add new Testing Instructions section to PR template. (38147)

Performance Benchmark

Post Editor

VersionTime to first blockKeypress event
Gutenberg 12.56.8 s42 ms
Gutenberg 12.46.8 s41 ms
WordPress 5.97.0 s38 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.57.4 s38 ms
Gutenberg 12.46.7 s38 ms
WordPress 5.96.7 s38 ms

Time to first block: firstBlock

Keypress event: type


Thanks to @critterverse@priethor, and @jeffpaul for helping write and proofread this post!

And kudos to all the contributors who have submitted bugs, written code, designed components, added documentation, reviewed others’ contributions, and everything else that goes into making Gutenberg. 👏

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