What’s new in Gutenberg 19.6? (6 Nov)

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

This release includes 193 PRs from 55 contributors, and includes one really exciting experimental feature, inline comments!

Experimental inline comments

Experimental inline comments are available as an experimental feature in  Gutenberg. Users will be able to comment on top of blocks, only in non-published posts. In order to activate them, go to Gutenberg > Experiments and enable the 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. Comments checkbox.

Example of experimental inline comments feature.

Code quality, 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 build tooling

The release includes some improvements on the overall site editing experience:  a keyboard shortcut for zoom out (66400), a cleaner layout (66255), and a new color tab (65692) for the style book.

The client-side media processing work has started (64845), but keep in mind that this new package is private and experimental.

Also, a few ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. Compiler errors have been fixed and packages now use npm workspaces (65681).

Changelog

Enhancements

Components

  • Add elevation tokens to storybook. (66122)
  • Add foundations:Elevation to storybook. (66124)
  • Add radius foundation and tokens to storybook. (66219)
  • Combobox, FormTokenField: Show message when no matches found. (66142)
  • Storybook: Organizes components under ‘Utilities’. (66210)
  • Tabs: Expose active tab item props, use ariakit prop types. (66223)
  • Tabs: Remove custom logic. (66097)
  • DropdownMenuV2: Rename to Menu. (66289)

Block Library

  • Add Transformation from Separator to Spacer. (66230)
  • Add lightbox option in gallery block link control. (64014)
  • Archives: Add border block support. (63400)
  • Border support added to comments. (66354)
  • Cover Block: Add Image Resolution options. (62926)
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Block: Force HTML preview in view mode. (66440)

Zoom Out

  • Add keyboard shortcut in editor. (66400)
  • Iterate zoom out shuffle into a more visual control. (66194)
  • Use the zoom-level value to scale the 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.. (66280)

Site Editor

  • Remove synchronization of canvas mode into store. (66213)
  • Style Book: Clean up layout. (66255)
  • Update site icon and title position. (66171)
  • Editor Interface: Remove small 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. from global styles/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 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.. (64474)
  • Remove purple coloring from DocumentBar and PostCard. (66451)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Add the ‘getEntitiesConfig’ resolver. (65871)
  • BlockGroupToolbar: Better 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. context for toolbar labels. (66211)
  • Set ResizableEditor height based on border-box. (66342)
  • Add align-item related icons. (66242)
  • Stabilize isPreviewMode flag. (66149)

Data Views

  • Fix alignment of action items in list layout. (66273)
  • Templates: Hide media field in list view. (66573)

Global Styles

  • 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.: Caching of global styles for blocks from core. (66349)
  • Style Book: Add color tab. (65692)

Real-time Collaboration

  • Inline Commenting: Disable comments on published posts for now. (66583)

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

  • Backport from WordPress core: Improvements for the post format 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. 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.. (66037)

Build Tooling

  • Create Block: Adds --target-dir flag to allow the tool to target where to scaffold. (53781)
  • Scripts: Add build-blocks-manifest command. (65866)
  • Scripts: Add BlueOak-1.0.0 license to GPL2 compatible. (66139)
  • WP Scripts: Add a --root-folder argument to the plugin-zip command. (61375)

Bug Fixes

Zoom Out

  • Disable zoom out toggle button when Style Book is open. (66228)
  • Don’t switch editor mode when changing entities. (66452)
  • Fix scaling animation for device previews. (66132)
  • Fix zoom out not persisting while switching between editor and code editor. (65932)
  • Fix zoom out shortcut on Windows. (66506)
  • Fix: Activate zoom out on large viewport. (66308)
  • Hide slots and grouping buttons. (66243)
  • Remove zoom-out toolbar. (66039)
  • Resets the Zoom on viewed/edited entity change. (66232)
  • Revise zoom layout shift fix. (66390)
  • Zoom Out: Rely on zoom-level instead of zoom-out mode. (66141)
  • Zoom Out: Fix bouncy drop zones. (66399)

Block Editor

  • Block inserter: Prevent editor from crashing if blockType.parent is a string. (66234)
  • Block toolbar: Account for scrollable blocks that affect the position of the block toolbar. (66188)
  • Fix extra scrollbar appearing when searching in the inserter. (66229)
  • Fix: Show paragraph block variations in rich text inserter. (66318)
  • Group: Fix padding select. (65857)
  • Link Shortcut: Only trigger the link shortcut if there’s a text selection. (66056)
  • Remove relative position from sidebar tabpanel. (66267)
  • Rich text: Remove empty file. (66553)
  • Block editor: Self nesting and circular nesting block fix. (66121)
  • Post Editor: Set the default value of the editorTool to edit. (66636)

Components

  • ColorPalette: Prevent overflow of custom color button background. (66152)
  • Fix: Text overflow in Patterns filter. (66504)
  • RadioGroup: Fix arrow key navigation in RTL. (66202)
  • Tabs and TabPanel: Fix arrow key navigation in RTL. (66201)
  • Tabs and ToggleGroupControl: Round indicator size. (66426)
  • Tabs: Fix animation timings. (66198)
  • Tabs: Override tablist’s tabindex only when necessary. (66209)
  • Tabs: Restore vertical alignment for tabs content. (66215)
  • Tabs: Update indicator more reactively. (66207)
  • SpacingSizesControl: Use generic label for linked button. (66304)

i18n

  • Miscellaneous i18n fixes. (66510)
  • Remove most of the occurrences of the verb toggle. (66371)

Post Editor

  • Always force iframe in pattern editor. (65887)
  • Editor: Multi-entity saving: Show correct count of entities to be saved. (66482)
  • Fix : “Set 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.” button border flashes on focus. (66092)
  • Fix Parent Check Condition in buildTermsTree. (66006)
  • Fix: Improve the DocumentBar post type label for the Homepage and Posts Page cases. (66355)
  • PostTaxonomiesFlatTermSelector: Restore space between 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.) list and most used tags. (66566)
  • Typo metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. pane is a 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. box panel. (66502)

Block Library

  • Block registration: Normalize blockType.parent to array. (66250)
  • Button Block: Apply Stretch Styles Correctly. (64770)
  • Buttons: Fix the initial white space in nofollow rel. (66303)
  • Fix – Image block: Aspect ratio not responding when dimensions are not set. (66217)
  • Navigation block: Fix block appender size. (66153)
  • Fix the navigation issue inside cover blocks. (66093)

Site Editor

  • Edit Site: Fix canvasMode var. (66316)
  • Fix button hover style in sidebar navigation screen. (66505)
  • Remove toggle verb from post list data views ‘Toggle details panel’. (66334)
  • Revert 66431 (Site editor: Remove “default” adminadmin (and super admin) CSSCSS Cascading Style Sheets.). (66540)
  • Restore block-library editor.css outside canvas. (66556)
  • Fix extraneous scrollbar in device previews. (66494)
  • Global styles: Move preload paths filter to 6.7 (previously 6.8). (66543)
  • Fix comment output in styles. (66439)
  • Site editor: Fix save shortcut. (66423)
  • Preload: Fix multiple regressions around global styles. (66468)

Build tooling

  • Create block: Ensure $slug is replaced with passed slug. (66528)

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

  • Add featured image alt text. (66189)
  • Fix : Badge Color contrast. (66360)

Block Editor

  • ImageSizeControls: Replace ButtonGroup with ToggleGroupControl. (65386)
  • Improve the link preview accessibility and labels. (60908)

Block Library

  • Search: Replace ButtonGroup usage with ToggleGroupControl. (65340)
  • Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. (66147)

Global Styles

  • Global styles menu: Avoid visible labels and accessible names mismatch. (65124)

Site Editor

  • Fix Global styles panel header buttons text overlap for ‘Show button text labels’. (63243)
  • Update the speak messages when switching editor modes. (66278)

Performance

Site Editor

  • Remove “default” admin CSS. (66431)
  • Remove content styles outside canvas. (66432)
  • Block Style Variations: Reuse block metadata in WP_Theme_JSON::Get_valid_block_style_variations() for better performance. (66539)
  • Block Bindings: Use getEntityConfig instead of getPostTypes to get available slugs. (66101)

Build Tooling

  • Fix/compare performance with correct branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch".. (66196)

Experiments

  • Add Inline comment experimental flag. (60622)
  • QuickEdit: Add slug field control. (65196)

Data Views

  • Quick Edit: Fix JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. error when bulk editing pages. (66358)
  • QuickEdit: Add Featured Image Control. (64496)
  • QuickEdit: Add Parent field. (66527)

Documentation

  • BaseControl: Auto-generate readme. (66500)
  • Components: Prevent generated readmes duplicating h1 elements when published. (66180)
  • Correct documentation on display type in flow layouts. (66224)
  • Docs: 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. – Add documentation for getServerState() and getServerContext(). (66104)
  • Fix undo/redo Button size in Storybook playground. (66538)
  • Fix: 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 Docgen doesn’t work on Windows OS. (66414)
  • ItemGroup: Improve stories to default to bordered and separated. (66191)
  • README: Add Storybook badge. (66529)
  • Remove meetings that no longer occur from Contributor Guide. (66421)
  • Site editor routes: Add documentation for areas and prevent edit area from rendering when canvas is edit. (66309)
  • Update documentation about build process changes. (66428)
  • Docs: Example for getSelectedBlock. (66108)

Code Quality

Block Editor

  • ESLint: Remove explicit react-hooks/exhaustive-deps disabling. (66461)
  • ESLint: Remove various React Compiler mutation violations. (66327)
  • Fix ‘useInstanceId’ hook reference. (66406)
  • Fix React Compiler error for Duotone. (66492)
  • Fix React Complier error for ‘useEventListeners’. (66495)
  • Import only the actually used PostCSS exports. (66379)
  • No need to unlock public actions. (66260)
  • Remove patterns UIUI User interface stylesheet from iframe. (66306)
  • Remove unnecessary Tooltip component from radius control linked button. (66274)
  • Rich Text: Fix React Complier error for ‘useEventListeners’. (66460)
  • Storybook: Add BlockPatternsList story. (66227)
  • Block editor: Remove reusable blocks stylesheet from iframe. (66285)

Components

  • BorderBoxControl: Deprecate 36px default size. (65752)
  • BorderControl: Deprecate 36px default size. (65755)
  • DrodownMenuV2: Rename folder to menu. (66473)
  • ESLint: Stop disabling react-hooks/exhaustive-deps rule. (66324)
  • Fix React Compiler error for ‘useAutocomplete’. (66496)
  • PaletteEdit: Use ItemGroup and Item, and avoid custom styles. (66164)
  • TabPanel: Add 40px size prop to tab Button. (66557)
  • Tabs: Align to standard compound components structure. (66225)
  • Tabs: Simplify styled components code. (66208)

Compose

  • Compose: Fix React Complier error for ‘useCopyToClipboard’. (66444)
  • Composer: Fix React Compiler errors for ‘useDropZone’. (66469)

Dataviews

  • Fields: Fix React Compiler mutation errors. (66464)
  • Fields: Update a few function definitions. (66315)

Interface

  • Interface: Remove duplicate ‘withComplementaryAreaContext’ file. (66348)
  • Interface: Remove unused private API support. (66565)
  • Interface: Use plugin context hook instead of HoC. (66362)

Zoom Out

  • Bundle behavior in block-editor and add story. (66240)
  • Editor: Handle zoom out state via the ‘switchEditorMode’ action. (66262)
  • Fix/html scale code quality. (66181)
  • Make useZoomOut hook private. (66374)
  • Remove double click to exit hook from the block-editor package. (66335)
  • Remove viewport check from useZoomOut hook. (66341)

Post Editor

  • Editor: No need to reset mode when changing device preview types. (66261)
  • Editor: Use plugin context hook in ‘PluginMoreMenuItem’. (66351)
  • Editor: Use plugin context hook in ‘PluginPreviewMenuItem’. (66350)
  • Fix typo after #63669. (66396)
  • Remove leftover JS code from 66451. (66472)

Block Library

  • Cleanup unnecessary notice removal. (66409)
  • ESLint: Fix a couple of React Compiler reassignment errors. (66331)
  • Footnotes: Remove extra callback when parsing content. (66370)
  • Gallery: Fix React Compiler reassignment error. (66408)
  • Table Block: Remove hasArrowIndicator prop. (66204)

Style Book

  • Avoid state/effect combo when generating values. (66446)
  • Fix React Compiler error. (66445)

Global Styles

  • Clean up: Adjust reusable-blocks dependencies. (66302)
  • Fix React Compiler variable mutation error. (66410)
  • Theme JSON: Get_block_nodes – relocate $selectors assignment. (66265)

Interactivity API

  • Interactivity API: Add comments to the deepMerge() function. (66220)
  • Interactivity API: Add tests for handling arrays in deepMerge(). (66218)
  • Interactivity API: Delay block hydration to allow interactive block stores to initialize. ([66772])(https://github.com/WordPress/gutenberg/pull/66772)

Site Editor

  • Prepare route registration by refactoring the site editor router. (66030)
  • Navigation: Improve trigger for fallback navigation. (66478)

Build Tooling

  • Scripts: Refactor to extract license logic. (66179)
  • Plugins: Deprecate ‘withPluginContext’ HOC. (66363)

Tools

Testing

  • Fix [Flaky Test] Entering zoomed out mode zooms the canvas. (66212)
  • Fix end-to-end test for padding appender. (66080)
  • Upgrade Playwright to v1.48. (66296)

Build Tooling

  • Add new private vips package. (64845)
  • Revert “Use npm workspaces for packages”. (66270)
  • Add theme type to the bug report issue template. (63851)
  • Pull request automation: Use full npm install. (66314)
  • Use npm workspaces for packages (second attempt). (66272)

First-time contributors

The following PRs were merged by first-time contributors:

  • @AhmarZaidi: Remove toggle verb from post list data views ‘Toggle details panel’. (66334)
  • @mediaformat: Remove clip & -webkit-clip-path for downloadable-block-list-item style.scss. (66147)
  • @nicolasgalvez: WP Scripts: Add a --root-folder argument to the plugin-zip command. (61375)
  • @poojabhimani12: Add Inline comment experimental flag. (60622)
  • @rinkalpagdar: Border support added to comments. (66354)
  • @rudrakshi-gupta: Add Transformation from Separator to Spacer. (66230)
  • @SH4LIN: GH-66090: Self nesting and circular nesting block fix. (66121)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @AhmarZaidi @akasunil @andrewserong @arthur791004 @carolinan @cbravobernal @ciampo @dhruvang21 @ellatrix @getdave @gigitux @hbhalodia @jameskoster @jeryj @jsnajdr @juanfra @madhusudhand @MaggieCabrera @Mamaduka @mattrwalker @mcsf @mediaformat @michalczaplinski @mirka @mreishus @ndiego @nicolasgalvez @ntsekouras @oandregal @PARTHVATALIYA @peterwilsoncc @poojabhimani12 @prajapatisagar @ramonjd @renatho @rinkalpagdar @rudrakshi-gupta @ryanwelcher @SantosGuillamot @SH4LIN @sirreal @stokesman @swissspidy @t-hamano @talldan @tellthemachines @torounit @troychaplin @tyxla @vipul0425 @Vrishabhsk @vykes-mac @westonruter @youknowriad @zaguiini

Props to @auareyou for visuals assets, @artemiosans, @welcher, @annezazu for peer review.

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