What’s new in Gutenberg 21.4? (13 August)

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

Gutenberg 21.4 has been released and is available for download!

This release focuses on improvements to DataViews and other components. Below is a curated summary of the most notable changes in this release.

DataViews table layout grouping and multi-selecting

Following up on the last Gutenberg release, which introduced grouping by a field in DataViews grid layouts, Gutenberg now brings the grouping option to tables as well.

Moreover, the table gets another feature from a different layout: it is now possible to multi-select with Control / + click, similar to how the grid layout operates.

More on DataViews enhancements

The table layout is not the only thing getting some tweaks in this release; there are a handful of new goodies for dataviews, including:

  • The grid layout now uses responsive images, improving performance in the most image-heavy layouts.
  • Filters can now be locked, allowing you to see their effects without modifying them. This allows for pre-configured views, such as the ones you can find in the Site Editor’s pages screen, filtering by different statuses.
  • Speaking about filters, filtering by date just got smoother thanks to its calendar implementation.
  • The empty state shown when there are no results can now be customized.

Style shuffling in write mode

Write mode is gaining traction, and this release introduces a simple yet user-friendly feature: when in write mode, sections get a style shuffling button, allowing you to experiment with random styles and find the perfect vibe for your site!

As a reminder, write and design modes are an experiment that is meant to simplify content vs design editing in 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. editor; you can enable it in the Gutenberg experiments page and submit your feedback on the experience.

Changelog

Enhancements

  • Change 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. height from 60px to 64px. (60729)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data: Add a private media “edit” action to ensure cache invalidation. (70814)
  • ServerSideRender: Introduce a new useServerSideRender` hook. (70543)

DataViews & Dataforms

  • Allow dataviews empty state to be customised. (70867)
  • DataForm: Bootstrap validation (required and typechecks). (70901)
  • Add ctrl/cmd + click multiselection support to table layout when clicking rows. (70891)
  • Align media styles in table view with list view for consistency. (70671)
  • Allow Dataform Select Box to have a custom empty option. (70894)
  • Implement Edit control for date field. (70836)
  • Introduce locked filters. (71075)
  • Make the media item clickable as well. (70985)
  • Support groupBy in table layout. (71055)
  • Try using responsive images in dataview grid layouts. (70493)
  • perPageSizes tweaks. (71004)

Block Library

  • Add preview example for comments-count and comments-link. (71016)
  • Categories: Disable links in the editor. (70896)
  • Cover/Video Block: Add Drag-and-Drop Support for Poster Uploads. (71039)
  • File Block: Use mime type to determine if file is PDF. (71033)
  • File block: Use native feature detection for pdf support. (63044)
  • Video/Cover Block: Enhance UIUI User interface for Poster Image Preview. (70939)

Developer Experience

  • Override the existing file paths using those from a variant. (70855)

Icons

  • Add icon: Dashboard. (70300)
  • Update LTR and RTL icons. (71084)
  • Update old table icons. (71085)

Block Editor

  • Explain why we need to intercept hash links in 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. editor. (70960)
  • List: Add keyboard shortcuts to Indent/Outdent tooltips. (71053)

Media

  • useSaveImage: Handle missing editMediaEntity gracefully. (70967)

Write mode

  • Add shuffle style to write mode toolbar. (70946)

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.

  • Deprecate data-wp-ignore directive with warning message. (70945)

Components

  • TextControl: Improve theming support. (70910)

Block bindings

  • Date block: Allow connecting to Block Bindings. (70585)

Bug Fixes

  • Synced Pattern: Guard against redeclaration of WP_Block_Cloner. (71174)
  • core-data: Fix PostStatusObject export (#71191)
  • Add @wordpress/env as an optional peer dependency of @wordpress/scripts. (70636)
  • Review all the ‘Add New’ strings #53984. (71083)
  • ServerSideRender: Allow skipping block shadow support value. (70970)

Block Library

  • Social Link Block: Add context to service names. (70413)
  • File Block: Fix PDF preview on URLs containing query parameters. (70915)
  • Image Block: Prepend 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. to links when missing protocol. (71027)
  • More Block: Fix undo/redo history for custom text. (71087)
  • Page List: Fix Notice component background gets incorrectly inherited. (70932)
  • Paragraph Block: Fix ‘Drop cap’ control reset value. (70959)
  • Resize TikTok social icon to appropriate size. (71101)
  • Video: Fix missing trailing periods. (70857)

DataViews

  • Added max-width to DataView columns. (70983)
  • Clear user-input filters properly. (70956)
  • DataForm: Fix Edit for array field type. (71000)
  • Do not render an empty level span if level is 0. (71021)
  • Pages: Filters should not be visible if they are present in the bundled view. (71059)
  • Allow searching over array fieldtypes. (70785)
  • Fields: Add label to Password field. (70865)

Block Editor

  • Fix single block selection when holding ‘Shift’ key. (70978)
  • MediaReplaceFlow: Correctly truncate long URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (71062)
  • RichText: Support more colors for format boundary colors. (70918)
  • Writing Flow: Remove empty blocks when the merge target doesn’t support merging. (70741)

Post Editor

  • Editor: Fix ‘isEditedPostAutosaveable’ selector return value. (70888)
  • Editor: Fix incorrect title when multiple post selected. (70997)
  • Editor: Move editor-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. CSSCSS Cascading Style Sheets. reset closer to its target. (71096)

Saving

Components

  • PaletteEdit: Fill available space with input field. (70935)
  • TextareaControl: Add missing component CSS classname. (70930)

Block bindings

  • Date Block: Ensure that fallback value is overridden if source is not registered. (71047)

Icons

  • Update dollar icon. (71042)

Synced Patterns

  • Synced Pattern block: Pass block context to pattern content. (70943)

Interactivity API

  • iAPI Router: Ignores <noscript> elements while preparing DOM. (70905)

Block API

  • Add special case for metadata attribute in ‘isUnmodifiedBlock’. (70903)

Global Styles

  • Fix ability to preview Additional CSS changes in the CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. when using a Block Theme. (70428)

List View

  • Fix focus outline style. (69201)

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)

Components

  • Color Picker: Improve color picker slider focus styles. (70146)

Performance

Block Library

  • Fix layout shift caused by video tag in Video block lacking width and height. (70293)

Documentation

  • Add DataForm story about field visibility. (70996)
  • Add changelog entry for #70493. (71008)
  • Added Missing Global Documentation. (71029)
  • Blocks: Display browser console warnings for blocks with apiVersion below 2. (70783)
  • Clarify block name immutability and namespace best practices [docs]. (71040)
  • DataViews: Clarify filtering behavior in DataViews configuration in README.md. (70958)
  • Field elements: Add changelog for custom empty element. (71041)
  • Fix: Add hyphen to “hands-on” in Getting Started section. (70906)
  • Image: Fix return type annotation for lightbox settings function. (71073)
  • Improve note for ‘blockType.save’ method. (70942)
  • Mentioning Playground CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. instead wp-now. (71071)
  • ServerSideRender: Add missing changelog entry. (70952)
  • Social: Document guidelines and extensibility. (70961)
  • Update dataviews changelog for #70785. (70885)
  • Updated Inline Documentation order in duotone file. (71032)
  • Updated Small Typo in block-styles.md file. (70927)
  • registerFormatType: Document ‘object’ setting. (70858)

Code Quality

  • Core data: Deprecate the root/media entity. (71038)
  • Migrate @wordpress/i18n package to TypeScript and Add TextDomain Type Safety to createI18n. (70843)
  • Migrate keycodes package to TypeScript. (70466)
  • Migrate undo-manager package to TS. (70757)
  • TypeScript: Migrate jest-console package to TS. (70538)
  • TypeScript: Migrate priority-queue package to TS. (70469)
  • wordcount: Fix count function signature to make userSettings parameter optional. (71106)

Block Library

  • Cache redundant function call for is_user_logged_in() function. (70999)
  • Social Icon: Retire the Skype social service. (70769)
  • end-to-end Tests: Split large Navigation tests into smaller tests. (69117)

Block Editor

  • Block Variation Transforms: Add box-sizing rule. (71052)

Post Editor

  • BrowserURL: Refactor to a function component and use 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.. (71035)

Block bindings

  • Post Date block: Address feedback. (70982)

Zoom Out

  • Delete unused property. (70893)

Components

  • Add placement prop to replace position in RangeControl. (70326)

Tools

  • DataViews: Add changelog entry for #70891. (70953)
  • PR automations: Add New Block to the list of allowed PR-type labels. (71045)

Testing

  • Add Node.js 24 to test strategy. (71091)
  • CI: Add workflow to check if there is a changelog entry for dataviews. (71023)

Build Tooling

  • Build Tools: Updates ‘browserlist’ and ‘caniuse-lite’ to the latest versions. (71009)

First-time contributors

The following PRs were merged by first-time contributors:

  • @asdofindia: File block: Use native feature detection for pdf support. (63044)
  • @coderGtm: (70409)
  • @heavyweight: Core Data: Add getTitle for user entity. (70941)
  • @KHarika01: Fix: Add hyphen to “hands-on” in Getting Started section. (70906)
  • @kushagra-goyal-14: TypeScript: Migrate priority-queue package to TS. (70469)
  • @lalitkumawat1m: Review all the ‘Add New’ strings #53984. (71083)
  • @rcrdortiz: Added max-width to DataView columns. (70983)
  • @Sahil1617: Deprecate data-wp-ignore directive with warning message. (70945)

Contributors

The following contributors merged PRs in this release:

@Adi-ty @alshakero @andrewserong @arthur791004 @asdofindia @BugReportOnWeb @chihsuan @coderGtm @desrosj @dhananjaykuber @dhruvikpatel18 @dsas @fellyph @heavyweight @himanshupathak95 @im3dabasia @Infinite-Null @jameskoster @jasmussen @jeryj @jsnajdr @KHarika01 @kushagra-goyal-14 @lalitkumawat1m @Mamaduka @megane9988 @mikejolley @mirka @oandregal @ockham @p-jackson @priethor @ramonjd @rcrdortiz @richtabor @ryanwelcher @Sahil1617 @shail-mehta @shimotmk @shrivastavanolo @Sukhendu2002 @t-hamano @talldan @tellthemachines @USERSATOSHI @vipul0425 @westonruter @yogeshbhutkar


Props to @mcsf for the peer review.

#gutenberg #gutenberg-new