What’s new in Gutenberg 20.1 and 20.2?

This time, due to the smaller sizes of the releases, this post contains information for both the 20.1 (22 January) and 20.2 (5 February) releases.

“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 20.1 and 20.2 have been released and the latest is available for download!

Although both releases were smaller in size, they contain many useful enhancements, bugfixes and more. Apart from the highlighted changes, work continued on updating 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. settings to use the ToolsPanel. Both updates ship with 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) updates as well.

  • 20.1 (22 January)
    • Content preview for pages in DataViews
    • Menu name shown in list view
    • Color pickers in Navigation, Social Icons and Post 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. get Clear control
    • Changelog
  • 20.2 (5 February)
    • Content block: color options for headings added
    • Changelog

20.1 (22 January)

Content preview for pages in DataViews

The DataViews got enhanced by a new preview functionality to show the page’s content instead of the featured image, similar to patterns and templates. You can activate this feature in the settings and switch between featured image and content preview. This setting persists across all three views, table, grid and list. (67278)

Menu name shown in list view

In the list view, the name of a menu is now shown instead of the block name “Navigation”. If the menu is changed, the name is updated as well. (68446)

Color pickers in Navigation, Social Icons and Post Featured Image get Clear control

Previously, color options at the Navigation, Social Icons and Post Featured Image blocks did not have a Clear control to easily remove the color. This applies to every color option on these blocks. (68454, 68564, 68525)

Other Notable Highlights

Enhancements

  • ESLint: Improve regex for valid-sprintf rule to handle ‘%%’. (68270)
  • Simplify sprintf translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. for percentage widths. (68587)

Block Library

  • Archive Title Block: Refactor settings panel to use ToolsPanel. (67915)
  • Author Name: Refactor settings panel to use ToolsPanel. (67953)
  • Block Editor: Move state logic inside ‘BlockRenameModal’. (68560)
  • Details: Add allowedBlocks attributes. (68489)
  • Navigation: Add clearable option to color picker in navigation block. (68454)
  • Navigation: Surface menu name in the List View next to the Navigation block. (68446)
  • Page List: Added color support. (66430)
  • Query: Refactor settings panel to use ToolsPanel. (68008)
  • Social links block: Add Clear button for color option. (68564)
  • Table of Contents Block: Refactor settings panel to use ToolsPanel. (67964)

Design Tools

  • Post Comment Link: Show Border Controls By Default. (68506)
  • Query Total: Show Border Controls By Default. (68507)

List View

  • Use badge component for block anchors. (68566)

Template Editor

  • Editor: New default rendering mode for editor via post type supports. (68549)

Document Settings

  • Change “Swap” to “Replace” for Template Action. (68234)

DataViews

  • Add: Media field changing ui to Dataviews and content preview field to posts and pages. (67278)

Bug Fixes

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Check post-type support before requesting autosaves. (68680)
  • Fix text direction for URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org and email fields in block editor for RTL languages. (68188)
  • Try: Fix end-to-end tests ‘visitSiteEditor’ helper. (68534)

Block Library

  • Details block: Remove auto-close behaviour. (67766)
  • Fix File block resize glitches. (68372)
  • Navigation Link UIUI User interface: Remove onClose from onSelectBlock. (67760)
  • Post Featured Image: Adds control to clear the the overlay color. (68525)
  • Site Logo: Prevent uploading multiple images via drag and drop. (68618)
  • Social Links: Don’t prepend URL fragments. (68655)
  • 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.: Make example label for Comments Pagination Next block translatable. (68373)
  • i18n: Make example translatable in comments-pagination-previous. (68374)

Components

  • Duotone: Fix scrollbars displayed on Duotone Control. (67187)
  • Fix SCSS Media Query Compilation Issue in Storybook. (68464)
  • Fix icon condition for Badge. (68588)
  • Restore Non-Themed Text Colors for optimizeReadabilityFor. (68472)
  • StoryBook: Fix error that could occur when loading compiled CSSCSS Cascading Style Sheets.. (68526)

Site Editor

  • Classic theme preview: Remove adminadmin (and super admin)-bar class name. (68519)
  • Fix: Site Editor Template part is missing an icon in the 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.. (68653)
  • Navigation: Fix typo in history.navigation's function call. (68623)

Block Editor

  • Differentiate ‘Copy’ and ‘Copy styles’ snackbar confirmation messages. (68167)
  • Refactor: Separate input form styles to a dedicated stylesheet. (68501)
  • Update percentage strings to be translatable. (66323)

npm Packages

  • Fix irregular workspace version numbers. (68467)
  • Packages: Fix published * workspace dependencies. (68240)

Post Editor

  • Inline Commenting: Avoid querying comments when the experiment is disabled. (68632)

Colors

  • Color Gradients: Adjust max-width for color gradient swatch to accommodate reset button size. (68626)

Block Directory

  • Fix : Block Inserter Search Infinity Spinner. (68600)

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: Fix the logic path that merges plain objects. (68579)

Accessibility

  • Nux: Standardize reduced motion handling using media queries. (68423)

Block Library

  • Fix Inconsistent Labels for Lightbox Feature. (68261)
  • Site Logo: Prevent focus loss when updating media from the sidebar. (68621)
  • Standardize reduced motion handling with media queries. (68315)

Components

  • Fix usage of tooltip in the Circular option picker. (68602)

Post Editor

  • Edit Post: Standardize reduced motion handling using media queries. (68426)

Widgets Editor

  • Customize Widgets: Standardize reduced motion handling using media queries. (68425)

Block Editor

  • Remove unnecessary CSS order property for the contrast checker in the Color hook. (68055)

DataViews

  • Remove label from dataview checkbox. (67868)

Performance

  • Add npm script to profile TypeScript builds. (68533)

Post Editor

  • Editor: Update data selector in ‘PostPreviewButton’. (68678)

Documentation

  • Storybook: Add UnitControl story. (67346)
  • Add BlockIcon Storybook stories. (67186)
  • Added Global Documentation in inline documentation. (68613)
  • Block Card: Remove storybook for internal BlockCard component. (68556)
  • BlockInspector: Add showNoBlockSelectedMessage prop documentation. (68444)
  • Docs: Interactivity API – missing styles in the sample code. (66253)
  • Menu: Auto-generate README. (68249)
  • StoryBook: Add Story for ResolutionTool. (68292)
  • Storybook: Add TabbedSidebar stories and improve documentation. (68118)
  • Tabs: Remove unnecessary stories. (68463)
  • Updated Inline Document order. (68650)
  • Updated Small Typo in Feature-flags.md file. (68612)
  • Updated Typo in Document file. (68477)
  • docs: Fix type syntax in _gutenberg_add_block_template_plugin_attribute(). (68391)

Code Quality

  • Data Views: Standardize reduced motion handling using media queries. (68422)
  • Fix typos. (67304)
  • [core-data] Document and add types for dynamic actions and selectors. (67668)
  • docs: Fix param name in gutenberg_add_can_update_block_bindings_editor_setting(). (68390)
  • docs: Fix return type on gutenberg_register_block_module_id(). (68393)

Block Library

  • Query LoopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop.: Remove unused styles. (68615)
  • Site Logo: Remove unused argument for ‘mediaUpload’ function. (68617)

Global Styles

  • Remove unused prop for ‘BackgroundImageControls’. (68616)

Post Editor

  • Document Outline: Use block client ID as unique ‘key’. (68502)

Block Editor

  • BlockInspector: Remove unused ‘showNoBlockSelectedMessage’ prop. (68487)

Widgets Editor

  • Edit Widgets and Base Styles: Standardize reduced motion handling using media queries. (68427)

Components

  • Standardize reduced motion handling using media queries. (68421)

Block Directory

  • Standardize reduced motion handling using media queries #68419. (68420)

Site Editor

  • Edit Site: Add tsconfig.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. validation for package. (67406)

Tools

Testing

  • Check Storybook build on CI for PRs. (68466)
  • Fix flaky DataViews list arraow nav end-to-end tests. (68503)
  • Fix flaky navigation-frontend-interactivity end-to-end tests. (68667)
  • Site Editor: Fix “Quick Edit Mode” end-to-end tests. (68484)
  • Upgrade Playwright to v1.49. (68504)

Build Tooling

  • 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: Remove ESLint rule for deprecated functions. (68590)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@afercia @AhmarZaidi @atachibana @benazeer-ben @carolinan @ciampo @dhananjaykuber @ellatrix @geriux @himanipanchal @himanshupathak95 @im3dabasia @Infinite-Null @jeryj @jorgefilipecosta @juanfra @justlevine @karthick-murugan @luisherranz @Mamaduka @manzoorwanijk @mirka @ramonjd @SainathPoojary @shail-mehta @shimotmk @sirreal @stokesman @Sukhendu2002 @szepeviktor @t-hamano @vipul0425 @Vrishabhsk @yogeshbhutkar

20.2 (5 February)

Content block: color options for headings added

Previously, it was only possible to change colors for text, background and link on the content block. With this update, the color of all headings and each individual heading level can be changed. (67783)

Other Notable Highlights

Enhancements

Block Library

  • Details block: Add name attribute for exclusive accordion. (56971)
  • Details block: Add placeholder attribute. (68917)
  • Home Link: Enable all non-interactive formats. (68737)
  • Latest Comments: Refactor settings panel to use ToolsPanel. (67951)
  • Latest Post Block: Refactor settings panel to use ToolsPanel. (67956)
  • Read More: Refactor settings panel to use ToolsPanel. (67925)
  • Search Block: Refactoring settings panel. (67907)
  • Search Results Title Block: Add dropdown menu props to Tools Panel component. (68763)
  • Spacer: Add dropdown menu props to Tools Panel component. (68761)
  • Term List Block: Refactor settings panel to use ToolsPanel. (67955)

Design Tools

  • Position: Refactor “Position” controls panel to use ToolsPanel instead of PanelBody. (67967)
  • Post-content block 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. color support. (67783)

Block Editor

  • Improve grid visualizer resize observation. (68842)

Style Book

  • Navigation Submenu Block: Add example preview. (68378)

Bug Fixes

  • Fix: 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. _doing_it_wrong() for experimental-link-color. (68408)

Block Library

  • Archives Block: Fix reset button display state. (68757)
  • Fix: Add rel="tag" to individual anchor links in editor markup of the post terms block. (68722)
  • Fix: Linked featured image block cannot be selected correctly. (68775)
  • Page List Block: Fix empty settings panel. (68756)
  • Post Date Block: Fix reset button display state. (68758)
  • Query Page Numbers Block: Fix reset button display state. (68759)
  • Spacer block: Fix dimension control when no spacing presets are available. (68818)
  • Spacer: Fix flex layout unit reset. (68815)
  • Spacer: Fix changes being marked as persistent to undo. (68869)

Patterns

  • Editor: Improve conditions for displaying new page assembler. (68852)

Style Book

  • Disable the device preview button in the header. (68841)

Block Editor

  • Fix block color contrast checker. (68799)

DataViews

  • Fixed Incorrect Text Position issue in Dataviews. (68767)

Block Transforms

  • Embed: Remove aspect ratio classes when transforming into Paragraph. (68721)

Media

  • Upload Media: Fix package dependencies. (68718)

Accessibility

Block Library

  • Navigation Link: Improve accessibility by removing non-interactive tooltips. (68628)
  • Use the term menu instead of navigation in nav elements labels. (68683)

Post Editor

  • Update text description of the “Contain text cursor inside block” preference. (68132)

Performance

Block Editor

  • Fix ‘isBlockVisibleInTheInserter’ selector helper performance. (68898)

Block Library

  • Paragraph: Use CSS to hide placeholders in Zoom out mode. (68690)

Documentation

  • Block Editor: Add documentation for SpacingSizesControl component. (68581)
  • Changed Inline Documentation Order. (68879)
  • Docs: Update links to HTTPSHTTPS HTTPS is an acronym for Hyper Text Transfer Protocol Secure. HTTPS is the secure version of HTTP, the protocol over which data is sent between your browser and the website that you are connected to. The 'S' at the end of HTTPS stands for 'Secure'. It means all communications between your browser and the website are encrypted. This is especially helpful for protecting sensitive data like banking information.. (68888)
  • Lint: Fix broken URL reference for stylelint user guide configuration. (68706)
  • Updated Typo in Constants.js. (68765)
  • Used https in main-dashboard-button.md file. (68883)
  • wp-env: Add phpMyAdmin and multisitemultisite Used to describe a WordPress installation with a network of multiple blogs, grouped by sites. This installation type has shared users tables, and creates separate database tables for each blog (wp_posts becomes wp_0_posts). See also network, blog, site support to the documentation. (68125)

Code Quality

  • Inline Commenting: Change the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher compat directory. (68846)
  • Fix: Remove invalid param from wp_register_style() in gutenberg_enqueue_stored_styles(). (68409)
  • Fix: setcookie() $value must be string in Gutenberg_HTTP_Signaling_Server::Handle_read_pending_messages(). (68411)

Block Library

  • Gallery: Remove unused inline menu styles. (68776)
  • Move HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. element help messages to the block library utils. (68708)
  • Navigation Submenu: Classname trailing spaces. (68880)
  • Unify block title with a strict title case. (51912)
  • Video: Fix reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. component warning error. (68762)

Post Editor

  • Editor: Children prop to accept ReactNode. (68839)
  • Editor: Combine selectors in the ‘Header’ component. (68697)
  • Editor: Standardize reduced motion handling using media queries. (68424)

Components

  • Box Control: Add Runtime Check & Conditional Types for presets and presetKey Props. (68385)
  • Remove unnecessary Tooltip component from linked button. (68498)

Block Editor

  • Clean up unused utils of spacing size control. (68794)

Template Editor

  • Editor: Update post-type support key for new default rendering mode. (68745)

Tools

Build Tooling

  • Fix Duplicate Entries for 19.7.0 in changelog.txt. (68836)
  • Release Workflow: Install Subversion. (68837)

Testing

  • E2E: Fix WP Editor 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 test. (68872)

Env

  • Add WP_ENV_MULTISITE envoriment variable. (68792)

Contributors

The following contributors merged PRs in this release:

@afercia @benazeer-ben @fabiankaegy @himanshupathak95 @im3dabasia @Infinite-Null @justlevine @karthick-murugan @Mamaduka @Mayank-Tripathi32 @SainathPoojary @shail-mehta @shimotmk @Soean @spacedmonkey @stokesman @Sukhendu2002 @t-hamano @yogeshbhutkar

Thanks to @fabiankaegy and @mamaduka for helping review this post.

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