What’s new in Gutenberg 16.7? (27 September)

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

What's New In Gutenberg 16.7?

Gutenberg 16.7 has been released and is available for download!

16.7 is the last Gutenberg release ahead of the upcoming WordPress 6.4 release, so it’s packed with features 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. Exciting new features include the new Font Library for font management within the editor, lots of enhancements to pattern management, simplified lightbox functionality, and many UXUX User experience enhancements.

This release consists of 331 pull requests authored by 88 contributors, including 7 new contributors! 🥳 🎉

Table of Contents

  1. Font Management with the Font Library
  2. Import/Export of Patterns
  3. Explore New Pattern Filtering
  4. Naming Group Blocks in the Editor
  5. “My Patterns” Category Reinstated in Post Editor Inserter
  6. Simplified Lightbox Functionality for Images
  7. Background Image Control Added to Group Block
  8. New Social Link Icon for X
  9. Changelog
  10. First time contributors
  11. Contributors

Font Management with the Font Library

Screenshot of the Styles panel in the editor with the Typography settings open

The new Font Library allows users to install, remove, and activate typographic fonts from various sources in WordPress via the editor. The installed fonts are enabled globally, independent of the active theme in the /wp-content/fonts directory, similar to the Media Library. As part of this new feature, users can add fonts manually by uploading them from their local machine or choosing from a list of Google Fonts. (#53884 & #53307)

Import/Export of Patterns

Screenshot of a pattern in the editor with the options panel open, showing the new "Export as JSON" option

It’s now possible to import and export patterns as 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. files directly from the site editor’s patterns screen. This change mirrors the existing import/export functionality in the /wp-admin patterns screen, making it more straightforward for all users to migrate patterns between sites. (#54337)

Explore New Pattern Filtering

Screenshot of the pattern list panel, highlighting the new filters dropdown

Pattern filters have been restructured, with filters now being housed within a dropdown at the top of the pattern list panel. A sticky 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. has also been added to the top of the list panel for improved navigation. (#54681)

Naming Group Blocks in the Editor

Screenshot of the editor with the List View open, showing a custom named block with the name, "My custom name"

Group blocks can now be named using custom naming. Naming these blocks will update their name in the List View, making it easier to distinguish between blocks. This enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. marks another step forward as the Site Editor’s tools and features continue to expand. (#53735)

“My Patterns” CategoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. Reinstated in Post Editor Inserter

Prompted by feedback, the “My patterns” category has been reintroduced to the post editor’s inserter, providing a central place for users to view their custom patterns. (#54767)

Simplified Lightbox Functionality for Images

The Behaviors UIUI User interface introduced as an experimental feature in Gutenberg 15.9 has been removed and replaced with an “Expand on click” toggle in the Image 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.’s Inspector Controls and in the Global Styles. (#54509) (#54509)

The support for Behaviors in the theme.json has also been deprecated and will be removed completely in Gutenberg 17.0:

  • Users who enabled the “lightbox” behavior in their theme.json file should migrate to a new syntax where the lightbox is simply a new block-level setting:
“settings”: {
	“blocks”: {
		“core/image”: {
			“lightbox”: {
				“enabled”: true | false
				“allowEditing”: true | false
			}
		}
	}
}
  • Note that the support for the “animation” value has been removed.

If you enabled the lightbox on any Image blocks using the previous Behaviors UI, please open and re-save posts that include those blocks to ensure they get migrated to the latest syntax.

With the removal of support for the “animation” value, all images will now only use the “expand” (zoom) animation, even if they had previously used the “fade” animation.

Background Image Control Added to Group Block

Background image support has been added to the Group block, in line with the color controls. (#53934 & #54439)

A new social link icon has been added for the X service. It can be found when searching for “X” or “Twitter”. (#54092)

Changelog

Features

Block Library

  • Social Links: Add X. (54092)

Typography

Font Library:

  • Add mime type validation for font uploads. (53986)
  • Font Collection backend. (54098)
  • Frontend [Stage 1]. (53884)
  • Font Collections frontend. (54566)

Patterns

  • Allow import/export patterns as JSON files. (54337)

Block Editor

  • Adds ‘nofollow’ setting to inline links (rich text only). (53945)
  • Rename Group blocks in the Editor via Modal. (53735)

Enhancements

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data

  • Add edits data to the useEntityRecord. (54167)

Components

  • Add non-listbox functionality back to CircularOptionPicker. (54290)
  • Added missing “middle” allowed tooltip position. (52147)
  • BlockSettingsMenu: Ensure only one block settings menu is open at a time. (54083)
  • Bundle the block copy handler within the BlockCanvas component. (54207)
  • Bundle the block selection clearer hook into the BlockCanvas component. (54209)
  • Ensure that ‘Duotone 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.’ color pickers have relevant labels. (54468)
  • Export ProgressBar to allow it to be used. (54404)
  • FormTokenField – add prop to allow saving of tokens onBlur. (53976)
  • Refactoring BorderControl‘s unit tests. (54155)
  • Remove unnecessary padding-right on the dismissible notice. (52240)
  • Support controlling open/closed state for Dropdown and DropdownMenu. (54257)
  • ToggleGroupControl: Rewrite backdrop animation with framer motion shared layout animations. (50278)
  • ToolTip: Refactor using ariakit. (48440)
  • Tooltip: Add placement prop to replace deprecated position. (54264)
  • Tooltip: Add new hideOnClick prop. (54406)
  • Tweak border control button to proper metrics and simpler action. (53998)
  • Update FormTokenField styling for consistency and visibility. (54402)
  • Update spacing sizes control metrics and icons. (54470)
  • Update/form token field onblur. (54445)
  • Popover: Update positionToPlacement types. (54101)
  • SearchControl: Allow for 32px compact size, introduce option to change default size to 40px. (54548)

Block Library

  • #39457: Image block keep image size on replacing image. (49982)
  • Add __next40pxDefaultSize to 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. opacity control. (54389)
  • Add aspect ratio to image placeholder. (54216)
  • Allow using a button element for button blocks. (54206)
  • Buttons Block: Show inserter if button have variations (#53498). (53783)
  • Change dialogdescription for renaming group block. (54358)
  • Footnotes: Add missing placeholder instructions text. (54056)
  • Heading block: Add support for writingMode. (54351)
  • Improved description for the post-terms core block. (47715)
  • Make matrix position behave like valign. (54050)
  • Navigation block: Add core/buttons to the allowed blocks. (53966)
  • Remove unused prop from GroupPlaceHolder component. (51493)
  • Template parts: Use the template actions component for template parts patterns. (54173)
  • Text orientation: Rotate vertical text when the text is aligned (Upside down text). (53175)
  • Update parent labels in page attributes panel and page list block. (54403)
  • Use __next40pxDefaultSize on more UI. (54400)

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 timeout option to navigate(). (54474)
  • Add manual Server Side Rendering (SSR) to the Interactivity API blocks. (54343)
  • Ensure that the view scripts of core blocks have the wp-interactivity dependency. (54594)
  • Image block: Revise lightbox UI to remove ‘behaviors’. (53851)
  • Image block: UI updates for the image lightbox (redo). (54509)
  • Override unfinished navigate calls. (54201)
  • 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.: Add design enhancements for the “enhanced pagination” setting. (54455)
  • Query Loop: Allow “enhanced pagination” only with core blocks. (54347)
  • Query block: Start prefetching on first click to next/previous. (54781)

Patterns

  • Add categories to user patterns, and allow filtering by these in site and post editor. (53835)
  • Add editing of pattern categories to site editor. (54640)
  • Add user categories to site editor 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. navigation screen. (53837)
  • Add user pattern categories to post editor inserter patterns tab. (53933)
  • Apply white background to the preview as a fallback. (54534)
  • Merge unsynced into inserter patterns tab and add paging and filtering. (54007)
  • Update empty template part label. (53842)
  • Memoize useSelect for usePatterns. (54588)
  • Site Editor: Prevent unintended actions on the classic theme. (54422)

Design Tools

  • Add back tooltip to styles UI. (54574)
  • Add block gap to Post Content block. (54282)
  • Add block instance elements support for buttons and headings. (53667)
  • Background Image block support: Add reset menu item. (54341)
  • Block Supports: Add background image support to Group block. (53934)
  • Columns: Adopt button and heading element colors. (54104)
  • Update block styles UI. (54446)
  • Improve background image control. (54439)

Site Editor

  • Copy: End the Templates page description in the Site Editor with a period. (54221)
  • Edit Site: Update progress bar to determinate. (53399)
  • Follow up visual tweaks to block-specific commands. (54427)
  • Site editor sidebar: Abstracting footer so it can be used across details screens. (54082)
  • [Page Inspector]: Add ability to switch templates. (51477)

Global Styles

  • Rename settings & userSettings props to value & inheritedValue respectively in ImageSettingsPanel. (54593)
  • Update Block specific CSSCSS Cascading Style Sheets. label to include additional instructions. (49626)

Block Editor

  • Use gray color on link control advanced toggle. (54545)
  • Verse: Exit on triple Enter. (53332)
  • Block editor: 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.: Fix rules of hooks violations (2). (48943)
  • Always show the total number of patterns even with only one page. (54813)

Typography

  • Font Face: 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. from Core changeset 56500. (54218)
  • Font Library: Changing the upload directory to wp-content/fonts. (54122)
  • Font Library: Load collection JSON data from a URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org in the collection configuration. (54067)
  • Font Library: Use wporg cdn to host the google fonts json data. (54795)

Themes

  • Theme Previews: Make the back button customizable. (54242)

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

  • Remove ‘Footnotes’ and ‘Comments’ from the non-dynamic block registration list. (54154)

Media

  • Correct function name handleFileChange is replaced by wrong function name. (52250)

List View

  • Allow Escape key to deselect blocks if blocks are selected. (48708)
  • Try directing focus to the list view toggle button when closing the list view. (54175)

Block API

  • Deprecated get_file_path_from_theme method. (45831)

Keyboard Shortcuts

  • Make the shortcuts provider optional. (54080)

Blob

  • refactor(blob): Type URL parameter as optional. (49201)

Collaborative Editing

  • Try bundling sync package. (54738)

New APIs

Components

  • Revert “Export ProgressBar to allow it to be used”. (54428)

Block API

  • Stabilize Block Hooks feature. (54293)

Data Layer

  • Data: Introduce countSelectorsByStatus redux metadata selector. (53767)

Framework

  • Add useStateWithHistory hook and use to show a block editor with undo/redo. (54377)
  • BlockEditor: Add BlockCanvas component = 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. + BlockList + WritingFlow. (54149)
  • Extract undo/redo as a separate package. (54292)

Bug Fixes

Components

  • Add children back to toolbar item render for rendered components. (53314)
  • Add missing useState import in Border Control documentation. (49476)
  • Adjust input-style__focus mixin to proper focus size. (54398)
  • DropdownMenu v2: Fix submenu chevron direction in RTL languages. (54036)
  • Fix incorrect focus style size on InputControl. (54394)
  • Make CircularOptionPicker focus styles resilient to button size changes. (54196)
  • PaletteEdit: Fix padding in RTL mode. (54034)
  • Popover: Set is-positioned class only after animation has finished. (54178)
  • Storybook: Restore previous URL for the introduction documentation page. (54247)
  • Storybook: Update doc param values for ConfirmDialog. (54130)
  • Update borderFocus to ADMIN.theme. (54425)
  • Use standard focus style on BorderControl. (54429)
  • DateTimePicker: Fix onChange callback check so that it also works inside iframes. (54669)

Post Editor

  • Adds animation state for DFM off to post editor header. (54244)
  • Block Editor: Memoize the createPageEntity callback. (54580)
  • Edit Post: Avoid fetching the edited template for non-viewable posts. (54158)
  • Editor: Catch errors when creating terms. (53369)
  • Fix layout when post content is root block. (54485)
  • Make order of pinned items consistent. (53908)
  • Prevent the list view shortcut from typing unexpected characters. (54078)
  • Top Toolbar: Prevent the focus outline of the button from being cut off. (54172)
  • Try using fallback layout instead of default in post editor. (54371)
  • [Edit Post]: Toggle Distraction free mode mode based on compatibility. (54073)

Block Library

  • Block Moving Mode: Prevent the block from being moved into itself. (54137)
  • Fix navigation block submenu focus when closing menu with the ESC key. (54299)
  • List Block: Fix numbering style to be applied correctly. (53301)
  • Navigation Link: Restore tooltip. (54263)
  • Post navigation link: Fix the writing mode setting on the front. (54053)
  • PreviewOptions: Fix critical error when children not passed. (54284)
  • Remove role attribute when set to null in data-wp-bind. (54608)
  • [Commands]: Add group/ungroup commands only when eligible. (53988)
  • Replace the gutenberg_ prefix with wp_ in image block. (54678)
  • Navigation block: Fix padding on mobile overlay when global padding is 0. (53725)

Patterns

  • Command Palette: Fix duplicate Patterns command. (54133)
  • Don’t output root padding when editing patterns. (54373)
  • Fix user pattern categories in site editor inserter. (54641)
  • Remove pattern category as a variation for post terms block. (54532)
  • StartPageOptions: Improve conditions to show modal only on a brand new page. (54245)
  • Add My patterns back to post editor inserter categories. (54767)
  • De-emphasise pattern filters in inserter. (54681)
  • Fix All Patterns category default display. (54721)
  • Fix bug with new categories not showing. (54768)
  • Fix bug with pattern categories not saving sometimes. (54676)
  • Fix category type for back link. (54753)
  • Fix duplication of uncategorized patterns. (54755)
  • Inject the theme name into the block attributes. (54595)
  • Reinstate my patterns category in site editor. (54726)
  • Require a title in the creation modal. (54717)
  • Use slug as fallback for empty title. (54731)
  • Allow non-user patterns under Standard sync filter. (54756)
  • Check that pattern is synced before replacing blocks with synced pattern on creation. (54804)
  • Fix back navigation after pattern creation. (54852)
  • Fix category control width in site editor. (54853)
  • Improve sentence case consistency of labels and notices. (54807)

Block Editor

  • Add keyboardReturn submit button back to LinkControl. (52620)
  • Formats: Memoize link value passed to the LinkControl. (54603)
  • List: Merge consecutive lists. (52995)
  • Rich text: Fix useAnchor (remove nextElementSibling). (54013)
  • Iframe: Adjust keydown event bubbling. (54565)
  • Reset page after changing pattern filters or search value. (54774)
  • Block Editor: Fix ‘isBlockSubtreeDisabled’ private selector. (54618)

Site Editor

  • Bump the z-index of the rename modal. (54277)
  • Default template lookup should use slug, not the full permalink, in the site editor. (54599)
  • Fix “Blogblog (versus network, site) title” input border radius in Index / Home details panel. (54192)
  • Hide ghost top toolbar. (54555)
  • CreateTemplatePartModal: Disable the ‘Create’ button while saving. (54716)

Plugin

  • Ensure font-face styles are printed in iframe editors. (54313)
  • Font Face & Font Library: Load PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files only if the main class does not exist. (54103)
  • Gutenberg Plugin: Add hook to allow writing-mode as a safe CSS property. (54581)
  • Update readme.txt “tested up to 6.3”. (54072)
  • Update cherry-pick script to correctly verify 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/ CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. setup. (54720)
  • Conditionally remove deprecated ‘print_emoji_styles’. (54828)

Typography

  • Font Library: Ensure merged fontFace data is enconded as an array instead of an object. (54435)
  • Font Library: Fix duplicate variants with different file types. (54490)
  • Font Library: Setting wp_font_family custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. as _builtin and not plublic. (54559)
  • Font Face: Get name from “fontFamily” setting, not “name”. (54615)
  • Font Library: Fix modal width on mobile viewport. (54518)
  • Font Library: Fix space above theme fonts in font library modal. (54598)
  • Font Library: Fix error installing system fonts. (54713)
  • Font Library: Remove font files created by tests after tests run. (54771)
  • Font Library: Avoid rendering font library ui outisde gutenberg plugin. (54830)

Widgets Editor

  • Edit Widgets: Fix broken layout. (54372)
  • Edit Widgets: Fix invisible action area when the top toolbar is enabled. (54329)
  • Fix top toolbar for the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. widgets sidebar control. (54255)

Global Styles

  • Font Library: Fix notification error for actions related to custom fonts. (54535)
  • Prevent layout changes from saving the whole inherited settings object. (54500)

Block API

  • Blocks: Fix incorrect placement for hooked blocks in the parent container. (54349)
  • Pass correct content argument to enter transforms. (54108)
  • Block Hooks: Avoid processing empty content for loaded templates. (54719)

Rich Text

  • Revert: Rich text: Copy 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.) name on internal paste. (54301)

Interactivity API

  • Image: Fix block serialization test case to cover deprecation of behaviors. (54570)
  • Query Loop: Select first anchor inside Post Template with “enhanced pagination” enabled. (54730)

Icons

  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. forwardRef warnings for TooltipAnchors. (54492)

History

  • Fix extra undo/redo step when removing or replacing all blocks. (54457)

Synced Patterns

  • Patterns: Apply layout and alignment to synced patterns in the editor. (54416)

npm Packages

  • Workflow: Fix the issue with npm publishing for WP major version. (54088)

Media

  • useMediaQuery: Avoid crashing on Safari < 14. (54023)

Nested / Inner Blocks

  • Fix: InnerBlocks allowed blocks change with different sizes. (53943)

Layout

  • Post Content: Ensure layout classnames are applied in readonly preview. (53864)

Document Settings

  • Set the timezone correctly. (48083)

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

  • Fix: Invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. import in react-i18n documentation. (54308)

Design Tools

  • Background Image control: Use consistent button, ensure descriptive text accounts for no image selected. (54711)

Collaborative Editing

  • Make sure sync code only runs when experiment is enabled. (54710)

Core Data

  • core-data: Fix nested property access with undefined name. (54790)

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)

Block Library

  • Comments form: Accessibility fixes for back-end. (54393)
  • Navigation: Add ariaLabel block support. (54418)
  • Table block: Fix semantic structure for screen readers on back-end. (54324)

Components

  • Improve Notice component accessibility. (54498)
  • Making Circular Option Picker a listbox. (52255)
  • Allow Modal to place focus on first element within contents via new API. (54590)
  • Improve the placeholder instructions accessibility. (45801)

Site Editor

  • Clarify the “Entity” message of the snackbar. (54333)
  • Use solid accent color selection in command palette. (54318)

Block Editor

  • Update nofollow control label. (54184)

Performance

  • Use median instead of average to stabilize First Block metric. (54157)
  • improvement: Reduce the use of the _wp_array_get function. (51116)

Block Library

  • Footnotes: Add block-level caching when parsing content for footnotes. (52577)
  • Table of Contents: Use a custom store subscription for observing headings. (54094)
  • getClientIdsOfDescendants: Support single ‘clientId’ as a argument. (54421)

Site Editor

  • Edit site: Prevent enqueuing entire stylesheet in iframe. (54254)
  • Fix first block locator’s page reference. (54188)

Patterns

  • Move mapping of values from core-data selector into consumers. (54576)

Block API

  • Unnecessary JSON decoding in block parser. (54424)

Components

  • Tooltip: Render tooltip markup in the DOM only when open. (54312)

Post Editor

  • Editor: Memoize ‘getNestedEditedPostProperty’ selector helper. (54160)

Developer Experience

  • Tests: Improve the environment setup. (54309)

Experiments

Interactivity API

  • Remove wp_store from query block. (54359)

Documentation

  • Add a documentation page to explain how to implement undo/redo in a third-party editor. (54546)
  • Add the Commands Data page to Handbook. (53634)
  • Bootstrap a documentation website tailored towards the usage of Gutenberg outside WordPress. (54375)
  • Button: Undocument the focus prop. (54397)
  • Docs: Add missing callout class. (54558)
  • Docs: Add note about enqueueing assets in the iframe and trim whitespace. (54125)
  • Docs: Consolidated design Reference with the main Design Contributions doc. (51065)
  • Docs: Move Glossary page to Getting Started. (54120)
  • Docs: Move the FAQ page to Getting Started. (54117)
  • Docs: Overhaul the Development Environment section of the Block Editor Handbook. (54395)
  • Docs: Remove Outreach doc from Getting Started section. (54314)
  • Docs: Remove unneeded block theme docs. (51071)
  • Fix bullet hierarchy. (47178)
  • Fix createI18n package import location. (51328)
  • Fix incorrect image src in Design Contributions doc. (54302)
  • Fix: Broken links on ToolbarGroup documentation. (54229)
  • Fix: Remove unrequired code from BorderControl documentation. (54348)
  • Fix: Wrapped ref in quotes in theme.json documentation. (54591)
  • Incorrect file extension?. (54134)
  • Theme JSON schema: Fix “not allowed error” in settings property. (54521)
  • Try: Allow multiple attribute to be a string in upload components. (53350)
  • Update Commands documentation with examples and more context. (54441)
  • Update the components changelog to mark the popover slot removal as a breaking change. (54022)
  • Update versions in WP for 6.3.1. (54069)
  • Updated Related Components Links. (49176)
  • Updates Edit and Save code examples to have matching open/closing tags. (53915)
  • [Docs: Getting Started / Block Development Environment] Updates on the text to improve clarity and preciseness. (54563)
  • documentation – Contribution Triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.: Formatted text and changed some titles and structure. (54258)
  • documentation [Block Editor Handbook / Getting Started / Block Development Environment]: Fix links. (54571)
  • Add missing global declaration in DocBlockdocblock (phpdoc, xref, inline docs) of interactivity files. (54683)

Code Quality

  • Adds removal notice to view.js.mustache. (54105)
  • Block editor: Remove __unstableElementContext and filter EditorStyles instead. (52888)
  • Improving error messages and codes in jest-console, matcher.js. (53743)
  • Indicate nested paths on __experimentalSaveSpecifiedEntityEdits. (54161)
  • JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. unit tests: Update popover matcher. (54168)
  • Style engine: Sync doc changes from core. (54650)

Components

  • Composite: Refactor to TypeScript. (54028)
  • FocusableIframe: Refactor to TypeScript. (53979)
  • IsolatedEventContainer to Typescript (just test file). (54316)
  • Popover: Remove custom frame scroll/resize listeners. (54286)
  • Revert FormTokenField – add prop to allow saving of tokens onBlur. (54444)
  • Toolbar/ToolbarDropdownMenu Typescript Conversion. (54321)
  • ToolbarGroup – Typescript. (54317)
  • with-focus-outside: Convert to TypeScript. (53980)

Patterns

  • Revert usePatternsState to return an array instead of object. (54582)
  • Add missing dependency of @wordpress/patterns on @babel/runtime. (54118)
  • Move category map creation out of useSelect. (54584)
  • Remove experimental prefixes from patterns package. (54338)
  • Site editor: Consolidate constants. (54484)
  • Fix sidebar nav screen fallback category. (54754)

Post Editor

  • Annotations: Run end-to-end tests with iframe. (54191)
  • EditPostPreferencesModal: Refactor to remove snapshots for index.js. (54141)
  • Extract WordPress specific styles from the BlockTools component. (54356)
  • PageAttributesParent: A minor fixes for useSelect and useMemo hook usages. (54433)
  • PostSyncStatus: Derive sync status inside the selector. (54159)

Block Library

  • Heading: Remove unused ‘aria-label’. (54223)
  • Image Editor: Fix ESLint warnings and remove unnecessary dependencies. (53506)
  • Pattern Category: Set ‘publicly_queryable’ to false. (54567)
  • Post Terms: Fix a ‘useSelect’ warning in the ‘usePostTerms’ hook. (54068)

Interactivity API

  • Prepare image lightbox for private version of the Interactivity API in 6 4. (54547)
  • Remove gutenberg_should_block_use_interactivity_api and the old implementation of interactive blocks. (54297)
  • Search block: Switch interactivity to the Interactivity API. (53343)

Site Editor

  • Remove Tooltip workarounds added in the site and block editor. (54450)
  • 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 ‘gutenberg’ query param from revisions.php. (54166)
  • Prune store constants. (54585)
  • Use constants rather than hard coded template strings. (54586)

Rich Text

  • RichText: Remove __unstableOnSplitMiddle. (54183)

Typography

  • Fluid typography: Backporting Core since annotations. (54204)
  • Font Face: Remove static instance in wp_print_font_faces(). (54228)
  • Font Library: Refactor logic to disable font library in the frontend. (54748)

Block Editor

  • Improve code commenting around focus mount behaviour of rich text Link UI. (54085)
  • List e2e: Run all tests with iframe. (54181)

Layout

  • Use override editor style API. (54466)

Plugin

  • Require minimum WordPress 6.2. (53451)
  • Ensure that Block Hooks work correctly after landing in WP core. (54651)
  • Update uuid package to 9.0.1. (54725)

Themes

  • Iframe: Skip scoping styles. (46752)

Tools

Testing

  • Button: Update test assertion to match test name. (54260)
  • E2E: Do not run page actions in beforeEach hook when using fixme. (54065)
  • Fix Font library unit tests. (54645)
  • Font Library: Remove upload_mimes filter after uploading fonts. (54647)
  • Migrate RichText end-to-end tests to Playwright. (53493)
  • Perf Tests: Update base point to compare. (54111)
  • Puppeteer tests: Try to fix failing tests related to notices in core. (54452)
  • Remove accidental addition of perf test results (2). (54363)
  • Remove accidental addition of perf test results. (54355)
  • Update WPCSWPCS The collection of PHP_CodeSniffer rules (sniffs) used to format and validate PHP code developed for WordPress according to the WordPress Coding Standards. May also be an acronym referring to the Accessibility, PHP, JavaScript, CSS, HTML, etc. coding standards as published in the WordPress Coding Standards Handbook. to v3.0, and fix all reported Coding Standards issues. (53866)
  • Modal: Add more unit tests. (54569)
  • end-to-end Test Utils: Add new fixtures for performance metrics. (52993)
  • end-to-end Tests: Fix ‘no-useless-not’ ESLint warnings. (54652)
  • package(e2e-test-utils): Update fixtures. (54128)
  • wp-scripts: Add support for Playwright. (53108)
  • Font Library: Use resolvable domain in test. (54763)
  • Global styles tests: Fire hooks when updating post. (54836)
  • Remove action to fix tests. (54806)
  • Font Library: Fix set upload dir test. (54762)

Build Tooling

  • Backport tools: Filter PRs to be cherry picked by merged date. (54171)
  • Changelog tool: Update Automated Testing label. (54070)
  • Running npm run format:Php may result in an error. (54162)
  • Scripts: Correctly resolve entry points when the directory is symlinked. (54212)
  • Upgrade wp-prettier to v3.0.3. (54539)
  • Update typescript-eslint to v6. (53975)

First time contributors

The following PRs were merged by first time contributors:

  • @andrewhayward: Making Circular Option Picker a listbox. (52255)
  • @jamiemchale: Fix createI18n package import location. (51328)
  • @johnhooks: refactor(blob): Type URL parameter as optional. (49201)
  • @MericKarabulut: Improving error messages and codes in jest-console, matcher.js. (53743)
  • @Piyush-Deshmukh: Fix: Wrapped ref in quotes in theme.json documentation. (54591)
  • @Rajinsharwar: Editor: Catch errors when creating terms. (53369)
  • @toolstack: Set the timezone correctly. (48083)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @alexstine @andrewhayward @andrewserong @annezazu @anomiex @anton-vlasenko @aristath @artemiomorales @atachibana @bangank36 @bfintal @bph @brookewp @c4rl0sbr4v0 @carolinan @chad1008 @chintu51 @ciampo @DAreRodz @dcalhoun @derekblank @draganescu @ediamin @ellatrix @fluiddot @gaambo @geriux @getdave @glendaviesnz @gvgvgvijayan @gziolo @hellofromtonya @jameskoster @jamiemchale @jeherve @jffng @johnhooks @jordesign @jorgefilipecosta @joshuatf @jrtashjian @jsnajdr @juanmaguitar @kevin940726 @kkoppenhaver @kmanijak @leewillis77 @luisherranz @madhusudhand @MaggieCabrera @Mamaduka @margolisj @masteradhoc @matiasbenedetto @mburridge @mcsf @MericKarabulut @mhimon @michalczaplinski @mikachan @mikejolley @mokagio @ndiego @ntsekouras @Olein-jp @petitphp @Piyush-Deshmukh @Rajinsharwar @ramonjd @richtabor @SantosGuillamot @SaxonF @scruffian @spacedmonkey @stokesman @swissspidy @t-hamano @tellthemachines @thelovekesh @toolstack @torounit @tyxla @vcanales @walbo @WunderBart @youknowriad

Props to @siobhyb, @czapla, and @artemiosans for co-writing; @saxonafletcher for the visual assets; @annezazu, @priethor, @andraganescu, @cbringmann, and @ngreennc for peer review; @bernhard-reiter for helping publish the release 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/.

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

What’s new in Gutenberg 16.6? (06 September)

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

This latest release comes packed with improvements and bugfixes, including an enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. to the List View in the post editor, introducing a horizontal scrollbar for heavily nested list views, a fix for the Cover 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. on Safari on iPad, addressing an issue where images with a “Fixed background” were zoomed in excessively, and more!

Table of Contents

  1. 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-inserted blocks.
  2. Captured toolbars.
  3. Changelog.

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., formerly known as Auto-inserted blocks

On activation, plugins are now equipped with the capability to auto-insert blocks, enhancing the integration and automation between plugins and the Gutenberg editor. Early versions of this experiment were called Auto-inserted blocks, but after some discussion, they have now been dubbed Block hooks. (#52969, #54029, #54024, #54147)

Captured toolbars for an easier editing experience

Toolbars for child blocks are now seamlessly attached to their parent blocks, offering a more intuitive and organized editing experience. This feature is currently supported for Navigation, List, and Quote blocks. (#53699, #53697)

Other Notable Highlights:

  • Make mid size parameter settable for Query Pagination block. (#51216)
  • Add keyboard shortcut for duplicating blocks. (#53559)
  • Add toggle list view command in site editor. (53983)

Changelog

Features

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 Slot and Fill directives. (53958)
  • Query block: Client-side pagination. (53812)
  • Update data-wp-bind directive logic. (54003)
  • Query block: Move “Enhance pagination” toggle under Settings. (54198)

Enhancements

  • Bundle ObserveTyping within the BlockList component. (53875)
  • Default appender: Hide the dashed indicator until ancestor is selected. (53761)
  • Register the block editor keyboard shortcuts automatically when using BlockEditorProvider. (53910)
  • [Commands]: Add toggle list view command in site editor. (53983)

Components

  • Bundle SlotFillProvider within BlockEditorProvider. (53940)
  • Make the Popover.Slot optional. (53889)
  • Popover: Update @floating-ui to latest version, remove custom fix for 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. positioning and scaling. (46845)
  • AlignmentMatrixControl: Replace act() with userEvent. (53703)
  • ProgressBar: Add transition to determinate indicator. (53877)

Block Library

  • Blocks: Move bootstrapped block types to Redux state. (53807)
  • Capture toolbars in navigation block. (53697)
  • Content Block: Change placeholder and end-to-end test to refer to Content block. (53902)
  • Make mid size parameter settable for Query Pagination block. (51216)

Block Editor

  • Capture toolbars in quote block. (53699)
  • Improve writing flow for lists by capturing list item toolbars. (53306)
  • RichTextValue: Typescript Adjustment. (54002)

Typography

  • Font Face: Prepare for merge into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (53858)
  • Renames “Fonts Library” to “Font Library”. (53780)

Post Editor

  • Edit Post: Use hooks instead of HoCs in TaxonomyPanel. (53773)

List View

  • Add keyboard shortcut for duplicating blocks. (53559)

Patterns

New APIs

Interactivity API

  • Router with region-based client-side navigation. (53733)

Bug Fixes

  • Add missing aria roles for block locking toolbar and menu buttons. (53734)
  • Block Editor: Fix cleanup in the ‘useNavModeExit’ hook. (53795)
  • Command Palette: Fix crash on block-related commands. (53923)
  • Date: Add relative time translations for moment.js. (53931)
  • Date: Update translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. domains for strings to be translatable. (53995)
  • Iframe: Set character encoding to utf-8. (53519)
  • Replace horizontal ellipsis icon with vertical ellipsis icon. (52731)
  • Toggle Distraction free mode mode based on compatibility. (54030)
  • Warning: Introduce SCRIPT_DEBUG to make the package compatible with webpack 5. (50122)
  • [Commands]: Fix move to command condition for registering. (54049)
  • [Commands]: Fix block editor commands availability. (53994)
  • [Format library]: Fix language popover position. (53841)

Block Library

  • Add init.js module for the Footnotes block. (53763)
  • Adding center align css for social icon issue. (43120)
  • Cover block: Fix exception when adding video background. (53961)
  • List View: Allow replacing template part when a block isn’t selected. (53757)
  • Post Navigation Link: Remove unnecessary space between arrows and label. (53572)
  • Search block: Fix width input field. (53952)
  • Simplify check for no posts in query-no-results block. (53772)
  • Site Logo: Remove line-height for the anchor element. (53909)

Components

  • Always render the fallback Popover anchor within the Popover’s parent element. (53982)
  • Fix the cleanup method for SandBox. (53796)
  • PaletteEdit: Fix component height. (54000)

Post Editor

  • Edit Post: Fix tab border conflicts in the Document Overview panel. (53711)
  • EditPostPreferencesModal: Fix intermittently failing tests. (53814)
  • getInsertionPoint: Fix type check for the state value. (53793)

npm Packages

  • Workflow: Run Learn directly from 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/ action when publishing to npm targeting WP core. (53762)
  • Workflows: Fix issues with the npm publishing workflow when using locally. (53565)

Themes

  • Command Palette: Proper handling of page/post links in all themes. (53718)
  • Fix 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. bugs by correctly relying on the main query and removing problematic workaround. (49904)

Block Editor

  • Fix: Indicator style when block moving mode. (53972)

Icons

  • Fix invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. namespaces. (53955)

Patterns

  • Disable the preview option button when editing. (53913)

Global Styles

  • Gallery: Re-enable block spacing at block level while still hiding in global styles. (53900)

Layout

  • BlockList: Ensure element styles (and svg) are always appended at the end of the document. (53859)

Interactivity API

  • Add “supports.interactivity” to Image block. (53850)

Style Variations

  • Block Styles: Fix misplaced preview popover on RTL site. (53726)

List View

  • Recalculate window list when expanded state changes (fix logic for long nested lists). (53716)

Widgets Editor

  • Block 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.: Fix content cutoff in the keyboard shortcut modal. (53638)

Rich Text

  • Fix cleanup in useRemoveBrowserShortcuts. (52225)

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)

  • Edit site: Add missing label to post status password protected input field. (52885)
  • [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)] Fix: Aria-haspop, aria-expanded attributes on the link format button. (53691)

Site Editor

  • Add missing aria roles to the ‘Create template part’ menu item. (53754)
  • Unify the delete button style in the dropdown menu with red. (52597)

Block Library

  • Add missing aria roles to the ‘Replace template part’ menu item. (53755)

Patterns

  • Add missing aria roles to the ‘Create pattern’ menu item. (53739)

List View

  • [a11y] Fix: Aria-haspop and aria-expanded attributes on list view button. (53693)

Block Editor

  • [a11y] Fix: Aria-haspop and aria-expanded attributes on the inserter button. (53692)

Performance

  • Revert “Switch performance tests to Playwright (#52022)”. (53741)
  • StartPageOptions: Load and parse patterns only after establishing the need for them. (53673)
  • Switch performance tests to Playwright: Take 2. (53768)

Experiments

Block API

  • Auto-inserting blocks: Add block inspector panel. (52969)
  • – Auto-inserting blocks: Add block icon to block inspector panel toggles. (54029)
  • Auto-inserting blocks: Remove toggle if block is present elsewhere. (54024)
  • Rename “auto inserting blocks” to “block hooks”. (54147)

Documentation

  • Add juanmaguitar as codeowner of /packages/interactivity/docs. (53845)
  • Add new How-to Guide for enqueueing assets in the Editor. (53828)
  • Adds example for useBlockProps hook. (53646)
  • Adds explanatory text to view.js template. (53870)
  • Clarification for parent and ancestor hierarchical relationships. (53855)
  • Docs: Extend the information about using render with block.json. (53973)
  • Docs: Remove duplicate sections from FAQ page. (53830)
  • Document the naming convention for block-library PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher functions. (53777)
  • Fix ‘lerna’ links in the release documentation. (53770)
  • Fix typo in code sample for Interactivity API. (53916)
  • MenuItem: Add Storybook stories. (53613)
  • Shortcut: Add Storybook stories. (53627)
  • Storybook: Add back subcomponents to props table. (53751)
  • Storybook: Fix default source visibility. (53749)
  • Storybook: Show main story before description. (53753)
  • Update local instructions on the dev env documentation. (53924)
  • Update the Block Variations API doc. (53817)
  • Update to node 16 and npm 8 in the getting started with code contribution doc. (53912)
  • docs: Fix report-flaky-test link. (53848)

Code Quality

  • Components: Update Popover per reviews. (53907)
  • Edit Site: Rename CanvasSpinner to CanvasLoader. (53728)
  • Enforce valid function names in the packages/block-library/src//.php files. (53438)
  • Fonts Library: Update properties name from snake case to camel case to match the rest of the properties. (53746)

Block API

  • Auto-inserting blocks: Remove obsolete TODO, fix 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/. field description. (54208)

Post Editor

  • Editor: Fix the ‘useSelect’ warning in the ‘useIsDirty’ hook. (53759)
  • Fix browser console error when changing device preview mode. (53969)
  • Refactor latest content selectors in ‘CopyContentMenuItem’ components. (53676)

Components

  • Remove unnecessary utils. (53679)
  • SlotFill: Refactor <Slot bubblesVirtually />. (53272)
  • Storybook: Update TypeScript types. (53748)

List View

  • Fix warning error when the gallery block has the same image URLs. (53809)

Typography

  • Font Face API: Use gutenberg_get_global_settings instead of private API. (53805)

Tools

  • Try: Change PR label enforcer automation not to work on draft PRs by default. (53417)

Testing

  • Attempt to fix intermittent end-to-end test failure. (53905)
  • Fonts Library: Test improvements. (53702)
  • Make fonts test files use Core approach. (53856)
  • Migrate shortcut help end-to-end tests to Playwright. (53832)
  • Relocates Font Face and Fonts Library PHP files into Core’s fonts directory. (53747)
  • ColorPalette: Refine test query. (53704)
  • end-to-end Playwright Utils: Automatically detect canvas type. (53744)
  • test: Automate mobile editor tests. (53991)

Build Tooling

  • Update Jest to latest version, and use optimized JSDOM. (53736)

Plugin

  • 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. themes is_block_theme collection param from core. (53846)

First time contributors

The following PRs were merged by first time contributors:

  • @JEverhart383: Fix typo in code sample for Interactivity API. (53916)
  • @krokodok: Make mid size parameter settable for Query Pagination block. (51216)
  • @mklute101: Update local instructions on the dev env documentation. (53924)

Contributors

The following contributors merged PRs in this release:

@afercia @andrewserong @anton-vlasenko @bangank36 @brookewp @ciampo @colorful-tones @DAreRodz @dcalhoun @derekblank @ellatrix @felixarntz @geriux @glendaviesnz @gziolo @hellofromtonya @jasmussen @jblz @JEverhart383 @jordesign @jorgefilipecosta @jsnajdr @juanmaguitar @krokodok @luisherranz @Mamaduka @margolisj @matiasbenedetto @mburridge @mirka @mklute101 @mokagio @ndiego @ntsekouras @oandregal @ocean90 @ockham @priethor @ramonjd @richtabor @SiobhyB @Smit2808 @stokesman @t-hamano @torounit @tyxla @walbo @WunderBart @youknowriad

Many thanks to @jameskoster for the release assets, @annezazu and @priethorfor the general support and help collecting highlights, and @jeffikus for the copy check!

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

What’s new in Gutenberg 16.5? (23 August)

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

This version is packed with 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, many focused on enriching the Command Palette and enabling further customization of blocks. It features contributions from 63 contributors across 219 pull requests, including five new contributors! 🥳

Continue reading

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

What’s new in Gutenberg 16.4? (9 August)

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

What's New In Gutenberg 16.4?

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

Screenshot of the site editor, with "pre" being typed into 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:

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

What’s new in Gutenberg 16.3? (26 July)

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

16.3 is largely a maintenance release. This means that lots of bugs have been fixed behind the scenes, though this release does see some enhancements to patterns in addition to plenty of other minor improvements. Read on to find out how working with patterns has been improved.

This release consists of 180 pull requests authored by 54 contributors, including three new contributors! 🎉

Table of contents

  1. ‘Focus mode’ editing for patterns
  2. Sticky header bar on Patterns page
  3. Rename, duplicate, and delete patterns
  4. Changelog
  5. First time contributors
  6. Contributors

‘Focus mode’ editing for patterns

When editing template parts in the Site Editor the interface is in ‘focus mode’. However ‘focus mode’ was not previously available when working with patterns. This release enables ‘focus mode’ editing for patterns. (52427)

Sticky 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. bar on Patterns page

Previously on the Patterns page the header bar containing the search box scrolled out of view when you scrolled down the page. Other pages, such as the Templates page, did not have this problem and the header bar remained in view while scrolling the page. Gutenberg 16.3 fixes this and the header bar now remains firmly fixed to the top of the screen when you scroll the Patterns page. (52663)

Rename, duplicate, and delete patterns

Patterns now have a drop-down menu, accessed via the three dots, that allows you to rename, duplicate, and even delete patterns easily. Performing these operations has now been made much easier than it previously was.. (52270)

Changelog

Enhancements

Site Editor

  • Add delay and fade-in animation to loading spinner. (51902)
  • Make “My patterns” categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. permanently visible. (52531)
  • Remove “Theme patterns” heading in Pattern library. (52570)
  • Remove 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. group descriptions. (52453)
  • Show warning on removal of Post Template 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. in the site editor. (52666)
  • Swap pattern creation options. (52726)
  • Update Dashboard button tooltips in the site editor. (52465)
  • Update Site Editor frame z-index. (52180)
  • Update locked pattern tooltips. (52497)
  • Update navigation menuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. title size & weight in detail panels. (52477)
  • Update pattern library copy. (52340)
  • Show more intuitive archive titles on Query Title block. (52521)
  • Adapt template part hint copy. (52527)

Patterns

  • Add hint to show template part move. (52395)
  • Add renaming, duplication, and deletion options. (52270)
  • Add sync tooltip. (52458)
  • Display all custom template part areas in sidebar nav. (52355)
  • Don’t override the rootClientID in create menu – only set if undefined. (52713)
  • Enable focus mode editing. (52427)
  • Remove reusable text from menu once rename hint has been dismissed. (52664)
  • Stop endless snackbars appearing. (52012)
  • Sticky header and pagination on Patterns page. (52663)
  • Update manage pattern links to go to site editor if available. (52403)
  • Separate sync status into a 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. control. (52303)

Components

  • Adding support for defined IDs in TextControl component. (52028)
  • Updated “position” default value. (52148)

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 filter to turn off Interactivity API for a block. (52579)
  • Add runtime support for the wp-style directive. (52645)

Block Library

  • Add back old Navigation and File blocks 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/. implementation when Gutenberg is not installed. (52553)
  • Home link block: Add ‘current-menu-item’. (51478)
  • Use next40pxDefaultSize on RangeControl components. (52257)

Block Editor

  • Add maxLength to LinkControl search item URLs. (52523)
  • Make the tab labels of ColorGradientSettingsDropdown component translatable. (52669)
  • Add support for arrays to setImmutably util. (52280)
  • Stabilize defaultBlock, directInsert API’s and getDirectInsertBlock selector. (52083)

NUX

  • Restore wordpress/nux to trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (52455)

Bug Fixes

Patterns

  • Alternative grid layout to improve keyboard 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). (52357)
  • Add handling of sync status to the wp-adminadmin (and super admin) patterns list page. (52346)
  • Add missing decoding entities processing in Patterns and Template/Parts pages. (52449)
  • Add option to set sync status when adding from wp-admin patterns list. (52352)
  • Avoid copying global style presets via the styles compatibility hook. (52640)
  • Command Palette: Update label and icon for Patterns. (52742)
  • Ensure that the unsaved title is not persisted when reopening the modal. (52473)
  • Fix 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. with Create Patterns menu not showing in site editor page editing. (52671)
  • Fix renaming in Site View sidebar rename saves all edits for Template Parts and Navigation Menus. (52373)
  • Fix: Patterns & template parts: Remove “apply globally” option from block settings. (52160)
  • Rename edit label to Edit Block Pattern to resolve edge case in Chrome. (52496)
  • Show uncategorized patterns on the Editor > Patterns page. (52633)
  • Site Editor Patterns: Filter out patterns that are not available in the inserter. (52675)
  • Update the title of Pattern block in the block inspector card. (52010)

Site Editor

  • Fix the pattern with the post types becomes the placeholder pattern when editing template part. (52503)
  • Fix “Manage all patterns” link appearance. (52532)
  • Fix document title icon appearance. (52424)
  • Fix entering edit mode in site editor. (52406)
  • Fix missing Add Template Part button in Template Parts page. (52542)
  • Fix undo/redo in site editor code editor’s mode. (52695)
  • Remove status icon. (52457)
  • Reset device preview type when exiting the editing mode. (52566)
  • ResizableFrame: Fix styling in Firefox. (52700)
  • Site Editor Pages: Load the appropriate template if posts page set. (52266)
  • Site Editor Patterns: Ensure sidebar does not shrink when long pattern titles are used. (52547)
  • Use lowercase p in “Manage Patterns”. (52617)
  • Do not navigate to the styles pages unless you’re in a random listing page. (52728)
  • Fix multiple navigation blocks in pattern template. (52707)
  • Don’t allow creating template part on the Patterns page for non-block themes. (52656)
  • Exit template focus when opening the W menu. (52235)

Block Library

  • Fix console warning by improving error handling in Nav block classic menu conversion. (52591)
  • Fix importing classic menus. (52573)
  • Fix: Focus loss on navigation link label editing on Firefox. (52428)
  • List block: Fix selected numbering style option. (52472)
  • Post Title: The changes should be reflected when previewing a post. (52369)
  • Quote block: Add transform to paragraph. (51809)
  • Remove synced blocks from lastBlockInserted. (52558)
  • Rich Text/Footnotes: Fix getRichTextValues for useInnerBlocksProps.save. (52682)
  • Search block: Enqueue view script through 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.. (52552)
  • Use _get_block_template_file function and set $area variable. (52708)
  • Cover Block: Fix block deprecation when fixed background is enabled. (51612)
  • Fix image block v6 deprecation. (52822)
  • Image: Use the correct method for caption class in recent deprecation. (52853)

Accessibility

  • Change Delete page menu item to Move 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.. (52641)
  • Change password input to type text so contents are visible. (52622)
  • Do not autofocus page title field in the ‘Draft a new page’ modal dialog. (52603)
  • Fix Shift+Tab to Block Toolbar. (52613)
  • Unify focus style and add default font styles. (52495)
  • Navigation block: Add notice on reduced accessibility. (52251)
  • Password protected field: Remove autofocus and improve placeholder text consistency. (52634)
  • ResizableFrame: Make keyboard accessible. (52443)
  • Site Editor: Fix navigation menu sidebar actions order and label. (52592)

Block Editor

  • Add ‘reusable’ keyword to Pattern blocks. (52543)
  • Avoid errors in Dimension visualizers when switching between iframed and non-iframed editors. (52588)
  • Ensure synced patterns are accounted for in ‘getAllowedBlocks’. (52546)
  • Fix: Remove link action of Link UIUI User interface for draft pages created from Nav block does not correctly remove link. (52415)
  • LinkControl: Add width to ensure ellipsis truncating works. (52575)
  • LinkControl: Fix mark highlight to bold. (52517)
  • Post Content link color should not be applied to placeholder component links. (52367)
  • Fix highlight change when using transform menu. (52752)
  • Fix: Apply text color selection to link color. (52379)

Components

  • Block Editor: Display variation icon in the ‘BlockDraggable’ component. (52502)
  • Copy tweak for the reusable block rename hint. (52581)
  • Fix reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dropdown-menu version to avoid breaking change from one of …. (52356)
  • FormTokenField: Fix token overflow when moving cursor left or right. (52662)
  • Site Editor: Make sidebar back button go back instead of up if possible. (52456)
  • Top Toolbar: Move the preferences selection into the main useSelect. (52332)

Post Editor

  • Remove a block select button from the multi-entity saving flow. (52753)
  • Fix Site editor page when JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. support is disabled. (52376)
  • Fix initial block parsing. (52417)
  • Simplify the code editor of edit-post. (52751)

Global Styles

  • DimensionsPanel: Fix unexpected value decoding/encoding. (52661)
  • Global font sizes: Ensure sizes are unique. (52483)
  • Spacing Sizes: Fix zero size typo and to be output directly. (52711)

Themes

  • Fix admin_url() for preview link of block themes. (52399)

Fonts API

  • Deprecate and make Fonts API non-functional. (52485)
  • Fix font printing 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. when 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. exists. (52343)

Extensibility

  • Page Content Focus: Ignore page content within a 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. (52351)

Performance

Post Editor

  • Fix performance regression for isEditedPostEmpty selector. (52759)

Patterns

  • Add client side pagination to patterns list. (52538)

Site Editor

  • Fix entity cache misses for single posts due to string as recordKey. (52338)

Block Library

  • Experimental: Disable TinyMCE compat with classic editor. (52325)

Experiments

Interactivity API

  • Prevent scripts from loading if behaviors are not used. (52140)

Fonts API

  • Font Face: To generate and print font-face styles for theme.json fonts. (51770)

Documentation

  • Document the new process for releasing point releases for old release branches. (49968)
  • Add layout API documentation. (52673)
  • Added README for the “caption” component. (52033)
  • Added documentation text-transform component #52072. (52243)
  • Block Editor: Add README for BlockControls. (52366)
  • Lodash: Remove completely. (52571)
  • Removed line break within the code block. (46920)
  • Theme JSON schema: Add missing block names and unify block properties. (51293)
  • Update layout architecture documentation after stabilisation. (52316)

Code Quality

Block Editor

  • Add missing @emotion/react dep to block-editor. (52475)
  • Lodash: Remove remaining _.get() from block editor and deprecate. (52561)
  • Make use of accessing private APIs from thunks directly. (52214)

Block Library

  • Footnotes: 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. coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. changes to excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. trim. (52709)
  • Navigation: Simplify the useSelect for useNavigationMenus. (51977)
  • Query Pagination: Set ‘clientId’ as useSelect dependency. (52358)
  • Search: Remove unnecessary useEffect. (52604)
  • Template Parts: Set attributes ‘area’ as useSelect dependency. (52330)

Global Styles

  • Lodash: Refactor away from _.set() in PushChangesToGlobalStylesControl. (52404)
  • Lodash: Refactor away from _.set() in getNodesWithSettings(). (52278)
  • Lodash: Refactor away from _.set() in global styles. (52279)
  • Lodash: Remove completely from site editor. (52480)

Post Editor

  • EntityRecordItem: Fix ESLint warnings and remove unnecessary memoization. (52630)
  • PostPreviewButton: Rewrite to functional, avoid state transitions in lifecycles. (44971)
  • correct a typo: Sapce -> space. (52578)

Site Editor

  • Fix incorrect ‘useSelect’ usage. (52683)
  • SiteHub: Combine site data selector 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.. (52567)

Reusable Blocks

  • Update package to use relative path. (52712)

Core Data

  • Core Data: Fix ESLint warning for ‘useEntityProp’ hook. (52757)

Tools

Testing

  • 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.: Silence style compat warnings when in a BlockPreview. (52627)
  • Make query optional in visitAdminPage. (52413)
  • Migrate Adding Inline Token test to Playwright. (52020)
  • Migrate site editor multi-entity save flow tests. (52372)
  • Move request utils reset to global setup. (52412)
  • Nav block: Link text color inheritance fixes and tests. (51710)
  • Refactor and split navigation block end-to-end tests into separate files. (52647)
  • Try fixing block context end-to-end test failure. (52513)
  • Use posts instead of template parts for navigation color tests. (52654)
  • end-to-end Test Utils: Improve test reliability in plugins/themes and login procedures. (52144)
  • Enable jest-watch-typeahead for native tests. (51869)
  • Expand mobile editor tests. (52446)

Build Tooling

  • Backport tools: Sort PRs to be cherry picked by merged/closed date. (52667)
  • Create block interactive template. (52612)
  • Fix Webpack to watch the interactivity package files. (52642)
  • Update caniuse-lite, browserslist and core-js. (52420)
  • Lodash: Deprecate _.set(). (52407)

Project Management

  • Update issue gardening automation with new label. (52173)
  • Revert “Update Changelog for 16.1.2”. (52433)
  • 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/ workflow: Add a PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher backport changes action. (52096)

First time contributors

The following PRs were merged by first time contributors:

  • @andrewhayward: Adding support for defined IDs in TextControl component. (52028)
  • @ghorivipul97: Post Content link color should not be applied to placeholder component links. (52367)
  • @sethrubenstein: Stabilize defaultBlock, directInsert API’s and getDirectInsertBlock selector. (52083)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @afercia @andrewhayward @andrewserong @anomiex @arthur791004 @BenjaminZekavica @bfintal @carolinan @Clorith @dcalhoun @derekblank @diegohaz @draganescu @ellatrix @fluiddot @fullofcaffeine @geriux @getdave @ghorivipul97 @glendaviesnz @hellofromtonya @jameskoster @jeryj @jorgefilipecosta @jsnajdr @juanmaguitar @kevin940726 @luisherranz @MaggieCabrera @Mamaduka @michalczaplinski@ mirka @noisysocks @ntsekouras @peterwilsoncc @pooja-muchandikar @Presskopp @priethor @ramonjd @richtabor @SantosGuillamot @SavPhill @SaxonF @scruffian @sethrubenstein @spacedmonkey @swissspidy @t-hamano @tellthemachines @tyxla @walbo @westonruter @youknowriad

Props to @jjameskoster for the visual assets, @greenshady for peer review, and @cbravobernal for helping to 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/.

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