What’s new in Gutenberg 13.5? (22 June)

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


The 13.5 release comes with 12 enhancements and 15 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. fixes, with an improved 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. UXUX User experience, expanded design tools for the Post Navigation Link 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., a few solid 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) fixes, and some nice quality of life improvements. 

Table of Contents

Featured Images continue to play an important role on one’s site and this release seeks to make it even easier to take advantage of this high impact piece of your content. 

Now when you use a featured image in a Cover block, a placeholder displays (41460). This helps give a clear visual indication of the changes you’re making and sets better expectations for what you’re customizing: 

Add media drop down showing the use featured image option and the new placeholder.

Tied to this, the option to use a featured image is exactly where you’d expect it to be with a move to the media replace flow (41476). Previously, this was a separate button in the block toolbar and this change helps create a more consistent user experience for interacting with media. 

Add media drop down showing the use featured image option.

More design tools for the Post Navigation Link

For themes with support for “appearanceTools” 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., you’ll now be able to customize the link color and font family for the Post Navigation Link (41378). This allows you to have distinct navigation options in your design:

Other Notable Highlights

Various fixes were merged to improve the accessibility of various interfaces: 

  • Fix lack of context on action buttons and improve accessibility for the template action buttons Edit/New. (41615)
  • Fix focus trap on certain input types when using the left/right arrow keys to navigate interactive elements within a block. (41538)
  • Add label to Preview options dropdown menu. (41566)

The Date Picker now highlights today’s date, helping to orient folks and building on work done in 13.4:

Date picker with a highlight on today's date.

In response to feedback after WordPress 5.9 where several layout utility classnames were removed, utility classnames have been added back to blocks that have layout attributes specified, rather than saving them to the serialized content. In the long run, this should be seen as an interim step ahead of the Styles Engine handling the addition of these classes.  

Changelog

Enhancements

Components

  • Use NumberControl as input field. (41472)
  • Convert component to TypeScript. (41681)
  • RadioControl: Convert component to TypeScript. (41568)

Media

  • Adds featured image toggle to media replace flow. (41476)
  • Add tooltip on replace image’s URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (41504)

Block Library

  • Cover: Adds placeholder when feature image is in use. (41460)
  • Post Navigation Link: Add design controls (color, text decoration, and font family). (41378)

Block Editor

  • Copy plain text variant of blocks. (41366)
  • Adds CTA and external link to block inserter flow. (41112)

Global Styles

  • Move CSSCSS Cascading Style Sheets. from the stylesheet to the block definition. (41689)

Document Settings

  • Highlight today’s date in DatePicker. (41647)

Design Tools

  • Cover: Move overlay and opacity controls to color panel. (41102)

Bug Fixes

Block Editor

  • Preferences Panel: Filters hidden blocks to only count those which are still registered. (41454)

Components

  • Avoid including null values in blocks list. (41496)
  • CustomGradientBar: Fix insertion and control point positioning to more closely follow cursor. (41492)
  • Fix ComboboxControl post-reset focus. (41737)
  • FormTokenField: Added Padding to resolve close button overlap issue. (41556)
  • Tooltip: Fix jitter at edge of screen by enabling __unstableShift. (41524)

Block Library

  • Fix JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. Error in 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. Block. (41354)
  • 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.: Render replace button only if eligible patterns exist. (41690)
  • Comments Title: Plural has been used instead of single in 1st parameter. (41521)

Design Tools

  • Fix CSS Selectors rendered by theme.json duotone/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. settings for blocks on public pages. (41335)
  • Webfonts: Increase priority of init hook to account for block reregistration. (41569)

Template Editor

  • Include theme’s templates in template list in post editor. (41630)

Site Editor

  • Theme variations UIUI User interface: Ensure that equality check takes into account all default theme properties. (41591)

CSS & Styling

  • Add utility classnames back to blocks that have layout attributes specified. (41487)
  • Allow for zero values for CSS properties in the style engine. (41561)

Accessibility

  • Fix lack of context on action buttons and 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) for the template action buttons Edit/New. (41615)
  • Fix focus trap on certain input types. (41538)
  • Add label to Preview options dropdown menu. (41566)

Experiments

  • Style engine: Add border to backend. (40531)
  • Style engine: Elements backend support. (40987)
  • Global styles: Merge block CSS with theme.json styles. (34180)

Documentation

  • Add missing CHANGELOG entry. (41745)
  • Enhancements to TypeScript migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. guidelines. (41669)
  • Add step for build and asset file. (41511)
  • Feature flag refresh. (41522)
  • Update link title and add the correct URL. (41666)
  • Fix typo in block schema description. (41570)

Code Quality

  • Entity-aware type signature for getEntityRecord and getEntityRecords. (41235)
  • Improves the types of createHigherOrderComponent and its usages. (41138)
  • ESLint: Restrict removed Lodash functions. (41651)
  • TypeScript: Add default context types to Entity Records in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data. (41595)
  • TypeScript: Improve type definitions in wordpress/core-data. (41593)
  • RNMobile: Update clicks to use clickIfClickable() when possible. (41367)

Components

  • Draggable: Add clarifying inline comment after the recent hook dependency changes. (41658)
  • Limit Dropdown cleanup to renders where the menu has actually been opened. (41604)
  • Placeholder: Add an illustration option to the Placeholder component. (41605)
  • Refactor CustomGradientBar to pass exhaustive-deps. (41463)
  • Refactor DateDayPicker to pass exhaustive-deps. (41470)
  • Refactor Flex to pass exhaustive-deps. (41507)
  • Refactor FontSizePicker to pass exhaustive-deps. (41600)
  • Refactor InputControl to pass exhaustive-deps. (41601)
  • Refactor Modal to pass exhaustive-deps. (41610)
  • RefactorDraggable to pass exhaustive-deps. (41499)
  • RefactorDropdown to pass exhaustive-deps. (41505)
  • Rewrite <FormTokenField> to functional component and Typescript. (41216)
  • TreeSelect Convert to Typescript. (41536)
  • ZStack: Convert component story to TypeScript and add inline documentation. (41694)

Block Library

  • Clarify updateNavigationLinkBlockAttributes. (41657)
  • Comment Author and Date blocks: Aligned editor markup with the frontend. (41631)
  • Cover Block: Move components to variables so they can be shared. (41742)
  • Split useNavigationMenu into bite-size functions and add unit tests. (41139)
  • File, Search Blocks: Lower CSS specificity. (41393)

Document Settings

  • Extract 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. used in PostVisibility and PublishDateTimePicker to a new InspectorPopoverHeader component. (41362)

Lodash

Tools

Build Tooling

  • Bump caniuse-lite version. (41675)
  • Update testing-library dependencies to latest version. (41710)
  • Upgrade wp-prettier to 2.6.2. (40542)
  • Package.json: Bump engines.node version to >=14. (41599)

Testing

  • Fixed failing DateTimePicker 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.. (41483)
  • Remove snapshot from Post Editor Template Mode test and target expected string instead. (41563)
  • Skip some of the Drag & Drop end-to-end on iOSiOS The operating system used on iPhones and iPads.. (41529)
  • Add controlled unit test, use modern Testing Library features. (41668)

Components

  • Storybook: Update to the version 6.5. (41585)

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

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.54.71s49.31ms
Gutenberg 13.45.41s47.93ms
WordPress 6.04.85s41.92ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.55.97s37.25 ms
Gutenberg 13.45.91s39.82 ms
WordPress 6.05.18s35.59 ms

Contributor Props

The following PRs were merged by first time contributors – thank you and congrats!

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @alexstine @andrewserong @chad1008 @ciampo @derekblank @draganescu @FilipposZ @fluiddot @geriux @glendaviesnz @jffng @jostnes @jsnajdr @MaggieCabrera @Mamaduka @manzurahammed @matiasbenedetto @mburridge @mcsf @mirka @msurdi @noisysocks @ntsekouras @oandregal @ramonjd @SavPhill @scruffian @sebastienserre @sunil25393 @t-hamano @tharsheblows @torounit @tyxla @walbo

Thank you to all who helped make this release happen.

#gutenberg, #gutenberg-new