What’s new in Gutenberg 15.9? (31 May)

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


What's New In Gutenberg 15.9 sentence. Half in blue, half in white with a dark background.

Gutenberg 15.9 has been released and is available for download!

This release includes 171 PRs from 56 contributors, and includes several exciting features such as an improved Site Editor user experience and a new command tool with a pending name.

Command tool (name TBD)

You can now use the new Command tool feature!

To access it, simply open the Site Editor and use the keyboard shortcut Cmd+k on Mac or Ctrl+k on Windows. Once opened, you will discover a range of commands that enable swift navigation, content creation, and more.

You can also add your own commands to the interface, the documentation is available here.

Your feedback is vital in helping us refine and improve the Command tool. We have a feedback request available on the Make blog, and we would greatly appreciate any input you can provide.

Command tool shown on the Site Editor.

Enhancements to the Site Editor Experience

The Site Editor has been updated with features that improve the user experience:

Preview at any size

You now have the ability to resize your site editor, allowing you to preview how it will appear on smaller screens such as mobile devices.

Improved Drag and Drop

When moving blocks, you will now see a visual cue that clearly indicates where 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. will be dropped, particularly in empty groups. This enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. streamlines the process, making it easier and more intuitive to rearrange your site’s layout.

Site view improvements

You can now access style variations and all navigation menus of your site within this mode. This enhancement simplifies the process of switching between different styles and menus, offering a more convenient interface for making such adjustments.

Other Notable Highlights

There are some improvements too that are worthy to mention like:

  • An 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. that allows inserter items to be prioritized. (50510)
  • 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) through arrow keys is better in some input types. (43667)
  • Keyboard focus improvements for accessibility. (50384, 50349, 50577, 50785)

Not to mention all the bugs fixed that you can check in the changelog below.

Changelog

Enhancements

Block Library

  • Add block variations transformation in block switcher. (50139)
  • Code block: Add wide align support. (50710)
  • Post Title edit: Adjust the logic, so it avoids unnecessary OPTIONS requests. (49839)
  • Pattern block: Add experimental flag and syncStatus attrib to allow testing of partial syncing. (50533)
  • Pattern block: Add slug as classname to pattern block wrapper. (50641)
  • Removes the Post Content block from the inserter in the post editor. (50620)
  • Navigation: Handle empty menus in Navigation Browse Mode. (50870)
  • Navigation: browse mode list all Navigation Menus. (50840)
  • Navigation: remove all edit functionality in Browse Mode. (50788)
  • Navigation: Use the ListView in the Navigation block inspector controls. (49417)
  • Navigation: Respect showAppender when there are no items in list view. (50711)

Command tool

  • Command tool available without the experimental flag. (50781)
  • Add contextual commands. (50543)
  • Marks the commands APIs as public. (50691)
  • Update the document title in the site editor to open the command tool. (50369)

Components

  • Add an outline when the color picker select box is focused. (50609)
  • Button: Update disabled state to be without background. (50496)
  • Update tooltip colors. (50792)

Site Editor

  • Editor canvas container: Include resizeable 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. in component. (50682)
  • Snackbar: Make sure only one template deleted displays at once. (50625)
  • Snackbar: Simplify the template revert. (50626)
    (#50369))
  • Update the add template menu. (50595)
  • Browse Mode: Add snackbar notices. (50794)
  • Site Editor navigation: Add corresponding area icon to template part menu items. (50791)
  • Update frame resizing. (49910)
  • Always show the Styles navigation item. (50573)
  • Sort template parts by type in navigation screen. (50841)
  • Site editor: Update custom post types with _edit_link. (50563)

Interactivity API

  • Image: Add lightbox using directives. (50373)
  • File: Add experimental integration with Interactivity API. (50377)
  • Support negation operator in selectors. (50732)

Block Editor

  • Add lang and dir attributes to text-formatting tools. (49985)
  • Use bdo element when defining the language of some text. (50632)
  • Block inserter: Improve alignment of block inserter search and close icons. (50439)
  • Show visual cue when dragging over empty group block. (50826)
  • Add ability to prevent editing blocks using useBlockEditingMode(). (50643)
  • Remove unwrap from transforms and add ungroup to more blocks. (50385)
  • Add new API to allow inserter items to be prioritised. (50510)
  • Integrate prioritizedInserterBlocks API to slash inserter. (50658)

Global Styles

  • Custom CSSCSS Cascading Style Sheets.: Force display of in custom css input boxes to LTR. (50768)
  • Styles Navigation Screen: Add Style Book. (50566)

Data Layer

  • Data: Improve hasResolvingSelectors redux metadata selector. (50865)

List View

  • Remove fade in/out animation for block settings menu icon button. (50823)

Full Site Editing

  • Template editing: Improve revert notices. (50302)
  • Template pattern modal: Remove internal modal classnames. (50655)
  • Library: Rename template parts to library. (50769)

Accessibility

  • Modals: Update the Cancel action’s button design. (50544)
  • Writing flow: Improve keyboard navigation on certain input types. (43667)

Icons

  • Add new HeadingLevel icons. (50856)
  • Smaller external link icon. (50728)

Bug Fixes

Block Library

  • Ensure multiple pattern blocks with the same slug each create unique blocks. (50629)
  • Fix inconsistent Link UIUI User interface in Nav block list view editor. (50774)
  • Pattern block: Update frontend render code to match the new version of syncStatus attrib. (50646)
  • Revert “Browse Mode: Add snackbar notices (#50794)”. (50937)
  • Update rel and title labels for navigation and submenu links. (50214)
  • Social Link: Remove block on DELETE if empty URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (50903)
  • Social Link: Add color classes so icon colors correctly reflect changes in Global Styles. (51020)
  • Navigation: Duplicate LeafMoreMenu into the navigation block and the global 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. navigation. (50489)
  • Post Comments From: Prevent hidden input fields from being focusable in Safari. (50834)
  • Image: Improve the image block lightbox translations, labelling, and escaping. (50962)

Accessibility

  • Fix Multiple Tooltips from Focus Toolbar Shortcut on Site Editor. (50349)
  • Fix accessibility issues navigation block experiment. (50786)
  • Fix accessibility of the Classic block modal dialog. (50384)
  • Fix labelling, description, and focus style of the block transform to pattern previews. (50577)
  • ToggleGroupControl: Fix focus and selected style to support Windows High Contrast mode. (50785)

Global Styles

  • Add back the global styles logic that forces the solid border when color or width applied. (50498)
  • Dimensions Panel: Fix resetting of axial spacing controls. (50654)
  • Global Styles: Enable deep linking to the selected block only in the Blocks screen. (50708)
  • Global styles revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.: Highlight currently-loaded revision. (50725)
  • Better error message when 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. styles use a duotone preset not in settings. (50714)
  • Fix custom duotone filters in frontend. (50678)

Commands Tool

  • Commands Tool: Fix contextual commands selectors. (50829)
  • Commands Tool: Add searchLabel property to commands. (50663)

Components

  • Add transparent outline to input control BackdropUI focus style. (50772)
  • Update border and focus style of the Input selector in ColorPicker Component. (50703)

Site Editor

  • Fix custom template creation regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.. (50797)
  • Remove the loader from sidebar navigation screen. (50326)
  • Update site editor sidebar alignment. (50561)
  • Fix useEditedEntityRecord() loading state. (50730)
  • Fix width of Template Parts view. (50836)
  • Process template part shortcodes before blocks. (50801)
  • Convert device type margin styles into non-shorthand syntax. (50441)
  • Browse mode Navigation: Fix broken submenu items. (50551)

Inspector Controls

  • Template revisions: Require 2 revisions before showing the revisions UI. (50762)

Block Editor

  • List block: Fix merging nested list into paragraph. (50634)
  • Add grab cursor style for Block mover drag handle button. (50808)
  • Fix gutenberg_get_block_editor_settings overriding other 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.. (50760)
  • Iframe: Use src instead of srcDoc. (50875)
  • Don’t use global ‘select’ in the Behaviors controls component. (51028)
  • Lightbox UI appearing with interactivity experiment disabled. (51025)
  • Move “No Behaviors” to be the first option in the list of behaviors. (50979)
  • Revert “Browse Mode: Add snackbar notices. (50937)

Rich Text

  • File block: Fix editing of empty file name. (50607)

List View

  • Ensure settings menu is visible when focused. (50572)

Layout

  • Navigation: Fix warning when stretch justification is used. (50568)

Tests

  • Fix release performance tests. (50699)

Patterns

  • Library: Revert description change until new grid view lands. (51039)

Performance

Block Library

  • Nav block: Improve loading UXUX User experience by preloading Navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. requests. (48683)
  • Inner blocks: Reduce tree depth to improve performance. (50447)

Site Editor

  • Edit Site: Optimize loading useSelect call. (50546)

Experiments

Components

  • Add new experimental version of DropdownMenu. (49473)
  • Behaviors UI. (49972)

Documentation

  • Add link for more details about block variations’ example. (50909)
  • Components: Back-add changelog for TypeScript types. (50881)
  • Add parent and experimental status to the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block reference. (48269)
  • Fix syntax highlighting of curating the editor experience guide. (50902)
  • Minor updates to theme.json schema pages. (50742)
  • Update PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher docblockdocblock (phpdoc, xref, inline docs) for WP_Theme_JSON_Gutenberg::Get_property_value. (50527)
  • Mobile app: Fix change log typo. (50737)
  • Icons: Update README.md to include a link to the documentation. (50606)

Code Quality

Block Library

  • Cover: Unlock private APIs outside of the component. (50686)
  • Fix column block categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (46048)
  • Freeform: Move modal styles to the correct file. (50858)
  • Navigation: Remove the check for draft navigation menus from the UnsavedInnerBlocks component. (49161)
  • Navigation: Unlock private APIs outside of the component. (50509)
  • Remove OffCanvasEditor. (50705)
  • Comments: Replace get_comments() with get_comments_number(). (50798)
  • Lodash: Remove from Gallery block. (50591)
  • Lodash: Remove from Image block. (50592)
  • Lodash: Remove from Latest Posts block. (50593)
  • Lodash: Remove from Media & Text block. (50587)
  • Lodash: Remove from template part block. (50586)
  • Lodash: Remove unnecessary mock from Buttons tests. (50588)

Block Editor

  • Block Editor: Remove unused ‘useIsDimensionsSupportValid’ method. (50735)
  • Block styles: Remove unused prop from inserter preview component. (50622)

Post Editor

  • Edit Post: Unlock useShouldContextualToolbarShow outside of the component. (50612)
  • FlatTermSelector: Fix the ‘useSelect’ missing dependency. (50872)

Site Editor

  • Use the keyboard shortcuts package for the title bar. (50873)
  • Simplify variation selectors. (50687)
  • Unlock private APIs outside of the component. (50534)
  • Remove unused ‘NavigateToLink’ component. (50908)
  • Move gutenberg_get_remote_theme_patterns. (50597)

Interactivity API

  • Polish experimental navigation block. (50670)

Components

  • DropdownMenu: Refactor to TypeScript. (50187)

npm Packages

  • chore: Update memize to v2. (50172)

Global Styles

  • Global styles revisions: Remove unused private var. (50763)
  • Introduce prepend_to_selector() to avoid additional if checks and follow single responsibility principle. (50266)
  • Move gutenberg_get_global_styles function. (50596)

Tools

Testing

  • Combine frontend navigation Page list block tests into one test to speed up end-to-end tests. (50681)
  • Command center: Enable end-to-end tests. (50833)
  • Create pages before navigation tests requiring link control to find page results. (50680)
  • Enable iframe-inline-styles end-to-end test. (50548)
  • Fix coding-standards issues. (50656)
  • Fix flaky media inserter drag-and-dropping end-to-end test. (50740)
  • Fix flaky template revert end-to-end tests. (50851)
  • In CI, verify that PHPunit is actually running. (50442)
  • Migrate Cover Block tests to Playwright. (45784)
  • Remove redundant calls to disable the Styles welcome guide. (50871)
  • Remove unintentionally added test artifact. (50795)
  • Revert “Enqueue the registered assets (#50185)”. (50537)
  • Mobile – end-to-end test – Update code to use the new navigateUp helper. (50736)
  • Playwright Utils: Use ‘set’ to disable the Styles welcome guide. (50852)

Build Tooling

  • DateTime: Remove deprecated props (and fix static analysis action in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.). (50724)
  • Update runtime test field in WebPack configuration to support Windows. (50727)
  • Removed gutenberg Directory Name Expectation. (50894)
  • Reworked run Command Parsing. (50559)

wp-env

  • Add t-hamano as codeowner for env package. (50817)
  • Check .wp-env.json For Unknown Options. (50642)
  • Expanded wp-env Lifecycle Scripts. (50570)
  • Fixed wp-env start On Windows. (50895)
  • Add @ObliviousHarmony to wp-env codeowners. (50530)

First time contributors

The following PRs were merged by first time contributors:

  • @bacoords: Update README.md to include a link to the documentation. (50606)
  • @falgunihdesai: Update border and focus style of the Input selector in ColorPicker Component. (50703)
  • @kmanijak: Adjust the logic of Post Title edit, so it avoids unnecessary OPTIONS requests. (49839)
  • @kutsu: Add grab cursor style for Block mover drag handle button. (50808)
  • @megane9988: Add an outline when the color picker select box is focused. (50609)
  • @SaxonF: Update site editor sidebar alignment. (50561)
  • @worldomonation: Migrate Cover Block tests to Playwright. (45784)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @andrewserong @antpb @aristath @artemiomorales @bacoords @carolinan @chad1008 @ciampo @dcalhoun @derekblank @ellatrix @fabiankaegy @falgunihdesai @felixarntz @fluiddot @geriux @getdave @glendaviesnz @gziolo @jameskoster @jasmussen @jeryj @jhnstn @johnhooks @juanfra @kevin940726 @kmanijak @kutsu123 @MaggieCabrera @Mamaduka @mboynes @mburridge @megane9988 @michalczaplinski @mirka @n2erjo00 @noahtallen @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ramonjd @richtabor @samnajian @SantosGuillamot @SaxonF @scruffian @shimotmk @SiobhyB @t-hamano @talldan @tyxla @worldomonation @WunderBart @youknowriad

Props to @joen for visuals assets, @ramonopoly, @priethor, @rmartinezduque and @annezazu for peer-review

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