What’s new in Gutenberg 10.9? (23 June)

Two weeks have passed since the last 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/ release, which means the time has come for a new version. Gutenberg 10.9 introduces rich URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org previews for Link Control, the ability to expand/collapse nested blocks in List View, and a new name for the 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. 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. — Post Template. The release also includes enhancements and 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 for Widgets Editor.

Rich URL Previews

When clicking on links in the editor, it’s now possible to see a rich preview of a URL including site title, meta description, icon and image. This is the first feature to take advantage of the new `url-details` endpoint, the enhanced form of which was shipped in 10.8. Currently, rich previews are only enabled for links which point to external URLs and then only for rich text blocks that utilize the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. link format library. In the near future however, we expect to extend this to provide previews of internal URLs and to roll out support to more areas of the software.

List View Enhancements

This release brings a new feature to the List View. It’s now possible to expand and collapse nested blocks, which helps users navigate complex block structures. For example, users can collapse the content in sibling columns to concentrate on that hierarchy level and expand a single column to focus on it.

A new home for the Block Manager

The Block Manager has been moved from the Tools menu, and is now integrated with the new Preferences modal under the Blocks section, consolidating all editor-related preferences in the same modal.

Updated template creation modal

This modal has been polished, including an improved welcome guide, to make creating new templates a breeze.

Renamed Query and Query Loop blocks

With the Query and Query Loop blocks becoming stable and coming to WordPress 5.8, they have been renamed to increase clarity about their functionality. The Query Loop block has been renamed to Post Template to better represent its purpose within Query, whereas the Query block label now refers to it as Query Loop.

10.9

Enhancements

• Components:
  • UnitControl: Reduce code duplication for defined units. (32731)
  • BoxControl: Add support for grouped directions (vertical and horizontal controls). (32610)
  • Notice: Added onDismiss option in createInfoNotice. (32338)
• Block Library:
  • Latest Posts: Limit latest-post authors dropdown to users with published posts. (32662)
  • Calendar: Add loading and empty state. (31504)
  • Query Loop: Add helpful text to the block. (32694)
  • Query Loop: Rename QueryLoop to PostTemplate and change Query label. (32514)
  • Spacer: Try an alternate min-height fix. (32543)
  • Heading: Show all heading levels in toolbar group. (32483)
  • Post Terms: Add a CSSCSS Cascading Style Sheets. class to identify the taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies.. (31832)
  • Legacy 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.: Move block to @wordpress/widgets. (32501)
• Block Editor:
  • Enhance link control UIUI User interface with rich URL previews. (31464)
  • List View: Allow expanding and collapsing of nested blocks. (32117)
  • Editor Breadcrumb: Add a rootLabelText prop. (32528)
  • Don’t hardcode CSS units. (32482)
  • Refactor LinkControl component to support ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 17. (32552)
  • Remove snapshots from tests for LinkControl. (32592)
• Block Support:
  • Update border support to allow non-pixel units. (31483)
• Icons:
  • Add new icons. (32371)
  • Tweak people icon. (32354)
  • Expose trendingDown and trendindUp icons. (32124)
• Template Editing Mode:
  • Update welcome guide language for the template editor. (32639)
  • Translate delete template confirmation message. (32647)
  • Disable renaming templates named by core; Display descriptions. (32636)
  • Update the template creation modal. (32427)
• Post Editor:
  • Use the post type singular_name as the root Block Breadcrumb label. (32609)
  • Absorb block manager within blocks preferences. (32166)
• Widget Editor:
  • Hide some settings from the “Options” menu on small screens. (32690)
  • Add Breadcrumbs Block. (32498)
  • Use button block appender in widget areas. (32580)
  • Add show block bread crumbs feature toggle to more menu. (32569)
  • Unhide the classic menu widget. (32431)

Bug Fixes

• Block Library:
  • Image Block: Fix cover block exists check. (32666)
  • Embed: Fix embed to paragraph transform when caption has rich text formats. (32355)
  • Columns: Fix deprecation caused when adding a column. (32378)
  • Site Logo: Fix site-logo not getting removed on remove_theme_mod. (32370)
  • Social: Try to fix color inheritance for social links. (32625)
  • Social: Correctly position the link popover when List View is open. (32525)
  • Code: Try an experimentalSelector. (31742)
• Block Editor:
  • RichText: Fix loss of list content when switching list types. (32432)
  • useBlockDropZone: Fix horizontal indicator. (32589)
  • Inserter: Fix insertion point displaying when there are no inserter items. (32576)
  • Drop indicator: Show around dragged block and show above selected block for file drop. (31896)
  • Fix vertical scroll in horizontal toolbar. (32655)
  • Fix block multi selection in nested blocks. (32536)
  • Fix block toolbar overlap with 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.. (32424)
• Blocks:
  • Avoid keeping the same client ID when transforming blocks. (32453)
  • Allow themes to add inline styles for all blocks when using lazy styles loading. (32275)
• Components:
  • RadioControl: Add hideLabelFromVision prop. (32414)
  • DatePicker: Fix crash when navigating between months. (31751)
  • Autocomplete: Prevent setting state for unmounted component. (32654)
• Editor:
  • Make link UI rich previews target agnostic and fix unwanted preview for internal URLs. (32658)
• Widget Editor:
  • Don’t delete a widget if it is moved to a different area. (32608)
  • Fix button spacing in header. (32585)
  • Decode HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities for name and description props. (32503)
  • Fix dirty state after adding new block. (32573)
  • Don’t add undo levels when editing records on save. (32572)
  • Save deleted and restored widgets. (32534)
  • Don’t show widgets in menu without theme support. (32420)
  • Fix inspector opening on click outside widget area. (32450)
  • Legacy Widget: Don’t display “No preview” when widget has image tags. (32605)
• Post Editor:
  • Prevent locking users in saving state when saving metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. boxes fails. (32485)
  • Edit Post: Add metaBoxUpdatesFailure action. (32623)
• Full Site Editing
  • Only add skip-link for block themes & templates on the frontend. (32451)
• Storybook:
  • Fix misc warnings. (32401)
• Data:
  • useSelect: Silently error (for block zombie children). (32088)

Performance

• Block Editor: Remove is-typing root class. (32567)
• Header Toolbar: UseCallback to avoid unnecessary rerenders. (32406)

Experiments

• Component System:
  • Promote Scrollable component to a full export. (32446)
  • Promote Surface component to a full export. (32439)
• Global Styles:
  • Allow presets to provide an empty set of values. (32679)
  • Allow theme authors hook into the preset classes generated by global styles. (32627)
  • Update WP_Theme_JSON 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. so presets are always keyed by origin. (32622)
  • Make syntax errors in theme.json visible to users. (32404)
  • Enqueue global styles in editor only once. (32377)
  • Enqueue core and theme colors by using separate structures per origin. (32358)
  • Do not migrate the old typography support if core already did it. (32487)
  • Generate classes and custom properties for global styles in the same way the post editor does. (32766)
• Full Site Editing:
  • Template resolution for new posts and pages. (32442)
  • Monopolize navigation in Site Editor. (31810)
  • Prevent duplicate queries. (32700)
  • Split theme.css styles loading. (31239)
• Navigation Editor:
  • Alternative fix: Set persisted menu id when no menus or missing menu. (32313)

Documentation

• Handbook:
  • Update references to register_block_type_from_metadata. (32582)
  • Fix duotone support documentation. (32440)
  • Detail the Gutenberg release post process. (32429)
  • Update Legacy Widget documentation with new info on show_instance_in_rest feature. (32726)

Code Quality

• Components:
  • Remove duplicated compose dependencies. (32709)
  • Sort entries in packages/components/tsconfig.json. (32675)
  • Update the popover component to rely on useDialog. (27675)
  • Card: Add types. (32561)
  • Card: Refactor subcomponents folder structure. (32557)
• Compose:
  • Add types to useDialog and useFocusOnMount. (32676)
  • Add types to withSafeTimeout. (32674)
  • Type withState as any. (32326)
• Block Library:
  • Page List: Avoid generic function names for page list block internal functions. (32736)
  • Latest Comments: Correct the format used for duplicate hook documentation. (32563)
  • Login/out: Update documentation for render_block_core_loginout function. (32158)
• Block Editor: Remove unused select block function. (32532)
• Core Data: Fix typos. (32480)
• Editor: Fix different typos in inline comments, deprecation warnings and variable names. (32474)
• Linting:
  • Edit Post: Fix no-string-literals warning. (32518)
  • Add ESLint import resolver. (31792)
• 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:
  • Copy wp_should_load_separate_core_block_assets function from core. (32611)
  • Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. Warnings. (32513)

Tools

• Workflow:
  • Fix the add milestone githubGitHub GitHub is a website that offers online implementation of git repositories that 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/ action. (32691)
  • Use a different cache key for the PR automation workflow. (32588)
  • Improvements to NPM package caching across workflows. (32458)
  • Limit when release artifacts are built on forks: Pt. 2. (32494)
• Build:
  • Load .min.js files even in dev mode, output unminified assets only in prod. (32621)
  • Upgrade husky package to the latest version. (32077)
  • Generate minified .min.js and unminified .js files for GB js entry points when building. (31732)
  • Include Legacy Widget block files in the plugin build. (32803)
• End to End Tests:
  • Update mentions tests to use toMatchInlineSnapshot. (32727)
  • Add more user auto-completer (mentions) coverage. (32697)
  • Ignore JQMIGRATE (jQuery migrate) deprecation warnings. (32656)
• Linting:
  • Update linting and formatting for test plugin files. (28033)
  • Update Eslint JSDoc package, introducing JSDoc line alignment check. (25300)
• wp-env: Bump TT1 Blocks to v0.4.7. (32661)

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.

Version	Loading Time	KeyPress Event (typing)
Gutenberg 10.9	4.50s	28.93ms
Gutenberg 10.8	4.91s	30.30ms
WordPress 5.7	5.71s	32.09ms

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

Thanks, @priethor, @get_dave, and @mikeschroder for helping with the release post.  Thanks to @youknowriad and @bernhard-reiter for coordinating the release.

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