What’s new in Gutenberg 16.2? (12 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 biweekly, showcasing new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg.


We’re pleased to announce Gutenberg 16.2 has been recently released, and we’re excited to share some highlights on what’s included in this release!

  1. Consolidating Patterns
  2. Footnotes
  3. Vertical text orientation
  4. Honorable Mentions
  5. Changelog
  6. Contributors

Consolidating Patterns

Building on our work to harmonize reusable blocks and patterns that started with the previous release, we’re continuing to make the Patterns section (previously known as “Library”) more intuitive: The pattern 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. now includes a pattern’s sync status in its “Details” section.

The pattern creation modal in the Patterns section has been updated to be consistent with the one triggered from the editor.

The “Custom Patterns” subsection has been renamed to “My Patterns” and given a more prominent position at the top of both the Patterns sidebar, and of the inserter. Finally, the icons in the grid items in the library were updated to indicate if a given template part is a 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., footer, or uncategorized.

Footnotes

First introduced in Gutenberg 16.1, Footnotes have received a number of bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes to make them more reliable. Furthermore, it is now possible to manually insert the 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. – among other things; this makes it a lot easier to re-insert Footnotes after deleting them.

Vertical text orientation

Themes can now opt into a new Text Orientation feature (available via a block’s Typography settings panel) that allows text to be written vertically. This new feature is a first step towards full support of vertically written languages as well as for decorative purposes in website design.

Honorable Mentions

The “Command tool” that was first introduced in Gutenberg 15.9 has now been named “Command Palette”.

The “Home” template was easily conflated with the actual homepage, so we changed it to “Blogblog (versus network, site) Home”.

The quick inserter’s “Browse All” button, which had gone missing due to a 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. in a previous Gutenberg version, has been restored.

Finally, we’ve added a new Gutenberg Experiment to explore a potential path towards the deprecation of TinyMCE. When enabled, it prevents loading TinyMCE assets and Classic blocks by default, only enabling them if usage is detected. The update also handles scenarios where posts contain Classic blocks or users input raw HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., offering conversion options or reloading to use the Classic block.

Changelog

Enhancements

Patterns

  • Rename Reusable blocks to Patterns. (51704)
  • Add sync status to pattern details screen. (51954)
  • Rename Library to Patterns. (52102)
  • Update custom patterns label to ‘My patterns’. (51949)
  • Update pattern creation modal in library. (51946)
  • Update template part icons in the library mosaic (grid items). (51963)
  • Reinstate manage all template parts page. (51961)
  • Add lock icon for theme patterns. (51990)
  • Update section heading levels. (52273)

Site Editor

  • Change “Home” template name to “Blog home”. (52048)
  • Edit Site: Make loading spinner colors consistent. (51857)
  • Navigation in Site View: Readd the edit button. (52111)
  • Update the icon used to reference the blog. (52075)
  • Global Styles Sidebar: Re-add Colors: Heading to selected blocks. (49131)

Block Library

  • Force full height for editor in Navigation focus mode. (51798)
  • Social links: Updating class and style attributes. (51997)

Themes

  • Add border theme_support. (51777)
  • Add link color theme_support. (51775)

Global Styles

  • Style Book: Show tabs and make blocks clickable when entering edit mode from the Styles menu. (52222)

Widgets Editor

NUX

  • Page Content Focus: Add welcome guides. (52014)

Block Editor

  • Use block label and icon for the inserter draggable chip.. (51048)
  • Wrap “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.” and “Switch to draft” buttons when labels are too long to fit on a single row. (52249)

Design Tools

  • Add Typography: Text orientation (writing mode). (50822)

Components

  • RangeControl: Add support for large 40px number input size. (49105)

Command Palette

  • Command palette: Rename. (52153)

Icons

  • Remove fill=”none” from pinSmall icon. (51979)

Copy

  • Block Editor: Unify texts for Create pattern modal. (52151)
  • Page List: Change modal text. (52116)
  • 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 context to the word “Filters”. (52198)
  • Try: Update template titles. (51428)
  • Add a hint about the rename of reusable blocks to menu and inserter. (51771)
  • Copy: “Detach pattern” instead of “Covert to regular block”. (51993)
  • Polish welcome guide copy for page / template editing. (52282)
  • Update delete page button label. (51812)

Widgets

  • Export store for the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./customize-widgets package. (52189)
  • Export the store for the core/edit-widgets package. (52190)

New APIs

Block Editor

  • Add new registerInserterMediaCategory 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 make media categories extensibleExtensible This is the ability to add additional functionality to the code. Plugins extend the WordPress core software.. (51542)

Bug Fixes

  • Adjust the position of sticky headings in preferences modal. (52248)
  • BlockRemovalWarningModal: Fix incorrect ‘_n’ usage. (52164)
  • Editor initrial appender: Zero out margins in constrained layouts. (52026)
  • Export store from the edit-site package. (51986)
  • Fix disable DFM when opening styles command. (52165)
  • Fix unintentional toggling on of distraction free. (52090)
  • Footnotes: Increase selector specificity for anchor. (52179)
  • Respect custom aspect ratio. (52286)
  • Turn off DFM for style book and style editing. (52117)
  • Update fixed block toolbar. (52123)
  • Updating the BlockEditorProvider settings prop should reset the store’s settings entirely. (51904)
  • [Command Palette]: Remove suggestion for deleting templates/parts. (52168)
  • [Command Palette]: Add preferences and keyboard shortcuts commands. (51862)
  • Rename block theme activation nonce variable. (52398)
  • hasResolvingSelectors: Exclude from result of resolveSelect. (52038)
  • Drop-indicator: Remove white border. (52122)

Block Library

  • Fix default block dimensions visibility. (52256)
  • Fix fetching Nav fallback ID flushing Navigation entity cache. (52069)
  • Fix: Term Description block should only be available in the site editor. (51053)
  • Footnotes: Register metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. field for pages. (52024)
  • Image block: Fix cursor style when lightbox is opened. (52187)
  • Navigation: Add the draft status to the navigation title. (51967)
  • Navigation: Fix end-to-end test failures caused by sidebar title change. (52308)
  • Navigation: Fix sidebar title. (52167)
  • Navigation: Remove one preloaded endpoint. (52115)
  • Page List: Fix parent block selection when converting to link. (52193)
  • Post editor: Require confirmation before removing Footnotes. (52277)
  • fix: Display heading level dropdown icons and labels. (52004)
  • RichText/Footnotes: Make getRichTextValues work with InnerBlocks.Content. (52241)
  • Post and Comment Template blocks: Change render_block_context priority to 1 (#52364)
  • Footnotes: Fix incorrect anchor position in Firefox (#52425)
  • Footnotes: fix lingering format boundary attr (#52439)
  • Footnotes: save numbering through the entity provider (#52423)
  • Allow editing existing footnote from RichText formats toolbar. (52506)
  • Revert “Post editor: Require confirmation before removing Footnotes (#52277)”. (52486)
  • Trim footnote anchors from excerpts. (52518)

Site Editor

  • Add confirmation step when deleting a Template. (52236)
  • Command Palette: Fix incorrect path and snackbar message when template part is deleted. (52034)
  • Default to showing status slug in sidebar. (52226)
  • Fix missing MenuGroup segment in Site Editor header more menu. (51860)
  • Fix missing snackbars in Library. (52021)
  • Fix stepper styling in Home template sidebar. (52025)
  • Get the top toolbar preference from the correct scope. (51840)
  • Hide word count and reading time meta data for the Posts Page details panel. (52186)
  • Modal: Add small top padding to the content so that avoid cutting off the visible outline when hovering items. (51829)
  • Site Editor Frame: Ignore Spotlight in view mode. (52262)
  • Try restoring the site editor animation. (51956)
  • Site Editor: Restore quick inserter ‘Browse all’ button. (52529)
  • Library: Update icons in the creation menu. (52108)
  • Update stepper styling in Home template details panel. (51972)
  • Update text color of active menu items. (51965)

Patterns

  • Fix custom patterns console error. (51947)
  • Fix history back after entering edit mode from Patterns. (52112)
  • Fix setting of sync status for fully synced patterns. (51952)
  • Fix sidebar tab label. (51953)
  • Fix: Pattern focus mode DocumentActions should use the pattern icon. (52031)
  • Include template parts for custom areas in Uncategorized categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (52159)
  • Remove ability for user to toggle sync status after pattern creation. (51998)
  • Rename sync_status and move to top level field on rest return instead of a meta field. (52146)
  • Library – make pattern title clickable. (51898)
  • Check that core hasn’t already moved sync status meta before moving and unsetting. (52494)

Global Styles

  • Check if experiment enabled for realsies this time. (52315)
  • Check randomizer experiment is enabled before rendering button. (52306)
  • Make the entire preview clickable in order to enter “edit” mode in focus mode. (51973)
  • Restore sidebar in focus mode on Pattern click through in Browse Mode Library. (51897)

Page Content Focus

  • Hide parent selector when parent’s block editing mode is ‘disabled’ or ‘contentOnly’. (52264)

Post Editor

  • Editor: Avoid remounting pre-publish sidebar contents during autosave. (52208)

Block Editor

  • Enable draft entity creation in Nav block offcanvas. (52166)
  • 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.: avoid asset parsing & fix script localisation (52405)
  • [Edit Post]: Add toggle fullscreen mode and list view commands. (52184)

History

  • Update the behavior of the cached undo/redo stack. (51644)

Components

  • DropdownMenu: Fix icon style when dashicon is used. (43574)

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)

  • Fix incorrect aria-describedby attributes for theme patterns. (52263)
  • Guide: Place focus on the guide’s container instead of its first tabbable. (52300)
  • Site Editor: Update headings hierarchy in the ‘Manage all’ screens. (52271)
  • Navigation block: Do not toggle aria-expanded on hover when the overlay menu is opened. (52170)
  • Navigation block: Don’t close submenu when it has focus. (52177)

Performance

  • Migrate performance tests to Playwright. (51084)
  • Social links: Reverts updating class and style attributes. (52019)
  • tests: Configure as a production environment. (52016)
  • Add caching to schema of 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/.. (52045)
  • Try: Aggressive TinyMCE deprecation. (50387)

Experiments

Interactivity API

  • Create wordpress/interactivity with the Interactivity API. (50906)
  • Fix the exsisting -> existing typo. (52110)
  • First version of the Interactivity API README. (52104)
  • Block Image: Lightbox – Hide animation selector if behavior is Default or None. (51748)
  • Image block: Fix responsive sizing in lightbox. (51823)
  • Image block: Lightbox animation improvements. (51721)
  • Navigation block: Check that the modal is set before using contains. (51962)
  • Image block: Remove extra lookup for external image dimensions in lightbox. (52178)
  • Image block: Use built-in directive for mouseover event in lightbox. (52067)
  • Fix md5 class messed up with new block key. (52557)

Documentation

  • Add @examples to the wordpress/rich-text package selectors and hide the actions from documentation. (52089)
  • Add examples for core/keyboard-shortcut package. (42831)
  • Block Editor: Add README for FontFamilyControl component. (52118)
  • Block Editor: Add README for PanelColorSettings component. (52327)
  • Block Editor: Add README for RecursionProvider. (52334)
  • Docs: Update release documentation to use the right cherry-picking command. (51935)

Code Quality

  • Lodash: Refactor away from _.kebabCase() in getCleanTemplatePartSlug. (51906)
  • Lodash: Refactor away from _.kebabCase() in add page modal. (51911)
  • Lodash: Refactor away from _.kebabCase() in generic template modal. (51910)
  • Lodash: Remove completely from wordpress/style-engine package. (51726)
  • Sidebar Navigation: Refactor delete modal with ConfirmDialog component. (51867)
  • Template 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. API: Move back to experimental. (51774)
  • Block editor store: Also attach private APIs to old store descriptor. (52088)
  • Blocks: Remove gutenberg refs in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher files. (51978)
  • Navigation submenu: Remove unused doc block. (52152)
  • Refactor use-tab-nav shift+tab to use existing utils. (51817)
  • Perf logging: Change date to ISO 8601. (51833)
  • Heading Block: Remove unused HeadingLevelIcon component. (52008)
  • Image block and behaviors: Fix some warnings. (52109)
  • Lodash: Refactor embed block away from _.kebabCase(). (51916)
  • Lodash: Remove dependency from block library package. (51976)
  • Make Navigation fallback selector private. (51413)
  • Page List: Fix ESLint warnings. (52267)
  • Refactor, document, and fix image block deprecations. (52081)
  • Block Supports: Change prefix in gutenberg_apply_colors_support to wp_ in dynamic blocks. (51989)
  • Move grid function kses patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. into 6.3 compat folder. (52098)
  • Return primitive value for ‘hideInserter’ in Appender component. (52161)
  • Remove redundant call to Navigation selector in Browse Mode. (51988)
  • Block removal prompt: Let consumers pass their own rules. (51841)
  • Revise LinkControl suggestions UIUI User interface to use MenuItem. (50978)

Tools

Testing

  • Drops PHP 5.6 CI jobs. (52345)
  • Revert phpcsPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. testVersion back to PHP 5.6. (52384)
  • Fix flakiness of saving entities in the site editor. (51728)
  • Fix flaky Site Editor pages end-to-end test. (52283)
  • Have createNewPost wait for editor canvas contents. (51824)
  • Add basic test for the page content focus flow. (52231)
  • Fix phpunit failures. (51950)
  • Image block: Update lightbox animation tests. (52290)
  • Restore “Buttons > can resize width” test. (51865)
  • Remove serverSideBlockDefinitions from a test. (52215)
  • Fix flaky tests in navigation.spec.js and other tests related to the Post Editor Template mode. (51790)

Build Tooling

  • Use moment-timezone-data-webpack-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 to optimize timezones shipped in wp/date. (51519)

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. from core: Rename gutenberg_get_remote_theme_patterns to gutenberg_get_theme_directory_pattern_slugs. (51784)
  • [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/-Actions-Workflows][Plugin-Release] Allow shipping a point-release for an older stable release. (49082)
  • Global Styles Revisions API: Backport changes from Core. (52095)
  • Update versions in WP for 6.3. (51984)
  • Move block editor settings 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. into 6.3 compat folder. (52100)

Project Management

  • Add code owners for the Interactivity API runtime. (52174)

Contributors

The following contributors merged PRs in this release:

@aaronrobertshaw @ajlende @annezazu @artemiomorales @c4rl0sbr4v0 @carolinan @DAreRodz @dcalhoun @draganescu @ellatrix @fullofcaffeine @getdave @glendaviesnz @hellofromtonya @jameskoster @jasmussen @jeryj @jsnajdr @juanfra @juanmaguitar @kevin940726 @luisherranz @Mamaduka @mcsf @michalczaplinski @miminari @noisysocks @ntsekouras @oandregal @ockham @peterwilsoncc @priethor @ramonjd @richtabor @ryanwelcher @SaxonF @scruffian @spacedmonkey @stokesman @t-hamano @talldan @tellthemachines @tyxla @WunderBart @youknowriad

Kudos to all the contributors that helped with the release! 👏


Props to @fullofcaffeine for leading this release with me, @jameskoster for the visual assets, and @priethor for helping with the release notes.

#gutenberg-new