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

The latest release includes several new enhancements, loads of 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 continued work on Phase 3 features.

Rename (almost) all blocks from the editor

After a successful implementation of renaming Group blocks in Gutenberg 16.7 and feedback that the feature should be opened up, version 16.9 lets you rename nearly every block. A bonus for this feature is that theme authors can use this to label blocks in their theme templates and patterns.

There are a few blocks that cannot be renamed:

• core/block
• core/template-part
• core/pattern
• core/navigation

Duplicate and rename patterns and more

Pattern management is getting a lot of nice feature additions. For individual patterns, you can now rename or duplicate them:

You can also rename or delete pattern categories directly from the user interface:

Gutenberg 16.9 also introduces two new media categories: Audio and Video. This should help better organize patterns by media type.

Other Notable Highlights

• The Dimensions design tool control’s layout is much improved (55060).
• The Template Part 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 falls back to the current theme is there is no theme attribute provided (55217).
• ​​A ton of CSSCSS Cascading Style Sheets. Level 4 viewport-relative units are now supported for more flexible control over various sizing options (54415).
• getEntityRecords() calls now return pagination totals in the returned data (55164).

Changelog

Features

Create Block

• Introduce the transformer property. (55423)

Data Views

• Enable users to sort by date. (55388)

Block Library

• Enable Block Renaming support for (almost) all blocks. (54426)

Enhancements

Command 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 block-specific commands as contextual suggestions [#53539]. (53974)

Components

• Add Tabs (a composable TabPanel v2). (53960)
• Add type="button" to vanilla <button> elements. (55125)
• ConfirmDialog: Ts 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. storybook. (54954)
• GradientPicker: Remove padding and disable overflow of color picker popovers. (55265)
• Migrate Composite component from reakit to ariakit. (54225)
• Remove margins from Notice component. (54800)

Patterns

• Add duplicate pattern command. (55292)
• Add rename command. (55188)
• Add rename/delete options for pattern categories in site editor. (55035)
• Register new media related categories. (55236)
• Use modal for pattern duplication flow as workaround for changing sync status. (54764)

Block Editor

• Migrating DownloadableBlocksList to use updated Composite implementation. (55272)

Block Library

• Improve DimensionsTool control layout. (55060)
• Template Part block: Fall back to current theme if no theme attribute is given. (55217)

Post Editor

• Editor: Introduce PluginPostExcerpt slot. (55200)
• Editor: 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 in PostExcerpt. (55189)

Design Tools

• Allow using CSS level 4 viewport-relative units. (54415)
• Add changelog entry for #54415. (55201)
• Remove 16:10 from 10:16 options from AspectRatioDropdown. (55053)

Data Views

• Add drop down with action in headers. (55293)

Icons

• Update fullscreen icon. (55021)

Format Library

• Link format: Auto link pasted urls. (55195)

Site Editor

• Migrating AddCustomTemplateModalContent to use updated Composite implementation. (55256)

Private APIs

• Update consent string for using private APIs. (55182)

New APIs

• CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Retrieve the pagination totals in the getEntityRecords calls. (55164)

Bug Fixes

Block Library

• PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice when an image with lightbox is deleted. (55370)
• Cover Block: Check for previously uploaded media before setting the dimRatio. (55422)
• Cover: Fix media type check in the onSelectMedia hook. (55168)
• Fix Block Rename UIUI User interface perf 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.. (55250)
• Fix PHP notice when an image with lightbox is deleted in the behaviors file. (55385)
• Fix: Wrong condition on cover block dimRatioToClass. (55356)
• Focus submenu button when clicked. (55198)
• Hide footnotes block from the inserter. (55058)
• Image: Fix Lightbox display bug in Classic Themes. (54837)
• Latest Posts: Add screen reader title text to Read more links and use alternative to excerpt_more 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.. (55029)
• Latest Posts: Sync updates from Core (6.4). (55181)
• List View: Change the aria-description attribute to aria-describedby. (55264)
• 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: Reuse existing screen-reader-text CSS class for the enhanced pagination aria-live region. (55309)

Site Editor

• Alternative: Fix template part area listing when a template has no edits. (55115)
• Do not display ‘trashed’ navigation menus 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.. (55072)
• Pages list: Set status as no sortable. (55210)
• Remove duplicate template areas from the site view sidebar. (54942)
• Site Editor Styles Screen: Fix dancing styles previews. (55183)
• Use accessorFn instead of cell to render status. (55196)

Interactivity API

• Add aria-label attribute to navigation block only when it is open. (54816)
• Fix server processing of wp-context getting out of sync. (55436)
• Image: Disable lightbox editor UI for linked images. (55141)
• Image: Reimplement lightbox trigger as a minimal button in corner of image. (55212)
• Image: Stop crashing with Lightbox on image blocks without an image. (55269)
• Remove the lightbox filter and view file when the lightbox setting is disabled. (55120)
• Reset “Expand on click” image styles when window is resized. (55077)

Components

• Changing Button component toggled style selector. (55065)
• ColorPicker: Improve UXUX User experience of dragging the handle when in popover on top of the editor. (55149)
• Colors: Fix color button border radii. (55207)
• 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. / block drag chip: Fix positioning when dragging over an iframe. (55150)
• ProgressBar: Use text color to ensure enough contrast against background. (55285)
• Toolbar: Add unstyled variant. (55139)
• useBlockPreview: Try outputting EditorStyles to ensure local style overrides are rendered. (55288)

Block Editor

• LinkControl: Prevent horizontally long preview image from being stretched vertically. (55156)
• List: Fix forward merging of nested list. (55121)
• Paste: Fix MS Word list paste. (55127)
• Writing flow: Fix selecting synced pattern. (55221)
• Writing flow: Preserve block when merging into empty paragraph. (55134)
• url: Update filterURLForDisplay to include all image, video, and audio file types. (54920)
• Block Styles: Display default style label correctly in the block sidebar. (55008)
• useBlockSettings: Add missing useMemo dependencies. (55204)

Data Views

• Add linked title fallback. (55248)
• PagePages: Fix unintended object mutation inside component. (55314)
• Fix pagination. (55387)
• Make date 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. translatable. (55445)

Patterns

• Add categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. selector to pattern creation modal. (55024)
• Fix scrollbars on pattern transforms. (55069)

HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. API

• Fix: Directive processor failing on updated HTML API. (55404)

Widgets Editor

• Only suppress adminadmin (and super admin) notices when JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. is enabled. (55403)

Data Layer

• Fix combineReducers() types. (55321)
• Get the page count as derived data. (55316)

Layout

• Add selector as id to layout style overrides. (55291)

History

• Try: Only render LastRevision component if 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 is active. (55253)

Block Directory

• Fix filtering for downloadable blocks in inserter. (55243)

Global Styles

• Use all the settings origins for a block that consumes paths with merge. (55219)

Post Editor

• Fix wrong notification message shown when an entity is moved to trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.. (55155)

Typography

• Font Library: Show error if fetching collection fails. (54919)

Colors

• 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. Make No color selected translatable text. (54814)

Rich Text

• Paste: Only link selection if URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org protocol is http(s). (53000)

Patterns

• Remove the version enforcement for npm in engines field. (55245)

Code Quality

• Fix: Use y-webrtc room name terminology instead of docName. (55260)

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)

Global Styles

• Fix flickering when focusing on global style variations. (55267)

Interactivity API

• Fix Image block lightbox missing alt attribute and improve accessibility. (55010)

Components

• Modal: Fix closing when contained iframe is focused. (51602)

Block Library

• Cover: Add aria-label to fixed and repeated image backgrounds. (50990)

Performance

Block Editor

• Rich Text: Cleanup excess focusin/focusout listeners. (55382)
• Optimize customClassName controls. (55345)
• useBlockControlsFill: Avoid unneeded store subscriptions. (55340)

Parsing

• Remove empty attrs. (54496)

Data Layer

• Fix resolver resolution status key types mismatch causing unwanted resolver calls for identical state data. (52120)

Experiments

Data Views

• Add status entity and use it in “admin views” experiment. (55050)
• Add Grid Layout. (55353)
• Add 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. field to the page list. (55246)
• Adds a control to the views actions to switch layouts. (55311)
• Fix the actions menu in the list view. (55426)

Block Library

• Introduce experimental form and input blocks to allow building basic forms. (44214)
• Mark forms blocks as experimental in block.json files. (55187)
• Update the apiVersion in experimental blocks block.json files. (55186)

Components

• Expose Tabs as private API. (55327)

Site Editor

• Add author and status filter to the page list. (55270)

Documentation

• Add “Get started with create-block” doc to the Getting Started section. (55373)
• Add a “Get started with wp-scripts” doc to the Getting Started section. (55372)
• Add backgroundImage to the 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. documentation for appearanceTools. (55376)
• Add initial documentation for the DataViews component. (55435)
• Augment Block.Edit filter documentation with performance guidance. (55252)
• Correct the documented type for the $w parameter of block_core_navigation_add_directives_to_submenu(). (53585)
• Document kind, name, plural for entity configuration. (55158)
• Document updating the consent string to unlock private APIs. (55235)
• Explain how to translate Gutenberg in standalone apps using the editor packages. (55080)
• Fix callouts in end-to-end test documentation. (55300)
• Fix code formatting due to bug in the “Get started with wp-env” doc. (55458)
• Fix the position of the callout in the “Get started with wp-scripts” doc. (55457)
• Font Library: Change all references to 6.4.0 by 6.5.0 core version. (55320)
• Initial documentation of entity configuration. (55103)
• PHP lib docs: Update to include information about prefixes in block PHP code. (55402)
• Platform docs: Add a page to explain how to render HTML from a list of blocks. (55140)
• Remove @return void from PHP function docs. (55237)
• Remove the wp-now getting started doc. (55136)
• Update LinkControl documentation with advice to memoize value prop. (54659)
• Update nested-blocks-inner-blocks.md for WP 6.4 release. (55375)
• docs/get-started-with-wp-env: Diagram and links added. (55381)
• Update broken anchor link. (55233)

Code Quality

Data Views

• Allow actions to be provided declaratively as a prop. (55192)
• In list view, automatically insert header menu separators. (55412)
• Update the data views component to pass a view object. (55154)
• Update the view actions menu to be independent from current view APIs. (55294)
• Normalize render fields function. (55411)
• Rename accessorFn to getValue. (55434)
• Update the view configuration to include fields visibility. (55247)

Block Library

• Query block: Remove unnecessary class. (55438)

Site Editor

• Fix: Remove unrequired nullish coalescing operator on canEditCss con…. (55357)

Global Styles

• Update: Unset variable set by reference after a foreach loop. (55261)

Design Tools

• Elements: Add unit tests for class and style generation. (55113)

Block Editor

• Remove value syncing in Link Control. (51387)
• Chore: Fix: Remove third parameter passed to shouldDismissPastedFiles. (55262)
• Chore: Simplify code by removing unnecessary and condition. (55268)
• useBlockSync: Fix typo and simplify test. (55203)

Data Layer

• Update status entity label to Status and plural to getStatuses. (55160)

Gutenberg Plugin

• Text Component: Typescript’n. (54953)

Tools

Testing

• Don’t change error handling in WP_Theme_JSON_Gutenberg::Set_spacing_sizes(). (55354)
• E2E: Add missing comment. (55093)
• E2E: Try to fix the flaky autocomplete spec. (55081)
• Migrate ‘Post Title block’ end-to-end tests to Playwright. (55297)
• Migrate ‘text color’ end-to-end test to Playwright. (55323)
• Migrate demo page tests to Playwright. (55054)
• Migrate remaining Link UI tests to Playwright. (52828)
• Playwright Utils: Introduce the editor.saveDraft helper. (55308)
• Try to fix flaky synced pattern test. (55406)
• Try to fix multi-block-selection flakiness. (55075)
• WP_Theme_JSON_Gutenberg Unit tests: Fix phpunit warnings about set_spacing_sizes. (55313)
• end-to-end Utils: Use frameLocator for retrieving editor canvas. (54911)

Build Tooling

• Packages: Ensure only changed packages get published for WP releases. (55334)
• WP_Env: tests-cli phpunit executable file not found in $PATH: Unknown. (54508)

First time contributors

The following PRs were merged by first time contributors:

• @unscripted: docs: Update broken anchor link. (55233)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewhayward @andrewserong @anton-vlasenko @apeatling @aristath @artemiomorales @brookewp @carolinan @chad1008 @ciampo @dcalhoun @dmsnell @ecgan @ellatrix @fluiddot @getdave @glendaviesnz @gziolo @jffng @jhnstn @johnbillion @jorgefilipecosta @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kishanjasani @luisherranz @MaggieCabrera @Mamaduka @margolisj @matiasbenedetto @mcsf @michalczaplinski @mikachan @ndiego @ntsekouras @oandregal @ockham @peterwilsoncc @ramonjd @retrofox @richtabor @ryanwelcher @SantosGuillamot @scruffian @sethrubenstein @shimotmk @SiobhyB @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @tyxla @unscripted @WunderBart @youknowriad

Props to @jameskoster for designing assets for this post.

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