What’s new in Gutenberg 14.2? (28 September)

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

It comes with writing flow improvements, a more polished Calendar 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., smarter autocompletions and much more!

Table of Contents

Smarter suggestions for 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. block variations 

Block variations have been available in Gutenberg for a long time. They allow you to have similar versions of the same block that share some common functionality. From now on, if you have an active variation of the Query Loop block on your site and that variation has registered some block patterns, only those patterns will be suggested in the inserter.

For example, you might have a Products List block that is a variation of the Query Loop block. That Products List can also have a registered block pattern. Now, when inserting the Products List block, you will not see the default Query Loop block patterns but rather your own block pattern associated with the Products List. Pretty neat!

Improvements to the writing flow

Several improvements to the writing flow have been shipped in Gutenberg 14.2:

  • The sibling and line inserters now feature a more natural animation effect.
  • Selecting multiple blocks is now more visually consistent.
  • The block inserter is now hidden when the user is typing, reducing visual clutter.

Letter spacing in headings

It is now possible to modify the letter spacing of the headings directly in the Global Styles interface.

A more polished Calendar block

You can now set the background, link and text color of the Calendar block. Global Styles will now also affect the colors of the Calendar block and it will inherit the default text color from its parent block.

Four screenshots of the Calendar block in a 2 by 2 grid, each one of them using a different background color

New “Banners” and “Footers” block pattern categories

Two new block pattern categories are introduced in order to better reflect the structure of web pages. “Banners” here refers to visually distinctive elements that help structure or contrast the contents of a page (including headings and “hero” elements). 

A screenshot of the block inserter showing all of the block pattern categories

From now on, it is possible to autocomplete links in any block. Previously, blocks had to explicitly opt into this functionality with __experimentalSlashInserter  but now links will be autocompleted everywhere! The [[ shortcut is used to trigger the autocompletion in the editor.

Editor performance improvements

Introducing a new version of the List block that uses inner blocks uncovered a previously unknown performance issue: Whenever a block that contains inner blocks was displayed for the first time on a page it would re-render once for each level of nesting! So, if a List item was inside of a List that was inside of another List block, that block would re-render 3 times! This problem has now been fixed and the initial load performance of the editor should be improved.

Changelog

Deprecations

  • Officially deprecate the children and node block attribute sources. (44265)

Enhancements

Components

  • Link/Unlink buttons: Add more polished styling and UXUX User experience. (43802)

Global Styles

  • Allow setting Letter case and Decoration to ‘None’ and add Letter case to Global Styles. (44067)
  • Block supports: Allow overriding prettify options for enqueued CSSCSS Cascading Style Sheets.. (44248)
  • Show Letter Spacing in Global Styles -> Typography -> Headings. (44142)
  • Spacing presets: Switch to using numbers instead of t-shirt sizes for labels. (44247)

Block Editor

  • Hide all floating block UIUI User interface when typing. (44083)
  • Update animation for line and sibling inserter. (44269)
  • Warning component: Align the action buttons. (44328)

Block Library

  • Calendar block: Add color supports and polish styles. (42029)
  • Embed block: Mark which attributes should be considered content. (44039)
  • List Item block: Improve writing flow. (43954)
  • Post Navigation Link block: Add arrows. (40684)
  • Query Loop block: Suggest active variation patterns.
    (44197)

Patterns

  • Add a new categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. for block patterns called “Banners”. (44203)
  • Add a new category for block patterns called “Footers”.
    (44200)

Bug Fixes

Components

  • BlockMover: Clean up focus styles. (44241)
  • Fix animation running in loop while dragging an image on a dropzone. (44264)
  • Fix popover stacking in the customize widgets editor. (44282)
  • Link autocompleter: Enable for all blocks. (44078)
  • Remove unexpected has-text class when empty children are passed to Button. (44198)

Block Library

Bugfixes to blocks:
  • Cover block: Fix preview. (44321)
  • Freeform block: Hide “Convert to blocks” when the block locked.
    (44288)
  • Group block: Change default variation in inserter. (44176)
  • Missing block: Fix HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block check. (44327)
  • Navigation block: Fix submenu colors for imported classic menus.
    (44283)
  • Navigation block: Remove ellipses as menu icon options for now. (44222)
  • Pullquote block: Fix transform to quote crash.
    (44315)
  • 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: Fix height/scale overwriting img inline styles. (44213)
  • Query Loop block: Fix broken preview in specific category template. (44294)
  • Query Loop block: Fix variation with declaredicon object with src.
    (44270)
  • Avoid showing the recursion warning in previews when replacing template parts. (44256)
  • Ensure replacing a template part using a pattern doesn’t update the existing entity. (44221)
  • Fix demo content cover block text color. (44174)

Block Editor

  • Block Toolbar: Update position when moving blocks. (44301)
  • Capture state changes scheduled between render and effect. (38509)
  • Writing flow: Fix partial selection when dragging in between blocks. (44230)

Global Styles

  • Block supports: Prioritize prettify options over SCRIPT_DEBUG. (44254)
  • Fix padding on the post editor when RootPaddingAwareAlignments setting is enabled. (44209)
  • Remove the betaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. label from global styles 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.. (44251)

Site Editor

  • Make template names and descriptions dynamic. (43862)
  • Prevent editor from creating multiple templates when multi-clicking the
    “create” button. (44146)

Keycodes

  • Keyboard Shortcuts: Fix settings 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. toggle shortcut. (43428)

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)

  • Add role=application to List View to prevent browse mode triggering in NVDA. (44291)
  • Block label and title don’t consider variations. (44250)
  • Make inline toolbar navigable by arrow keys. (43645)
  • Text Selection in Safari: Try new fix for recent version. (44148)

Performance

  • Avoid calling redux actions constantly when moving the mouse or scrolling. (44325)
  • Batch container block settings action calls. (43958)
  • Prevent resize observer loops in BlockPreview. (44319)

Documentation

  • Include information about multiple scripts support added in WP 6.1. (44155)
  • Popover: Write better documentation regarding the recent 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. changes. (44195)
  • RangeControl component: Clarify rail vs track difference. (44057)
  • Update links in the Development Platform document. (44181)
  • Updating versions in WP for 6.0.2. (43826)

Code Quality

  • Backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. template creation changes from CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
  • Enforce coding guideline regarding the usage of quotation marks. (44305)
  • Fix missing TS types for 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) in packages/components. (44277)
  • Preferences-persistence: Remove wordpress/compose dependency. (44202)
  • Refactor style engine border styles. (43594)
  • Removes whitespace from l18n-strings. (44314)
  • Renaming functions to match their naming in Core. (44266)
    (44299)
  • useInstanceId: Convert to typescript. (43790)

Updating dependencies

  • Update fast-average-color library to latest version. (44175)
  • Update json2php to v0.0.5. (44313)
  • Remove wp-editor from wp-edit-blocks dependencies. (33496)

Block Library

  • Comments Pagination blocks: Rename for consistency. (44287)
  • Embed block: Remove incorrect comments about block variations. (43834)

Components

  • Refactor NavigationMenu to ignore exhaustive-deps. (44090)
  • Refactor RangeControl to pass exhaustive-deps.
    (44271)
  • Popover: Add anchor prop which supersedes all previous anchor-related props. (43691)
  • UnitControl: Fix exhaustive-deps warnings. (44161)
  • UnitControl: Use hideHTMLArrows prop to hide spin buttons. (43985)
  • useSetting: Minor refactor. (44267)

Refactoring tests to use @testing-library/reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.

  • Refactor BlockControls tests to @testing-library/react. (44122)
  • Refactor ColorPalette tests to @testing-library/react. (44108)
  • Refactor KeyboardShortcutHelpModal tests to @testing-library/react.
    (44077)

Work to remove dependency on lodash

  • Compose: Introduce in-house compose and pipe utils. (44112)
  • Compose: Introduce in-house debounce() utility, deprecate Lodash version. (43943)
  • Lodash: Remove dependency from wordpress/widgets package. (44201)
  • Lodash: Refactor away from _.flowRight().
    (44188)

Testing

  • Storybook: Set up local visual 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. testing.
    (43393)

Tooling

  • Ensure all packages get minor/major version bump when requested. (44317)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) 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

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.28.4s48.69ms
Gutenberg 14.112.7s54.31ms
WordPress 6.06.4s29.97ms

Site Editor

VersionLoading TimeKeyPress Event (typing)
Gutenberg 14.24.1s44.76ms
Gutenberg 14.115.7s54.39ms
WordPress 6.05.0s26.15ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @annezazu @apmatthews @aristath @c4rl0sbr4v0 @carolinan @chad1008 @ciampo @dcalhoun @draganescu @ellatrix @geriux @glendaviesnz @gziolo @jasmussen @jorgefilipecosta @kebbet @kkoppenhaver @Mamaduka @matiasbenedetto @mcsf @michalczaplinski @mirka @mtias @noisysocks @ntsekouras @pagelab @ramonjd @t-hamano @talldan @tellthemachines @tyxla  @walbo @youknowriad

The following PRs were merged by first time contributors:

  • @kkoppenhaver: Update RangeControl documentation to clarify rail vs track. (44057)
  • @pagelab: Enforce coding guideline regarding the usage of quotation marks. (44305)

Kudos to all the contributors that helped with the release! 👏

Props to @priethor @bernhard-reiter @matveb @cbravobernal for their assistance with the release and props to @javiarce for the images and videos!

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