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.

What’s New In
Gutenberg 21.8?

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

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

What’s new in Gutenberg 21.7? (24 September)

“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 21.7?

Gutenberg 21.7 has been released and is available for download!

Expanded Command Palette

Site Editor navigation commands have now been made available on all screens.

Experiment: Terms Query 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.

A new block has been added, called Terms Query, similar to the Query block, but for terms rather than posts. It is designed to contain a new Terms Template block, which holds inner blocks with term data for displaying each term.

Go to Gutenberg > Experiments, and toggle the “Blocks: add experimental blocks” option to test it.

Experiment: contentOnly for Unsynced Patterns and Template Parts

An experiment has been added to give unsynced patterns and template parts contentOnly treatment, to prevent accidental edits of non-content blocks. To test, enable it on the Gutenberg > Experiments adminadmin (and super admin) page.

Experiment: Block Commenting

The block commenting experiment has continued to receive fixes and improvements, such as enabling them for published posts.

Changelog

Enhancements

Command Palette

  • Move custom CSSCSS Cascading Style Sheets. command to core-commands from edit-site package. (71565)
  • Register menu navigation based on CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Menu 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.. (71476)

DataViews

  • Add color field type and control to DataViews. (71522)
  • Add data picker functionality. (70971)
  • Add password field. (71545)
  • DataForm radio control: Support validation and description. (71664)
  • DataForm select control: Support validation. (71665)
  • DataForm toggleGroup control: Support validation. (71666)
  • DataForm: Add a textarea control available for use with the text field type. (71495)
  • DataForm: Add summary field support for composed fields. (71614)
  • DataForm: Switch boolean field types from toggle to checkbox UIUI User interface. (71505)
  • Dataform: Add new URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org field type and field control. (71518)
  • Dataform: Add new telephone field type and field control. (71498)
  • Dataforms: Add icons to email and telephone controls. (71514)
  • Dataforms: Add object configuration support for Edit property with prefix/suffix options. (71582)
  • Implement groupBy for list layout. (71548)
  • Update datetime control to use calendar UI. (71509)
  • DataForm: Row Layout. (71124)

Block Library

  • Navigation Link: Change ‘Add page’ to ‘Create page’ button text. (71487)
  • Navigation Link: Show ‘Create page’ button in Write Mode while hiding ‘Add block’. (71489)
  • Navigation Link: Surface page creation functionality clearly in the LinkUI. (71188)
  • Normalize the Navigation block appender behavior between canvas and list view contexts. (71163)
  • Table of Contents: Update toolbar controls. (71587)
  • Terms Query: Combine Order and Order By control into single dropdown + remove order by slug. (71656)

Write mode

  • Add Navigation Add Page Button. (71192)
  • Hide Post Date toolbar when child of Query in contentOnly mode. (71707)
  • Try adding a contentRole block support to content container blocks. (71539)

Block bindings

  • Add block_bindings_supported_attributes 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.. (71663)
  • Add fallback for new features introduced in Core. (71389)
  • Image block: Save <figcaption> if caption attr is bound. (71483)

Block Editor

  • Localize labels in getVisualTypeName() for link control search items. (71503)
  • Update conditions for displaying the empty block inserter. (70897)

Global Styles

  • Site Editor: Always show Additional CSS button. (71537)

Components

  • Add support for ValidatedFormTokenField. (71350)

Command Palette

  • Make navigation commands available on all screens. (71335)

Interactivity API

  • Add fetchpriority=low support to script modules. (70173)

Block Variations

  • Have getActiveBlockVariation fall back to default variation. (63858)

Core Data

  • Core Data: Remove conditions for selector resolutions. (71575)

New APIs

  • Core Commands: Introduce new useCommands hook. (71603)

Bug Fixes

  • Core Data: Don’t return partial data when selecting a complete item. (71474)
  • Core Data: Fix early return check for the record field-level resolutions. (71541)
  • Core Data: Fix field conditions in ‘getRevision’ selector. (71629)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher 8.5 array offset deprecation warning. (71654)

DataViews

  • DataForms regular layout: Remove label style overrides as they cause inconsistent results. (71574)
  • DataForms regular layout: Use BaseControl visual label for readonly fields when in top labelPosition. (71597)
  • DataViews grid layout: Rounded corners for media. (71543)
  • Field API: Add setValue. (71604)

Write mode

  • Add contentRole to Query block and make sure Change design always works as expected. (71686)
  • Hide Spacer resizable box in write mode. (71671)
  • Make sure “add page” button label only appears once. (71710)

Block Editor

  • Fix popover scroll hook’s simultaneous scrolling. (71468)
  • Fix stale insertion point reference. (71559)
  • useClipboardHandler: Prevent file paste for users without media upload permissions. (71607)

Components

  • Fix popover not calling onClose on unmount. (71252)
  • Modal headings and labels missing editor text color. (71311)
  • Validated form controls: Fix Sass var handling for red color. (71391)

Global Styles

  • BorderRadius Presets: Fix Generating wrong variable names in pattern code. (71631)
  • Search: Border radius presets work correctly. (71481)

Block Library

Block bindings

  • Fix back-compat layer. (71691)

Block Transforms

  • Block Editor: Fix BlockSwitcher to prevent transforms on reusable blocks. (71661)

Patterns

  • Content Only Pattern experiment: Restore purple block icon color for synced patterns. (71655)

Post Editor

  • Fix: Hide “View Post” link for non-viewable post types. (71356)

Block API

  • Allow block attributes strings to terminate in \ character. (71291)

Block Bindings

  • 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])(#71813))

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 Comments: Make “n more replies” text clickable for accessibility. (71387)
  • feat: Clarify label & add help text with link. (70451)

DataViews

  • Custom empty elements are no longer wrapped in <p> tags to improve accessibility. (71561)

Performance

  • Core Data: Always try to resolve entity permissions. (71532)

Post Editor

  • Editor: Try displaying intermediate results for hierarchical terms. (71402)

Experiments

Patterns

  • Make unsynced patterns content only by default. (71512)
  • contentOnly Patterns experiment: Add Edit Contents button to block inspector and show ‘Detach’ block action. (71653)

Block Library

  • Add Terms Query block. (70720)
  • Pattern content only experiment: Make template parts section blocks. (71627)

Block Commenting

  • Make buttons in dialogs translatable and clear. (71639)
  • Use rendered comment content. (71638)
  • Improve error handling for core data actions. (71695)
  • Use TextareaAutosize for comment field. (71424)
  • Add comment indicators in the block toolbar. (71271)
  • Add the ability to reopen resolved comments. (71250)
  • Enable inline comments on published post. (71295)
  • Block Comments: Prevent commenting on empty blocks. (71497)
  • Fix block comment to display correct time. (71652)
  • Fix: Disable block commenting when postId is not number. (71643)
  • Fix: Hide resolved comments in unpinned mode. (71409)
  • Fix: Unable to pin comment 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. after unpinning. (71386)
  • 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.: Show “1 more reply” instead of “1 more replies” in block comments. (71685)

Documentation

  • ControlWithError: Add documentation about cloned children. (71392)
  • DataForm: Remove default storybook example. (71609)
  • Docs: Fix broken links in Gutenberg release checklist. (71611)
  • Docs: Split “Gutenberg Release Process” page into two. (71130)

Code Quality

  • Block Commenting: Prevent unnecessary API requests when post ID is not integer. (71713)
  • CODEOWNERS: Remove some block code owners. (71657)
  • Export UseEntityRecordsWithPermissionsType. (71003)
  • Migrate element package to TS. (70886)
  • [core-data]: Fix TS types for user object. (68045)
  • i18n: Remove unnecessary JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. file. (71549)

Block Library

  • Clean up LinkUI duplication for Add block and Create page flows. (71499)
  • Gallery Block: Add end-to-end test for image randomization. (71538)
  • Refactor Link UI controls with better props. (71515)
  • Refactor: Content only template locking block editing modes to reducer. (67606)

Block bindings

  • Date block: Move block_bindings_supported_attributes filter to compat layer. (71662)

DataViews

  • Remove leftover code for Pages. (71534)

Tools

  • Update CODEOWNERS to remove ndiego. (71591)

Testing

  • Automated testing: Add taxonomy pagination tests. (71584)
  • Fix comments in block editing mode tests. (71690)
  • contentOnly patterns experiment: Add reducer tests. (71688)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@adamsilverstein @Adi-ty @andrewserong @coderGtm @coreyworrell @dhruvikpatel18 @elazzabi @ellatrix @getdave @gigitux @heavyweight @jeryj@jorgefilipecosta @karthick-murugan @kmanijak @kushagra-goyal-14 @Mamaduka @manzoorwanijk @mikachan @mirka @ndiego @ntsekouras@oandregal @ockham @p-jackson @priethor @R1shabh-Gupta @shimotmk @shrivastavanolo @sirreal @stokesman @straku @swissspidy @t-hamano@talldan @tellthemachines @USERSATOSHI @westonruter @xavier-lc @yashjawale

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

What’s new in Gutenberg 21.6? (10 September)

“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 21.6?

Gutenberg 21.6 has been released and is available for download!

It brings several enhancements, including improvements to the new Accordion 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. and the Dataviews grid. This release also incorporates various 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. fixes and code refactoring, continuing the 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. Additionally, it lays the groundwork for a future upgrade to ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. 19.

  1. New add accordion button
  2. Improved Dataviews grid interface.
  3. Select, dropdown and text inputs now support global styles.
  4. Changelog

New “add” accordion button

A new “add” button has been incorporated into the accordion block, simplifying the process of creating new content items by allowing direct additions to the accordion toolbar.

Improved Dataviews grid interface.

The dataviews grid now offers a cleaner interface. Titles can be hidden, and actions are accessible on hover, allowing for a simplified grid without sacrificing the ability to add actions to individual items.

Select, dropdown and text inputs now support global styles

This release brings global styles support to selects, dropdowns, and text inputs, giving themes consistent control over these common form elements. By defining styles in theme.json, authors can customize colors, borders, and typography without extra CSSCSS Cascading Style Sheets.. This update makes forms feel more cohesive with the rest of a site’s design.

Changelog

Enhancements

  • Add support for precision type placeholders to translator comments eslint. (71145)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Commands: Add Dashboard option to return to dashboard. (71261)
  • Core Data: Add ‘supportsPagination’ to all appropriate entities. (71302)
  • Core Data: Forward resolvers for pagination selectors. (71304)
  • Core Data: Include pagination 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. while receiving intermediate results. (71401)
  • Create Block: Add lifecycle script execution support. (71072)
  • Display names for Context providers. (71208)

DataViews

  • DataForm: Add description support for the combined fields and show the description in the Card layout. (71380)
  • DataForm: Streamline validation behavior. (71345)
  • Revert “DataForm: Streamline validation behavior”. (71359)
  • Support hiding the title in Grid layout, with actions available on hover. (71369)
  • Support the “Minimal UIUI User interface” story by using DataViews.Footer. (71276)

Block Library

  • Accordion Panel: Remove unnecessary wrapper div and simplify save. (71454)
  • Accordion: Add an “Add” button. (71388)
  • 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. Block: Fix broken placeholder. (70840)

Offline

  • api-fetch: Check navigator.onLine to improve failure notices. (71438)

Meta Boxes

  • Edit Post: Check for meta box container before adding constraints. (71423)

Commands

  • feat: Added keyword support & added basic keywords for post/page. (70624)

New APIs

Global Styles

  • Add support for select or dropdown elements. (70379)
  • Global styles: add element support for text related inputs. (70378)

Bug Fixes

  • Add permission checks to Command Palette commands. (71267)
  • Components: Fix Tab font size when used outside WP. (71346)
  • Core Data: Fix error in ‘getEntityRecordsTotalPages’ selector. (71303)
  • Scripts: Do not access window global. (71348)
  • wp-scripts: Remove clean-webpack-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 dependency. (71080)

Block Library

  • 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.: Fix RTL toggle button layout. (71480)
  • Fix issue of css affecting the nested accordion icon. (71445)
  • Fix timezone in Date block. (71430)
  • Fix: Randomization in Gallery Block doesn’t work when Lightbox is enabled. (71408)
  • Group Block variation:Remove variation text color. (71429)
  • Properly apply styles and classes to the experimental form block. (55755)
  • Template Part: Display icons correctly when in placeholder state. (71327)
  • fix: Prevent accordion toggle button overflow at full width. (71446)
  • fix: Prevent scrollbars on accordion header and toggle. (71484)

Write mode

  • Allow adding “content” role blocks to containers that also have a “content” role in write mode. (71232)
  • Audio and Video: Hide caption controls in contentOnly mode. (71368)
  • Hide ‘Add block’ control in Link UI when Navigation Link block is in contentOnly mode. (71213)
  • Image: Don’t allow convert to cover controls in contentOnly mode. (71329)

Post Editor

  • Edit Post: Fix misplaced icon on back button. (71406)
  • Editor: Fix theme stylesheet injection in ‘useAvailablePatterns’. (71332)

DataViews

  • Fix grid padding values on mobile viewports. (71455)

Block Editor

  • Inserter: Fix InserterListbox rendering for React 19. (71410)

Style Book

  • Accordion Content, Header, Panel: Remove example field. (71407)

Zoom Out

  • Fix Zoom out should be disabled when Show Template is toggled off. (71361)

Components

  • ControlWithError: Show validating state when transitioning from error state. (71260)

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: Make state getters to be updated asynchronously with store(). (70974)

Performance

  • Add wp-env SPX profiler option. (70693)

Post Editor

  • Editor: Improve the ‘Design’ 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. panel performance. (71333)

Documentation

  • Core Data: Improve ‘registry.batch’ documentation. (71325)
  • DataForm: Better story for validation. (71298)
  • DataViews: Fix defaultLayouts documentation error. (71334)
  • Field Types: Update storybook. (71440)
  • 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.: Document ‘hookName’ and ‘namespace’ parameters. (71288)
  • Storybook: Set DateCalendar and DateRangeCalendar components as private. (71453)

Code Quality

  • 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): Remove redundant styles. (65409)
  • Command Palette: Enqueue assets globally. (71264)
  • Convert api-fetch package to TypeScript. (67669)
  • Convert date package to TypeScript. (67665)
  • Core Data: Remove unused reducers. (71305)
  • Fix: Add JSON_HEX_TAG flag to wp_json_encode in script tags. (71280)
  • Interface: Remove leftover comment. (71331)
  • Types: Update to be compatible with React 19. (71374)
  • api-fetch: Clean up error handling. (71458)
  • api-fetch: Cleanup and improve unit tests. (71439)
  • core-data: Use Object.fromEntries instead of reduce when generating entities reducer. (36296)
  • Deps: Bump framer-motion to v11.15.0. (71442)
  • Move Site Editor command from wordpress/editor package to wordpress/core-commands. (71262)

Block Editor

  • Fold uniqueByBlock into options object. (71279)
  • Remove duplicate ‘InsertionPointOpenRef’ context definition. (71465)

Block Library

  • Image block: Remove unused code. (71292)
  • refactor: Remove unnecessary fields from accordion 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. files. (71441)

Post Editor

  • Update types of getCurrentPostId. (71347)

Global Styles

  • Remove unecessary useEffect from ScreenStyleVariations. (71344)

Tools

Testing

  • Avoid using *-latest for runner images. (71201)
  • Fix failing command center end-to-end tests. (71293)
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions: Try to fix storybook smoke tests. (71284)
  • Upgrade Playwright to v1.55. (71285)

Build Tooling

  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher unit testing jobs to not include version. (71396)
  • Release Workflow: Add github.ref validation. (71404)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@Adity @andrewserong @aristath @DAreRodz @desrosj @dinhtungdu @getdave @himanshupathak95 @im3dabasia @jsnajdr @juanfra @kmanijak @lalitkumawat1m @levinbaria @MaggieCabrera @Mamaduka @manzoorwanijk @Mayank-Tripathi32 @mcsf @mikachan @mirka @nerrad @oandregal @R1shabh-Gupta @ramonjd @shimotmk @sirreal @swissspidy @t-hamano @talldan @tellthemachines @tyxla @USERSATOSHI @vipul0425 @westonruter @youknowriad

Props @mamaduka and @jorbin for peer review. Props @joen for visual assets.

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

What’s new in Gutenberg 21.5? (27 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.5?

Gutenberg 21.5 has been released and is available for download!

This release contains many enhancements in addition to the new blocks. Below is a curated summary of the most notable changes in this release.

Introducing Accordion 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.

Experimental Accordion block

This release introduces the new experimental Accordion block. Accordion content is composed of the trigger and panel, allowing users to style them separately, while maintaining the 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) and semantics requirements of the accordion.

Command Palette in adminadmin (and super admin) dashboard

Command Palette in admin dashboard

We aim to bring the Command Palette into all parts of the WordPress experience. As a first step, the Command Palette is now available in the Admin Dashboard.

More commands and extensibility are planned for the future; see the overview issue for more details.

Support border radius presets

Like spacing, color, aspect ratios etc. Border radius are something that should be applied consistently throughout a design. Defining “border radius presets” in 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. allows picking border radius value from these presets instead of manually entering radius values.

Continue reading

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

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.

Continue reading

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

What’s new in Gutenberg 21.2? (16 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.2?

Gutenberg 21.2 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.

A small but handy change, the Navigation Link 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. now provides a toggle in the inspector sidebar to open the link in a new tab, bringing it together with the rest of the link options.

DataViews and new components

Gutenberg 21.2 introduces numerous DataViews enhancements and new features. For starters, there are new media, boolean, email, and array field type definitions. Moreover, field type definitions can define a default sorting and rendering function. 

You can even break down the DataViews themselves and make different compositions, as the DataViews component now exports its subcomponents independently. There are many new features and some breaking changes; for a comprehensive list, please refer to the full list of changes.

Aside from DataViews, this release introduces the DateCalendar and DateRangeCalendar components as well.

ToolsPanel refactoring continues

Similarly to recent releases, more blocks have had their settings panels updated to a newer UIUI User interface. This time, it’s the turn for the Gallery block, and wrapping up the efforts from the last release, the remaining options of the Site Logo block.

Continue reading

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

What’s new in Gutenberg 21.1? (2nd 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 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 Site Editor project (formerly called Full Site Editing).


What’s New In
Gutenberg 21.1?

Gutenberg 21.1 has been released and is available for download!

This release contains improvements to the 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., refinements to 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. tools, and more extensibility features. Below is a curated summary of the most notable changes in this release.

Developers can now add new icons to the Social Links block by registering additional block variations. The pull request description has code examples for anyone interested.

Now you can add links for all your pet’s socials:

ToolsPanel refactoring continues

Similar to the last release, more blocks have had their settings panels updated to a newer UIUI User interface. This includes the Author, 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., Post Navigation Link and Site Logo blocks.

Changelog

Enhancements

Block Library

  • Author Block: Refactor Settings panel to use Toolspanel. (67965)
  • Avatar: Refactor settings panel to use ToolsPanel. (67952)
  • Comments Pagination: Remove unwanted bottom margin from links. (70360)
  • Navigation Block: Flip submenu indicator icon on submenu expansion. (70307)
  • Navigation Block: Rotate submenu indicator icons on submenu expansion. (70442)
  • Navigation Link: Add dropdownMenuProps and a resetAll function. (70505)
  • Post Navigation Link: Refactor settings panel to use ToolsPanel. (70276)
  • Refactor Site Logo “Settings” Panel to Use ToolsPanel. (67972)
  • [ Experimental Form ]: Add example block previews. (70436)

Interactivity API

  • iAPI Router: Add support for new router regions with attachTo. (70421)
  • iAPI Router: Support new styles and script modules on client-side navigation. (70353)
  • iAPI: Export NavigateOptions and PrefetchOptions types. (70315)
  • iAPI: Introduce AsyncAction and TypeYield type helpers. (70422)

Extensibility

  • Social: Allow custom link icons using block variations. (70261)

Bug Fixes

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data: getHomePage: Do not return object until resolved. (70345)

Block Library

  • Fix : Calendar block: Colors do not change between global styles and theme.json. (70184)
  • Form Block: Apply class names correctly in the block editor. (70394)
  • FormFileUpload: Extend audio accept MIME types for iOSiOS The operating system used on iPhones and iPads. compatibility. (70354)
  • Image: Fix outdated 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) hint on native component. (70346)
  • Image: Fixed resetAll to return image resolution to default value. (70398)
  • Revert “Flip submenu indicator icon on submenu expansion (#70307)”. (70427)
  • Social Links: Allow icon size to be reset and honor 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. styles. (70380)
  • Video Block: Guard against duplicate tracks. (70295)

Interactivity API

  • Fix image lightbox issues in new full client-side navigation logic. (70416)
  • iAPI Router: Fix dynamic imports on new visited pages. (70489)
  • iAPI: Fix captured errors in withScope generators. (70303)
  • iAPI: Fix duplicated nested regions. (70302)
  • iAPI: Fix parsing of comments without siblings. (70304)

Global Styles

  • Fix: Global styles affect all form elements ( Form Block ). (70392)
  • Implement uniform 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. layout. (70464)

DataViews

  • Data forms: Achieve vertical spacing with vertical spacing rather than cell padding. (70435)

Post Editor

Media

  • Invalidate entities when new media is uploaded. (70405)

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

  • Fix: Incorrect style handle in RTL style registration for wp-list-reusable-blocks. (70402)

Data Layer

  • Add private selector support to resolveSelect and suspendSelect. (52036)

Accessibility

Templates API

  • Templates: Add back button & fix focus loss when navigating through template creation flow. (70091)

Performance

Block Library

  • Avatar: Optimize user control query. (70511)

Documentation

  • Add isPostSavingLocked  example to doc block. (70370)
  • Commands: Add stylesheet requirements to README. (70323)
  • Create Block: Add documentation for custom block namespace. (70215)
  • Docs: Fix broken links on Developer.WordPress.orgWordPress.org The community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/. (70473)
  • Fix some typos. (70419)
  • Fix typo folder-structure.md. (70375)
  • block-attributes: Add role attribute explanation. (70361)

Code Quality

  • Patterns: Delete unused property. (70321)
  • TypeScript: Converts HtmlEntities Package to TS. (69326)
  • TypeScript: Migrate deprecated package to TS. (70362)
  • TypeScript: Migrate is-shallow-equal package to TS. (70407)
  • iAPI: Fix the changelog to include PR 70296 in 6.25. (70309)

Block Editor

  • Media List: Use ‘placement’ prop for popover positioning. (70350)
  • Refactor: URLInputButton component to functional 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. (70384)
  • Warning: Replace popoverProps.position to popoverProps.placement. (70347)

Components

  • Circular Option Picker: Use ‘placement’ prop for popover positioning. (70359)
  • FormFileUpload: Remove temporary fix for selecting .heic file in Chromium browsers. (70383)

Post Editor

  • PostAuthorCombobox: Simplify ‘onFilterValueChange’ debounced callback. (70512)

Interactivity API

  • iAPI: Minor fixes to the Interactivity and Interactivity Router comments. (70420)

Block Library

  • Social Link: Use placement prop for popover positioning. (70348)

Tools

Testing

  • Test: Improve document settings 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. locator. (70331)
  • Ensure the actual tests environment is used for end-to-end tests. (70280)
  • Skip falling end-to-end tests. (70460)
  • end-to-end Tests: Add test case for Link color support. (69141)
  • end-to-end Tests: Minor code quality improvement in some tests. (70382)

Various

Block Library

  • Remove screencast.com embed block variation. (70480)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@alejandrogonzalvo @BugReportOnWeb @DAreRodz @dd32 @ellatrix @himanshupathak95 @iamsandeepdahiya @im3dabasia @Infinite-Null @jsnajdr @karthikeya-io @kushagra-goyal-14 @Maikuolan @Mamaduka @Mayank-Tripathi32 @NidhiDhandhukiya74 @peterwilsoncc @ramonjd @Rishit30G @SainathPoojary @SantosGuillamot @shimotmk @shrivastavanolo @t-hamano @talldan @USERSATOSHI @vk17-starlord @Vrishabhsk @westonruter @yashjawale @yogeshbhutkar

Props @ramonopoly, @isabel_brison and @andrewserong for peer review. Props @karmatosed for visual assets.

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

What’s new in Gutenberg 21.0? (11 June)

“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 Site Editor project (formerly called Full Site Editing).


Gutenberg 21.0 has been released and is available for download!

This release continues the ongoing effort to refine the editing experience, improve 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), and streamline 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. customization. Below is a curated summary of the most notable changes in this release.

The HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Element is now selectable on Button and Separator blocks.

Users can now choose between <a> and <button> elements for better accessibility in the Advanced panel of the Button block.

For the Separator block, they can choose between <hr> and <div>.

Extensive ToolsPanel Refactoring

Many block settings panels—including Button, Comment blocks, Embed, File, List, Navigation, Post Title, RSS, and more—have been refactored to use the unified ToolsPanel interface, providing a more consistent and organized editing experience.

Accessibility and usability

Several blocks, including Button, Columns, and Details, received keyboard accessibility improvements and better focus management.

Numerous 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. fixes address issues with block controls, gallery image captions, social link translations, and more, resulting in a smoother editing workflow.

Changelog

Enhancements

Block Library

  • Button Block: Add HTML Element selection in Advanced settings. (70139)
  • Comment Date: Convert Comment Date block settings to ToolsPanel. (70248)
  • Comment Author Name Block: Refactor setting panel to use ToolsPanel. (69407)
  • Comment Edit Link: Refactor settings panel to use ToolsPanel. (70247)
  • Comment Title: Refactor settings panel to use ToolsPanel. (70246)
  • Comments Pagination Block: Refactor settings panel to use ToolsPanel. (70245)
  • Embed Block: Refactor setting panel to use ToolsPanel. (69636)
  • File Block: Refactor setting panel to use ToolsPanel. (70189)
  • Form Input: Convert Form Input block settings to ToolsPanel. (70249)
  • Form: Convert Form block settings to ToolsPanel. (70253)
  • Latest posts: Change panel body to tools panel. (70200)
  • List Block: Refactor setting panel to use ToolsPanel. (69387)
  • Navigation Link, Navigation Submenu: Hide title UIUI User interface controls while keeping attribute support. (70234)
  • Navigation: Refactor display panel to use ToolsPanel. (68011)
  • Post Title: Refactor settings panel to use ToolsPanel. (70229)
  • RSS: Refactor setting panel to use ToolsPanel. (70213)
  • Separator: Change html element option visibility. (70185)
  • 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.: Add role attribute to content in 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.. (70164)
  • Video: Add option to set a track as default. (70227)

Components

  • ComboboxControl: Handle Unicode characters when matching values. (70180)
  • DropZone: Allow overriding the default icon. (70236)

Block Transforms

  • Adds transforms functionality to Post comments link and post comments number. (70287)

Bug Fixes

Block Library

  • Button: Avoid empty block control slot. (70191)
  • Fix: Click-through blur effect when gallery images have a caption. (69067)
  • Pullquote block: Cannot override cite element style via theme.json. (70260)
  • Social Link: Localize social service names for translations. (70199)
  • Social: Moves size settings to inspector controls. (70186)

Components

  • Ensure SVG Images Without a Width Attribute Are Displayed Correctly in FocalPointPicker. (70061)
  • FormTokenField: Fix filtering with full-width string. (70232)

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: Make storePart argument optional in overloads. (70296)

Post Editor

  • Editor: Better normalize strings for hierarchical term filtering. (70178)

Block Editor

  • Flex Layout: Fix incorrect default alignment values for Vertical Alignment Control component. (68866)

Accessibility

Block Library

  • Button: Avoid focus loss when unlinking using keyboard. (70192)
  • Columns block: Don’t use ToolsPanelItem for Columns setting. (70210)
  • Details Block: Fix keyboard accessibility issues and allow list view selection to show up inner blocks. (70056)

Components

  • Toolbar: Adjust colors for dark mode support. (69278)

Experiments

Interactivity API

  • iAPI: Remove the full-page client-side navigation experiment. (70228)

Documentation

  • Docs: Added the missing ALT attribute to all images. (70225)
  • Docs: Remove misleading section from curating the editor experience. (70262)
  • Fix parameter hint for canInsertBlocks. (70305)
  • Fix: Render_block_core_site_title function doc has missing return type. (70269)
  • Improve default ALT attribute value for images in documentation. (70226)
  • JSON schema: Clean reference URLs. (70274)
  • Removed Empty line and corrected typo in inline document. (70203)
  • Replace “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.” with “panel” in tutorial.md. (70257)
  • Small grammar fix in glossary.md. (70292)
  • The wp_admin_notice() function should be called instead of custom HTML for adminadmin (and super admin) notice in docs/how-to-guides/notices/README.md. (70231)
  • Updated small typo in inline documentation. (70187)
  • useDropZone: Refactor documentation to use the correct function syntax. (70286)
  • block.json schema: Add role field. (70272)

Code Quality

Block Editor

  • Clarify ‘clientId’ prop use for ‘HTMLElementControl’. (70258)
  • ImageSizeControl: Use margin-free style. (70202)

Components

  • Remove forced focus of InputControl on mousedown. (41118)
  • SuggestionsList: Remove unused code. (70195)

Block Library

  • Video: Use a unique ‘key’ in the ‘TrackList’ component. (70263)

Tools

Testing

  • Cover Block: Add E2E Test for FocalPointPicker. (69077)
  • E2E: Add general end-to-end tests for templateLock functionality. (70160)
  • Fix end-to-end test for block API / filtered blocks. (51882)
  • Format .githubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ workflows .yml file. (70219)
  • Account for tests env port being overridden from 8889 in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher unit tests. (70267)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@aurooba @catgofire @DAreRodz @dhruvikpatel18 @himanshupathak95 @im3dabasia @Infinite-Null @Mamaduka @Mayank-Tripathi32 @Mukulsingh27 @nani-samireddy @OpuRockey @pmbaldha @ravigadhiya007 @Rishit30G @SainathPoojary @shail-mehta @shimotmk @stokesman @t-hamano @troychaplin @vipul0425 @vk17-starlord @westonruter @yogeshbhutkar

Props @luminuu, @priethor and @mamaduka for peer review. Props @joen for visual assets.

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

What’s new in Gutenberg 20.8 and 20.9?

We’re catching up with these posts now, as they have not been posted in a while. Since the recent releases have been smaller in scope, this post combines updates from both the 20.8 (May 14) and 20.9 (May 28) releases.

Both versions introduce a collection of enhancements, 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. fixes, and improvements. These updates concentrate on refining the editor experience, improving 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), and ensuring consistent design. Additionally, the releases incorporate under-the-hood updates focused on code quality and performance.

  • 20.8 (14 May)
    • Prevent duplicate HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. main elements for improved accessibility.
    • Search functionality in template swapping modal.
    • Changelog
  • 20.9 (28 May)
    • Search 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.: Move search setting to inspector.
    • Move Styles to top of 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. navigation.
    • Changelog

20.8 (14 May) – Highlights

Prevent duplicate HTML main elements for improved accessibility.

The HTML Element option now includes validation to prevent duplicate <main> tags, enhancing accessibility and HTML compliance. (70002)

Screenshot of the editor, showing the advanced panel of a group block in the right sidebar with the new main tag warning.

Search functionality in template swapping modal.

The template swapping modal now includes a search feature for smoother navigation. (69667)

Screenshot of the template modal, the cursor is in the new search bar between the heading and the template previews.

Changelog

Enhancements

  • Create Block: Add --textdomain flag to create block tool. (69802)

Components

  • Guide: Make next and previous button text customizable. (69907)
  • Popover: Add virtual padding to prevent it from hitting the viewport edge. (69555)

Document Settings

  • Editor: Add search functionality to template swapping modal. (69667)

Block Editor

  • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Editor: Don’t close the inserter when focusing outside it. (67838)

Editor

  • Use split view for 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 only when canvas is iframed and “Desktop” view. (69958)

New APIs

Widgets Editor

  • Edit Widgets: Save lock control via actions. (69984)

Bug Fixes

  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions: Fix components changelog CI check. (70034)
  • Persist git credentials when publishing via lerna. (70007)
  • 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: Fix deprecation for ‘apply_block_hooks_to_content_from_post_object’. (69909)
  • ServerSideRender: Don’t render the previous error response in loading state. (69988)
  • ServerSideRender: Refactor fetchData to use useCallback and refs. (69237)

Block Library

  • Author, Author Name block: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher warning error when there is no context. (69949)
  • Block Editor: Allow editing 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. blocks as HTML. (69902)
  • Block Editor: Prevent negative width values in Spacer block when used inside a row block. (68845)
  • Calendar block: Disable edit as HTML support. (69961)
  • Image: Avoid stale URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org when reselecting the same image from the library. (69985)
  • Latest Posts: Update content display labels to Display post content and Content length. (69839)
  • Navigation Link, Navigation Submenu: Fix undefined key warning. (69951)
  • fix: Update the logic of fetching current URL in loginout block. (70031)

Block Editor

  • Block HTML: Add box-sizing property to prevent overflow. (70014)
  • Fix: Improve warning message and add spacing in HTMLElementControl. (70002)
  • MediaPlaceholder: Fix Regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. with media URL input type to allow a local URL path. (70043)
  • Prevent block merging on blocks with the ‘disabled’ editing mode. (69918)

Components

  • Don’t mutate ‘ALL_CSS_UNITS’ default value in ‘useCustomUnits’. (70037)
  • Fix double border in ItemGroup when last item is focused. (70021)
  • Fix: Duotone unset button. (69981)
  • ToggleGroupControl: Fix active background for empty string value. (69969)

Site Editor

  • Check user permissions before rendering export menu item. (69971)

Widgets Editor

  • Fix: Browser Warnings when closing keyboard shortcut modal. (69929)

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.

  • Fix: Missing conversion from 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. styled variable to CSSCSS Cascading Style Sheets. variable. (69551)

Typography

  • Fix: Prevent FontSizePicker crash when no font size exists. (68733)

Icons

  • Remove width / height attributes from svg element. (43747)

Accessibility

  • Keyboard Shortcuts: Revert delete shortcut to access + z. (69931)

Block Library

  • Add new HTMLElementControl component. (69904)

Performance

Block Library

  • Latest Posts: Delay inspector control queries until the block is selected. (69898)
  • Latest Posts: Embed author in response. (69889)

Document Settings

  • Lazy load post authors’ data. (69950)

Documentation

  • Add WP version note for ‘setAttributes’ updater function. (69972)
  • Create Block: Add --textdomain in create-block README. (69927)
  • Docs: Add post meta limitations to Block Bindings API documentation. (68583)
  • Docs: Added copy and code for style_data. (69920)
  • Fix missing CSS import in data basics tutorial code. (69914)
  • Fix typos. (69957)
  • Fix: Remove an unnecessary @return 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.) from this 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. docblockdocblock (phpdoc, xref, inline docs). (69960)

Code Quality

  • ServerSideRender: Use useLayoutEffect to update latestPropsRef. (69999)
  • Stylelint: Migrate configuration from JSON to JavaScript format. (69590)
  • theme.json: Unify property order. (70033)

Themes

  • Simplify color specifications from rgba to rgb. (70008)

Block Editor

  • Simplify condition selectors for ‘useHasBlockToolbar’. (69930)

Block Library

  • Latest Posts: Only fetch necessary fields for categories. (69888)

Components

  • ColorPicker: Add tests for ColorPicker Alpha slider. (69203)

Tools

Testing

  • Automated Testing: Skip storybook smoke test. (69943)
  • List View: Add end-to-end test to verify pasting block styles via keyboard. (69979)
  • Try: Fix ‘wp-polyfill’ script dependents 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.. (69912)
  • Workflows: Try different SHA. (70048)

First-time contributors

The following PRs were merged by first-time contributors:

  • @jrmd: Block Editor: Prevent block merging on blocks with the ‘disabled’ editing mode. (69918)
  • @Maikuolan: Navigation Link, Navigation Submenu: Fix undefined key warning. (69951)

Contributors

The following contributors merged PRs in this release:

@bph @Debarghya-Banerjee @georgestephanis @himanshupathak95 @im3dabasia @Infinite-Null @johnbillion @jrmd @karthikeya-io @Maikuolan @Mamaduka @Mayank-Tripathi32 @Rishit30G @SH4LIN @shimotmk @stokesman @Sukhendu2002 @t-hamano @yogeshbhutkar


20.9 (28 May) – Highlights

Search Block: Move search setting to inspector.

The settings of the search block have been moved from the block toolbar to the inspector panel for better consistency with other coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks. (70144)

Move Styles to top of sidebar navigation.

Move the Styles navigation item to the top position in the Site Editor’s main sidebar navigation, before Navigation, Pages, Templates, and Patterns. (68582)

Changelog

Enhancements

  • Base Styles: Update to modern Sass module system. (70135)
  • Post Publish Panel: Open view post links in a new tab. (70127)
  • Revert Adminadmin (and super admin) bar: Update the Edit Site link. (69974)

Block Library

  • Custom HTML: Add role attribute to content in block.json. (70154)
  • HTML Block: Remove space below textarea. (70055)
  • Post Navigation Link: Reverse order of variations. (70149)
  • RSS: Add role attribute to content in block.json. (70166)
  • Search Block: Move search setting to inspector. (70144)

Write mode

  • Details block: Add role attribute to summary. (70124)
  • Enable Code block content editing in contentOnly. (70111)
  • Enable More block’s “Read more” text editing in contentOnly mode. (70100)
  • Post blocks: Enhance contentOnly editing experience. (70148)
  • Table Block: Enhance contentOnly Editing Experience. (70114)

Components

  • ColorPicker: Add a visual cue when the value is copied. (70083)
  • Snackbar: Add support to open links in new tab. (69905)

Block Transforms

  • Block Library: Add missing transforms between Verse and Preformatted blocks. (70101)

Global Styles

  • Remove “global” from styles variation in schema descriptions. (70089)

Site Editor

  • Move Styles to top of sidebar navigation. (68582)

Bug Fixes

  • DOM: Add summary element to focusable elements. (70051)
  • Site Editor: Fix PHP warnings in gutenberg_get_site_editor_redirection. (70062)
  • URL: Handle HTML entities and ampersand in ‘cleanForSlug’. (70078)
  • Workflows: Persist git credentials when publishing packages via Lerna. (70058)

Block Library

  • Button: Limit scope of width style for link. (70054)
  • Image: Provide ‘defaultValue’ for ‘ResolutionTool’ component. (70122)
  • Post Template: Don’t rely on the default ‘ignore_sticky’ 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/. value. (70020)

Components

  • Fix Styling for TextControland TextAreaControl in dark themes. (69640)
  • Fix URLPopover input handling to properly update value. (70156)

Post Editor

  • Editor: Honor rich/code editor settings when deriving the editor mode. (70080)
  • Hide “Create template part” menu from block settings dropdown for classic themes. (65568)

Block Editor

  • MediaPlaceholder: Fix potential error in ‘handleBlocksDrop’. (70090)

Accessibility

  • Editor: Add label inTextareaControl in CollabSidebar. (70133)

Global Styles

  • Background Image Panel: Fix focus loss. (69813)
  • Move Randomize colors button to Edit Palette panel. (70128)

Documentation

  • Add example doc comment. (70116)
  • Docs: Clarify versions in WordPress page title. (70112)
  • Docs: Fix PEG.js link. (70082)
  • Docs: Interactivity API Block removed. (69513)
  • Modify the spinner example code. (70084)
  • Popover: Update Popover component documentation. (70106)
  • RichText Readme – Fix 404 URL To Mozilla documentation. (70171)
  • Updated backticks to quotes. (70070)

Code Quality

  • ServerSideRender: Colocate delayed spinner logic. (70147)
  • Stylelint: Customise warning for CSS variables used outside components package. (70108)
  • Stylelint: Customise warning message for flex-direction warning. (70057)

Block Library

  • Blocks: Remove TODO for post comment block conversion. (70110)

Components

  • withIgnoreIMEEvents: Update documentation for clarity. (70098)

Font Library

  • Fix missing trailing period in user message. (70132)

Tools

Build Tooling

  • Workflows: Add option for publishing the latest npm packages. (70079)

Testing

  • end-to-end Tests: Add test suite for columns block template lock. (69089)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@carolinan @himanshupathak95 @igorradovanov @im3dabasia @Infinite-Null @jasalt @karthikeya-io @Mamaduka @Mayank-Tripathi32 @peterwilsoncc @SainathPoojary @shimotmk @SirLouen @StevenDufresne @Sukhendu2002 @t-hamano @unscripted @yogeshbhutkar


Props to @yogeshbhutkar and @luminuu for writing this post and @priethor and @cbravobernal for reviewing.

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

What’s new in Gutenberg 20.6 and 20.7?

We’re catching up with these posts now, as they have not been posted in a while. Since the recent releases have been smaller in scope, this post combines updates from both the 20.6 (April 3) and 20.7 (April 22) releases.

Both versions introduce a collection of enhancements, 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. fixes, and improvements. These updates concentrate on refining the editor experience, improving 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), and ensuring consistent design. Additionally, the releases incorporate under-the-hood updates focused on code quality and performance.

  • 20.6 (3 April)
    • Navigation 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.: Add transparency slider for submenu background.
    • Changelog
  • 20.7 (22 April)
    • Navigation in Site View: Automatically expand all options.
    • Editor: Enable starter pattern modal for all post types.
    • Changelog

20.6 (3 April) – Highlights

Navigation Block: Add transparency slider for submenu background

This PR adds the ability to set a transparent background for Navigation Block submenus by enabling the alpha (transparency) channel in the color picker for the submenu background setting. (69379)

Changelog

Enhancements

Block Library

  • Feature: Adding support for more granular controls over the ToC block. (69063)
  • Navigation Block: Add transparency slider for submenu background. (69379)
  • Query Total: Add interactivity.clientNavigation block support. (69661)
  • RSS Block: Add option to open links in new tab/window and control rel attributes. (69641)

Block Editor

  • Add keyboard shortcut (cmd(ctrl)+option(alt)+v) to paste styles. (69196)
  • BlockPatternsExplorer: Hide scrollbar from 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. if not scrollable. (69706)

Post Editor

  • Editor: Revert new default rendering mode for Pages. (69680)

Bug Fixes

  • BlockBreadcrumb: Wrap text node in span 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.). (69605)
  • Fix Media & Text block preview alignment on larger devices. (67097)
  • Format Library: Ensure inline image with updates persist after removing the ‘width’. (69683)
  • Include blocks manifest build process in Webpack configuration to fix create-block bug with missing blocks manifest file. (69578)

Block Library

  • 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. Block: Prevent default action on image click to fix linking to post. (69716)
  • Fix CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. List Block: Add optional chaining to taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. name. (69703)
  • Fix(embed-block): Only call setAttributes() when attrs change. (68141)
  • Fix: Correct ‘Displaying 1 – 0 of 0’ issue when no results are found. (69666)
  • Image block: Omit max width observer element in galleries. (69601)
  • PostCommentsForm: Fix submit button width regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.. (69651)

Components

  • ComboboxControl: Replace undefined variable usage with color-mix for disabled selection. (69621)
  • CustomSelectControl: Use dynamic fill color for check icon. (69626)
  • Fix autocomple UIUI User interface flicker when deleting trigger prefix. (69562)
  • Update NumberControl stepping to match HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. number input stepping. (34566)

Block Editor

  • LinkControl: Fix visually Duplicative label and placeholder. (69620)
  • PatternsExplorerModal: Fix empty patterns in starter content category. (69629)

Post Editor

  • Post Template Panel: Render create-new-template-modal over post-template-panel. (69713)

Global Styles

  • Site Editor: Make the text “Custom Styles” translatable. (69677)

Site Editor

  • Set IFRAME_REQUEST constant for classic theme site preview. (69535)

Document Settings

  • PostStatus: Prevent form submission from refreshing the page. (69526)

Accessibility

Document Settings

  • Post Template Panel: Preserve parent modal when closing template creation dialog. (69724)

Block Library

  • Site Title: Prevent saving and rendering a value made of only spaces. (69628)

Block Editor

  • Fix shift+tab from post title. (69520)

Components

  • Global Styles: Prevent Unwanted ItemGroup List Rendering in Border Panel. (68633)

DataViews

  • Display Checkbox by default in dataviews. (67874)

Performance

Block Library

  • Image: Don’t subscribe to current post changes. (69630)
  • Navigation Link: Don’t check validity when block editing is disabled. (69627)
  • Navigation Link: Improve performance by only requesting entities when selected. (69633)
  • Navigation Link: Optimize ‘getBlockParentsByBlockName’ selector call. (69631)

Documentation

  • Developer Documentation: Update VS Code settings in the contribution guide. (69670)
  • Editor: Clarify icon prop behavior in README. (69672)
  • Fix: Missing comma in DataView documentation example. (69721)
  • Modify the AnglePickerControl example code. (69673)
  • Modify the RangeControl example code. (69591)
  • Reference splitTask from interactivity package in documentation. (69602)
  • Storybook: Update ToolbarItem and ToolbarDropdownMenu exports. (69618)
  • Update the list of 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/ versions in WordPress versions. (69700)
  • scripts: Fix broken changelog link. (69654)

Code Quality

Components

  • Component: Extract getNodeText to its own file and add unit tests. (69135)
  • Fixed broken className test for NumberControl. (69540)

Post Editor

  • PreviewDropdown: There’s no need to unlock the ‘getRenderingMode’ selector. (69682)

Font Library

  • FontLibraryModal: Remove temporary margin-bottom override. (69674)

Site Editor

  • Update old URLs to new path-based URLs. (69585)

Tools

Testing

  • Fix end-to-end and performance tests. (69690)
  • Fix flaky Typewriter end-to-end test. (69623)
  • Refactor ‘Template hierarchy’ end-to-end tests. (69692)
  • Upgrade Playwright to v1.51.1. (69622)
  • e2e: Fix taxomomies test. (69723)

Build Tooling

  • Fix Tests: Update browserslist and caniuse-lite to latest versions. (69669)

First-time contributors

The following PRs were merged by first-time contributors:

  • @gmovr: Feature: Adding support for more granular controls over the ToC block. (69063)
  • @im3dabasia: Fix Media & Text block preview alignment on larger devices. (67097)

Contributors

The following contributors merged PRs in this release:

@bph @chrisbellboy @dhruvikpatel18 @felixarntz @gmovr @himanshupathak95 @im3dabasia @Infinite-Null @karthick-murugan @Mamaduka @Mayank-Tripathi32 @Rishit30G @SainathPoojary @shimotmk @Sourav61 @StevenDufresne @stokesman @t-hamano @westonruter @yogeshbhutkar


20.7 (22 April) – Highlights

Navigation in Site View: Automatically expand all options.

This PR changes the default state of navigation submenus in Site View from collapsed to expanded, making all navigation options immediately visible to users without requiring manual expansion. (69343)

Editor: Enable starter pattern modal for all post types.

This PR fixes the starter pattern modal so it works for all post types, not just pages. It removes the restriction that was limiting the modal to only appear when creating new pages. (69753)

Changelog

Enhancements

  • Format Library: Add a feature to set the alpha value to Highlight. (67525)
  • Playwright end-to-end utils: Add new emulateNetworkConditions helper. (69865)

Block Library

  • Details: Enable all non-interactive formats. (68741)
  • Heading: Add/correct typography examples. (69812)
  • Navigation in Site View: Automatically expand all options. (69343)
  • Remove experimental status from comments count and comment link blocks. (69832)
  • Table Block: Preserve Column Alignment when Pasting Markdown Tables. (69322)
  • Tag Cloud: Remove unnecessary full-width padding. (69725)

Block Editor

  • Remove truncation from media tab preview tooltips. (69741)
  • Support passing updater function to ‘setAttributes’. (69709)

Media

  • Remove @shopify/web-worker Dependency from packages/upload-media. (69816)

Bug Fixes

  • DataViews: Ensure consistent display of primary ellipsis in list layout. (69846)
  • Scripts: Fix blocks manifest generation when directory name has space. (69766)

Block Library

  • Enhance Featured Image Block: Don’t include interactive elements within an element. (69730)
  • Featured Image: Don’t render empty Resolution tools panel if media is not set. (69805)
  • Fix: Background wrapper for ‘Button Inside’ option. (69624)
  • Fix: Update the static text and make them translatable in the Blocks example. (69859)
  • Fixed Media & Text Block – Image not rendered properly on frontend when inside stack. (68610)
  • 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.: Don’t overwrite the ‘query.inherit’ attribute value. (69698)
  • Query Loop: Fix ‘undo trap’ and improve debouncing for ‘Keyword’ control. (69845)
  • ToC: Fix condition for ‘Limit heading levels’. (69811)
  • ToC: Fix related block attribute persistence. (69734)

Block Editor

  • Block Tools: Prevent showing block toolbar when block interface is hidden. (69795)
  • Block drag & drop: Enable mouse click on input/textarea elements in Firefox. (69781)
  • Fix: Restore static properties on deprecated __experimentalLinkControl. (69860)
  • Fix: Space visualizer showing previous value. (69747)

Post Editor

  • Fix: Save custom template with non-latin slug. (69732)
  • 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.: Don’t enable for block themes in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. if v2 blocks exist. (69778)

Document Settings

  • PostPublishPanel: Fix post title overflow. (69804)

Patterns

  • Editor: Enable starter pattern modal for all post types. (69753)

Components

  • UI Components: Add theme support for FormTokenField and ComboboxControl. (69638)

Accessibility

  • DataViews: Always show primary action for list layout if hover isn’t supported. (69876)

Block Library

  • Navigation Link, Navigation Submenu: Remove the title attribute controls. (69689)
  • Navigation block: Fix submenu Escape key behavior. (69837)
  • Social Icons: Remove custom placeholder state. (69821)

Components

  • Button: Update hover styles to account for pressed state for tertiary button. (68542)
  • Global Styles: Fix incorrect usage of ItemGroup in the Background image panel. (68631)

DataViews

  • ActionModal: Add support for customisable focusOnMount. (69609)

Documentation

  • Add WithCloseHandlers story. (69688)
  • Create Block: Improve support for blocks manifest and relevant Core APIs. (69767)
  • Docs: Improve document and parameters in render_block_core_* function. (69856)
  • Fix: Incorrect Type of wp_widget_factory in render_block_core_legacy_widget Doc Block. (69775)
  • Fix: Expose TypeScript types for subcomponents. (69619)
  • Latest Posts block: Add missing @global PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher documentation. (69763)

Code Quality

  • Block Parser: Remove description for singular since tag. (69799)
  • Fix Documentation inconsistencies in Block Parser classes. (69785)
  • Stylelint-config: Add stylelint-scss as a peer dependency. (69685)

Block Library

  • Query Loop: Remove unused ‘Columns’ control. (69843)
  • Search: wp-block-search__inside-wrapper classname trailing spaces. (69405)
  • Social Icons: Fix effect dependencies. (69824)
  • Social Icons: Remove unused editor style. (69836)

Block Directory

  • Update metadata fields requested from server. (69801)

Components

  • Update gradient-parser dependency from 0.1.5 to 1.0.2. (69783)

Tools

Testing

  • Automated Testing: Add GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ Actions workflow for Storybook smoke testing. (69679)
  • E2E: Split list view keyboard shortcuts into multiple tests. (69231)
  • Workflows: Ignore ‘widgets’ for manual backports. (69792)

Build Tooling

  • Workflows: Ignore ‘block-serialization-default-parser’ for manual backports. (69791)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@carolinan @Debarghya-Banerjee @dhruvikpatel18 @dilipbheda @himanshupathak95 @im3dabasia @Infinite-Null @jonathanbossenger @karthikeya-io @Mamaduka @Mayank-Tripathi32 @Rishit30G @SainathPoojary @shimotmk @snehapatil2001 @stokesman @Sukhendu2002 @swissspidy @t-hamano @timse201 @yogeshbhutkar


Props to @priethor and @cbravobernal for reviewing this post.

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