What’s new in Gutenberg 21.8? (8 October)

“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 21.8 has been released and is available for download!

This version introduces 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. Visibility controls, along with several improvements to Block Comments, Accordion, and Time To Read blocks.

1. Block Visibility Control Support and UI
2. Block Comments Improvements
3. Accordion and Time To Read Blocks
4. Changelog

Block Visibility Control Support and UIUI User interface

A new visibility control feature has landed!
You can now hide blocks directly in the editor when they won’t be displayed on the frontend. This marks the first UI for Block Visibility, paving the way for more granular design control in future releases.

Block Comments Improvements

Block Comments received another round of enhancements:

• Better messaging when no related block exists
• Visual highlighting of the referenced block
• Improved comment thread outline and UI polish
• Simplified code and better performance

Accordion and Time To Read Blocks

Both of these blocks have been refined for a smoother experience:

• Time To Read: now includes range and word count options, plus migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. support for older blocks.
• Accordion: improved structure, naming, and 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).

Changelog

Features

Block Editor

• Section block multi-selection: Disable transforms and inspector controls. (71708)

Enhancements

Block Comments

• Improve comments panel close icon label. (71701)
• Add Discussion Field with tracksback and comment status agreagetd on Post/Page Quick Edit. (71949)
• Fields package: Add Storybook examples. (71864)
• Block Comment: Display message when there is no related block. (71968)
• Block Comment: Improve comment thread outline. (71961)
• Block Comment: Improve related block highlighting. (71932)
• Block Commenting: Add block-comments as a new post type support. (71682)
• Block Commenting: Change date format depending on comment date. (71835)
• Block Commenting: Show date or human-readable time diff code. (71667)
• Block Comments: Apply border color to avatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.. (71917)
• Block Comments: Highlight the related block. (71308)
• Block Comments: Match the comment form UI to the design. (71898)
• Block Comments: Match the show more replies button UI to the design. (71884)
• Block Comments: Simplify action callbacks. (71892)
• Block Comments: Update ‘Actions’ menu design. (71877)
• Block Comments: Update editing flow. (71889)

Block Library

• Accordion Blocks: Organize block supports. (71823)
• Accordion 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.: Add content role to title attribute. (71762)
• Accordion Header: Remove textAlignment and textAlign. (71875)
• Accordion Header: Use withoutInteractiveFormatting instead of hardcoded formats. (71745)
• Accordion: Add example block preview. (71365)
• Accordion: Rename block names. (71978)
• Add paragraph level option to post type label block. (71947)
• Enhance Term Description Block with Context Support. (71525)
• Terms Query inspector controls revamp + add subterms option. (71633)
• Time To Read: Add a range option. (71606)
• Time To Read: Add a word count option. (71841)
• Time To Read: Make display as range the default, and allow older blocks to migrate to this setting. (71842)
• Time to Read: Replace toggles with block variations. (71897)

DataViews

• Add number field. (71797)
• Add support for elements validation in DataForm’s array fields. (71194)
• Export DataViewsPicker from dataviews package. (71836)
• Prevent hiding the last visible field. (71625)
• DataViews: Expose FiltersToggled subcomponent. (71907)

Block Editor

• Add configurable timeout parameter to flashBlock. (71752)
• Link Control: Update button text from Save to Apply. (72005)

Global Styles

• Add reset button to BackgroundControlsPanel. (71928)
• Site Editor: Make less prominent Addtional CSSCSS Cascading Style Sheets. UI. (71550)

Block bindings

• Communicate supported block attributes from server side. (71820)
• Image block: Conditionally remove empty <figcaption>. (71893)
• Navigation Link: Use block bindings to dynamically fetch the URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the editor and on front end. (71630)

Write mode

• Try adding content roles to navigation blocks. (71747)

Components

• Textarea Component: Add default resize vertical rule. (71736)

Post Editor

• PostTypeSupportCheck: Handle support keys sub-features. (71723)
• Post Editor: Add the back button animation similar to the site editor. (71929)

Patterns

• Block Inspector: Add content tab for section blocks. (71714)

Icons

• Add gift Icon. (71705)

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: Update router regions inside elements with data-wp-interactive. (71635)

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

• Add ability to toggle meta box pane open and closed. (71623)

New APIs

Block API

• Add block visibility control support and UI. (71203)

Bug Fixes

• Add decodeEntities for CollabSideBarContent errors. (71909)
• Block Comment: Make blockCommentId as part of the metadata. (71921)
• Block Commenting: Don’t show unpinnable 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. on mobile viewports. (71834)
• Block Comments: Fix canceling the form for a selected block. (71862)
• Block Comments: Fix translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. comments to say participants in toolbar indicator. (71890)
• Consistently show (no title) as a fallback for pages and templates with empty titles. (71945)
• 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. comment clause based on current query. (71712)
• Fix comment counts with filter. (71874)
• Template activation: Don’t set site option on edit. (71811)
• Template activation: Fix saveEntityRecord with theme ID. (71798)
• Template activation: redirect theme templates urls to wp_registered_template (72003
• Template activation: add meta to all newly created templates (72156
• Template activation: reduce templates listed as options for post/page (72141
• Template activation: call get_block_templates filter when short-circuiting (71840
• Template activation: allow empty array to be set (72011
• Template activation: fix /lookup endpoint to use custom resolve function (72049
• Template activation: ignore templates not associated with active theme (72029

Block Library

• Accordion Block: Hide “Add” button when multiple blocks are selected. (71750)
• Accordion Header: Fix toggle icon position in the editor. (71859)
• Accordion Header: Skip serialization correctly. (71804)
• Accordion Panel: Add role=region. (71902)
• Accordion Panel: Fixes block visibility when the panel is collapsed. (71866)
• Fix Navigation Block default link consistency across all insertion methods. (71899)
• Fix accordion gradient background. (71802)
• Fixes Accordion block width issue when applying padding. (71809)
• Post Author Block: Add default avatar fallback for editor display outside postId context. (71775)
• Table of Contents: Add aria label to the nav element. (71586)
• Terms Query: Fix console errors. (71795)
• Time to Read: Change word count character based on word count type. (71920)
• fix: Hide accordion icon position setting when show icon is disabled. (71748)

Patterns

• Fix incorrect block editing mode assigned in some cases. (71970)
• contentOnly unsynced patterns experiment: Ensure a tab is selected when clicking Edit contents. (71987)

DataViews

• DataViewsPicker Grid layout: Support hiding the title. (71865)
• Fix: Exclude non-hideable fields from the Properties list in the view configuration. (71729)

Site Editor

• Fix creating templates for posts with long slugs. (71838)
• Fix the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher warning for the URL query. (71753)

Write mode

• Accordion Block: Hide Add button in write mode. (71941)

Interactivity API

• iAPI: Fix nested data-wp-each directives using the same items key. (71870)

Block bindings

• Fix pattern override 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., editing was allowed on non enabled overrides blocks. (71813)

Components

• Button: Fix incorrect padding with text and right icon. (71464)

Accessibility

• Block Comments: Improve input labels. (71843)
• Block Comments: Make comment thread focusable and improve keyboard navigation. (71883)

Block Library

• Accordion Block: Add additional keypress handlers for navigation. (71786)
• Accordion: Remove label from Add button. (71756)
• Added default focus and hover states to accordion header. (71937)
• Fix: Add aria-hidden to accordion toggle icon. (71783)
• Update: Accordion heading level synchronization. (71895)

Performance

• Block Comments: New ‘useBlockComments’ hook and perf improvements. (71869)

Experiments

Block API

• Allow registering PHP-only blocks. (71794)

Documentation

• DataForm: Update visibility example in storybook. (71771)
• Docs: Use gutenberg instead of Gutenberg in package name. (71790)
• Fix examples with elements in field type story. (71971)
• Update validation story to cover number field type. (71980)

Code Quality

• 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. changelog: Update for 9702 (to 9949). (71849)
• Block Comments: Unfold custom styles. (71766)
• Create an AGENTS.md file. (71796)
• 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. Schema: Update block.json apiVersion to 3. (71852)
• Refactor block-inspector: Improve maintainability and readability. (71608)

Block Library

• Accordion Block: Simplify script module enqueueing. (71742)
• Accordion Blocks: Standardize CSS class names. (71785)
• Accordion Header: Don’t use flex-direction:Reverse. (71737)
• Accordion Header: Remove hardcoded inline styles and unused CSS class. (71731)
• Comments: Fix potential PHP warning. (71860)
• Extract shared Controls component for Navigation Link and Submenu blocks. (71994)
• Navigation Block: Use path for all navigation toogle icons. (71829)
• Post Date: Combine ‘coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data’ store selectors. (71846)
• Social Icon: Removed extra spaces in color styles. (71900)
• Time to Read: Simplify edit function. (71965)

Block Variations

• Group block: Simplify variations’ isActive fields. (63100)

Tools

Testing

• Block Comments: Add general end-to-end test coverage. (71844)

First-time contributors

The following PRs were merged by first-time contributors:

• @Drivingralle: Navigation Block: Use path for all navigation toogle icons. (71829)
• @epeicher: Button: Fix incorrect padding with text and right icon. (71464)
• @ritoban23: Accordion Blocks: Organize block supports. (71823)
• @theaminuli: Post Author Block: Add default avatar fallback for editor display outside postId context. (71775)
• @Utsav-Ladani: Add paragraph level option to post type label block. (71947)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @adamsilverstein @Adi-ty @andrewserong @cbravobernal @DAreRodz @dinhtungdu @Drivingralle @elazzabi @ellatrix @epeicher @getdave @himanshupathak95 @jorgefilipecosta @jsnajdr @juanfra @karthick-murugan @kmanijak @levinbaria @MaggieCabrera @Mamaduka @mikachan @n2erjo00 @nani-samireddy @nerrad @ntsekouras @oandregal @ockham @peterwilsoncc @priethor @R1shabh-Gupta @ramonjd @ritoban23 @scruffian @shail-mehta @shimotmk @sirreal @stokesman @sunyatasattva @t-hamano @talldan @tellthemachines @theaminuli @theminaldiwan @Utsav-Ladani @yashjawale @youknowriad

Props @krupajnanda and @mosescursor for peer review.

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