What’s new in Gutenberg 19.4? (9 Oct)

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

This release includes 186 PRs from 54 contributors, and includes several exciting features such as new Write / Design modes and 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. Bindings editor APIs.

New Write / Design modes

The Edit and Select modes are now called Write and Design modes.

In Write mode, you can focus solely on writing, with all layout options hidden from the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme..

If you want to adjust colors, sizes, create columns, and more, switch to Design mode!

Block Bindings Editor APIs are public

Gutenberg 19.4 and WordPress 6.7 will allow developers to use certain block binding APIs that were previously private and used only in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. A dev notedev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. and documentation will be published for the WordPress 6.7 release, but here is an overview:

  • getBlockBindingsSource, getBlockBindingsSources: The first retrieves a specific block binding source and its properties, while the second retrieves a list of all block binding sources.
  • updateBlockBindings: Similar to updateBlockAttributes, this function allows you to create or remove connections between a block and any source.
  • removeAllBlockBindings: Removes all connections from a block to any source.
  • registerBlockBindingsSource, unregisterBlockBindingsSource: Enables registering and unregistering block bindings in the editor. Registering them in the editor allows modification of source fetching and editing.

Other Notable Highlights

There are some improvements too that are worthy to mention like:

  • Comment block components (e.g., author name, date, content, pagination) and Query block components (e.g., no results, pagination, title) will now have previews when hovered over in the inserter panel.
  • Additionally, the BorderBoxControl, BorderControl, and BoxControl components are now considered stable.(65469, 65475, 65586)
  • Also the filters PreSavePost and SavePost are now stable. (64198)

Not to mention all the bugs fixed that you can check in the changelog below.

Changelog

Enhancements

Block Library

  • Added keywords to 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. (65515)
  • Added: DropZone when sitelogo is present. (65596)
  • 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.: Add block example. (65509)
  • Buttons: add box-sizing:Border-box rule. (65716)
  • Comment Author Name: Add block example. (65558)
  • Comment Content: Add block example. (65559)
  • Comment Date: Add block example. (65632)
  • Comment Edit/Reply Links: Add block examples. (65601)
  • Comment Pagination: Add previous and next link block examples. (65633)
  • Comments Pagination Numbers: Add block example. (65635)
  • Comments Title: Add block example. (65557)
  • File block: Allow content only editing. (65787)
  • Navigation block: Use apply_block_hooks_to_content(). (65703)
  • Post Navigation Link: Add block examples. (65552)
  • Query No Results: Add block example. (65555)
  • Query Pagination Numbers: Add block example. (65636)
  • Query Pagination: Add block example. (65556)
  • Query Title: Add block example. (65554)
  • Revert: Time To Read: Add block example. (65510)
  • Table of Contents: Try maintaining block example attributes. (65549)
  • Term Description: Add block example. (65553)
  • Time To Read: Add block example. (65512)

Components

  • Light branding for the reference site. (65764)
  • BorderControl: Use __next40pxDefaultSize prop for Reset button. (65682)
  • Composite: Always await initial render setup in unit tests. (65823)
  • DatePicker: Use compact button size. (65653)
  • Guide: Update finish button to use the new default size. (65680)
  • Navigator: Add support for exit animation. (64777)
  • Remove useEvent from components package. (65388)
  • Simplify MenuGroup component styles. (65561)
  • Storybook: Allow for case-agnostic filtering of icons. (65780)
  • ToggleGroupControl: Improve animation. (65175)
  • Tabs: Tweak sizing and overflow behavior of TabList. (64371)

Zoom Out

  • Add prompt to zoom out separator. (65392)
  • Make sections contentOnly in Zoom Out. (65396)
  • Move the toggle button to before the device preview dropdown. (65446)
  • Only show zoom out inserters on block selection. (65759)

Block Editor

  • Hide block transforms in contentOnly mode for non-content blocks. (65394)
  • Inserter: Always show the list of all patterns in the inserter. (65611)
  • MediaPlaceholder: Use InputControl in URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org popover. (65656)
  • Use proper named File when uploading external images. (65693)

Data Views

  • DataForm – Add combined fields support. (65399)
  • 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. UIUI User interface: Remove popover max height. (65835)
  • Dataviews configuration dropdown: Remove style overrides. (65373)

Post Editor

  • Edit Post: Remove unnecessary effect in InitPatternModal. (65734)
  • Editor: Consistent external media pre-publish image/button sizes. (65668)

Global Styles

  • Editor Canvas: Tweak close button. (65694)
  • Style book: Create static categories. (65430)

Edit Mode

  • Update tools menus with Write / Design order. (65721)

Select Mode

  • Select Mode: Updates to the block toolbar. (65485)
  • Select Mode: Use the content-only behavior in select mode. (65204)

Icons

  • Adds envelope icon. (65638)

Site Editor

  • Global Styles: Remove navigator screen overrides. (65522)
  • Command Palette: “Add new page” within the site editor creates new page in site editor. (65476)
  • Update elevation in the site editor. (65410)

Block bindings

  • Connected blocks, add backdrop-color. (65233)

Extensibility

  • Stabilize the PreSavePost and SavePost filters. (64198)

Base Styles

  • Base styles: Add type tokens. (65418)

Tools

  • Composer: Allow composer/installers 2.x. (65356)

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

  • Hooks: Add support for async filters and actions. (64204)

New APIs

  • Revert “Make wordpress/fields a private package”. (65477)
  • Stabilise role attribute property. (65484)

Block bindings

  • Open the stable editor APIs. (65713)

Components

  • Navigator: Stabilize and export APIs. (64613)

Bug Fixes

Components

  • Block Editor: Validate options for the ‘HeadingLevelDropdown’ component. (65425)
  • Composite: Fix legacy implementation passing store prop. (65821)
  • Composite: Make items tabbable if active element gets removed. (65720)
  • Navigator: Fix isInitial logic. (65527)
  • Restore accidentally removed entries in changelog (components package). (65804)
  • useToolsPanel: Calculate derived state in reducer to prevent too many renders. (65564)
  • useToolsPanel: Calculate menuItems in layout effect to avoid painting intermediate state. (65494)

Zoom Out

  • Fix focus loss when deleting selected block in zoom out mode. (65761)
  • Handle zoom out when changing device preview. (65444)
  • Hide Zoom Out Inserters when dragging into canvas. (65789)
  • Makes spacing consistent in zoom out vertical toolbar. (63994)
  • Remove one occurrence of the verb Toggle from Zoom out control. (65609)
  • Reset zoom out level when device type is changed. (65652)
  • Resize cover block only in normal mode. (65731)

Block Editor

  • Fix unable to remove empty blocks on merge. (65262)
  • Inserter: Fix Block visibility manager. (65700)
  • Link autocompleter: Decode post title HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities. (65589)
  • Openverse: Prevent multiple insertions during upload. (65719)
  • Paste Handler: Try to fix pasting text with formatting. (63779)
  • Remove user-select:Text. (65662)
  • Editor: Remove edit template menu item from block settings menu in blocks outside template. (65560)
  • Top Toolbar: Show document bar when no block is selected even if block tools are expanded. (65839)
  • Revert “Allow multi-select on iOSiOS The operating system used on iPhones and iPads. Safari/touch devices”. (65414)

Global Styles

  • Avoid errors when a fontSize preset is not available. (65791)
  • Fix: Shadow/Font size preset panel crashes the editor. (65765)
  • Revert “Font Library: Group fonts by source (#63211)”. (65590)
  • Tweak entity save panel button. (65695)

Block bindings

  • Fix editing protected custom fields in block bindings. (65658)
  • Fix showing bindings field values in theme templates. (65639)
  • Only pass context included in usesContext from rich text component. (65618)
  • Use registry instead of select in canUserEditValue. (65659)

Block Library

  • Categories block: Escape label. (65540)
  • Search block: Reset size correctly when clearing unit control. (65468)
  • Social Links: Fix block appender size. (65769)

Site Editor

  • Fix: Makes edit mode selector persistent in top toolbar mode. (65511)
  • Global styles: Do not navigate twice to home screen when opening the sidebar. (65523)
  • Make resizable frame compatible with RTL languages. (65545)
  • Command Palette: Fix “Add new page” command for hybrid theme. (65534)
  • Export useResizeObserver ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Native version directly. (65588)
  • Fix useResizeObserver bugs. (65389)
  • Fix aria-checked attribute not set for 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 settings buttons in Options dropdown. (65667)
  • Revert “useToolsPanel: Calculate menuItems in layout effect to avoid painting intermediate state”. (65533)

Focus Mode

  • Limit zoom out toggle to specific post types. (65732)

List View

  • Fix miscolored icons. (65707)

Media

  • Fix output buffering for cross-origin isolation. (65701)

Block Directory

  • Fix downloadable block item alignment. (65677)

Typography

  • Remove additional Typeset screen and surface typesets in the typography panel. (65579)

Widgets Editor

  • Fixed the focus cutoff of the editor buttons in the widgets editor. (65395)

Post Editor

  • Omit 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 on “design” type posts. (64990)

Data Views

  • Fix grid layout padding on small screens. (64878)

Build Tools

  • Babel preset: Add missing pkg files. (65481)
  • Temp disable test for Classic Block Media issue. (65793)

Select Mode

  • Select Mode: Blocks outside the main sections root should be disabled. (65518)
  • Select Mode: Prevent the inbetween inserter from triggering within sections. (65529)

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)

Post Editor

  • Make the Settings panel toggle button show its keyboard shortcut in its tooltip. (65322)
  • Resizable Editor: Make the editor resizable with arrow keys. (65546)

Components

  • ToggleGroupControl: Fix arrow key navigation in RTL. (65735)

Zoom Out

  • Don’t show tooltip in zoom out toggle button when showIconLabels is true. (65573)

Block Library

  • Improve the Query Loop block display settings labels. (65524)

Block Editor

  • Updates LayoutTypeSwitcher to use ToggleGroupControl. (65498)

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): Move script module HTML printing to 6.7 compat. (65620)
  • Update to use a11y script module package in Core. (65539)

Site Editor

  • Update icon in home button. (65497)

Performance

Block Library

  • Script Modules: Centralize (re)registration. (65460)

Block Editor

  • Remove editorMode from blockProps. (65326)
  • Move insertionPoint state to block-editor store/rename existing insertionPoint to insertionCue. (65098)

Documentation

  • Block Bindings: Add @since 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.) in bindings apis JSDocs. (65796)
  • Block Editor: Fix README for FontFamilyControl component. (65660)
  • Composite: Add “With Tooltip” storybook example. (65817)
  • DataViews documentation: Add high-level graph explaining DataViews and data sources interaction. (65457)
  • Docs/interactivity api router package readme. (62062)
  • Docs: Remove PHPDocPHPDoc (docblock, inline docs) for non-existing parameter. (65640)
  • Navigator: Fix README heading hierarchy. (65763)
  • Packages documentation: Minor typo corrections. (65664)
  • Plugin: Fix small typo in readme.txt file. (65634)
  • RichText: Fix JSDoc block typos. (65607)
  • SelectControl: Add story for prefix slot. (65730)
  • Update JSDoc block for RichText package to-html-string. (65688)
  • Update block-filters.md. (64959)
  • iAPI: Refactor types and add a “Core Concepts – Using TypeScript” guide. (64577)

Code Quality

Components

  • BorderBoxControl: Promote to stable. (65586)
  • BorderControl: Promote to stable. (65475)
  • BoxControl: Promote to stable. (65469)
  • Cleanup unused ToggleGroupControl configuration values. (65456)
  • Fix useInstanceId hook references. (65733)
  • Navigator: Internal refactor in preparation for stabilization. (65671)
  • Navigator: Mark experimental exports as deprecated. (65802)
  • SearchControl: Fix rest props mutation. (65740)
  • ToggleGroupControl: Clean up animation logic. (65808)

Block Editor

  • Button: Add __next40pxDefaultSize in block-editor 6. (65742)
  • Decouple “zoom/scaling the canvas” from zoom out mode (without mode rename). (65482)
  • Don’t memoize ‘getContentLockingParent’ and ‘getParentSectionBlock’ selectors. (65649)
  • Inserter: Update how we compute the actual insertion point for blocks. (65490)
  • LinkControl: Fix unneeded props prop. (65650)
  • Navigator: Use stable export instead of experimental export. (65753)
  • Button: Add __next40pxDefaultSize in dataviews, reusable-blocks, etc. (65715)
  • Fix: Button Replace remaining 40px default size violations [Block Directory]. (65467)
  • Fix: Button Replace remaining 40px default size violations [Block Editor 2]. (65308)
  • Fix: Button Replace remaining 40px default size violations [Block Editor 3]. (65225)
  • Fix: Button Replace remaining 40px default size violations [Block Editor 5]. (65361)
  • Fix: Button: Replace remaining 40px default size violation [Edit Site 1]. (65226)
  • Fix: Button: Replace remaining 40px default size violation [Edit Site 3]. (65309)

Block bindings

  • Only pass usesContext properties to editor APIs. (65661)
  • Refactor passing select and dispatch instead of full Registry. (65710)
  • Unify logic in getPostMetaFields function. (65462)

Post Editor

  • Customize widgets, edit post: Refactor Button to new sizes. (65807)
  • 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.: Remove unused property isZoomedOutView in useSelect(). (65628)

Block Library

  • Blocks: Don’t memoize ‘hasContentRoleAttribute’ selector. (65617)
  • Blocks: Update ‘__experimentalHasContentRoleAttribute’ deprecation. (65616)

Global Styles

  • Global style 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.: Remove unnecessary goTo navigation call. (65810)

Site Editor

  • Edit Site: Fix useLink prop mutation. (65739)

Data Views

  • Migrate store/actions from editor package to fields package. (65289)

Tools

Testing

  • Block Bindings: Refactor end-to-end tests. (65526)
  • GH Actions: Run the tests against PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher 8.3. (65357)
  • Revert “Temp disable test for Classic Block Media issue.”. (65809)

Build Tooling

  • Composer: Prevent a lock file from being created. (65359)
  • Composer: Update minimum required PHPUnit Polyfills. (65355)
  • PHP unit tests: Remove WP_RUN_CORE_TESTS const. (65631)
  • DEWP: Check for magic comments before minification. (65582)
  • DEWP: Handle cyclical module dependencies. (65291)
  • Label enforcer: Add Gutenberg plugin to the list of single required labels. (65253)

First-time contributors

The following PRs were merged by first-time contributors:

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @amitraj2203 @anomiex @auareyou @carolinan @cbravobernal @ciampo @crisbusquets @DaniGuardiola @davy440 @dhruvang21 @djcowan @draganescu @ellatrix @getdave @gigitux @hbhalodia @jameskoster @jasmussen @jeryj @jffng @jrfnl @jsnajdr @juanmaguitar @keoshi @kevin940726 @louwie17 @luisherranz @Mamaduka @manzoorwanijk @matiasbenedetto @michalczaplinski @mirka @mtias @noisysocks @oandregal @ockham @PARTHVATALIYA @peterwilsoncc @philwp @priethor @ramonjd @SantosGuillamot @shail-mehta @sirreal @Soean @spadeshoe @stokesman @swissspidy @t-hamano @talldan @tyxla @vcanales @vipul0425 @youknowriad

Props to @joen for visuals assets, @bph and @ndiego for peer-review

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