What’s new in Gutenberg 16.5? (23 August)

“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 posted following every Gutenberg release on a biweekly basis, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Site Editor project (formerly called Full Site Editing).

Gutenberg 16.5 has been released and is available for download!

This version is packed with 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, many focused on enriching the Command Palette and enabling further customization of blocks. It features contributions from 63 contributors across 219 pull requests, including five new contributors! 🥳

Table of Contents

  1. New Commands and Enhancements to the Command Palette
  2. Additional Block Supports for Multiple Blocks, Including Details and Post Content
  3. Other Notable Highlights
  4. Changelog

New Commands and Enhancements to the Command Palette

New 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.-related commands have been introduced to the command palette. These include block transforms and the options to duplicate, copy, remove, and insert after/before. Together, these new commands not only enrich the command palette’s functionality but also improve the distraction-free mode by offering immediate access to basic functions. (#52509)

In addition to the new commands, the release includes other enhancements to this tool. The styling has been touched up (#53117), iterations have been made towards consistent command language (#53496), and snackbar motion improvements have been implemented (#53248), amongst other refinements.

Additional Block Supports for Multiple Blocks, Including Details and Post Content

Additional block supports have been added to a few blocks as part of this release:

  • Details Block: Support has been added for updating block spacing and padding. (#53282)
  • Post Content Block: It’s now possible to change the block’s colors via controls. (#51326)
  • File Block: Introduced block spacing options. (#45107)

These new supports allow for more precise layout control and greater flexibility for those working on themes.

Other Notable Highlights

  • Blocks: Removed “post” from block titles. (#53492)
  • Writing Flow: Made it possible to exist upon pressing enter in an empty paragraph at the end of the Column block. (#53311)
  • Build Tooling: Upgraded Node.js (v16) and npm (v8). (#53426)
  • Global Styles: Introduced a reset to default global styles revision (#52965) and reduced the visibility check from two to one revision (#53281).
  • Fluid Typography: Added ability for theme developers to configure their own default min and max viewport widths for calculating fluid font sizes. (#53081)

Changelog

Features

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

  • Allow passing optional afterLoad callbacks to store calls. (53363)

Enhancements

Commands

  • Add block-related commands. (52509)
  • Add support for registering commands without icons. (53647)
  • Update the “Preview in a new tab” command to reuse the preview target tab when available. (53242)
  • Update command palette styling. (53117)
  • Improve command palette rendering on smaller viewports. (53661)
  • Tweak existing commands to establish consistency with command language. (53496)
  • End the command palette description with a period in the keyboard shortcut modal. (53635)

Components

  • Button: Remove default border from the destructive button. (53607)
  • LineHeightControl: Allow for more granular control of decimal places. (52902)
  • Snackbar: Design and motion improvements. (53248)
  • Modal:
    • Add headerActions prop to enable buttons or other elements to be injected in the 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.. (53328)
    • Enhance overlay interactions, enabling outside interactions without dismissal. (52994)
  • ProgressBar: Update colors, including gray 300 for track color (53349), theme system accent for indicator color (53347), and the theme accent color variable. (53632).

Block Library

  • Column block:
    • Add a stretch option to block’s vertical alignment options. (53325)
    • Exit upon pressing enter in an empty paragraph at the end of the block. (53311)
  • Classic block: Increase dimensions of modal and allow toggling fullscreen. (53449)
  • Details block:
    • Add accordion and toggle keywords to improve block’s discoverability. (53501)
    • Add layout and block spacing options. (53282)
  • File block: Add block spacing options. (45107)
  • Image block: Add aspect ratio support to lightbox. (52765)
  • Post Content block: Add color controls. (51326)
  • Remove “post” from block titles. (53492)

Patterns

  • Open detail view when duplicating a pattern. (53214)
  • Prevent the “create pattern” modal from closing the block options menu when it is closed. (53707)
  • Skip migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. logs in the patterns screen. (53626)
  • Add missing full stop to string. (53544)

Global Styles

  • Add a reset to default global styles revision (52965) and reduce visibility check from two to one revision (53281).

Media

  • Adjust size of image previews in list view. (53649)
  • Add media previews to list view for gallery and image blocks. (53381)

Site Editor

  • Expose Theme via private APIs (53262), which was necessary to use the progress bar component for the site editor loading screen (53032).

Block Editor

  • Add Opens in new Tab control into Link Preview. (53566)
  • Dependencies: Bump remove-accents to 0.5.0. (53420)
  • Top-align Publish row in the post panel. (53573)
  • Allow layout controls to be disabled per block from 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.. (53378)
  • Fluid typography: Add min and max viewport width configurable options. (53081)

New APIs

Extensibility

  • Make useBlockEditingMode() public. (52094)

Bug Fixes

Commands

  • Style tweaks to fix metrics for resting and no results view in command palette. (53497)
  • Order template results in Site Editor, to fix some templates not displaying. (53286)
  • Don’t allow access to Styles-related pages via the command palette in the hybrid theme. (53123)

Block Library

  • Button block: Avoid losing user changes when the ButtonEdit component re-renders. (53507)
  • Cover block: Fix flickering when inserted in templates and also fix isDark calculation bugs. (53253)
  • Footnotes block:
    • Ensure autosave works and escapes quotes as expected. (53664)
    • Fix accidental override. (53663)
    • Fix recursion into updating attributes when attributes is not an object. (53257)
    • Remove Footnotes when interactive formatting is disabled. (53474)
  • Image block:
    • Fix image stretching with only height. (53443)
    • Don’t render DimensionsTool if it is not resizable. (53181)
    • Fix stretched images constrained by max-width. (53274)
    • Clear aspect ratio when wide aligned. (53439)
    • Change the conditions under which we display the scale control. (53334)
    • Reset height when selecting the original aspect ratio. (53339)
  • Latest Posts block: Make categories handling more defensive to prevent multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site error. (53659)
  • Media & Text block: Fix deprecation with isStackOnMobile default value changed. (49538)
  • Inject theme stylesheet value as template part theme attribute. (53423)
  • Block serialization: Correctly compare default attribute values. (53521)

Block Editor

  • LinkControl: Prevent overflow when the title is a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (53356)
  • Fix broken flows on Safari, including ArrowUp functionality in an empty paragraph (53341) and multi-selection upon shift plus click (53440).
  • Restore focus after dragging out of the block repeatedly. (53429)
  • Avoid merging paragraph into a Columns block. (53508)
  • Prevent vertical arrow keys getting stuck in view. (53454)
  • Set top toolbar size dynamically. (53526)
  • Support container queries in editor CSSCSS Cascading Style Sheets.. (49915)
  • Copy 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.) name on internal paste. (48254)

Site Editor

  • Add missing 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. in HomeTemplateDetails. (53543)
  • Add buttons for block settings and styles in smaller viewport. (53412)
  • Ensure canvas edit mode button occupies the entire frame canvas. (53730)
  • Fix document actions label helper method. (52974)
  • Fix document title alignment in command palette button. (53224)

Post Editor

  • Address crash by moving editor style logic into a hook with useMemo. (53596)
  • Fix support of sticky position in non-iframed post editor. (53540)
  • Correct typo when setting the preview device type to ‘Desktop’. (53409)
  • Avoid returning a different object on every call to getInsertionPoint. (53722)
  • Fix top toolbar in the post editor with custom fields in Safari. (53688)
  • Improve metrics on post publish view buttons. (53245)

Page Content Focus

  • Fix missing Replace button in content-locked Image blocks. (53410)
  • Fix BlockPreview in Template panel when editing a page in the site editor. (53550)
  • Use template.blocks in BlockPreview if it exists. (53611)
  • Make all the ‘Loading’ strings consistent. (52901)
  • Fix title not being copied correctly when duplicating navigation. (53610)
  • Remove “go to” for terms and posts. (53408)

Typography

  • Fallback to default max viewport if layout wide size is fluid. (53551)
  • Fix typo and add tests for fonts install endpoint. (53644)

Patterns

  • Fix Synced Patterns’ color in quick inserter. (53327)
  • Hide pattern previews on hover in inserter. (53331)
  • Ensure it’s possible to delete draft patterns. (53405)
  • Fix pattern creation button in list view dropdown menu. (53562)
  • Prevent sync status overlapping for some languages in patterns. (53243)

Global Styles

  • Fix push-to-global-styles clearing of attributes, border fallbacks, link hover colors, and behaviors. (51621)
  • Preserve block style variations when securing theme json. (53466)

Layout

  • Don’t add root padding to children of flex and grid layout blocks. (53259)
  • Include namespace in layout classname for non-coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. (53404)

Interactivity API

  • Add short-circuit to useSignalEffect. (53358)
  • Add support for underscores and leading dashes in the suffix part of the directive. (53337)
  • Update deepsignal version. (53549)

Components

  • Button: Add :Disabled selector to reset hover color for disabled buttons. (53411)
  • Preferences Modal: Insert path and query args to form before submitting. (53324)

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)

  • Type labels GH Action: Fix accessibility issues in error message. (53371)
  • Add accessible description of current Navigation block state. (53469)
  • Implement accessible version of Navigation overlay preview toggle control. (53462)
  • Search Block: Fix unintended wrapping of button text in “Button only” style. (53373)

Performance

  • Compute presets from theme.json: Skip those without classes or variables. (53574)
  • Switch performance tests to Playwright. (52022)
  • Fix memory leaks in <Iframe>. (53406)
  • get_root_layout_rules: Remove unnecessary call to sanitize_title. (53568)

Experiments

  • Fonts Library: Backend. (52704)
  • Add custom connections inspector control. (53241)
  • Allow contents of Paragraph to be “connected” to a 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. custom fieldCustom Field Custom Field, also referred to as post meta, is a feature in WordPress. It allows users to add additional information when writing a post, eg contributors’ names, auth. WordPress stores this information as metadata. Users can display this meta data by using template tags in their WordPress themes.. (53247)
  • Bootstrap a minimal sync package. (52681)

Documentation

Project Docs

  • Updating lib/PHP README.md. (53614)
  • Add documentation for keyboard shortcut selecting text across multiple blocks. (43164)
  • Add keyboard shortcut selecting text across multiple blocks on Windows. (53625)
  • Docs/Gutenberg release process – Better table of contents. (53394)
  • Add the auto-generated commands store documentation. (52562)

Getting Started

  • Developer Environment: Refer to Node 16 instead of 14. (53523)
  • Create Block:
    • Fix typo in finishing.md. (53609)
    • Fix outdated specification in the “Anatomy of a Block”. (53581)

How To Guides

  • Block Tutorial:
    • Adds import from @wordpress/i18n in code example. (53504)
    • Adds package.json configuration instructions to tutorial. (53689)
  • Building a Custom Block Editor: Consolidate and update the guide. (53159)
  • Curating the Editor Experience: Include starter patterns for templates. (53398)

Components

  • Popover: Fix 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. story and add test. (53182)
  • BlockCaption: Add README for component. (52535)
  • useSetting: Add README for component. (53162)
  • SelectControl: Update JSDoc. (53379)
  • Card: Update Card component document. (53172)
  • MenuGroup: Add Storybook stories. (53090)
  • Edit Post: Update “PluginDocumentSettingPanel” documentation. (53393)
  • Interface: Fix “complimentary” typo with “complementary”. (53413)

Interactivity API

  • Revamp of README to include API Reference among other indications. (53385)
  • Add missing section in ToC and minor improvements to Getting Started Guide. (53362)
  • Update Interactivity API package README with clear references to documentation. (53388)
  • Add code requirements to Interactivity API documentation. (53342)
  • Add JSDoc comments to the public API. (52469)

Packages

  • Create Block: Update npx commands in README.md. (47150)
  • Data: Add changelog entry for the latest useSelect enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature.. (53685)
  • Style Engine: Update documentation for css_var. (53710)

Code Quality

  • Remove @types/classnames deprecated package. (53478)
  • Remove gutenberg_initialize_editor. (53527)
  • Update package-lock.json to match 16.4.0 version number. (53499)

Block Library

  • Button block: Replace the isSmall deprecated prop in the WidthPanel. (53472)
  • Details block: Remove unnecessary comment attributes. (51610)
  • Footnotes block:
    • Add some test coverage for footnotes logic in useEntityBlockEditor. (53376)
    • Checking type before using count(). (53660)
  • LinkControl/LinkUI: Remove unused className prop. (53348)
  • Remove unneeded block.json name-only imports. (53677)
  • Template parts: Return a stable reference for the defined ‘area’. (53675)

Components

  • ESLint: Fix all storybook/prefer-pascal-case warnings. (53683)
  • Remove unused components from /ui. (52953)
  • MenuItem: Refactor to TypeScript. (53132)
  • Move accent colors to theme context. (53631)
  • Interface: Fix ESLint warnings. (53456)
  • Plugins: Introduce the usePluginContext hook. (53291)
  • Remove effect dep in Link Control. (53421)

Data Layer

  • Data: Warn if the useSelect hook returns different values when called with the same state and parameters. (53666)

Site Editor

  • Remove unnecessary as prop from SiteHub component. (53372)
  • Create patterns package and share the create pattern modal between post editor and site editor. (53161)

Post Editor

  • Migrate PostTypeSupportCheck usages from withSelect to 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.. (53330)
  • UnsavedChangesWarning: Don’t return a function from ‘mapSelect’. (53672)
  • Replace HoCs with hooks in:
    • PluginDocumentSettingPanel (53290)
    • PostPendingStatusCheck (53389)
    • PostPendingStatus (53387)
  • Replace withPluginContext in PluginPostPublishPanel (53302) and PluginPrePublishPanel (53304).
  • Block previews: Memoize example blocks. (53640)

Global Styles

  • Try: Bundle WP_REST_Global_Styles_Controller class instead of inheriting per WordPress version. (53618)
  • Remove empty usages of BlockPreviewPanel. (53681)

Block Editor

  • Remove Firefox work-around to type Space in RichText components inside button/summary. (53014)
  • Rich text: Small perf improvement for selection syncing. (53583)
  • Auto-inserting blocks: Minor fixes to address feedback. (53183)

Tools

Project Management

  • Remove automation that checks-in ANY issue without activity in 180 days. (53390)

Build Tooling

  • Update minimal node version to 16 and npm to 8. (53426)
  • Update to TypeScript 5.1. (52621)
  • Update Lerna to 7.1.4. (53515)
  • Update Storybook to v7. (53520)
  • Update npm-package-json-lint to v6. (53636)
  • Update mkdirp dependency. (53529)
  • ESLint 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: Bring JSDoc plugin to the latest version. (53629)
  • Add Storybook TypesSript plugin for compatibility with TypeScript 5. (53445)
  • Update the “update plugin version” workflow step so that it also updates the nested package version for Gutenberg. (53503)
  • Fix wp-scripts watch mode failing when block.json contains malformed JSON. (51971)
  • Remove deprecated stable deep dependency. (53630)
  • Add some missing internal peer dependencies. (53275)
  • Add some missing package dependencies. (41486)

Testing

  • Migrate ‘Block variations’ end-to-end tests to Playwright. (53266)
  • Interactivity API: Add missing tests for bodyinit and on directives. (52952)
  • Cover block: Add integration tests to check isDark settings. (53256)
  • Writing flow: Add end-to-end tests for webkit and firefox. (53458)
  • Add tests for fluid layout and typography. (53554)
  • Block editor: Webkit e2e: Attempt to fix shift+click test. (53564)
  • end-to-end Storybook: Fix for Storybook v7. (53658)
  • Dependencies: Update @testing-library/react to v14. (53682)
  • Multi-select: Restore pre-Playwright migration test for failed selection attempt. (53418)

First time contributors

The following PRs were merged by first time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @alexstine @Aljullu @andrewserong @annezazu @anomiex @artemiomorales @atachibana @bangank36 @behoney @bengreeley @c4rl0sbr4v0 @carolinan @DAreRodz @dcalhoun @derekblank @doughamlin @draganescu @dsas @ducksblock @ellatrix @fabiankaegy @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @ingeniumed @jameskoster @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @Mamaduka @matiasbenedetto @mburridge @michalczaplinski @mikachan @mirka @ndiego @noahtallen @noisysocks @oandregal @ockham @pbking @priethor @ramonjd @richtabor @rtro92 @scruffian @SiobhyB @stokesman @swissspidy @t-hamano @tellthemachines @tjcafferkey @tomjn @tyxla @WunderBart @youknowriad

Props to @joen for the visual assets; @rmartinezduque, @richtabor, @andraganescu, and @ramonopoly for the copy review; and @priethor, @welcher, @bernhard-reiter, @mikachan, and @karmatosed for the support with this release.

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