What’s new in Gutenberg 21.3? (30 July)

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

Gutenberg 21.3 has been released and is available for download!

This release focuses on improvements to the DataViews and other components, as well as inspector 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. enhancements. Below is a curated summary of the most notable changes in this release.

DataViews enhancements

The grid layout of DataViews now supports grouping items by fields. This allows developers to organize large amounts of data efficiently and will be extended to other layouts, such as table layout, in the future.

Furthermore, in addition to the existing datetime field type, DataViews now supports the date field type, which is just a date without a time. This is also needed for filtering dates using the new Calendar component. Filtering and editing features will be implemented in the future.

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. Library Enhancements

The Cover block supports the poster image, so users with a large video file or slow internet connections can see the poster image before the video loads.

The Post Content block supports a tagName selector, allowing you to change the default div wrapper to a more semantic alternative (main, section, article).

MigrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. to TypeScript continues

An effort is underway to gradually migrate packages to TypeScript. In this release, many packages have been migrated to TypeScript, making them safer and more robust. See #67691 for more details.

Changelog

Features

DataViews

  • Add groupByField support to grid layout. (70752)

Components

  • Add ValidateControls components. (70620)

Enhancements

  • DataViews: Add date field type. (70657)
  • wp-env: Add wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ configuration when creating environment. (70661)

Block Library

  • Cover: Enable support for adding posters over video. (70816)
  • Navigation Submenu Link: Add Open in new tab toggle to navigation block sidebar. (70687)
  • Post Content Block: Add tagName selector. (70698)
  • Video: Enable support for adding multiple tracks. (70689)
  • Site tagline: update block description. (34473)

Write mode

  • Allow add before/after on block toolbar menu dropdown when in write mode. (70827)
  • Remove cover block content position and full height controls from write mode. (70826)

Block 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 attribute role-based filtering to ‘isUnmodifiedBlock’. (70764)

List View

  • Package blocks: Introduce a utility for getting the block image. (68910)

Layout

  • Adds max limit to row span and column span in grid. (64895)

Bug Fixes

  • Update @tannin/sprintf to resolve CommonJS error. (70799)
  • wp-env: Don’t overwrite wp-cli.yml if it already exists. (70677)
  • wp-env: Fix Docker build errors with Debian Buster repositories. (70718)

Block Library

  • Archives: Update padding for archives block to remain consistent with list. (69008)
  • Fix: Preserve hasParallax when switching from video to image in Cover block. (70703)
  • Media & Text: Fixed resetAll to return image resolution to default value. (70683)
  • Navigation Block: Fix inconsistent padding in nested submenus when “Open on click” is enabled. (70471)
  • Navigation Link: Fix URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org deletion in Inspector Controls. (70749)
  • Separator: Surfacing the HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup control. (70455)
  • Sever Nav Link item entity link on URL change if ID already exists. (68143)
  • Video: Fix track editor state saves without explicitly applying the changes. (70628)
  • [Block] Cover: Fix resize handler gets stuck on undo. (70820)

Block Editor

  • Block Editor Components: Add missing style resets for fieldset elements. (70685)
  • Inserter: Fix focus style for disabled items. (70691)
  • Inserter: Restore styling for disabled blocks. (70663)

Global Styles

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./File: Reduce specificity of pseudo-selector styles for better override support via 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.. (70358)
  • Make Button element inherit all typography styles on the frontend. (70676)

Components

  • Update Icon component to support bundled dataviews package. (70756)

CSSCSS Cascading Style Sheets. & Styling

  • Block Lock Modal: Add ul browser defaults CSS resets. (70700)

Interactivity API

  • iAPI Router: Preserve media attribute on intial style sheets after client-side navigation. (70668)

Font Library

  • Fix: Font Library Modal: Focus outline not displaying correctly. (70667)

Post Editor

  • Match front-page link style to adminadmin (and super admin) styles. (70600)

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

  • Autocomplete: Prevent text cursor position loss when clicking to insert an item. (70660)
  • Components: Fix label and placeholder handling in LinkControlSearchInput. (70096)

Block Library

  • 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): Comments Pagination Nav Wrapper. (70730)

Performance

  • core-data: Try using cached permissions even when _fields is present in the query. (70738)

Block Editor

  • Avoid unbound requests in inserter selectors. (66817)
  • Deprecate block hovered global state. (70731)

Block Library

  • Fix: Avoid duplicate get_the_title() calls in render_block_core_post_featured_image(). (70813)

List View

  • Delay block highlighting when moving the mouse over the items. (70732)

Documentation

  • Deprecated: Fix code example. (70781)
  • Docs: Update RichTextToolbarButton link in documentation. (70804)
  • Docs: Update WP Studio to WordPress Studio. (70716)

Code Quality

  • Convert packages to TypeScript:
    • Migrate @packages/url package to TypeScript. (70496)
    • Migrate hooks package to TypeScript. (70488)
    • Migrate lazy-import package to TypeScript. (70475)
    • Migrate redux-routine package to TS. (70686)
    • Migrate plugins package to TS. (70773)
    • Migrate Icons package to TypeScript. (70456)
    • TypeScript: Fix types for core entity 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.. (70788)
    • TypeScript: Migrate block-serialization-default-parser to TS. (#70507). (70766)
    • TypeScript: Migrate wordcount package to TypeScript. (70501)

Block Library

  • Navigation Link: Add opensInNewTab to resetAll. (70717)
  • Video: Fix ‘MediaUploadCheck’ wrapper for Poster control. (70830)
  • Video: Reuse logic for uploaded track selection. (70675)

DataViews

  • Improve data in DataViews storybook. (70817)
  • filterSortAndPaginate: Extract sortBy and groupBy logic. (70822)

Components

  • Reuse existing useControlledValue hook in Calendar components. (70655)
  • SelectControl: Move classnames to root. (70643)
  • DateCalendarDateRangeCalendar: Move to private APIs. (70681)

Layout

  • Dimensions support: Fix duplicate output of styling rules. (70796)

Block API

  • Blocks: Set default ‘apiVersion’ for client-side registration. (70750)

List View

  • Remove public APIs for getting images. (70705)

Tools

  • Improve 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 release checklist and documentation. (70808)
  • Improving Gitignore for files related to applying patches. (70745)
  • Update codeowners for packages/dataviews. (70753)
  • Update gutenberg release documentation. (70772)
  • Sync package-lock.json on latest NPM. (70839)

Contributors

The following contributors merged PRs in this release:

@Adi-ty @aduth @andrewserong @carolinan @chihsuan @ciampo @DAreRodz @dhruvikpatel18 @dmsnell @EliezerSPP @ellatrix @getdave @gigitux @im3dabasia @Infinite-Null @jeryj @jsnajdr @kellychoffman @Mamaduka @manzoorwanijk @mukeshpanchal27 @n2erjo00 @ndiego @oandregal @prasadkarmalkar @priethor @shimotmk @shrivastavanolo @SirLouen @t-hamano @talldan @vipul0425 @yogeshbhutkar @youknowriad

Props to @mamaduka, @talldanwp and @oandregal for peer review.

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