What’s new in Gutenberg 22.2 (03 December)?

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

What's new in Gutenberg 22.2

Gutenberg 22.2 has been released and is available for download!

A total of 161 PRs were merged in Gutenberg 22.2, with 4 first-time contributors! With WordPress 6.9 released this week, many contributors were focused on 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. fixes, performance, 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 polish, and a series of 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) and developer experience improvements. There are still some great features and enhancements in this release, highlighted below.

Table of contents

Cover block video embeds

A big feature in this release is the ability to use embedded videos (like YouTube or Vimeo) as background videos in the Cover block, rather than being restricted to locally uploaded files. This is a major quality-of-life improvement for those who want to offload video hosting and bandwidth. (73023)

There’s further development on the experimental Breadcrumbs block. It now includes better handling for homepages, last item attributes, 404/search/archive pages, archive links, post type archive links, as well as support for paginated content. All of these additions are aimed at making breadcrumb navigation more robust and context-aware. (72832)(73249) (73283)(73435) (72905)

Styling options for the Math block.

Gutenberg 22.2 adds style options to the Math block in Gutenberg, addressing the inconsistency where inline math inherits paragraph styling but display math blocks previously lacked their own styling controls (73544).

standard styling option added to the Math block

Other Notable Highlights

Button Block Pseudo-state Styling

Theme designers and developers can now style button states (hover, focus, active, and focus visible) directly within the 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., making it much easier to keep all design controls centralized and consistent. This reduces the reliance on custom CSSCSS Cascading Style Sheets. for things like button hover states. (71418)

{
    "styles": {
        "blocks":{
                "core/button":{
                    "color":{
                        "background":"blue"
                    },
                    ":hover":{
                        "color":{
                        "background":"green"
                        }
                    },
                    ":focus":{
                        "color":{
                        "background":"purple"
                        }
                    }
                }
            }
    }
}

Data Views Upgrades

Data Views received several improvements, including:

  • A new “activity layout” brings a timeline-like view, perfect for things like revision history, logs, or any content that benefits from a chronological display. This layout handles interactions—like keyboard navigation—in a way that fits the timeline format. (72780)
  • The table column 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. now lets you add columns to the left or right for better customization (72929).

Changelog

List of all the changes

Block Library

  • Breadcrumbs: Add archive link if enabled in posts. (72832)
  • Breadcrumbs: Add attachment handling. (73249)
  • Breadcrumbs: Add 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. for preferred 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. and term per post type. (73283)
  • Breadcrumbs: Add post type archive link if it’s not the same as home URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (73435)
  • Breadcrumbs: Add support for paginated post content. (72905)
  • Cover: Add support for background videos as embeds. (73023)
  • Math: Enable styles options. (73544)
  • Tabs block: Improve store functionality. (73229)
  • Term Name, Term Count :Add example block previews. (73388)
  • [Button Block]: Add support for pseudo elements for the block and its variations on theme.json. (71418)

DataViews

  • Add insert left/right in table column header. (72929)
  • Apply background to DataViews wrapper. (73390)
  • DataForms: Add pattern validation. (73156)
  • DataForms: Update Email Control component to use envelope icon instead of a Symbol. (73184)
  • Field 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 format to date field type. (72999)
  • Introduce activity layout. (72780)
  • Only apply hover styles when there are bulk actions. (73248)
  • Sticky elements inherit bg from container. (73240)
  • Theme: Add density support for surface padding. (73215)

Patterns

  • Add edit section to the list view instead of Ungroup. (73199)
  • Change the icon and label for pattern section to use the pattern icon and name. (73203)
  • Remove ungroup option for section blocks. (73183)
  • Sections: Remove hover outlines in outline mode. (73263)
  • Update pattern editing button labels. (73195)
  • contentOnly patterns: Mark patterns as contentOnly by adding metadata.patternName to the root block (patterns endpoint). (73375)

Block Editor

  • FontFamilyControl: Hard deprecate bottom margin. (73340)
  • Block Editor: Filter file input accept attribute based on upload_mimes. (73562)
  • Add cart icon. (73509)
  • templateLock: ContentOnly – support content block insertion. (73425)
  • RichText: Begin to support hiding richtext controls while having keyboard shortcuts available. (73181)
  • Add width block supports under dimensions. (71905)
  • Add text justify. (73201)

Bug Fixes

Block Library

  • Accordion Block: Trigger panel opening from URL hash or anchor link. (73357)
  • Accordion Item: Don’t use grid layout. (73501)
  • Accordion: add box-sizing:Border-box rule. (73507)
  • Fix block selection when navigation link ui is open. (73368)
  • Fix navigation 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.) entity binding. (73255)
  • Fix: Custom font size taking over fit text. (73241)
  • Fix: Stretch Text overflows into the padding area. (73327)
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Block: Fix scrolling within the modal. (73506)
  • HTML Block: Remove editorStyles from HTMLEditModal. (73347)
  • Image block: Set img_srcset to avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher undefined var warning. (73453)
  • Math block: Fix accessibility. (73508)
  • Merge “Icon Size” and “Icon size” translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. strings. (73325)
  • Simplify and improve navigation link creation flow. (73210)

DataViews

  • DataForm: Autofocus first input on panel view. (72322)
  • DataForm: Fix issue with array fields in layout panel. (73344)
  • Ensure primary actions are not wrapped in the list layout. (73333)
  • Field API format: Fix and use WordPress input. (73538)
  • Fields: Fix author field view when editing. (73482)
  • Fix alignment when viewing a DataView with table layout and non-default column alignment. (73398)
  • Open the filters from the column table consistently. (72998)
  • [DataForm]: The ModalContent component doesn’t properly check for fields validity – [#73330]. (73339)
  • Theme: Fix color ramp generation to avoid unmet contrasts. (73331)

Block Editor

  • Border Radius Control: Empty Values triggers unintended px unit conversion. (73324)
  • Drag and drop: Remove grab cursor for multi-selection. (73521)
  • Drag: Hide block tools popovers. (73539)
  • Stretchy text: Hide variations in Block Inspector (hack). (73238)
  • Styles Tab: Fix bug where contentOnly experiment forced it to always be displayed. (73534)
  • Disable Term Query blocks in Widgets Editor. (73449)
  • Comments Count and Comments Link: Ensures that the preview is displayed correctly in the StyleBook. (73213)

Global Styles

  • Preview Styles: Prevent leaked shadow due to blur. (73545)
  • Update generateGlobalStyles function to include variationStyles option. (73535)
  • Variations global styles: Replace useSetting with useStyle for fetching block variations. (73533)
  • Global Styles: Fix media upload permission check. (73503)
  • WP_Theme_JSON_Gutenberg: Preserve valid non-preset settings when KSES filters are active. (73452)

Components

  • Fix: Keep Guide close button visible on hover. (73220)
  • Normalize displayed dates to UTC time for DateTimePicker. (73444)
  • Try fixing full-screen modal height so contents can scroll. (73150)

Block bindings

  • Error handling for external sources. (72585)
  • Fix coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./term-data source bug, refactor, add unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. coverage. (73366)
  • Move computation of sources into dedicated useSelect. (72974)

Interactivity API

  • iAPI: Fix using getServerContext in derived state getters. (73518)
  • iAPI: Return a deep-clone object from getServerState and getServerContext functions. (73437)

Collaboration

  • Notes position alignment in HTML. (73046)
  • Notes: Collapse note on blur. (73158)
  • Notes: Fix warning in comment content check. (73198)

Patterns

  • Check for prevent default on event to enable media placeholder button. (73564)
  • contentOnly patterns: Fix lock icon appearing on toolbar when editing a section. (73457)

Block API

  • Block Support: Change block visibility support key. (73432)

Layout

  • Prevent empty contentSize and wideSize values ​​from being saved. (73281)

Accessibility

  • Fix 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) of descriptions and alerts for “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.” Nav Items. (73177)

DataViews

  • Add grid keyboard navigation. (72997)
  • Make DataViews table checkbox permanently visible. (73245)

Performance

  • Remove some modal subscriptions when inactive. (73014)
  • Theme: Simplify ramp object by flattening warnings to optional top-level property. (72942)

Experiments

  • Add experimental abilities and workflow palette and move abilities API. (72703)
  • Lazy Editor: Fix Media Library loading. (73176)
  • Lazy Editor: Fix script modules loading. (73237)
  • Navigation Route: Add initial list and edit routes. (73259)
  • Refactor: Make WordPress abilities a script module instead of a global. (73364)
  • Routing: Add init modules. (73284)
  • Routing: Add pattern routes. (73317)
  • Routing: Add styles page as a route. (73197)
  • Routing: Add template part route. (73303)
  • Routing: Extract route package. (73191)
  • Routing: Support canvas clicks. (73348)
  • Styles Route: Allow switching between stylebook and homepage. (73253)

Patterns

  • ContentOnly Patterns experiment: Add content only inspector fields. (71730)
  • ContentOnly mode: Exclude template parts for now. (73332)
  • Routes: Small fixes to the pattern list and template part list routes. (73520)

Templates API

  • Add template route to the new site editor infrastructure. (73525)
  • Template Route: Add the ‘add new template’ button. (73542)
  • Template Activation: Rename gutenberg_get_block_template. (73582)
  • Template Activation: Use string IDs when experiment is off. (73585)

Block Library

  • Disable TinyMCE: Polish refresh message. (73485)
  • contentOnly Patterns experiment: Add content only support again for template parts. (73419)

DataViews

  • Routing: Preload routes properly. (73384)
  • Add experiment flag for Customizable Navigation Overlays. (73356)

Media

  • Reuse mediaUpload filter for new media modal by wrapping it in a class component. (73225)

Documentation

  • DataViews: Combine duplicate “enhancements” grouping in changelog. (73227)
  • DataViews: Update documentation for layout prop. (73470)
  • Docs: Use consistent content formatting for experimental packages. (73212)
  • Field API docs: Improve Edit. (73202)
  • Field API: Document missing props. (73515)
  • Field API: Update documentation for operators. (73523)
  • Field API: Update documentation to better communicate field types. (73349)
  • Update Gutenberg Version for WordPress 6.9. (72925)
  • Update dataviews readme with new pickerTable layout. (73372)
  • Update undestanding-global-state-local-context-and-derived-state.md. (73233)

Code Quality

  • Asset Loader: Load all scripts in body (footer). (73584)
  • Core Data: Update Attachment type to more accurately reflect fields in media API responses. (73223)

Patterns

  • Content only block experiment: Blocks provide the form. (73479)
  • ContentOnlyControls: Refactor to use DataForm. (73374)
  • Resolve_pattern_blocks sync with Core patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing.. (73570)

DataViews

  • Field API: Simplify field normalization. (73387)
  • Field API: Simplify normalization. (73546)
  • Revert “[DataForm]: The ModalContent component doesn’t properly check for fields validity – [#73330]”. (73367)

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

  • Command Palette: 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 in core. (73567)

Components

  • Storybook: Replace implicit actions with explicit ones. (73502)

Block bindings

  • Make core/post-data source code more semantic. (73394)

Collaboration

  • Notes: Ignore flood and duplicate checks. (73232)

Block Library

  • Deprecate Pullquote Block. (73228)

Tools

  • Project: Add CODEOWNERS entries for ui and theme packages. (73369)
  • Update codeowners for packages/dataviews. (73204)

Build Tooling

  • Add missing package dependencies. (73258)
  • Build: Fix CSS rebuilds. (73380)
  • Build: Make pages building using the routing infrastructure independent of Gutenberg. (73379)
  • Build: Moment-timezone shouldn’t be a mandatory dependency. (73352)
  • Exclude JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors./TS test files from build. (73495)
  • Framework: Sync lockfile changes under Node.js v24 build. (73314)
  • Scripts: Improve handling of check-licenses for optional dependencies. (73026)

Testing

  • Block Bindings: Add unit test coverage for core/post-data source. (73055)
  • Block Bindings: Remove end-to-end test theme. (73209)
  • Unit testing: Allow Composer to auto-detect PHP version. (73358)
  • end-to-end Tests: Remove movie CPTs after block bindings tests. (73235)
  • end-to-end Tests: Skip flaky list view test. (73234)

Various

  • UIUI User interface: Remove shorthand prop options from Box component. (73529)

Collaboration

  • Notes: Improve delete confirm message for replies. (73173)
  • Update button label from “Add new note” to “Add new reply”. (73189)

Templates API

  • Template activation: Move php files. (73402)

Block Library

  • contentOnly patterns experiment: Make the Inspector fields key a private API. (73376)

Patterns

Double-click on pattern to edit pattern. (73268)

First-time contributors

The following PRs were merged by first-time contributors:

  • @PaulAsaf2: Update undestanding-global-state-local-context-and-derived-state.md. (73233)
  • @RoyHridoy: Fix: Keep Guide close button visible on hover. (73220)
  • @triple0t: Dataforms: Update Email Control component to use envelope icon instead of atSymbol. (73184)
  • @xristos3490: Fix alignment when viewing a DataView with table layout and non-default column alignment. (73398)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamsilverstein @aduth @andrewserong @annezazu @anomiex @audrasjb @bph @cbravobernal @DAreRodz @ellatrix @felixarntz @getdave @gigitux @harshbhonsle @hbhalodia @jameskoster @jasmussen @jeryj @jorgefilipecosta @jsnajdr @karthick-murugan @luisherranz @MaggieCabrera @Mamaduka @mcsf @mikachan @mikejolley @mtias @ntsekouras @oandregal @ockham @PaulAsaf2 @priethor @ramonjd @RoyHridoy @ryanwelcher @scruffian @senadir @shimotmk @simison @SirLouen @t-hamano @talldan @tellthemachines @triple0t @tyxla @xristos3490 @youknowriad

Props to @annezazu and @matveb for reviewing this post, and @joen for the visual assets!

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