What’s new in Gutenberg 16.6? (06 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 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.6 has been released and is available for download!

This latest release comes packed with improvements and bugfixes, including an enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. to the List View in the post editor, introducing a horizontal scrollbar for heavily nested list views, a fix for the Cover 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. on Safari on iPad, addressing an issue where images with a “Fixed background” were zoomed in excessively, and more!

Table of Contents

  1. 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-inserted blocks.
  2. Captured toolbars.
  3. Changelog.

Block 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., formerly known as Auto-inserted blocks

On activation, plugins are now equipped with the capability to auto-insert blocks, enhancing the integration and automation between plugins and the Gutenberg editor. Early versions of this experiment were called Auto-inserted blocks, but after some discussion, they have now been dubbed Block hooks. (#52969, #54029, #54024, #54147)

Captured toolbars for an easier editing experience

Toolbars for child blocks are now seamlessly attached to their parent blocks, offering a more intuitive and organized editing experience. This feature is currently supported for Navigation, List, and Quote blocks. (#53699, #53697)

Other Notable Highlights:

  • Make mid size parameter settable for Query Pagination block. (#51216)
  • Add keyboard shortcut for duplicating blocks. (#53559)
  • Add toggle list view command in site editor. (53983)

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.

  • Add Slot and Fill directives. (53958)
  • Query block: Client-side pagination. (53812)
  • Update data-wp-bind directive logic. (54003)
  • Query block: Move “Enhance pagination” toggle under Settings. (54198)

Enhancements

  • Bundle ObserveTyping within the BlockList component. (53875)
  • Default appender: Hide the dashed indicator until ancestor is selected. (53761)
  • Register the block editor keyboard shortcuts automatically when using BlockEditorProvider. (53910)
  • [Commands]: Add toggle list view command in site editor. (53983)

Components

  • Bundle SlotFillProvider within BlockEditorProvider. (53940)
  • Make the Popover.Slot optional. (53889)
  • Popover: Update @floating-ui to latest version, remove custom fix for 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. positioning and scaling. (46845)
  • AlignmentMatrixControl: Replace act() with userEvent. (53703)
  • ProgressBar: Add transition to determinate indicator. (53877)

Block Library

  • Blocks: Move bootstrapped block types to Redux state. (53807)
  • Capture toolbars in navigation block. (53697)
  • Content Block: Change placeholder and end-to-end test to refer to Content block. (53902)
  • Make mid size parameter settable for Query Pagination block. (51216)

Block Editor

  • Capture toolbars in quote block. (53699)
  • Improve writing flow for lists by capturing list item toolbars. (53306)
  • RichTextValue: Typescript Adjustment. (54002)

Typography

  • Font Face: Prepare for merge into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (53858)
  • Renames “Fonts Library” to “Font Library”. (53780)

Post Editor

  • Edit Post: Use hooks instead of HoCs in TaxonomyPanel. (53773)

List View

  • Add keyboard shortcut for duplicating blocks. (53559)

Patterns

New APIs

Interactivity API

  • Router with region-based client-side navigation. (53733)

Bug Fixes

  • Add missing aria roles for block locking toolbar and menu buttons. (53734)
  • Block Editor: Fix cleanup in the ‘useNavModeExit’ hook. (53795)
  • Command Palette: Fix crash on block-related commands. (53923)
  • Date: Add relative time translations for moment.js. (53931)
  • Date: Update translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. domains for strings to be translatable. (53995)
  • Iframe: Set character encoding to utf-8. (53519)
  • Replace horizontal ellipsis icon with vertical ellipsis icon. (52731)
  • Toggle Distraction free mode mode based on compatibility. (54030)
  • Warning: Introduce SCRIPT_DEBUG to make the package compatible with webpack 5. (50122)
  • [Commands]: Fix move to command condition for registering. (54049)
  • [Commands]: Fix block editor commands availability. (53994)
  • [Format library]: Fix language popover position. (53841)

Block Library

  • Add init.js module for the Footnotes block. (53763)
  • Adding center align css for social icon issue. (43120)
  • Cover block: Fix exception when adding video background. (53961)
  • List View: Allow replacing template part when a block isn’t selected. (53757)
  • Post Navigation Link: Remove unnecessary space between arrows and label. (53572)
  • Search block: Fix width input field. (53952)
  • Simplify check for no posts in query-no-results block. (53772)
  • Site Logo: Remove line-height for the anchor element. (53909)

Components

  • Always render the fallback Popover anchor within the Popover’s parent element. (53982)
  • Fix the cleanup method for SandBox. (53796)
  • PaletteEdit: Fix component height. (54000)

Post Editor

  • Edit Post: Fix tab border conflicts in the Document Overview panel. (53711)
  • EditPostPreferencesModal: Fix intermittently failing tests. (53814)
  • getInsertionPoint: Fix type check for the state value. (53793)

npm Packages

  • Workflow: Run Learn directly from 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 when publishing to npm targeting WP core. (53762)
  • Workflows: Fix issues with the npm publishing workflow when using locally. (53565)

Themes

  • Command Palette: Proper handling of page/post links in all themes. (53718)
  • Fix 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. bugs by correctly relying on the main query and removing problematic workaround. (49904)

Block Editor

  • Fix: Indicator style when block moving mode. (53972)

Icons

  • Fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. namespaces. (53955)

Patterns

  • Disable the preview option button when editing. (53913)

Global Styles

  • Gallery: Re-enable block spacing at block level while still hiding in global styles. (53900)

Layout

  • BlockList: Ensure element styles (and svg) are always appended at the end of the document. (53859)

Interactivity API

  • Add “supports.interactivity” to Image block. (53850)

Style Variations

  • Block Styles: Fix misplaced preview popover on RTL site. (53726)

List View

  • Recalculate window list when expanded state changes (fix logic for long nested lists). (53716)

Widgets Editor

  • Block 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.: Fix content cutoff in the keyboard shortcut modal. (53638)

Rich Text

  • Fix cleanup in useRemoveBrowserShortcuts. (52225)

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)

  • Edit site: Add missing label to post status password protected input field. (52885)
  • [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)] Fix: Aria-haspop, aria-expanded attributes on the link format button. (53691)

Site Editor

  • Add missing aria roles to the ‘Create template part’ menu item. (53754)
  • Unify the delete button style in the dropdown menu with red. (52597)

Block Library

  • Add missing aria roles to the ‘Replace template part’ menu item. (53755)

Patterns

  • Add missing aria roles to the ‘Create pattern’ menu item. (53739)

List View

  • [a11y] Fix: Aria-haspop and aria-expanded attributes on list view button. (53693)

Block Editor

  • [a11y] Fix: Aria-haspop and aria-expanded attributes on the inserter button. (53692)

Performance

  • Revert “Switch performance tests to Playwright (#52022)”. (53741)
  • StartPageOptions: Load and parse patterns only after establishing the need for them. (53673)
  • Switch performance tests to Playwright: Take 2. (53768)

Experiments

Block API

  • Auto-inserting blocks: Add block inspector panel. (52969)
  • – Auto-inserting blocks: Add block icon to block inspector panel toggles. (54029)
  • Auto-inserting blocks: Remove toggle if block is present elsewhere. (54024)
  • Rename “auto inserting blocks” to “block hooks”. (54147)

Documentation

  • Add juanmaguitar as codeowner of /packages/interactivity/docs. (53845)
  • Add new How-to Guide for enqueueing assets in the Editor. (53828)
  • Adds example for useBlockProps hook. (53646)
  • Adds explanatory text to view.js template. (53870)
  • Clarification for parent and ancestor hierarchical relationships. (53855)
  • Docs: Extend the information about using render with block.json. (53973)
  • Docs: Remove duplicate sections from FAQ page. (53830)
  • Document the naming convention for block-library PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher functions. (53777)
  • Fix ‘lerna’ links in the release documentation. (53770)
  • Fix typo in code sample for Interactivity API. (53916)
  • MenuItem: Add Storybook stories. (53613)
  • Shortcut: Add Storybook stories. (53627)
  • Storybook: Add back subcomponents to props table. (53751)
  • Storybook: Fix default source visibility. (53749)
  • Storybook: Show main story before description. (53753)
  • Update local instructions on the dev env documentation. (53924)
  • Update the Block Variations API doc. (53817)
  • Update to node 16 and npm 8 in the getting started with code contribution doc. (53912)
  • docs: Fix report-flaky-test link. (53848)

Code Quality

  • Components: Update Popover per reviews. (53907)
  • Edit Site: Rename CanvasSpinner to CanvasLoader. (53728)
  • Enforce valid function names in the packages/block-library/src//.php files. (53438)
  • Fonts Library: Update properties name from snake case to camel case to match the rest of the properties. (53746)

Block API

  • Auto-inserting blocks: Remove obsolete TODO, fix REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/. field description. (54208)

Post Editor

  • Editor: Fix the ‘useSelect’ warning in the ‘useIsDirty’ hook. (53759)
  • Fix browser console error when changing device preview mode. (53969)
  • Refactor latest content selectors in ‘CopyContentMenuItem’ components. (53676)

Components

  • Remove unnecessary utils. (53679)
  • SlotFill: Refactor <Slot bubblesVirtually />. (53272)
  • Storybook: Update TypeScript types. (53748)

List View

  • Fix warning error when the gallery block has the same image URLs. (53809)

Typography

  • Font Face API: Use gutenberg_get_global_settings instead of private API. (53805)

Tools

  • Try: Change PR label enforcer automation not to work on draft PRs by default. (53417)

Testing

  • Attempt to fix intermittent end-to-end test failure. (53905)
  • Fonts Library: Test improvements. (53702)
  • Make fonts test files use Core approach. (53856)
  • Migrate shortcut help end-to-end tests to Playwright. (53832)
  • Relocates Font Face and Fonts Library PHP files into Core’s fonts directory. (53747)
  • ColorPalette: Refine test query. (53704)
  • end-to-end Playwright Utils: Automatically detect canvas type. (53744)
  • test: Automate mobile editor tests. (53991)

Build Tooling

  • Update Jest to latest version, and use optimized JSDOM. (53736)

Plugin

  • 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. themes is_block_theme collection param from core. (53846)

First time contributors

The following PRs were merged by first time contributors:

  • @JEverhart383: Fix typo in code sample for Interactivity API. (53916)
  • @krokodok: Make mid size parameter settable for Query Pagination block. (51216)
  • @mklute101: Update local instructions on the dev env documentation. (53924)

Contributors

The following contributors merged PRs in this release:

@afercia @andrewserong @anton-vlasenko @bangank36 @brookewp @ciampo @colorful-tones @DAreRodz @dcalhoun @derekblank @ellatrix @felixarntz @geriux @glendaviesnz @gziolo @hellofromtonya @jasmussen @jblz @JEverhart383 @jordesign @jorgefilipecosta @jsnajdr @juanmaguitar @krokodok @luisherranz @Mamaduka @margolisj @matiasbenedetto @mburridge @mirka @mklute101 @mokagio @ndiego @ntsekouras @oandregal @ocean90 @ockham @priethor @ramonjd @richtabor @SiobhyB @Smit2808 @stokesman @t-hamano @torounit @tyxla @walbo @WunderBart @youknowriad

Many thanks to @jameskoster for the release assets, @annezazu and @priethorfor the general support and help collecting highlights, and @jeffikus for the copy check!

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