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