What’s new in Gutenberg 22.5? (04 February)

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

Gutenberg 22.5 has been released and is available for download!

It brings practical refinements for your editing workflow. You can now add custom CSSCSS Cascading Style Sheets. to individual blocks, and the Image 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. shows aspect ratio controls for wide and full alignments. List View gets more useful with full block titles and actual content displayed for list items. The release also stabilizes viewport-based block visibility and pattern editing, plus adds focal point controls for fixed Cover backgrounds and text column support for Paragraphs.

Table of contents

Custom CSS Support for Individual Blocks

Gutenberg 22.5 brings custom CSS support for individual block instances, letting you write styles that target specific blocks without affecting others of the same type. A has-custom-css class is automatically added in both the editor and frontend for dynamic blocks, making your custom styles easier to manage. If you’ve been working around this limitation with extra wrapper blocks or global CSS, your workflow just got simpler. (73959, 74969)

Screenshot showing block-level custom css box

Image Block: Aspect Ratio Control for Wide and Full Alignment

The Image block now shows aspect ratio controls when you choose wide or full alignment. Previously, aspect ratio options only appeared for default-aligned images, a limitation when designing hero sections or full-width layouts. Now you can lock in your preferred proportions regardless of alignment, giving you more consistent control over how images display across different screen sizes (74519)

Illustration of controling image aspect ratio for wide and full widths

List View Improvements

Two enhancements make List View considerably more useful in this release. You’ll now see full block titles instead of truncated labels, and List Items display their actual content rather than generic “List Item” text. When you’re navigating complex documents with nested lists, these small changes make a real difference—you can finally tell your list items apart at a glance (74798, 74794)

Other Notable Highlights

  • Cover Block: Focal point picker for fixed backgrounds: You can now set a focal point even when using fixed/parallax backgrounds (74600).
  • Paragraph Block: Text column support: Paragraphs can now flow into multiple columns directly via block supports (74656).
  • Navigation: Submenus always open option: A new toggle lets you keep submenus permanently expanded rather than requiring hover/click (74653).
  • In-editor 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. (initial implementation: Early groundwork for viewing revisions directly in the editor, though without “diffing” yet (74771).

Changelog

Enhancements

Block Library

  • Add custom CSS support for individual block instances. (73959)
  • Add the has-custom-css class name to the editor and dynamic blocks. (74969)
  • Allow for themes to define the overlay attribute without using a theme slug. (74119)
  • Breadcrumbs Block:
    • Show custom block name. (73690)
    • Add example block previews. (74808)
  • Comment Date: Add textAlign Support. (74599)
  • Comment Edit Link: Migrate to text-align block support. (74720)
  • Comment Reply Link: Migrate to text-align block support. (74760)
  • Comments Title: Migrate to text-align block support. (74945)
  • Cover Block: Enable focal point picker for fixed background. (74600)
  • Enhance Term List block: Pre-select current term on term archive pages. (74603)
  • Handle deleted navigation overlays. (74766)
  • Image block: Show aspect ratio control for wide and full alignment. (74519)
  • List Item: Show content instead of block name in List View. (74794)
  • Navigation Overlay:
    • Add 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. preview. (74780)
    • Insert default pattern on creation. (74650)
    • Update overlay control labels. (74690)
    • Default new blocks to “always” show overlays. (74890)
  • Navigation overlay patterns:
    • Centered navigation with info. (74862)
    • Centered navigation. (74861)
    • Overlay with accent background. (74849)
    • Overlay with black background. (74847)
  • Navigation:
    • Add a new option that toggles submenus always open. (74653)
    • Don’t use a nav 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.) for navigation blocks inside overlays. (74764)
  • Paragraph: Add text column support. (74656)
  • Verse Block: Add new textAlign support. (74724)
  • Feat/coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. tabs restructure. (74412)
  • Stabilise viewport based block visibility. (74839)

Block Editor

  • Block visibility:
    • Refactor metadata to use nested structure. (74602)
    • Create selectors for block visibility in current viewport (device setting or responsive). (74517)
    • Render blocks when hidden at all viewports (and other changes). (74679)
  • Inserter Component: Improving Stories. (74922)
  • List View support: Show full block titles. (74798)
  • MediaReplaceFlow: Move Reset option to bottom of menu. (74882)
  • Try storing global styles in static var in layout render. (74828)
  • Pattern editing: Stabilize and remove the experiment flag. (74843)

DataViews

  • Add card form layout validation. (74547)
  • Include totals items count in DataView footer. (73491)
  • MediaEdit: Support custom validation. (74704)
  • Show validation errors when a panel closes. (74995)
  • Add content element guidelines for fields in DataForm. (74817)

Components

  • DataForm: Add combobox control. (74891)
  • UIUI User interface: Add Select primitive. (74661)
  • Add Tooltip component to @wordpress/ui. (74625)
  • Consolidate border tokens. (74617)
  • Design System: Add guidelines for destructive actions UXUX User experience. (74778)

Post Editor

  • In-editor revisions (initial changes, without diffing). (74771)

Icons

  • Add missing chevron-up-small icon. (74607)

Collaboration

  • Real-time collaboration: Add default 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. polling sync provider. (74564)
  • Real-time collaboration: Sync collections. (74665)
  • Real-time collaboration: Use relative positions in undo stack. (74878)

Bug Fixes

  • Core 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. for gutenberg_filter_global_styles_post: Protect from KSES mangling. (74731)
  • DataForm: Sync ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-level validation to native inputs on date fields. (74994)
  • DataViews: Use regular casing for bulk selection count. (74573)
  • Fix typo in comment for value change check. (74730)
  • Fix wp-theme dependencies in the build. (74743)
  • Remove the apiFetch named export. (74761)
  • ShortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site.: Fix non-string attribute values being silently dropped. (74949)

Block Library

  • Breadcrumbs: Fix placeholder separator preview. (74842)
  • Cover Block: Show current embed URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in dialog. (74885)
  • Embed: Fix Flickr double-padding with responsive wrapper. (73902)
  • Fix : Image caption blur in Gallery block. (74063)
  • Fix: Add border-box sizing for verse block. (74722)
  • Inspector tabs: Reset tab selection if the selected tab is no longer present. (74682)
  • Make custom navigation overlay full width. (74559)
  • Media & Text: Revert “Fixed Media & Text Block – Image not rendered properly on frontend when inside stack (#68610)”. (74715)
  • Pattern Editing: Update template part to use tabs. (74793)
  • Post ExcerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. Block: Fix excerpt trimming logic to handle whitespace correctly. (74925)
  • Post Excerpt Block: Fix length limits for both Editor and Front and fix ellipsis consistency. (74140)
  • Show submenu colors but remove the word overlay. (74818)
  • fix: Video block: video URLs pasted without “https://” show broken media. (74964)

Block Editor

  • Allow grid layout to use theme blockGap values for columns calculation. (74725)
  • Block Editor Provider: Fix editor error for contributor role when client-side media experiment is active. (74680)
  • Direct drag: Fix glitching around scrolling. (74608)
  • Ensure grid column never exceeds parent’s width. (74795)
  • Fix missing onClose prop for InserterMenu. (74920)
  • Fix: Fit Text not working on calculated line heights. (74860)
  • Fix: Safari “Edit as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.” for Fit Text deletes content. (74864)
  • Fix: Stretchy text issue when nested on flex containers. (73652)
  • List View: Ensure element exists in document before focusing. (74613)
  • Pattern Editing: Prevent double-click editing for template parts and synced patterns. (74755)
  • Calculate viewport based on 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. size in resizable editor. (75156)

Collaboration

  • Real-time collaboration: Do not wrap persisted doc applied update in transaction. (74753)
  • Real-time collaboration: Pass non-cleaned (but merged) edits to SyncManager#update. (74912)
  • Sync: Refactor ProviderCreator signature to an object. (74871)

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.

  • iAPI Router: Fix initial router regions with attachTo being duplicated after navigate(). (74857)
  • iAPI Router: Prevent router regions with data-wp-key from being recreated on navigation. (74750)
  • iAPI: Fix and refactor runtime initialization logic. (71123)

DataViews

  • Fix actions visibility on smaller viewpoints and for lone action with isPrimary as true. (74836)
  • Fix insert left and right handling in table layout for RTL languages. (74681)

Components

  • Add @types/react to dependencies. (74692)
  • Fix: Escape less-than character in HTML attributes to prevent block recovery errors. (74732)

Patterns

  • Restore pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. actions for user patterns. (74927)

Typography

  • Fix: Can’t disable textColumns UI. (74767)

Block Style Variations

  • Fix blockGap styles not working in block style variations. (74529)

Global Styles

  • Core backport for Global Styles: Allow arbitrary CSS, protect from KSES mangling. (74371)
  • Remove comment about non-existing property. (75003)

Performance

  • Enable build-blocks-manifest by default. (74846)
  • Update performance results endpoint to codevitals.run. (74802)
  • Use fetch API for performance results logging. (74803)

Experiments

  • Route: Add notFound to public API and add route validation. (74867)

Media

  • Media Modal Experiment: Add a simple notices-based uploading state. (74965)

Collaboration

  • Real-time Collaboration: Add user and selection information to awareness. (74728)

Post Editor

  • Media Editor: Add a simple media editor package and integrate into the editor package. (74601)

Block Library

  • Don’t show overlay settings for navigation blocks that are inside oth…. (74408)

Documentation

  • Added Missing Global Documentation class-wp-rest-block-editor-settings-controller file. (74973)
  • Added Missing Global Documentation extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software.-site-editor file. (74868)
  • Badge: Use stories for “Choosing intent” doc. (74675)
  • DataViews: Update storybook to add more context. (74819)
  • Docs: Add missing @return tags to experimental functions. (74960)
  • Docs: Standardize use of @link tag for URL references in lib directory. (74984)
  • Pattern Overrides: Remove obsolete documentation. (74749)
  • Replace @see with @link for URL references in Inline Documentation. (74961)
  • Storybook: Automate sidebar sort order. (74672)
  • Update wp-build documentation to describe ‘wpPlugin.name’. (74741)
  • Updated Typo in 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/. File. (74718)
  • iAPI Docs: Add configuration to state/context guide. (71355)
  • iAPI: Don’t use deprecated data-wp-on-async in documentation. (72591)
  • iAPI: Update deprecation warning for unique ID format. (74580)
  • Move grid manual mode sync into 7.1 folder. (74792)
  • Update: Preserve additional 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. properties on client side abilities. (73918)

Code Quality

  • core-data: Fix missing dependencies. (74934)
  • core-data: Fix yjs import and missing dependency. (74950)
  • dataviews: Fix missing dependency – @storybook/addon-docs. (74935)

Block Library

  • Comments Title: Copy deprecate from 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. to deprecated.js to avoid legacy attribute usage. (74924)
  • Move selectLabelText to shared utility. (74805)
  • Move useIsDraggingWithin to a shared hook. (74804)

DataViews

  • Adjust table primary media field styles. (74813)
  • Move filtering logic in field types. (74733)

Components

  • Add displayName to the anonymous components. (74716)
  • SlotFill: Unify registry and fill implementation. (68056)

Block Editor

  • Block Visibility: Fix failing 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.. (74840)

Post Editor

  • Blocks: Always trigger borwser console warnings for blocks with apiVersion below 2. (74057)

Tools

Testing

  • Block Visibility: Fix flaky end-to-end test. (74931)
  • Fix end-to-end tests: Update function names to include wp_ prefix. (74688)
  • Fix flaky ‘Revisions’ end-to-end test. (75002)
  • Real-time collaboration: Fix undo tests. (74955)
  • e2e: Fix flaky tests for settings sidebar. (74929)
  • end-to-end tests: Bump all test blocks to API v3. (74941)
  • end-to-end tests: Remove switchToLegacyCanvas from multi select and 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) suite. (74845)
  • end-to-end tests: Remove switchToLegacyCanvas from inserter drag and drop tests. (74892)
  • eslint-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: Add “never” option for dependency-group rule. (74990)
  • selectBlock: Fall back to next block if no previous block is present. (74938)

Build Tooling

  • Build script: Increase memory limit for storybook build process. (74933)
  • Build: Deduplicate and minify embedded styles. (74651)
  • Icons: Add a manifest containing icons metadata. (74943)
  • Remove react-refresh bundling. (74721)
  • Storybook: Fix missing props from component stories. (74807)
  • wp-env: Add experimental WordPress Playground runtime support. (74609)
  • Create Block: Simplify blocks-manifest registration. (74647)
  • Remove legacy babel plugins. (74916)

First-time contributors

The following PRs were merged by first-time contributors:

  • @gmjuhasz: Components: Add @types/react to dependencies. (74692)
  • @ItsYash1421: Post Excerpt Block: Fix length limits for both Editor and Front and fix ellipsis consistency. (74140)
  • @Mustafabharmal: Fix: Escape less-than character in HTML attributes to prevent block recovery errors. (74732)
  • @noruzzamans: Added Missing Global Documentation class-wp-rest-block-editor-settings-controller file. (74973)
  • @Shekhar0109: Fix: Add border-box sizing for verse block. (74722)
  • @shekharnwagh: Sync: Refactor ProviderCreator signature to an object. (74871)
  • @Swanand01: fix: Video block: video URLs pasted without “https://” show broken media. (74964)
  • @Swoyamjeetcodes: Image block: Show aspect ratio control for wide and full alignment. (74519)

Contributors

The following contributors merged PRs in this release:@aduth @alecgeatches @andrewserong @annezazu @chriszarate @DAreRodz @dinhtungdu @ellatrix @fabiankaegy @gmjuhasz @hbhalodia @huzaifaalmesbah @ingeniumed @ItsYash1421 @jameskoster @jasmussen @jeryj @jonathanbossenger @jorgefilipecosta @joshualip-plaudit @JosVelasco @jsnajdr @luisherranz @MaggieCabrera @Mamaduka @manzoorwanijk @mcsf@mikachan @mirka @mtias @Mustafabharmal @noruzzamans @ntsekouras @oandregal @ockham @pkevan @prasadkarmalkar @ramonjd @retrofox @rilwis @scruffian @senadir @sethrubenstein @shail-mehta @Shekhar0109 @shekharnwagh @shimotmk @simison @SirLouen @sirreal @Swanand01 @Swoyamjeetcodes @t-hamano @talldan @tellthemachines @Vrishabhsk @youknowriad


Props for visuals to @joen, @sirlouen and @josvelasco for reviewing of the post.

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