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