What’s new in Gutenberg 22.7? (11 March)

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

Gutenberg 22.7 has been released and is available for download!

Table of contents

New Connectors Screen and 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.

We have added a new “Connectors” adminadmin (and super admin) page under Settings > Connectors, which allows users to see and manage their connectors. We using an OpenAI connector demonstration as the first example, and we’ve also provided extension 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. for plugins to add their own connectors. These screens are still in an experimental state. (75833, 75948, 76014)

Previews for style variation transforms

Style variation transforms now display a preview in the editor. This makes it easier to see the impact of transformations before committing to the change.

Style variations are now also available for patterns in contentOnly mode. (75889, 75761)

Improved Visualizer responsiveness in Grid 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.

The Grid block Visualizer is now synchronized quickly and accurately with the selected number of columns:

This makes it easier and quicker to build grid based layouts. (75820)

Playlist block now has a visualizer

We added WaveForm Player as a visualizer to the Playlist block. This gives users a visual representation of the audio file they are listening to, and opens the door to more designs for the block:

Please note that this block is still in an experimental state. (75203).

Other Notable Highlights

  • Content Guidelines: We added a new experimental 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/ and custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept., to allow WordPress site owners to define and manage site-wide content rules (75164, 76187, 75420, 76155)
  • wp-env: We added phpMyAdmin support to the wp-env Playground runtime and introduced a new phpmyadmin boolean configuration option for cleaner enable/disable control. (75532)
  • Components: We added word-break: break-word to buttons to fix buttons with very long text (76071)
  • Custom CSSCSS Cascading Style Sheets.: We now allow defining custom selector for CSS selectors in 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., which means that Global Styles can be applied to elements within the block. (75799)
  • Media Library: Optimise image loading for the media thumbnail field for better performance (75811)
  • Real Time Collaboration: Real Time Collaboration is now enabledf by default (75739)

Changelog

Enhancements

  • Add phpMyAdmin support to wp-env Playground runtime. (75532)
  • Dialog: Add legacy z-index compatibility. (75874)
  • Env: Improve help screen. (75783)
  • InputLayout: Replace slot context with data attributes. (76011)
  • Theme: Add design token fallback generation. (75586)
  • Theme: Add design token for interactive non-link elements. (75697)
  • UIUI User interface: Add Notice component. (75981)
  • Views: Add support for more overrides (all developer-defined config). (75971)

Block Library

  • Button: Migrate to width block support. (74242)
  • Make inspector style transform previews consistent with toolbar transforms. (75989)
  • Playlist Block: Add WaveformPlayer visualization. (75203)
  • Post Navigation Link : Migrate to Text-Align Block Support. (75557)
  • Post Title : Migrate to Text-Align Block Support. (75629)
  • Post Title: Add placeholder attribute. (76016)
  • Query Title: Migrate to Text-Align Block Support. (75802)
  • Site Tagline : Migrate to Text-Align Block Support. (75690)
  • Site Title : Migrate to Text-Align Block Support. (75551)
  • Tabs: Remove custom state styling. (75731)
  • Unify block settings dropdown menu items across list views. (75979)

Connectors

  • Add: Connectors screen and API. (75833)
  • Connectors: Add _ai_ prefix to connector setting names. (75948)
  • Connectors: Dynamically register providers from WP AI Client registry. (76014)
  • Sync connector PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher behavior with CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. 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. changes. (75968)

Content Guidelines

  • Content Guidelines: Add block guidelines management (76187)
  • Content Guidelines: Add UXUX User experience for site, copy, image, and additional guidelines (75420)
  • Guidelines: Add actions for Import, Export and 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. of guidelines (76155)

DataViews

  • Adjust column spacing in table layout when no titleField is provided. (75410)
  • Improve UI in list layout when we render only title and/or media fields. (76042)
  • MediaEdit: Auto-fill columns based on minimum item width. (75509)
  • DataViews: Remove menu divider again. (75893)
  • DataViews: Minimize padding for primary action buttons. (75721)

Post Editor

  • Center navigation preview content in preview pane. (75741)
  • RTC: Add session activity notifications. (76065)

Block Editor

  • Add previews for style variation transforms. (75889)
  • Try enabling style variation transforms for blocks in contentOnly mode. (75761)

Site Editor

  • QuickEdit: Rename status label and remove extra labels in popup. (75824)

Components

  • Refactor ColorPicker to preserve hue/saturation at achromatic colors. (75493)
  • ToggleGroupControl: Make unselected item color consistent across all variants. (75737)

Global Styles

  • Block Supports: Define CSS vars for blocks based on feature selectors. (75226)

Bug Fixes

  • Block editor: Force LTR direction in block HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. editing mode. (75904)
  • Connectors: Avoid manual string concatenation. (75997)
  • Connectors: Unhook Core callbacks in Gutenberg coexistence. (75935)
  • DataViews: Fix search input losing characters during debounce when externally synced. (75810)
  • Fix DataForm card summary vertical alignment. (75864)
  • Fix: Set quality and strip metadata in client-side image resize. (76029)
  • Fix: Suppress spinner output when using –json flag in wp-env. (75743)
  • IconButton: Hide tooltip when truly disabled. (75754)
  • Prevent non-reproducible Sass/CSS builds. (76098)
  • Remove Core’s full-page render interceptors for boot-based pages. (76036)
  • Theme: Add build plugins to inject design token fallbacks. (75589)
  • Theme: Remove global design tokens stylesheet. (75879)
  • wp-build: Deregister script modules before re-registering. (75909)
  • CI: Don’t build release notes during 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. build workflow for WP Core sync (76398)

Collaboration

  • Fix change-detection and new-post end-to-end tests after RTC enabled by default. (75751)
  • RTC: Back off when the window loses focus. (75843)
  • RTC: Bugfix: Fix casing of getPersistedCRDTDoc. (75922)
  • RTC: Fix fallthrough for sync update switch statement. (76060)
  • RTC: Fix stale CRDT document persisted on save. (75975)
  • RTC: Fix syncing of emoji / surrogate pairs. (76049)
  • RTC: Fix undefined array_first() call in sync storage. (75869)
  • RTC: Prevent duplicate poll cycles. (76059)
  • Real-time collaboration: Fix disconnect dialog on navigate. (75886)
  • Real-time collaboration: Improve collaboration within the same rich text. (75703)
  • Real-time collaboration: Remove ghost awareness state explicitly when refreshing. (75883)
  • [Real-time Collaboration] Fix sync issue on refresh. (76017)
  • Real-time collaboration: Improve disconnect dialog. (75970)
  • RTC: Enable RTC by default (75739)

Block Library

  • Block Support: Fix custom CSS not saved when style schema is not defined. (75797)
  • Fix: Page List block: Editor-only div inside page links causes misalignment in Firefox. (75890)
  • Fixes keyboard focus escaping the lightbox overlay when navigating a gallery with Tab/Shift+Tab. (75852)
  • Image block: Fix lightbox srcset size. (76092)
  • Image: Hide ‘Set as 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.’ for in-editor revisions. (76123)
  • Navigation Link: Compare internal links by host instead of origin. (76015)
  • Navigation Overlay Close: Set Close as default text, rather than using a placeholder. (75692)
  • Navigation editing: Simplify edit/view buttons. (75819)
  • Search block: Double-encodes apostrophes in the input value. (76023)
  • Show transform dropdown previews on focus as well as hover. (75940)
  • Use homeUrl instead of siteUrl for link badge evaluations. (75978)
  • Navigation overlay: Prevent duplicate area registration. (75906)

Block Editor

  • Avoid block removal when calling ‘moveBlockToPosition’. (75728)
  • Block toolbar and context menu: Hide pattern actions in Revisions UI. (76066)
  • Block toolbar: Hide styles dropdown for content only blocks inside unsynced patterns in Revisions UI. (76119)
  • BlockListBlock: Fix crash when selectedProps are null. (75826)
  • Grid block: Improve Visualizer responsiveness. (75820)
  • 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. block selected style. (75796)
  • PHP-only Blocks: Reflect bound attribute values in inspector controls. (76040)
  • Pattern Editing: Fix sibling blocks to edited pattern not being disabled. (75994)
  • RichText: useAnchor: Fix TypeError in virtual element. (75900)

DataViews

  • DataForm: Fix focus loss and refactor Card layout. (75689)
  • DataForm: Fix label colors. (75730)
  • DataForm: Fix text overflow for long unhyphenated text in panel layout. (76073)
  • Fix 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. toggle flickering when there are locked or primary filters. (75913)
  • Fix focus transfer while searching in list layout. (75999)
  • Fix spacing for title in patterns page. (75693)

Post Editor

  • Admin UI: Fix type mismatch between Page title and NavigableRegion ariaLabel. (75899)
  • Editor: Remove View dropdown and pinned items from revisions 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.. (75951)
  • Fix: Template revisions infinite spinner. (75953)
  • Preserve note selection on browser tab switch. (75955)
  • Real-time collaboration: Fix style mounting in RTC overlay. (75700)

Components

  • DateTimePicker: Fix day text wrapping. (76084)
  • Specify line-height to avoid inheriting default values. (75880)
  • Button: Add word-break: Break-word. (76071)

Site Editor

  • DataForm: Fix field label for panel (should not be uppercase). (75944)
  • DataViews: Avoid flickering while refreshing. (74572)
  • DataViews: Right-align integer and number fields. (75917)

Media

  • Media Notices: Bump global snackbar z-index, re-use global notices for media modal. (76063)

Global Styles

  • Custom CSS: Allow defining custom selector for this global styles feature. (75799)
  • Custom CSS: Prevent duplicate custom css styles. (75892)

Client Side Media

  • Fix: Skip scaled image sideload for images below big image threshold. (75990)
  • Client-side media processing: Try plumbing invalidation to the block-editor’s mediaUpload onSuccess callback (76173)
  • Client-side media processing: only use media upload provider when not in preview mode (76124)

Font Library

  • Fix: Use the same context for font library tabs translations. (75930)

Interactivity API

  • Interactivity Router: Fix back and forward navigation after refresh. (75927)
  • Interactivity: Fix crypto.randomUUID crash in non-secure contexts (76151)

Patterns

  • Unsynced patterns: Rename ‘Disconnect pattern’ to ‘Detach pattern’ in context menu. (75807)

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)

Block Editor

  • Fix writing flow navigation for annotation style, or any other block with border radius. (76072)

DataViews

  • DataForm: Fix card layout’s toggle button screen reader text. (76039)

Block Library

  • Accordion: Remove Down Arrow, Up Arrow, Home, End navigation. (75891)

Performance

Block Library

  • Navigation: Remove internal ‘useNavigationEntities’ hook. (75943)

Media

  • Media Thumbnail Field: Optimise image loading. (75811)

Experiments

Post Editor

  • RTC: Disable multiple collaborators if 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. boxes are present. (75939)

Content Guidelines

  • Add experimental REST API and custom post type. (75164)

Documentation

  • Add core/icon block to theme.json schema. (75813)
  • Add documentation for contentRole and listView block supports. (75903)
  • Docs: Correct parameter name $content for query title render function. (75945)
  • Docs: Fix broken link to autoRegister block-supports. (75956)
  • Docs: Fix incorrect echo of wp_interactivity_state() in getServerState() example. (75857)
  • Icon: Improve parameter documentation. (75768)
  • Update README for DataViews, DataForm, Field API. (75881)
  • iAPI Docs: Add client-side navigation guide under “Core Concepts”. (75263)
  • iAPI Docs: Introduce reactive vs non-reactive distinction early in the state/context guide. (75357)
  • ui guidelines: Add custom properties and disabled state guidance. (75912)

Code Quality

  • Add wp_ prefix to real time collaberation option. (75837)
  • Backport Changelog: Move changelog for #75226 to WP 7.1 folder. (76102)
  • Core Data: Simplify actions dispatched by ‘canUser’ resolver. (75974)
  • ESLint: Add no-ds-tokens rule. (75872)
  • ESLint: Broaden no-unknown-ds-tokens to all strings and catch dynamic construction. (75905)
  • Field, Fieldset: Add tests for the Details component. (75696)
  • Interactivity: Fix incomplete Window.scheduler type causing TS2430 in downstream projects. (76070)
  • UI: Update @base-ui/react from 1.0.0 to 1.2.0. (75698)

Collaboration

  • RTC: Add debug logging to SyncManager. (75924)
  • RTC: Merge document meta map into state map. (75830)
  • RTC: Move WordPress meta key from sync package to core-data. (75846)
  • RTC: Updates from backport PR. (75711)

Components

  • Convert focus on mount hook to TypeScript. (75442)
  • NumberControl: Merge two state reducers into one. (75822)
  • ToolsPanel: Remove unnecessary label prop from dropdownMenuProps type. (76027)

Block Library

  • Cover: Replace strpos() with str_contains() for improved readability. (75907)
  • Navigation: Extract NavigationLinkUI and NavigationListViewHeader into separate files. (75865)
  • Post featured image: Simplify background class assignment. (75745)

Block Editor

  • Extract inserter-toggle mixin from duplicated button styles. (76087)
  • RichText: useAnchor: Enable type checking, fix errors. (75910)

DataViews

  • Remove unused deps: WordPress/dom, wordpress/theme, wordpress/url. (76075)

Post Editor

  • Fix flaky template-revert end-to-end tests. (75894)

Patterns

  • Add end-to-end test for sorting patterns. (75823)

Tools

  • Project Management: Add components team as codeowners for components package. (75641)

Testing

  • Automated Testing: Merge reports into HTML artifact. (75633)
  • Cover block: Add end-to-end test coverage for bugfixes. (75483)
  • Fix flaky Quick Edit end-to-end test. (75714)
  • Re-enable Font Library end-to-end tests. (75712)
  • Real-time collaboration: Expand mergeCrdtBlocks() automated testing. (75923)
  • Skip cross origin isolation end-to-end tests. (75764)
  • Try fix failing patterns end-to-end test. (75759)
  • Workflows: Use pull_request_target for cherry-pick workflow. (75775)
  • wp-env: Enable pretty permalinks by default in Docker runtime. (75688)

Build Tooling

  • Build: Clean top-level build/ directory during clean:Packages. (75961)
  • ESLint: Add no-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-save rule. (75617)
  • Prevent CSS modules in build from breaking Jest tests. (75792)
  • Sort registry files by handle/ID. (75755)
  • wp-build: Do not remove Core’s default script modules registration. (75705)

First-time contributors

The following PRs were merged by first-time contributors:

  • @aagam-shah: Content Guidelines: Add experimental REST API and custom post type. (75164)
  • @dlind1: Fix: Use the same context for font library tabs translations. (75930)
  • @namankhare: Fixes keyboard focus escaping the lightbox overlay when navigating a gallery with Tab/Shift+Tab. (75852)

Contributors

The following contributors merged PRs in this release:

@aagam-shah @aaronrobertshaw @adamsilverstein @aduth @alecgeatches @andrewserong @aswasif007 @chriszarate @ciampo @DAreRodz @desrosj @dhasilva @dlind1 @ellatrix @fushar @gziolo @iamchughmayank @im3dabasia @ingeniumed @jasmussen @jeherve @jeryj @jorgefilipecosta @JosVelasco @jsnajdr @luisherranz @Mamaduka @manzoorwanijk @maxschmeling @Mayank-Tripathi32 @mcsf @mikachan @mikejolley @mirka @Mustafabharmal @namankhare @ntsekouras @oandregal @ockham @peterwilsoncc @prasadkarmalkar @ramonjd @scruffian @sgomes @shail-mehta @shekharnwagh @Soean @stokesman @t-hamano @talldan @tellthemachines @xristos3490 @youknowriad

#gutenberg-new