What’s new in Gutenberg 15.8? (May 17)

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)

For the latest release of 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, contributors continued improvements to existing UIUI User interface and UXUX User experience for content creators, site owners working on their own site, or theme developers creating new themes. Users will find small changes for streamlined workflows, fixed bugs, and refined responsiveness, just to name a few. The release includes 192 PRs by 63 contributors, of which 4 merged their first contributions. Congratulations to all.

Table of contents

1. Add the pages menu to the site editor
2. Add revisions UI to the global styles interface
3. Add Theme Previews for block themes
4. Changelog

Add the pages menu to the site editor

The site editor now exposes the ten most recently updated pages so you can directly jump into editing them. This is another step to explore adding back the ability to edit content right from within the site editor. (50463)

Add 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. UI to the global styles interface

In the global styles interface, you can now navigate through any revisions and browse how the site looked at that point in time. Any saved changes get shown in a timeline with when they occurred and who made the changes. (50089)

Add Theme Previews for 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. themes

Previewing different themes has never been easier. By introducing a new theme_preview parameter, previewing how your site would look with a different theme right inside the site editor is now possible. (50030)

Changelog

Enhancements

Global Styles

• Fluid typography: Use layout.wideSize as max viewport width. (49815)
• Global styles revisions: Remove human time diff and custom author fields from the 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. response. (50234)
• Unify the global block styles panel with the block inspector panels. (49428)

Post Editor

• Add <ViewLink> component. (50260)
• Update background color of post editor when viewing mobile or tablet viewports, or in template mode. (50361)
• Display device icon on “preview” and “view” buttons. (50218)
• Improve “switch to draft” placement. (50217)
• Post Featured ImageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts.: New design for Replace and Remove buttons. (50269)

Block Library

• More intuitive Details block with summary and innerBlocks content. (49808)
• Simplify cover block description. (50355)
• Cover: Only show overlay controls when color support enabled. (50115)
• Navigation: Hide color controls when color support is disabled. (50368)
• Post Featured Image: Hide overlay controls when color support is disabled. (50331)
• Social Icons: Hide color controls when color support is disabled. (50275)

Fonts API

• Separate BC Layer. (50077)

Site Editor

• Add the pages menu to the site editor. (50463)
• Introduce new PluginTemplateSettingPanel slot. (50257)
• Add chevrons to the templates and template parts in site editor. (50076)

Components

• Button: Add opt-in prop for next 40px default size. (50254)
• Consolidate and add documentation to Storybook. (50226)
• DimensionControl: Use WordPress package instead of reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. in code example. (50435)
• FormTokenField, ComboboxControl: Add opt-in prop for next 40px default size. (50261)
• Global Styles: Fix palette color popovers. (49975)
• Relax link pattern matching in CHANGELOG CI check. (50248)
• Remove custom padding for tertiary buttons. (50276)
• Update Autocomplete usage example. (49965)
• Update default accent color. (50193)
• Update has-text has-icon button spacing. (50277)

CSSCSS Cascading Style Sheets. & Styling

• Polish confirm dialog padding. (50283)

Template Editor

• Remove start blank option in template pattern suggestions and add skip button. (50099)
• Templates: Sort by the rendered title instead of the slug. (50353)

Block Editor

• List View: Allow dragging to all levels of the block hierarchy. (49742)
• Allow dragging-and-dropping images from the inserter to image blocks. (49673)
• Try always showing the dimensions controls. (50305)
• Adds a renderAdditionalBlockUI prop to ListView. (50465)
• Update the expanded text color so that it works in both a dark and light context. (50434)
• Enable Loginout block in Nav block. (49160)
• Mark related selector as resolved when sideloading Navigation fallback. (50324)
• Update Template Parts icon to use the symbol. (50410)
• Use CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data for Nav fallbacks and side load resulting entity into state. (50032)
• Tweak copy for block settings menu “Insert…” to “Add…”. (50444)
• Block settings menu: Rearrange items. (50453)

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

• Update image editor to use new REST API. (28530)

Bug Fixes

Block Library

• Center align button text in editor. (50228)
• Comment Template Block: Set commentId context via 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.. (50279)
• Cover: Use overflow: clip, falling back to overflow: Hidden to allow sticky children (technically). (50237)
• Ensure imported Classic Menu dirty state to include in Editor entity changes list. (50318)
• File Block: Defer hiding PDF embeds for unsupported browsers until the page has loaded. (50113)
• Fix template part area variation matching. (49500)
• Fix the pocket casts embed variation. (50132)
• Gallery: Fix inner block selection. (50363)
• Post Terms: Use publicly_queryable to query taxonomies used to register variations. (50244)
• Remove extraneous “Link” copy from PanelBody components. (50186)
• Remove Quote transform from Group (50424)
• [Post Featured Image]: Revert maxWidth addition. (50427)
• [Post Title]: Insert default block on Enter at end. (50312)
• Ensure that view scripts are correctly registered for core blocks. (50364)

Global Styles

• Close stylebook if the editor canvas container slot is not filled. (50086)
• Fix positioning of gradient palette popovers on mobile. (50233)
• Fix/wp get global styles for custom props returns internal variable. (50366)
• Revisions controller: Fix author and date fields. (50117)
• Fix hover/focus styles for style variation buttons. (50056)

Block Editor

• Fix issue with margin collapsing when selecting blocks. (50215)
• List View / Block Draggable: Fix scroll to top issue when dragging the second last block in the list. (50119)
• Multi-select: Capitalise B in blocks. (50356)
• URLInput: Update the ‘ENTER’ key down event handler. (50158)
• Update OffCanvas component’s more menu to get clientId from block rather than passed in as prop. (50473)
• Block Toolbar: Don’t use effects for focus management. (50497)
• Don’t remount the block when the ‘templateLock’ is set to ‘contentOnly’. (50292)

Themes

• Refactor theme previews. (50338)
• Remove gutenberg plugin mention in schema. (50207)
• Theme Preview: Restrict to adminadmin (and super admin) users. (50335)
• Theme Previews: Fix refactor. (50354)

Site Editor

• Display conditionally the styles in 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. main navigation screen. (50329)
• Remove canvas box shadow. (50374)
• Save Button: Fix the label in the disabled state. (50284)
• Remove white background on Site Editor ‘Frame’. (48970)
• Update some visual details in the add-template modal(s). (50143)

Components

• Spacing: Fix reset of spacing sizes control. (50455)
• NavigableContailer: Do not trap focus in TabbableContainer. (49846)
• Remove fill=”none” from levelUp icon. (50264)

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)

• Add missing tooltip to Site Editor navigation Back icon button. (50104)
• Fix Multiple Tooltips from Focus Toolbar Shortcut on 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. Editor. (50344)
• Site Editor Keyboard Navigation Flow. (50296)
• Small improvements for the sidebars and Close buttons labeling. (49614)

Design Tools

• Changed so that borders and radius are maintained when Duotone is changed. (50088)
• LineHeightControl: Fix application of zero values in editor. (48917)

Fonts API

• [Font API] Do not print in admin using ‘admin_print_styles’ for themes with 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.. (50259)

Widget Editor

• Fixes fixed block toolbar in widgets editor. (50371)

Performance

• Improve Site Editor loading experience(50222)

Experiments

Interactivity API

• Add Interactivity API runtime. (49994)
• Navigation block with the Interactivity API. (50041)

Command Center

• Update the experiment label. (50467)
• Add an API to open/close the command center. (50423)
• Fix a style glitch on Safari. (50138)
• Add a button to open it from the site editor view mode. (50425)
• Do not show dynamic add new post, add new page commands. (50221)
• Extract the WordPress reusable commands to a dedicated package. (49956)
• Fix command menu not re-opening after closing it. (50213)

Documentation

• Add changelog for eslint-plugin validating dependencies in useSelect and useSuspenseSelect 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.. (50247)
• Add client-side filter reference to Curating the Editor doc and fix links. (50203)
• Add missing closing parenthesis in code example. (50253)
• Adds example to change the permalink structure. (50251)
• Adds links to REST-API reference. (50070)
• Create-block script includes link to documentation in render.php file. (50206)
• Block API > Registration: Switch markdown to a-tags. (50110)
• Don’t use markdown in the callout section. (50437)
• Remove mention of perf testing from release documentation. (50345)
• Update Callout documentation on links. (50131)
• Fix incorrect label in contributor docs. (50201)
• Fix minor formatting issues in Performance doc. (50202)
• Fixes incorrect URLs in doc blocks. (50123)
• Use alert callout in the block deprecation documentation. (50286)
• Improve CardMedia documentation. (50074)
• Update README of TreeGrid with data-expanded attribute usage. (50026)

Code Quality

• Block Editor: Directly import useShouldContextualToolbarShow hook. (50506)
• BlockControls, InspectorControls: Remove useSlot, unify behavior on bad group. (50198)
• Enqueue registered block assets and resolve 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. styles end-to-end failure. (50185)
• Make eslint-plugin validate dependencies in useSelect and useSuspenseSelect hooks. (49900)
• Save Hub: Reuse the save button component to save code. (50145)
• Use apiFetch instead of window.fetch. (50043)
• Add types to dispatch and select. (49930)
• Remove duplicate comment. (50304)

Lodash removal

• Remove from blocks store reducer. (50471)
• Remove _.mapValues() from getBlockContentSchemaFromTransforms. (50096)
• Refactor away from _.mapValues(). (50285)
• Remove _.mapValues() from blocks reducer. (50097)

Components

• Fix incorrect focus style widths. (50127)
• Refactor/toolbar item component to typescript. (49190)
• SlotFill: Several code cleanups. (50098)
• SlotFill: Some code cleanups of the bubblesVirtually version. (50133)
• Convert NavigableContainer to TypeScript. (49377)

Block Editor

• Block Editor: Add names for the ‘editor.BlockListBlock’ filter HoCs. (50513)
• Refactor around missing dependency in Link Control internal value sync effect. (49509)
• Don’t export Slot/Fill constants separately. (50274)

Block Library

• Centralize constants for the navigation block. (50191)
• Move deprecated Nav block functions to bottom of render file. (50328)
• Refactor BlockList uses Hooks. (50293)

List View

• Replace OffCanvasEditor in browse mode with the List View component. (50287)
• Use block select button class for retaining colors when expanded or hovered. (50155)

Global Styles

• Global styles revisions: Ensure the revisions endpoint permissions match the global styles controller. (50270)
• Simplify CustomCSS UI. (49721)

Plugin

• Update REST API Controller PHPUnit tests. (50120)
• Update the Gutenberg plugin to require at least the WP 6.1 version. (50079)
• Update the tested up to version for the gutenberg plugin. (50360)

Native

• Add a few import required for the React Native wrapper distribution as iOSiOS The operating system used on iPhones and iPads. XCFramework. (50009)

Site Editor

• Extract the Router APIs and context into a dedicated package. (50100)
• Move loading logic to a separate hook. (50511)

Tools

wp-env

• Add wp-env After Setup Command. (50196)
• Fix wp-env destroy. (50445)
• Refactored wp-env configuration Parsing. (50071)
• Wp-env fix exec command in CI. (50411)
• wp-env: Add better default PHPunit settings, fix Xdebug, and update documentation. (50490)
• wp-env: Improve run command execution speed. (50007)
• Cleaned up Port Validation and Removed Unnecessary Default Ports. (50300)
• Match Container’s User and Group to Host. (49962)

Testing

• Add end-to-end test for editing the title of a new custom template part. (50195)
• Add test to verify image appears on frontend. (50472)
• Add tests coverage for the navigation block frontend interactivity. (50462)
• Migrate Adding Patterns Test to Playwright. (50083)
• Migrate Keep Transform Block Test Case to Playwright. (49719)
• Migrate PullQuote test case to playwright. (50085)
• Migrate undo to Playwright. (48701)
• Prerelease end-to-end Test Utils for Playwright. (43998)
• Skip creating flaky issues on PRs. (50146)
• end-to-end tests: Try to fix flaky global styles revisions tests. (50454)
• Add BlockList text coverage. (50252)

Build Tooling

• Changelog automation: Apply proper top-level categorization precedence to 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. PRs. (50208)
• Do not include first time contributors section in changelog if there are not any. (50291)
• Publish rich text build types. (49651)
• Rich text: Rename index.js > index.ts for type-only exports. (50212)
• Remove PHPUnit and Composer packages. (50408)

Repository Maintainance

• Add ndiego as codeowner for docs. (50289)

First time contributors

The following PRs were merged by first time contributors:

• @johnhooks: feature(data): Add types to dispatch and select. (49930)
• @margolisj: Refactor/toolbar item component to typescript. (49190)
• @n2erjo00: Create-block script includes link to documentation in render.php file. (50206)
• @samnajian: Fix/wp get global styles for custom props returns internal variable. (50366)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @ajlende @alexstine @andrewserong @apeatling @artemiomorales @aurooba @bph @chad1008 @ciampo @DAreRodz @dcalhoun @draganescu @ecgan @fluiddot @fullofcaffeine @geriux @getdave @glendaviesnz @gziolo @hellofromtonya @ironprogrammer @jameskoster @jasmussen @jeryj @jhnstn @johnhooks @jsnajdr @juanfra @kevin940726 @kienstra @Mamaduka @margolisj @mburridge @mirka @mokagio @mtias @n2erjo00 @ndiego @noahtallen @noisysocks @ntsekouras @oandregal @ObliviousHarmony @ocean90 @ockham @pavanpatil1 @pooja-muchandikar @priethor @ramonjd @richtabor @samnajian @SantosGuillamot @scruffian @SiobhyB @t-hamano @talldan @tellthemachines @torounit @tyxla @westonruter @youknowriad

---

Props to @bph and @jameskoster for their help with this release

#gutenberg, #gutenberg-new