What’s new in Gutenberg 12.4 (19 January )

“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.4 has been released and is available for download!

This week we want to bring special attention to the 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 that are continually happening in the project. Thanks to all those working to make Gutenberg usable by all!

Table of Contents

Accessibility improvements

Focus now correctly returns to the list view button after closing out of list view—saving a lot of trouble to get back to where you were before opening it.

More improvements are in place for the block inserter 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.. The search input now receives focus when it is opened. And, for screen readers, the close button was added to the desktop view to ensure consistency with the mobile view.

Post publish panel categories reminder

It can be easy to forget to add tags or categories to a post before publishing. A suggestion for adding tags already existed in the publish panel, but now there is also a suggestion for assigning a category to the post that will show up if a categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. is not already assigned.

New "Suggestion: Assign a category" section in the post publish panel

Site editor keyboard shortcuts help panel

As a part of the border work of UI parity with the post editor, the site editor now has a list of keyboard shortcuts available. They can be accessed by pressing CONTROL + OPTION + H on MacOS or CTRL + ALT + H on Windows or through the “More tools and options� (vertical ellipsis/kebab menu) dropdown. Enjoy streamlined workflows with these shortcuts in more places.

Keyboard shortcuts modal in the site editor

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks recategorization

More blocks have been recategorized as theme blocks in the inserter to help encourage correct usage of these blocks and clarify their functionality. The following blocks can now be found in the theme category:

  • Post Template
  • Pagination
  • Next Page
  • Page Numbers
  • Previous Page

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle: @alberto-marin @ugljanin @mauteri. If you’re interested in contributing but don’t know where to start, join the Core Editor weekly meetings on Wednesdays @ 14:00 UTC in #core-editor focused on all things Gutenberg.

Changelog

Enhancements

Accessibility

  • Accessibility improvements for 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. Inserter. (37357)
    • Try possibly better method for Block Inserter Search focus. (37793)
  • Accessibility improvements for List View Part 1. (37798)
  • Improve successful draft save notification for screen readers. (37683)

Block Library

  • Audio: Add uploading state. (37739)
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox.: Add to and from Post Content transformations. (37651)
  • Search: Improve escaping on the search block. (37829)
  • Page List: Add menu-item-home class to Navigation for front page. (37301)
  • Tag Cloud: Add outline style. (37092)

Components

  • ExternalLink: Update icon to be smaller, have no margin. (37859)

Post Editor

  • PostLockedModal: Display preview link as part of the text. (37852)
  • Try: Polish post takeover modal. (37821)
  • Suggest picking a category on the pre-publish panel. (37703)

Block Editor

  • Inserter: Update categories for theme blocks. (37723)

Site Editor

  • Add keyboard shortcut help modal. (37650)
  • Update copy on Snackbar that appears when a template is deleted. (37888)

Icons

Bug Fixes

Block Library

  • Code: Remove color from code theme.scss. (37816)
  • Code: Try: Polish code styles to properly apply border properties. (37818)
  • Columns: Avoid using CSSCSS Cascading Style Sheets. variables for block gap styles. (37436)
  • Comments Pagination Next: Fix accidental division by zero. (37788)
  • Gallery: Pass any custom attributes through the gallery 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. script. (37812)
  • Gallery: Remove warning notice about mobile version required. (37842)
  • Navigation: HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. tags like inline images in nav links break submenu layout. (37665)
  • Navigation: Set the default for –navigation-layout-align to “flex-startâ€? when using vertical orientation. (37696)
  • Navigation: Fix overlay menu errant focus style on scrim. (37824)
  • Page List: Show UIUI User interface warning if Pages cannot be retrieved in Page List block. (37486)
  • Page List: Update page list flex variables to match navigation. (37718)
  • Post Comments: Tidy up Post Comments default styling. (37709)
  • Post Content: Check for nextpage to display page links for paginated posts. (37672)
  • Post Excerpt: Fix previews. (37648)
  • 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.: Use gap for the grid view. (37711)
  • Query Loop: Check for zero queryId on initialization. (37867)
  • Site logo: Fix range control on landscape logos. (37733)
  • Simplify and unify a few modal dialogs. (37857)
  • Fix enqueueing additional styles for blocks only when rendered. (37848)
  • Fix typo (hanle -> handle). (37849)
  • Revert “[Paragraph Block] add font family supportâ€?. (37815)

Colors

  • Coloring panel is unusable in RTL. (37644)
  • Impossible to clear colors if color palettes are removed. (37791)
  • Use useCallback hook from wordpress/elements in color-picker. (37745)

Components

  • BaseControl: Fix VisualLabel styles. (37747)
  • ConfirmDialog: Use 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. from wordpress/elements. (37771)
  • CustomSelectControl: Stop keypresses being caught by other elements when they happen. (30557)

Post Editor

  • Restore canvas padding for classic themes. (37741)

History

  • Fix broken ‘Redo’ by removing faulty logic for discarding unsaved Logo changes. (37895)
  • Fix redo after update/publish with transient edits. (37840)

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

  • Fix Home template description typo. (37843)
  • Improve user experience with blocks editor when a block is not registered. (37646)

Block Editor

  • Fix LinkPicker freeze when virtual keyboard is hidden. (37782)
  • RichText: Fix dead key input on Windows. (37777)
  • Link control: Translate empty link string. (36975)
  • Add post-type-x classname to 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.. (37429)

Global Styles

  • Reduce specificity of legacy font sizes defined by core. (37819)

Accessibility

  • Fix aria-modal attribution with multiple navs on page. (37813)

Template Editor

  • Template Mode: Trim long post titles in large viewports. (37720)

Site Editor

  • Add the “Helpâ€? link to the tools menu. (37647)
  • Contextualize “Exportâ€? string to differentiate it from other occurrences in WP Core. (37660)

Documentation

  • Block.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: Update fontSize and lineHeight props. (37853)
  • Theme.json Schema: Fix appearanceTools in theme.json schema. (37762)
  • Theme.json Schema: Update theme.json schema to allow for per-block management of settings. (36746)
  • Add checkbox for updating schemas if appropriate. (37780)
  • Fix issue template typo. (37825)
  • Add automated theme.json reference documentation. (37569)
  • Add link to block source for reference. (37750)
  • Add missing end tag for codetabs in stylesheet guide. (37827)
  • Fix broken URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org on block variation page. (37702)
  • Fix type of saved $content. (37688)
  • Fix type of saved content – part two. (37740)
  • Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. failure. (37742)
  • Update create block type how to guide for block.json. (37674)
  • Update stylesheets guide with using block.json file. (37679)
  • OSX Setup guide: Wrap lts/* in quotes for nvm commands. (37722)
  • Remove “experimentalâ€? from full site editing documentation. (37655)
  • Update copyright year to 2022 in license.md. (37689)
  • Update wp-plugin.md. (37846)
  • Updated ColorIndicator readme. (37638)
  • Update the Post Author block description. (37836)
  • Fixing broken links and adding colon. (37664)
  • Improve Gutenberg release documentation. (37898)

Code Quality

  • Add the WP version in which some JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. APIs will be removed. (37854)

Block Library

  • Late escape Categories block. (37835)
  • Late escape Page List block. (37873)
  • Late escape Query blocks. (37877)
  • Late escape RSS block. (37878)
  • Late escape Table of Contents block. (37882)
  • Late escape Search block. (37879)
  • Move escaping to point of output in Archives block. (37834)
  • Post Content: No need to pass default get_the_content args. (37701)

Post Editor

  • PostLockedModal: Update action buttons markup. (37837)

Parsing

  • Block API: Separate validation stage during block parsing. (37763)

Components

  • Refactor SuggestionsList to use hooks and change class to function component. (36924)

Tools

Testing

  • Allow type imports 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/. everywhere. (37862)
  • Change the performance job folder structure to avoid nested node_modules. (37775)
  • Fix flaky test by using waitForResponse to ensure the URL details request completes. (37901)
  • Marking test that consistently fails as skipped. (37729)

Build Tooling

  • wp-env: Replace TT1-Blocks with Empty Theme in the wp-env of gutenberg and CI. (37446)
  • wp-env: Show --help when no subcommand is passed. (32755)
  • Scripts: Scan block.json files to detect entry points for the build process. (37661)
  • Scripts: Add plugin-zip command to create a zip file for a WordPress 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. (37687)

Create Block

  • Allow custom folder name for a block. (37612)
  • Speed up scaffolding by omitting WordPress dependencies. (37639)

Performance Benchmark

Post Editor

VersionTime to first blockKeypress event
Gutenberg 12.47.4 s46 ms
Gutenberg 12.37.4 s46 ms
WordPress 5.88.0 s53 ms

Site Editor

VersionTime to first blockKeypress event
Gutenberg 12.46.9 s37 ms
Gutenberg 12.36.7 s38 ms
WordPress 5.85.9 s11 ms

Time to first block: firstBlock

Keypress event: type


Thanks to @priethor and @annezazu 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