What’s new in Gutenberg 17.0? (9 November)

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

Gutenberg 17.0 has been released and is available for download!

WordPress 6.4 “Shirley” became available earlier this week. Despite this significant milestone, the Gutenberg 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 continues to iterate with a new version: Gutenberg 17.0. This release focuses on maintenance with improvements in performance and 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), along with a few new features.

  1. Command Palette: improved contextual suggestions when editing patterns
  2. DropdownMenu: a glimpse into the next-gen WordPress components
  3. LinkControl visual cues
  4. Iterating on Accessibility and Performance
  5. Changelog
  6. First-time contributors
  7. Full contributor list

Command Palette: improved contextual suggestions when editing patterns

The popular Command Palette keeps getting better! Since this release, editing patterns inside the site editor will suggest pattern-related commands that adjust better to the context, such as renaming and duplicating the pattern. Small quality-of-life changes like this are what make the Command Palette a joy to use, and future iterations will surely bring us many more improvements in this direction!

As part of the ongoing efforts to refine the components that power the 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. Editor, Gutenberg 17.0 brings a new, alternative implementation of the DropdownMenu component based on the Ariakit open-source library. This implementation, although still experimental, offers a good glimpse at what the future of WordPress components holds.

As a reminder, you can check and play with this and other components in the Components Storybook!

Additional visual cues for LinkControl

When searching through the LinkControl, new Block and Home icons are added next to results related to the home and front pages, respectively. These visual cues intend to make finding what you’re looking for easier.

Iterating on Accessibility and Performance

As usual, this Gutenberg release provides a few iterative performance and accessibility improvements.

On the accessibility side of things, it’s worth noting the Autocomplete Voiceover now announces suggestions, among other 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) enhancements to the Navigation block and 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. Regarding performance, some controls like duotone, layout, and alignment have been optimized.

Changelog

Full changelog available here

Enhancements

  • Add blogblog (versus network, site) icon to the blog home page in LinkControl search results. (55610)
  • Add home icon to the front page in LinkControl results. (55606)

Block Theme Preview

  • Block Theme Preview: Display loading state when activating. (55658)

Block Toolbar

  • Improve toolbar button focus visual. (55523)

Components

  • Add new ariakit-based DropdownMenu component. (54939)
  • Update InputControl and SelectControl default heights. (55490)
  • Update ariakit to version 0.3.5. (55365)

Block Editor

  • Adjust the padding of the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. item to make it visually balanced. (55598)

Patterns

  • Suggest commands when editing pattern in site editor. (55332)

Bug Fixes

  • Fix autocomplete trigger character detection. (55301)
  • Fix typo in FontCollection. (55439)

Block Editor

  • Block Editor: Avoid rendering empty Slot for block alignments. (55689)
  • Block Example: Avoid a crash when block is not registered. (55686)

Command Palette

  • Command Palette: Fix a crash when transform to a block without icon. (55676)
  • Fix: LinkControl on site editor does not show font page and post page indication. (55694)
  • Fix: LinkControl on widgets editor does not show font page and post page indication. (55732)

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.

  • Fix: Update page title when using enhanced pagination in query loop. (55446)

Block Library

  • Fix: Post terms block: Missing options for prefix and suffix when the…. (55726)
  • Ensure Term Description block is registered in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (55669)
  • Fix #55679 missing space in the string. (55682)
  • Image block: Wrap images with hrefs in an A 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.). (55470)
  • Image: Improve focus management in lightbox. (55428)
  • Image: Update default fullscreen icon for lightbox trigger. (55463)
  • Navigation block: Remove browser default padding from the two submenu buttons. (50943)
  • Query Loop: Disallow “enhanced pagination” with core blocks that may contain third-party blocks. (55539)
  • Query block enhanced pagination: Detect inner plugin blocks during render. (55714)
  • Query: Require queryId for enhanced pagination to prevent PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notices. (55720)
  • Update label for lightbox editor UIUI User interface. (55724)
  • [Block] File: Fix embedded PDF files in Safari. (55667)

Patterns

  • Fix 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. with authors and contributors not seeing user pattern categories. (55553)
  • Fix pattern category renaming causing potential duplicate categories. (55607)

Post Editor

  • Edit Post: Fix revision button misalignment. (55659)
  • Preferences modal: Fix the position of sticky heading when blocks are hidden. (55456)
  • Fix: Add __next40pxDefaultSize to author select in PostAuthor. (55597)

Site Editor

  • Fix the ‘Slug’ display for draft pages. (55774)

Data Views

  • List all users in author 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.. (55723)
  • Don’t register dataviews postype and 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. if experiment is disabled. (55743)

Design Tools

  • Remove default dimensions controls from core/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.. (55596)

Interactivity API

  • Fix server processing of an empty data-wp-context directive. (55482)
  • Make duotone support compatible with enhanced pagination. (55415)
  • Make layout support compatible with enhanced pagination. (55416)

Global Styles

  • Fix duotone not showing in site editor style block level styles. (55361)

Accessibility

Block Library

  • Navigation block: Change aria-haspopup to dialog. (55466)

Components

  • Autocomplete: Fix Voiceover not announcing suggestions. (54902)

Interactivity API

  • Query Loop: Update modal role and focus first element. (54507)

Performance

  • Add useSettings hook for reading multiple settings at once. (55337)
  • Block Editor: Optimize ‘Layout’ controls. (55754)
  • Block Editor: Optimize ‘anchor’ inspector controls. (55721)
  • Block Editor: Optimize ‘duotone’ controls. (55753)
  • Block Editor: Optimize alignment toolbar controls. (55692)
  • Start logging site editor metrics in codevitals. (55759)
  • useAvailableAlignments: Avoid useSelect subscription when alignments array is empty. (55449)

Experiments

Data Views

  • TrashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days. Data View: Use trash icon. (55771)
  • Add quick actions. (55488)
  • Update icons and design tweaks. (55391)
  • Add ability to persist dataviews on the database. (55465)
  • Extract search from filters. (55722)
  • Limit users to those who have published pages. (55455)
  • List all pages, not only those with publish and draft statuses. (55476)
  • Add: Default readonly views to dataviews. (55740)
  • Add: Possibility to tree shake DataViewsProvider. (55641)

Form block

  • Blocks: Capitalize title and end the description with a period. (55728)
  • Update copy. (55468)
  • Allow using groups and columns inside the experimental form block. (55758)

Collaborative Editing

  • Remove dangling comma causing PHPUnit failures. (55494)
  • [Try] HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. based PHP signaling server for colaborative editing. (53922)

Documentation

  • Adds a few grammar fixes to block-registration documentation. (55663)
  • Block 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. schema: Add heading/button key to color definition. (55675)
  • DataViews: Document data and filters. (55504)
  • Docs: Fix some typos. (55654)
  • Docs: 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. Block editor handbook – create-block before wp-scripts. (55534)
  • Fix: Typos inside /docs. (55472)
  • Scripts: Fix typo in readme. (55531)
  • Update links to point to getting started guides. (55479)
  • docs: Fix end-to-end test documentation formatting. (55631)

Code Quality

  • Use PostCSS + PostCSS plugins for style transformation. (49521)
  • CS: Remove redundant ignore annotations. (55615)
  • Chore: Fix: Potential access to properties of undefined object. (55697)
  • Fix: Add missing defaultStatuses on PagePages. (55761)
  • Resizeable box (for resizing cover block) should use after block popover slot. (55784)
  • Update: Code quality: Use for each instead of map. (55798)
  • Update: Remove path awareness from data-views specific code. (55695)
  • Update: Remove useless self assignment. (55696)
  • 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. updates from Core during the 6.4 release cycle. (55703)

Data Views

  • DataViews: Iterate on filter’s API. (55440)
  • DataViews: Pass search filter as global, unattached from fields. (55475)
  • DataViews: Remove string from pages sidebar. (55510)
  • Rename TextFilter to Search. (55731)
  • Remove unused file dataview context. (55775)

Block Library

  • Pattern: Unlock the private hook outside the component. (55792)

Patterns

  • Change pattern category taxonomy public param to false. (55748)

Tools

  • Replace ‘npx’ with ‘node’ on test-playwright.js file’. (55616)
  • wp-env: Fix errors which prevent it from working without internet. (53547)
  • [create-block] Add ABSPATH check. (55533)

Testing

  • E2E: Revert typing delay on the autocomplete mentions test. (55132)
  • Fix flaky ‘Switch to Draft’ action in Preview end-to-end tests. (55772)
  • Migrate ‘Site Title block’ end-to-end tests to Playwright. (55704)
  • Migrate ‘block context’ end-to-end tests to Playwright. (55793)
  • Performance tests: Fix canvas locator timeout. (55441)
  • Scripts: Fix default Playwright configuration. (55453)

First-time contributors

The following PRs were merged by first time contributors:

Full contributor list

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @alexstine @aristath @artemiomorales @arthur791004 @aurooba @c4rl0sbr4v0 @carolinan @ciampo @DAreRodz @dcalhoun @derekblank @dmsnell @fluiddot @garibiza @geriux @glendaviesnz @iamsadi22 @jameskoster @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @KevinBatdorf @luisherranz @MaggieCabrera @Mamaduka @noahtallen @ntsekouras @oandregal @parikshit-adhikari @peterwilsoncc @ramonjd @richtabor @SergeyBiryukov @SiobhyB @Soean @strarsis @swissspidy @t-hamano @talldan @WunderBart @youknowriad


Props to @saxonafletcher for designing assets for this post and @richtabor for proofreading.

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