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

Gutenberg 16.4 has been released and is available for download!

16.4 introduces some exciting new features, including both a new experimental feature and a new component, alongside many enhancements and 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. Bug fix highlights include many improvements to the recently added Footnotes 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 enhancements to Patterns.

This release consists of 184 pull requests authored by 60 contributors, including two new contributors! 🥳

Table of Contents

1. Auto-Inserting Blocks (Beta)
2. New Progress Bar Component
3. New Commands in the Command Palette
4. New Block Supports for Footnotes Block
5. Minimum Supported PHP Version Bumped to 7.0
6. Changelog
7. First time contributors
8. Contributors

Auto-Inserting Blocks (BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process.)

Activating the new “Auto-inserting blocks” feature on the Gutenberg > Experiments page enables blocks to specify a location in which they will be automatically inserted. This applies both to the frontend and to the Site Editor (via the 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/.), allowing for further user customization.

See an example in the video below of a “Like button” block that has been auto-inserted after each Comment Template block. You can also see how this block can be re-positioned using the existing block editor tools.

To try this new experimental feature, you can add an __experimentalAutoInsert field to the 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. file of a dynamic block of your liking. You have to specify the “anchor” block and the relative position (before, after, firstChild, or lastChild) for auto-insertion:

"__experimentalAutoInsert": {
    "core/comment-template": "lastChild"
}

Note that the block will only be auto-inserted as long as the containing template or template part doesn’t have any modifications by the user. (This is by design, in order not to override a user’s choice to discard an auto-inserted block in the editor.)

This feature aims to improve the extensibility of block themes through plugins and continues to be actively developed.

For more details please see the tracking issue and the testing instructions in this PR. It would be great to hear your feedback! (#51449)

New Progress Bar Component

A new, horizontal ProgressBar component that can be used in various places. Whilst this new component has been merged with this release, it has not yet been applied in the Site Editor. It will likely replace the Spinner component that is currently used in the Site Editor loading experience. There is another PR for this work in #53032, aiming to introduce an indeterminate progress bar for the Site Editor, and further experimentation in #53399 to change it to a determinate progress bar. In the meantime, this component can be tested in Storybook. (#53030)

New Commands in the Command Palette

There are three new commands available in the command palette:

• Show/hide block breadcrumbs
• Enable/disable pre-publish checklist
• Preview in a new tab

As well as expanding the functionality available in the new command palette, this effort starts to establish user experience patterns around commands, such as “show/hide” vs. “toggle”, and using snackbar notices more prominently. (#53073)

New Block Supports for Footnotes Block

The Footnotes block now includes support for updating the block’s link color, background color, and text color, as well as controls for typography, dimensions, and borders. The link and text color controls are expanded by default, as they will likely be used more frequently; the other new controls are collapsed by default. (#52897 & #53044)

Minimum Supported PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Version Bumped to 7.0

The Gutenberg 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’s minimum PHP version has been bumped from 5.6 to 7.0, to maintain parity with WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (#52982)

Changelog

Features

Components

• Introduce a basic ProgressBar component. (53030)

Block Editor

• Link Control: Persist advanced settings toggle state to preferences if available. (52799)

Block Library

• Behaviors: Extend Global Styles 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. to read/write behaviors config. (52370)

Enhancements

Site Editor

• Add context to the “Reset template” “Delete template” and “Edit template” commands. (52989)
• Add xhuge breakpoint (1920px) and update pattern grid. (52942)
• Display keyboard shortcut for command palette in site view. (52841)
• Make sure only one Site updated notice displays at a time. (53087)
• Template Descriptions: Tidy up all abbreviations of ‘example’ to be e.g. (52848)
• Try adding further details to template part panel. (52476)
• Update the ConfirmDialog that appears when applying a style revision over unsaved changes. (52972)
• Update: Improve titles of author templates in query title block. (52732)

Post Editor

• Add common commands (breadcrumbs, live preview, pre-publish checklist). (53073)
• Use 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. instead of HoCs for:
  • DiscussionPanel. (53232)
  • PostPingbacks. (53228)
  • PostComments. (53231)
  • PostExcerpt. (53229)
  • PostTypeSupportCheck. (53235)

Block Library

• Footnotes: Add link, background, and text color support. (52897)
• Footnotes: Add typography, dimensions, and border block supports (53044)
• Preformatted: Add spacing support. (45196)
• Social Links: Add Threads Icon. (52685)
• Verse: Enable the line breaks. (52928)

Patterns

• Align height of save button and patterns pagination. (52764)
• Allow inserting of unsynced patterns from quick inserter. (52866)
• Show the default patterns icons for all pattern blocks in inserter. (53208)
• Update the Manage all my patterns command to redirect to site editor patterns list. (52817)
• Pattern library: Switch to three column layout on huge screens. (52927)

Interactivity API

• Use defer loading strategy for frontend view scripts. (52536)
• [create-block] Refinements to the create-block-interactive-template package. (52801)

Components

• Settings: Show message when Visual or Code editor are disabled. (52737)
• TabPanel: Implement Ariakit internally. (52133)

Global Styles

• Site editor: Conditionally render global styles revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. footer in 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.. (53204)

Block Editor

• Remove duplicated display URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in LinkControl. (53167)

Synced Patterns

• Remove extraneous “Detach” ToolbarButton for synced patterns. (53121)

Icons

• Add keyboard icon and use in relative commands. (53083)

Plugin

• Bump plugin minimum supported PHP version to 7.0. (52982)

Data Layer

• Promisify action creator return type for WP data dispatch. (52530)

Bug Fixes

Block Library

• 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.: Fix global border styles generation. (53007)
• Check if object exists before accessing its properties. (52870)
• Cover block: Disable contrast checker. (53080)
• Disambiguate “Import” button string. (52907)
• Footnotes:
  • Footnotes/RichText: Fix getRichTextValues for deeply nested blocks. (53034)
  • Disable based on post type. (52934)
  • Disable for synced patterns and prevent duplication for pages in site editor. (53003)
  • Fix published preview. (53072)
  • Store in revisions. (52686)
• Image block: Fix image size at wide and full width. (53184)
• Navigation Sidebar: Fetch the blocks from the content when trying to load navigations. (52899)
• Navigation: Load the raw property on the navigation fallback. (52758)
• Remove block tools back compatback compat Backward compatibility - a desire to ensure that plugins and themes do not break under new releases - is a driving philosophy of WordPress. While it is a commonly accepted software development practice to break compatibility in major releases, WordPress strives to avoid this at all costs. Any backward incompatible change is carefully considered by the entire core development team and announced, with affected plugins often contacted. It should be noted that external libraries, such as jQuery, do have backward incompatible changes between major releases, which is often going to be a greater concern for developers. component schedule for deprecated in 6.3. (53115)
• Verse: Disable line breaks. (52783)
• Video: Fixing styles that vertical alignment of the video. (53131)

Site Editor

• Add navigation type to title labels map. (53074)
• Command Palette:
  • Add Open styles revisions command conditionally. (52945)
  • Command Palette: Remove double border on results pages. (52873)
  • CommandPalette: Fixed to not execute commands in IME composition. (52844)
  • Defer to preceding handlers in command palette keyboard shortcut. (53001)
  • [Core Commands]: Handle navigation commands based on access of site editor. (52987)
• Fix block top toolbar artifact in navigation isolation. (53110)
• Fix canvas mode sync with URL. (52996)
• Fix the template parts link on the list page. (52891)
• Open template parts from the list page in canvas view mode. (52916)
• Fix the typo in the title label map. (53071)
• Fix: Block toolbar obscuring document tools when Top Toolbar is enabled. (52722)
• ResizableFrame: Account for window resizing. (52697)
• Sidebar: Restore Back button ‘go to parent’ functionality. (52910)
• Top toolbar: Fix issues with save button overlap and plugin buttons. (53101)
• Update document title buttons radius. (53221)

Patterns

• Add id to pattern inserted notice to stop multiple notices stacking. (52746)
• Allow orphaned template parts to appear in “general” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (52961)
• Correctly color code unsynced patterns titles in Site Editor. (52958)
• Fix auto-size patterns triggering scrollbar flickering on certain size. (52921)
• Fix color and behavior of unsynced patterns in block inserter when searching for reusable. (53205)
• Fix editor crashing on certain search 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. combinations. (52956)
• Fix empty general template parts in Patterns. (52747)
• Fix not expanding pattern in page editor. (53169)
• Fix: Snack bar not fixed on certain pages in the Site Editor. (53207)
• Pattern: Add getBlockRootClientId call. (53206)
• Patterns Browse Screen: Fix back button when switching between categories. (52964)
• Reset current page when search filters change. (52933)
• Site Editor: Fix site link 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) issues. (52744)
• Site Editor: Use the correct icon for Patterns in sidebar card. (52931)

Post Editor

• Allow styles to be changed dynamically through editor settings. (52767)
• Distraction Free: Fix conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with showListViewByDefault preference. (52914)
• Editor: Set default parameter for ‘__unstableSaveForPreview’. (53079)
• Fix toolbar when previewing devices in post editor. (52770)
• 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.: Add missing Gettext wrapper on strings in Edit Post overview sidebar. (52971)
• shimAttributeSource: Don’t run outside the registerBlockType filter. (53015)

Global Styles

• Global styles revisions: Display text if no revisions are found. (52865)
• Spacing presets: Fix bug with select control adding undefined preset values. (53005)
• Style Engine: Switch off optimize by default. (53085)

Block Editor

• Fix spacing for LinkControl actions. (53055)
• List: Allow ENTER on multi-selection. (52947)
• List: Fix merging nested lists. (52949)

Design Tools

• Borders: Prevent console error when clearing custom border color. (52963)
• Check if spacing tool is defined before displaying controls. (53008)

Distraction Free

• Add missing command in Site Editor. (52868)
• Distraction Free Keyboard Shortcut: Fix notices in Site Editor. (52867)

Layout

• Prevent the Dimensions UIUI User interface from being displayed when the block does not support Dimensions. (53092)

List View

• Ensure onBlockDrop does not fire if there is no target. (52959)

Template Editor

• Site Editor: Don’t navigate to the patterns in Template Parts mode. (52884)

Navigation Menus

• Navigation: 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. Core changes for the navigation fallback. (52878)

REST API

• Global styles revisions: Update private methods to protected. (52748)

Block API

• Parser / Site Editor: Ensure autop is not run when freeform block is set to core/htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (52716)

Accessibility

• 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 Edit site Navigate regions. (52940)
• Return focus more from focus return hook. (52710)
• [Commands]: Add aria-activedescendant attribute to suggestions. (52930)
• ColorPalette, BorderControl: Don’t hyphenate HEX value in aria-label. (52932)
• Modal: Fix loss of focus when clicking outside. (52653)
• My Patterns page: Increase color contrast for the toggle group. (52678)
• Improve consistency of the Post Editor and Site Editor Document actions. (52246)

Performance

• Replace array_key_exists() with isset() check. (53098)
• Footnotes: Use static closures when not using ‘$this’. (52781)

Experiments

Block Library

• Set freeform handler only if Classic block exists. (52936)
• Backend handle freeform blocks with TinyMCE removal. (52938)
• Fix TinyMCE removal for heartbeat requests. (52935)

Interactivity API

• Improve the Interactivity API priority levels logic. (52323)
• Remove the wp-show directive temporarily. (53240)

Block API

• Auto-inserting blocks on the frontend and in the editor (via REST API). (51449)

Documentation

• API Reference documentation for Interactivity API. (52948)
• Adding description of the –no-watch option. (53139)
• Adds documentation about selectors. (52941)
• Add Block API Version 3. (53046)
• Added missing images via developer.wp.org site. (53051)
• Clarify that blockGap support depends on layout support. (53254)
• Interactivity API > Getting Started Guide – minor adjustments. (52786)
• Update Appearance Tools. (52785)
• Open “docs” folder for the Interactivity API package and Getting Started Guide. (52462)
• Update the Gutenberg release process documentation. (52955)

Code Quality

Block Editor

• Block Editor: Fix ESLint warning for the useBlockEditingMode hook. (53218)
• Block Editor: Simplify check in ‘withBlockControls’ styles hook. (53227)
• BlockVariationPicker: Remove unused withSelect. (53100)
• Improve the efficiency of the useDebouncedInput hook. (53263)
• Refactor useShowMoversGestures hook. (52792)

Block Library

• Add PHP since annotations. (52820)
• Footnotes: Add missing _ in revision field filter. (53135)
• Refactor navigation title usage. (52807)
• Template Part Block: Use get_block_file_template for rendering. (52892)

Site Editor

• Site Editor: Remove unnecessary hook from ‘PageTemplates’. (52903)

Global Styles

• Don’t use named arguments for sprintf. (52782)
• Remove experimental setting for interactivity API and behaviors. (52833)
• Site editor: Update function name. (52869)
• Update PHP unit tests. (52819)

Format Library

• Remove withSpokenMessages HoC from the Link format. (53106)

Interactivity API

• Move Store’s data encoding to the echo call. (51974)
• Update the block.json schema to include Behavior supports. (52895)
• [Create Block] Add support for the example property and add template defaults. (52803)

Typography

• Fluid typography: Rename viewport variables. (53082)

Components

• Update framer-motion to 10.13.0. (52804)

Themes

• Behaviors – Lightbox: Update theme.json schema. (51156)

Tools

• Add GH action to enforce PR labels. (52760)
• Changelog automation:
  • Make Accessibility a top-level section. (52900)
  • Update to work with consolidated 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) labels. (52896)
  • Use the correct label to filter Mobile app PRs. (53024)
• Enforce PR labels:
  • Change permissions to read. (52980)
  • Fully re-enabling the pre-merge check. (52990)
  • Make PR label checks non-blocking to merge while trying a different GH token setting. (52975)
  • Try using a different token. (52979)
  • Use pull_request_target trigger to work with PRs coming from forks. (52981)
• Use proper casing on PR template. (52999)
• Enforce checks against redeclaration for functions and classes. (52696)

Testing

• Add end-to-end tests for Behaviors in the site editor. (52809)
• Ignore local test theme folders created by wp-env. (53031)
• Improve slug generation & matching in request utils. (52414)
• Migrate ‘iframed inline styles’ end-to-end tests to Playwright. (53269)
• Migrate Allowed Block Test to Playwright. (53171)
• Patterns: Reinstate template parts mode spec. (52780)
• Route to published post instead of homepage on navigation end-to-end tests. (52802)
• Temporarily skip 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. import end-to-end test. (53226)
• Update end-to-end tests that use code editor. (52788)
• Image block: Fix flaky tests. (52442)
• Add options for debugging PHP unit tests in package.json. (52778)

First time contributors

The following PRs were merged by first time contributors:

• @Armondal: Adding description of the –no-watch option. (53139)
• @lunaluna: Video: Fixing styles that vertical alignment of the video. (53131)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewserong @anton-vlasenko @Armondal @artemiomorales @audrasjb @bph @c4rl0sbr4v0 @carolinan @chad1008 @danielbachhuber @DAreRodz @dcalhoun @derekblank @draganescu @ellatrix @fluiddot @geriux @getdave @glendaviesnz @hellofromtonya @jameskoster @jasmussen @jeherve @jeryj @jordesign @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @lunaluna @Mamaduka @mburridge @michalczaplinski @mikachan @mirka @ndiego @noahtallen @noisysocks @ntsekouras @ockham @pedro-mendonca @pooja-muchandikar @priethor @ramonjd @richtabor @ryanwelcher @scruffian shimotmk @Soean @stokesman @swissspidy @t-hamano @tellthemachines @torounit @tyxla @westonruter @WunderBart

Props to @joen and @richtabor for the visual assets; @bernhard-reiter, @tyxla, @priethor, @mburridge, and @matveb for peer review; @bernhard-reiter, @youknowriad, and @dmsnell for helping get the release published to 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/; and @karmatosed and @siobhyb for riding along during the release process.

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