What’s new in Gutenberg 9.8? (20 January)

As the 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/ team and community continue to forge ahead with implementing Full Site Editing and Global Styles, the latest installment of 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 (version 9.8) has been released today 🥳 As always, this release also includes many fixes and some nice new enhancements.

Semi-transparent Spacer 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.

The Spacer block, when selected, now has a semi-transparent background, rather than an (opaque) light grey one. This should make it easier to discern from any layer behind it (such as a Cover block or image), if that is of a very light color itself.

Block Switcher Shows variation icon

As a follow-up to an improvement to block variations that shipped with 9.7, the block switcher now displays the variation’s icon, rather than the block’s generic one.

Site Editor now iframed

The Site Editor now renders its content in an 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.. There is a number of reasons for this, such as avoiding adminadmin (and super admin) CSSCSS Cascading Style Sheets. bleed, or allowing to simply use a theme stylesheet for a site without any adjustments. Once this approach proves stable, the team is planning to make the same change to the Post Editor.

FSE: No more auto-drafts

Full-Site Editing no longer creates auto-drafts for template and template part post objects. These auto-drafts were previously needed for block templates and template parts that were based directly on files from an FSE theme without any user modifications. However, they required complex management and sync logic that proved fragile. By removing them, the team hopes to stabilize a fundamental part of FSE.

9.8 😬

Enhancements

  • Use a semi transparent background for the spacer block when selected. (28103)
  • Display matching variation icon in Block Switcher. (27903)

New APIs

  • Create Block: Allow using locally installed packages with templates. (28105)
  • Create block: Add support for static assets. (28038)
  • Compose: Export useIsomorphicLayoutEffect and use it. (28023)

Bug Fixes

  • Reusable Blocks:
    • Show an error message when a reusable block has gone missing. (28126)
    • Fix dismiss notice after error. (28015)
  • Cover Block:
    • Fix nested cover block 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.. (28114)
    • 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. cover block transforms. (28087)
    • Fix cover 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.. (28287)
    • Fix Cover focal point picker. (28350)
    • Fix matrix alignment issue. (28361)
  • Fix block error when transforming blocks with Link Popover opened. (28136)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Notice in navigation-link. (28134)
  • Prevent link paste in RichText components in Button and Navigation blocks. (28130)
  • Fix floating date status inferred for posts where the status has been edited. (28127)
  • BlockSwitcher: Fix crash due to null reference. (28122)
  • Verse: Fix line-wrap rendering on front-end of site. (28109)
  • FocalPointPicker: Fix rendering and dragging experience. (28096)
  • Block Directory: Fix “missing” block when the block can be installed from the directory. (28030)
  • Fix locked template not updating when inner blocks template prop changes. (28007)
  • Fix editor crash when registering a block pattern without categories. (27970)
  • Fix the RTL editor styles and the theme styles option. (27947)
  • Don’t close the block inserter when clicking the scrollbar or an empty area. (27946)
  • Fix AlignmentMatrixControl focus issue. (27945)
  • Fix unexpected autosave for published posts. (27942)
  • Fix RadioGroup to support zero as a Radio value. (27906)
  • Update embed block transforms to permit multiple links to be pasted in a paragraph (#27551). (27746)
  • Change the week 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. and left button style to meet the date spacing. (27730)
  • Add aria labels to box control component inputs/button. (27727)
  • Use clientWidth when no width is available for cropper. (27687)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Normalize _fields value for use in stableKey. (27526)
  • Fix appender margins again. (27392)

Performance

  • Components: Expose composite 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. from Reakit. (28085)
  • Improve Inserter block hover performance. (26348)

Experiments

  • Full Site Editing Framework:
    • Load content in iframe. (25775)
    • Avoid using auto-drafts for theme templates and template parts. (27910)
      • Delete unused options while upgrading the plugin. (28164)
      • Fix _wp_file_based term deletion in migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.. (28300)
    • Fix the border radius in the site editor. (27986)
  • 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 border radius to the theme styles schema. (27791)
    • Add theme.json 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. mechanism and JSON file specifying which theme.json paths are translatable. (27380)
    • Add: Save time theme.json escaping. (28061)
  • Group Block: Add border radius. (27665)
  • Hide the theme without comments.php deprecation message. (28128)
  • Fix navigation editor. (28080)
  • Widgets: Temporary fix for saving widgets. (28078)
  • Decouple query from edit site. (27972)
  • Only enable the template mode for viewable post types. (27948)
  • Box control units: Ensure custom units are preserved. (27800)
  • Navigation Block: Use draft status when user creates a post and don’t render unpublished posts in menus. (27207)

Documentation

  • Docs: Improve README file for @wordpress/create-block. (28052)
  • Create Block: Update the demo included in the README file. (28037)
  • Docs: Switch heading to Quick Start for consistency. (28019)
  • Docs: A wether, as it turns out, is a castrated ram. (28008)
  • Update Quickstart guide for the Development Environment documentation. (28005)
  • Update copyright year to 2021 in license.md. (27951)
  • Block API: Add more inline comments. (20257)
  • Changelog: Group entries for 9.8.0-rc.1. (28332)

Code Quality

  • Remove effects test file and remove unused refx dependency. (28162)
  • Annotations: Replace store name string with exposed store definition. (28156)
  • Edit Widgets: Replace store name string with exposed store definition. (28044)
  • Interface: Replace store name string with exposed store definition. (28041)
  • Upgrade Reakit to version 1.3.4. (28013)
  • Fix PHPCS warning: Undefined variable $i. (27955)
  • Consolidate block editor initializations. (27954)
  • Fix create-block PHP template files according to WordPress standards. (27949)
  • block-directory: Simplify the LOAD_ASSETS flow by making it an async function. (25956)

Tools

  • Workflows (i.e. GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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):
    • Create Release Draft when tagging version. (27488)
    • Add action to upload release to SVNSVN Subversion, the popular version control system (VCS) by the Apache project, used by WordPress to manage changes to its codebase. repo. (27591)
    • Compare Performance upon Release. (28046)
    • Build Plugin Workflow: Bump node version to 14. (28048)
  • End-to-end tests:
    • FSE: Fix intermittent errors in multi entity editing test. (28107)
    • Fix randomly failing end-to-end test. (28073)
    • Upgrade puppeteer to 5.5.0. (28055)
    • Performance tests: Fix. (28026)
  • Scripts:
    • Align default engines for check-engines with the package. (28143)
    • Add support for static assets in build commands. (28043)
    • Make it possible to transpile .jsx files with build command. (28002)
    • ESLint minor version upgrade to 7.17.0. (27965)
    • Upgrade Jest to the new major version (26.x). (27956)
    • Use wordpress/stylelint-config in wordpress/scripts. (27810)
  • Linting:
    • ESLint Plugin: Enable import rules used in Gutenberg. (27387)
    • Add no-unsafe-wp-apis to recommended configuration. (27327)
    • Remove /wordpress from test/linting ignore paths. (20270)
    • Update changelog for stylelint-config. (28074)
  • Testing: Prevent a direct usage of Reakit. (28095)
  • Update the minimum Node.js version to 12. (27934)
  • wp-env: Ensure the environment is used with the logs command. (27907)
  • Packages: Fully automate npm publishing with the latest and next tags (28335)
  • Upgrade webpack to version 5. (26382)
  • Revert “Upgrade webpack to version 5”. (27974)

Various

  • Gutenpride Template:
    • New Package to use with the tutorial. (27881)
    • Create Block: Enhancements to Gutenpride tutorial template. (28215)
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Remove redundant array coercion. (28072)
  • Visual editor: Remove focusable wrapper. (28058)
  • Readme: Increase tested Version up to WP 5.6. (28050)
  • Interface: Remove deprecated prop from InterfaceSkeleton. (28034)
  • List View: Reduce whitespace and always show nested blocks. (28029)
  • Making the 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. inspector’s tabs stick when scrolling. (28003)
  • Chore: Update Lerna dependency. (27990)
  • Try: Make focus width a CSS variable. (27968)
  • Add translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. context to all block’s titles. (27933)
  • Add primary destructive button style. (27774)
  • Modifies the widgets dashboard link to point to the new widgets editor. (26880)
  • Use standard select element for small number of authors. (26426)
  • Add srcset for cover image. (25171)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 9.85.55s29.05ms
Gutenberg 9.75.29s26.32ms
WordPress 5.64.66s28.57ms

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

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