What’s new in Gutenberg 13.9? (17 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 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.)) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.


The Gutenberg 13.9 is now available in the WordPress 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 repository. It continues the iteration and polishing on various fronts, such as UIUI User interface, interaction, and engine work.

Almost 50 people contributed to this release and 4 of them are first-time contributors.

Table of contents

Changelog

Enhancements

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

  • Archives: Add a control to make block’s dropdown label invisible. (43025)
  • Media&Text: Add help to ImageSizeControl. (40642)
  • Navigation: Move overlay colors to the responsive wrapper. (42875)
  • Navigation: Extract navigation block utils. (42865)
  • Navigation: Fix link inheritance in overlay. (42929)
  • Post Author: Rendering htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. for the author description at the editor. (42109)
  • Post 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.: Add link target and rel attributes. (42853)
  • Post Title: Do not add rel attribute if empty. (42855)
  • Query Pagination: Correctly position the “next” link on the first page. (42764)
  • Query Title: Add a search title variation. (42662)
  • Quote: Unwrap on Backspace at start. (42808)
  • Search Block: Remove margins from the input. (42959)
  • Transforms: Add group unwrap. (42685)

Components

  • BaseControl: Add box-sizing reset. (42889)
  • BorderControl: Add box-sizing reset. (42754)
  • BoxControl: Export applyValueToSides util function. (42733)
  • ComboboxControl and FormTokenField: Enhance components with custom render callback for options. (42597)
  • ComboboxControl: Add support for uncontrolled mode. (42752)
  • Flex: Convert component to TypeScript. (42537)
  • FontSizePicker: Add 40px size variant. (42716)
  • List View Expander: Fix icon in RTL mode. (42997)
  • Placeholder: Convert component to TypeScript. (42990)
  • Popover: Rewrite Storybook examples using controls. (42903)
  • Popover: Tidy up code, add more comments. (42944)
  • ResizableBox: Change tooltip background to match other tooltips. (42800)
  • Storybook: Add global CSSCSS Cascading Style Sheets. switcher. (42747)
  • StyleProvider: Convert component to TypeScript. (42541)
  • Swatch: Convert component to TypeScript. (42162)
  • Tooltip (Experimental), CustomSelectControl, TimePicker: add missing font sizes which were necessary in non-WordPress contexts. (42844)
  • Typography Panel: Fix font appearance control width. (42795)
  • UnitControl: Update unit dropdown design. (42000)
  • Update control labels to the new uppercase styles. (42789)

Reusable Blocks

  • Make template part and reusable block creation language consistent. (43032)

CSS & Styling

  • Rename solid color. (42918)
  • Tab style subpixel fix. (42892)
  • Navigation: Try to keep :Where just for paddings. (42967)

Global Styles

  • Layout: Add a disable-layout-styles theme supports flag to opt out of all layout styles. (42544)
  • Enable alpha (opacity) in Global Styles color pickers. (43045)
  • Add block spacing to root block support UI. (42797)
  • Elements: Update the load order of the CSS in the Site Editor. (42863)
  • Heading element UI controls. (42176)
  • Theme JSONJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML.: Add a static $blocks_metadata data definition to the Gutenberg instance of WP_Theme_JSON. (42776)
  • Upsize typography panel components. (42718)

Design Tools

  • Cover: Show Resize Tooltip on Drag. (23522)
  • Update color button style. (41838)
  • Add explicit bypass for fluid font size calculation. (42757)

Post Editor

  • Post Template: Update template title selector. (42091)

Site Editor

  • Add author nicename template creation ability. (42165)
  • Add fallback template content on creation. (42520)
  • Add a ‘View Site’ link in the site editor. (42331)
  • Update clear customizations copy for templates. (41765)

Widgets Editor

  • Format Library: Add missing keyboard shortcut description in 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. 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.. (43044)

Block Editor

  • Rich text: Add character shortcuts for wrapping selection. (42469)

Block Directory

  • Modernize DownloadableBlockListItem tests. (43026)

Bug Fixes

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 issue where changing the id of the recursion provider can result in focus loss. (42916)
  • Site Editor: Don’t disable the Save button. (42842)

Components

  • Block Styles: Truncate long button labels. (42975)
  • ColorGradientControl: Fix awkward padding in popover. (43018)
  • ColorPicker: Fix layout overflow. (42992)
  • External link component: Add a check for on page anchor links. (42259)
  • Icons: Fix storybook library icon names. (43034)
  • InputControl: Fix acceptance of falsy values in controlled updates. (42484)
  • InputControl: Fix incorrect size prop passing to Text. (42793)
  • Popover: Anchor correctly to parent node when no explicit anchor is passed. (42971)
  • Popover: Fix arrow placement and design. (42874)
  • Popover: Improve 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. offset computation. (42417)
  • Popover: Make sure that ownerDocument is always defined. (42886)

Block Library

  • Disabled blocks passed to BlockTypesList are no longer draggable. (42751)
  • Fix drag and drop performance when dragging over the insertion point. (42806)
  • LatestPost: Fix issue with floated featured images overflowing focus style. (40663)
  • List v2: Fix Cmd+A. (42858)
  • Media&Text: Round position attribute on focal point save. (33915)
  • Navigation: Fix current-menu-item class logic. (42849)
  • Navigation: 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. permissions warning by avoiding using trashed wp_navigation posts (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. implementation). (42982)
  • Separator: Fix the block CSS classes in the editor. (42769)
  • Social Link: add missing ‘width’ and ‘height’ attributes. (41373)
  • Social: Include has-visible-labels on edit component. (42791)
  • Tag Cloud: Fix alignment issue when align center. (43017)
  • Writing flow: Fix Shift+Arrow partial selection for lists & quote. (42885)

CSS & Styling

  • Layout: Fix flex direction column. (42939)
  • Layout: Merge CSS rule for block gap. (43052)
  • Style Engine: Include 6.1 CSS 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., ensure style engine can output CSS functions like clamp. (43004)
  • Style engine: Disable stylesheet optimization temporarily. (43051)
  • Style Engine: Defensive guarding for when style does not define ‘individual’ property. (43122)

Global Styles

  • Fix styles declarations returning before all properties output. (42954)
  • Fluid typography: Migrate fluid typography algorithm to JS for site editor. (42688)
  • Spacing presets: Prevent % spacing size units being stripped by sanitize_title. (43101)
  • Specify priority in remove_action. (43073)

Block Editor

  • Inserter: Avoid warning when CRA is displayed. (42723)
  • Pasting: Dismiss pasted image if file:// schema detected. (42785)
  • Prevent multiselection via dragging when already dragging blocks. (42877)
  • Quote: Fix raw transform handler. (43093)
  • Rich text: Fix error when attempting to remove placeholder on composition start. (42821)
  • Paste from SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/.: Interpret paragraph markup. (43114)

Post Editor

  • Decode the post URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org for the button label. (42930)

Site Editor

  • Internalization fixes for site editor template creation. (42762)
  • Fix error in compileStyleValue. (43116)

RichText

  • Firefox: Fix issue where it selects a nearby contentEditable. (42777)

Build Tooling

  • Fix: CSS files don’t build in dev mode on Windows. (42041)
  • Fix: Script name error in main package.json. (43089)

Testing

  • Fix: Just another end-to-end test. (42947)

CreateBlock

  • Remove 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. references from save properties. (43035)

Accessibility

  • Shortcuts: Add Ctrl+Y for redo on Windows. (42627)
  • Change shortcut text for redo tooltip on Windows. (42830)

Performance

  • Lodash: Refactor away from _.isMatch(). (42271)
  • Lodash: Refactor away from _.zip(). (42926)
  • Lodash: Refactor away from _.delay(). (42966)
  • Lodash: Refactor away from _.startsWith(). (43019)
  • Lodash: Refactor away from _.isPlainObject(). (42508)
  • Lodash: Refactor away from _.maxBy(). (42914)
  • Lodash: Refactor Calendar block away from moment. (43029)
  • Lodash: Remove completely from @wordpress/dom package. (42912)
  • Lodash: Remove completely from @wordpress/element package. (42898)

Experiments

Style Engine

  • Enqueue block support styles. (42452) (42880)
  • Prettify combined selectors. (43003)
  • Prettify output. (42909)
  • Rename global function. (42719)
  • Combine style-engine stores for block-supports. (42970)
  • Add optimize flag and combine functions into wp_style_engine_get_stylesheet. (42878)

Documentation

  • Add examples for core/blocks actions. (42637)
  • Add examples for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./viewport package. (42921)
  • Added the allowedFormat details in richtext readme. (42426)
  • Adding @example entries to the public 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. exposed in core/blocks. (42745)
  • Cover: Fix rendered content PHPDocPHPDoc (docblock, inline docs) type. (43099)
  • Create Block: Update document links in templates. (42839)
  • Fix return type of home link attribute function. (42901)
  • Fix textual consistency about block attributes. (43075)
  • Link plugins 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/ release pages. (42736)
  • Document the cherry-picking automation. (42932)
  • Fixed broken external link to Mozilla Developer documentation. (43065)
  • Release Docs: Troubleshooting failed “Bump version” job. (42936)
  • Release docs: Update performance test instructions. (43015)
  • Remove the emoji characters to fix the handbook rendering. (43028)
  • Update broken internal link. (43094)
  • Update theme-json.md to include new element support and :Ref. (42412)
  • Gutenberg Data Tutorial: Adjust the image URLs and whitespace to render correctly in the Handbook. (42969)

Code Quality

  • Add mutations data and helper functions to useEntityRecord. (39595)
  • Remove old WordPress 5.8 code. (42818)

Block Library

  • Add separate callbacks for selecting a classic or 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. in the nav block. (43057)
  • Avoid reliance on status constants when consuming useCreateNavigationMenu hook. (42704)
  • Home Link: Use ‘sprintf’ in the render callback. (43024)
  • Nav block: Extract hook for inner blocks. (42743)
  • Nav block: Normalize to function expressions. (42744)
  • Normalize usage of Notifications in Nav block. (42706)
  • Remove duplicate speak calls from navigation block. (43079)
  • Site Title: Use home_url instead of get_bloginfo. (42857)
  • Page List: Fix indentation in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher file. (42852)
  • 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.: Try filters with ToolsPanel. (42629)

Site Editor

  • Navigation Menu 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.: Remove unnecessary Fragment. (43021)

Style Engine

  • Tweak Declarations filtering logic slightly. (43215)
  • Minor tweaks. (43111)

Global Styles

  • useGlobalStylesOutput: Use memo for derived values. (42917)

Tools

Env

  • Use git for wp-env‘s default WordPress version. (42826)

Testing

  • Migrate deprecated node matcher tests to playwright. (42759)
  • Migrate group block tests to Playwright. (42801)
  • Migrate missing block tests to Playwright. (41680)
  • Migrate Convert Block Type test to Playwright. (42760)

Build Tooling

  • Lodash: Refactor away from _.flatMap(). (42360)
  • Standardize script naming in main package.json. (42368)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Post Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.93.19s40.25ms
Gutenberg 13.83.21s36.88ms
WordPress 6.03.03s28.02ms

Site Editor

VersionTime to the first blockKeyPress Event (typing)
Gutenberg 13.93.81s26.64ms
Gutenberg 13.83.74s26.08ms
WordPress 6.02.95s20.01ms

Contributor Props

The following contributors merged PRs in this release:

@aaronrobertshaw @adamziel @andrewserong @aristath @carolinan @chad1008 @ciampo @derekblank @dougwollison @ellatrix @fellyph @geriux @getdave @glendaviesnz @hellofromtonya @ItsJonQ @jameskoster @jasmussen @jorgefilipecosta @JustinyAhin @kjohnson @Mamaduka @manzoorwanijk @matiasbenedetto @mcsf @merkys7 @mikachan @mirka @ndiego @noahtallen @ntsekouras @pavanpatil1 @pooja-muchandikar @ramonjd @ryanwelcher @SavPhill @scruffian @shimotmk @SiobhyB @Smit2808 @Soean @stokesman @t-hamano @talldan @tellthemachines @theminaldiwan @tyxla @walbo

The following PRs were merged by first time contributors:

  • @fellyph: Rendering html for the author description at the editor. (42109)
  • @merkys7: Fix social-link block missing ‘width’ and ‘height’ attributes. (41373)
  • @Smit2808: Added the allowedFormat details in richtext readme. (42426)
  • @theminaldiwan: Fixed alignment issue of tagcloud block when align center. (43017)

Kudos to all the contributors that helped with the release!

Props to @gziolo @priethor @andrewserong @joen @bernhard-reiter for the assistance with the release.

#gutenberg #gutenberg-new