What’s new in Gutenberg 12.8? (16 March)

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


Depending on which hemisphere of the Earth you are at right now, either Spring or Autumn are coming soon. In either case, and regardless of your location, Gutenberg 12.8 is already here for everybody! This release comes with new APIs, iterative UXUX User experience enhancements, and, as always, many bugfixes to increase the editor’s stability.

Table of Contents


New Webfonts 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.

Since 2007, WordPress has provided a framework to help theme and 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 developers load scripts and styles in a standardized, integrated way. Now, for the first time, web fonts have the same types of tooling.

This API is the first step in helping people load fonts in a performance-friendly, privacy-friendly, and future-proof manner – something which has been tremendously difficult to do without such a framework.

That it’s taken so long to reach this point is a testament to how complex web fonts can be and evidence of how much work has gone into ‘getting this right.’ Now that this framework exists, more tools and optimizations can be built on top of it to ensure that WordPress delivers the best possible experience (and privacy) to end-users.

With a few weeks left until the next WordPress Beta release and because of the complexity to achieve this milestone, testing the API is encouraged, and as always, feedback is welcome!

Swift inline insertion of internal links

Gutenberg seeks to provide the best editing experience to all kinds of users, and power users will enjoy seeing inline links can now be inserted with a direct keyboard shortcut. If you thought using the slash inserter was fast, try the new [[ keyboard trigger to add an inline link without going through the inserter.

As with other enhancements aiming to improve the user experience, this new feature is gathering feedback; don’t hesitate to share your thoughts on the keyboard trigger and the overall experience.

Steps towards full visual theme creation

The Gutenberg team keeps making progress towards the goal of full visual theme building within the editor. When using the export tool available in the Site Editor, the theme.json file including the Styles settings is included in the zip, too, together with the index.php and styles.css files as well!

Iterating on placeholder and loading states

In continuation of work done in previous releases, Gutenberg 12.8 keeps iterating on placeholder and loading states. The Navigation block now provides a clear loading state for initial setup and subsequent loading of existing blocks, and thanks to the improved UIUI User interface feedback, creating a new menu is snappier.

The Media & Text 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. also comes with improved loading states. Starting in this version, the media being uploaded is also displayed behind the spinner.

Props to new contributors

Kudos to the first-time contributors that joined during the last release cycle!

  • @ahsanshaheen199: fix: Code example in flyout component. (39156)
  • @alshakerM: Render SVG props that have dashes correctly. (38936)
  • @awps: Missing ,toggleFormat from last code block. (39146)
  • @francisei: Docs: Emphasized requirement to enclose in quotation marks wp-env run…. (39101)
  • @ironprogrammer: Raise z-index of content div relative to sidebars. (38893)
  • @joshuafredrickson: Add a resolvable 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/. entry point to base-styles. (39240)
  • @jostnes: Remove rename rn UI tests. (39042)
  • @mashikag: Fix Blocks list ordering in Global Styles. (39093)
  • @tomasztunik: Fix Global styles overriding block’s element styles. (39012)
  • @Tumas2: Spelling error in JustifyContentControl example. (39234)

If you are interested in contributing but do not know where to start, join the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor weekly meetings on Wednesdays at 14:00 UTC in #core-editor focused on all things Gutenberg.

12.8.0 Changelog

Enhancements

Block Library

  • Group: Show group option in Group blocks. (39094)
  • Navigation: Improve loading and placeholder states. (38907)
  • Navigation: Improve create new UI feedback in Nav block. (39219)
  • Media & Text: Display media while uploading. (39275)
  • Tag Cloud: Use flex for the Outline style. (38995)

Components

  • ConfirmDialog: add custom button text. (38994)
  • InputControl: Allow onBlur for empty values to commit the change, move reset behaviour to ESCAPE key. (39109)

Block Editor

  • Add a link completer for inline links to posts. (29172)

Site Editor

  • Add 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. to export file. (39048)
  • Resolve homepage template on server-side. (38817)
  • Theme Export: Add index.php and style.css. (39173)

Icons

  • Update drag handle footprint. (39342)
  • Update Pin icon, add new Post icon. (39139)

General Interface

  • Raise z-index of content div relative to sidebars. (38893)

Media

  • MediaReplaceFlow: Add ‘onError’ prop to handle error notifications. (39197)

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 settings dropdown: Use block display title in remove label. (39110)
  • Try allowing tab into block placeholder. (39085)

New APIs

  • Webfonts API. (37140)
  • Add new @wordpress/preferences package. (38873)
  • Add reusable preferences modal to interface package. (39153)
    • Add interface preferences modal to edit post. (39176)
    • Migrate hidden block types (block manager data) to new preferences packages. (39132)
    • Migrate post editor feature preferences to use new preferences package. (39115)
    • Migrate customize widgets editor to use new preferences package. (39112)
    • Migrate standalone widgets editor to use new preferences package. (39084)
    • Migrate site editor to use new preferences package. (39158)
    • Deprecate interface package’s preference APIs. (39418)
  • Create Block: Add support for more plugin 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. fields. (39096)

Bug Fixes

Block Library

  • Buttons: Added aria label to the button block with icon. (38966)
  • Buttons: Fixes Button highlight popover overflow 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 link popover. (38771)
  • Buttons: Don’t set a placeholder text color. (39034)
  • Code: Restructure code block styling. (38712)
  • Comments Pagination Number_ Fix Comments Pagination Number with no pagination settings. (39204)
  • Cover: Fix keep selected unit on deleting minHeight value. (39145)
  • Cover: Fixes #38761 by removing obsolete ::Before pseudo element. (38762)
  • File: Check if ‘fileId’ exists before setting the attribute. (39088)
  • File: Don’t display loading animation on upload error. (39213)
  • File: Fix file block validation error by not outputting aria-describedby if there’s no description. (39083)
  • File: Fix the undo trap. (39215)
  • Hide border panel when all border features have been disabled. (36791)
  • Hide current menu from dropdown list in Nav block. (38916)
  • Image: Fix image responsive rules. (39045)
  • Image: Display errors after failed upload. (39178)
  • Media & Text: Display errors after failed upload. (39245)
  • Navigation: Fix 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. error when menus are not yet fetched. (39151)
  • Post Comments Form: Show correctwarning relative to post/page context. (38011)
  • Post Expert: Fix missing class in post 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.. (38747)
  • Post Terms: Unescape HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities in term names. (39216)
  • 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. Group: Make save() markup the same as render_callback markup. (38510)

Styles

  • Fix Blocks list ordering in Global Styles. (39093)
  • Fix default duotone preset SVG and style generation. (38681)
  • Fix header panel height. (39119)
  • Fix Global styles overriding block’s element styles. (39012)

Components

  • Update drag gesture of InputControl-based controls with axial constraint. (38968)
  • UnitControl: Fix controlled unit behavior. (39148)
  • Normalize font-family. (38969)

Block Editor

  • Fixes block highlight after block move. (38915)
  • Improve in_footer handling in gutenberg_override_script(). (39497)

Post Editor

  • Avoid error when ‘styles’ settings are removed. (39091)
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Fix code drift in the Editor package by removing duplicate cleanForSlug function. (39033)

Site Editor

  • Expose plugin area to site editor’s List page. (39078)

Other Packages

  • apiFetch: Handle urlencoded and rest_route query params. (38914)
  • Base Styles: Add a resolvable JavaScript entry point to base-styles. (39240)
  • Compose: Avoid memory leak in use-drop-zone. (39038)
  • Render SVG props that have dashes correctly. (38936)
  • Url: Improvement to prototype handling. (39365)

Developer experience

  • Change copying PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher files to dist directory to opt-in via a CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. flag. (39171)
  • Create Block: Add confirm prompt before showing the plugin options. (39105)
  • Create Block: Improve custom project template configuration. (39049)
  • Handle resolution errors in wordpress/data. (38669)

Documentation

  • Add import useBlockProps. (39072)
  • Components: Update changelog follow up for #38985. (39013)
  • Emphasized requirement to enclose in quotation marks wp-env run…. (39101)
  • Element: Add changelog notes for serialize attribute casing. (39141)
  • Gutenberg Data Tutorial Part 3: Building an edit form. (38581)
  • Fix code example in flyout component. (39156)
  • Missing ,toggleFormat from last code block. (39146)
  • Move recent CHANGELOG entry to Unreleased section. (39169)
  • Spelling error in JustifyContentControl example. (39234)
  • Storybook: Support proper extraction of TypeScript prop types. (38842)
  • Storybook: Add webpack loader for easier story descriptions. (39165)

Code Quality

  • Componentes, UnitControl: Tidy up utils and types. (38987)
  • Components, FontSizePicker: Refactor stories to use Controls. (38727)
  • Components, ToggleGroupControlOption: Calculate width from button content and remove LabelPlaceholderView. (39345)
  • Core Data: Rename types directory to entity-types. (39225)
  • Core data: Fix some typing issues. (39212)
  • Core data: Fix some typing issues. (39214)
  • Fix @wordpress/comment-case ESlint errors but without adding the disable-rule pragma. (37006)
  • Delete widget editor redundant css for more menu. (39113)
  • Layout: Remove duplicate var declaration. (39111)
  • Move editor settings code to compat folder. (39030)
  • Refactor useSelect usages to useEntityRecords. (38827)
  • Refactor classic menu conversion process. (38858)
  • Post author name: Add “post” prefix to CSSCSS Cascading Style Sheets. class. (38320)
  • TreeGrid: Update callback unit tests to use TreeGridRow and TreeGridCell sub components. (39002)
  • Update framer motion to 6.2.8. (38999)
  • useBlockEditorSettings: Remove unused unstableBase fetch. (39221)

Tools

Project Management

  • Code owners: Remove users without write access and fix typos. (39238)
  • Simplify Pull Request template. (39229)

Testing

  • Add end-to-end testing for experimental nav menu deletion. (38955)
  • Add Home/End keyboard end-to-end test for List View. (39265)
  • Add some tests for TreeGrid. Update README to reflect latest functionality. (39302)
  • Add test case for post locking feature saving. (39022)
  • Add tests for media replace flow. (39005)
  • Block Test Fixtures: Add additional error message for serialized test fixtures that reserialize identically. (39039)
  • ESLint Plugin: Make Prettier integration optional. (39244)
  • Fix performance tests by adding backwards compatibility to welcome guide utility. (39300)
  • Improve switch to draft button end-to-end test robustness. (38971)
  • Remove rename rn UI tests. (39042)
  • Social Icons: Begin Automating Existing Manual Test Cases. (39027)
  • Update ‘clickMenuItem’ test util to use full label matching. (39274)
  • Update preview test to wait for publish panel to appear before closing it. (39100)

Build Tooling

  • Fix spelling of contributors in changelog script. (39029)
  • Resolve peer dependency warnings. (39043)

npm Packages

  • Fix npm run docs:Build crashing when a block.json lacks supports key. (39241)
  • Packages: Automate npm publishing as part of Gutenberg release workflow. (39259)
  • Packages: Automatically acceppt all Lerna commands when run with CI flag. (39199)
  • Packages: Update CLI publishing tool to run in CI mode. (38993)

Plugin

  • Account for upcoming changes in styles metadata in WordPress 5.9. (36327)
  • Don’t 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. ‘theme_templates’ when running WP 5.9. (39017)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post 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 first blockKeyPress Event
Gutenberg 12.85.01s38.86ms
Gutenberg 12.75.07s40.42ms
WordPress 5.95.22s38.11ms

Site Editor

VersionTime to first blockKeyPress Event
Gutenberg 12.84.99s33.12ms
Gutenberg 12.75.01s37.61ms
WordPress 5.94.74s32.03ms

Kudos to all 54 contributors that participated in the release! 👏

Thanks to @jameskoster for the release post assets, @jonoaldersonwp for crafting the Webfonts API summary,  and to @cbringmann and @hellofromtonya for proofreading.

#gutenberg-new #gutenberg #core-editor