What’s new in Gutenberg (29 April)

In this release of 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/ 8.0, there is a continued effort to refine the experience around the new 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. patterns feature. Additional formatting options for subscript and superscript text have been added, and the code editor has been improved to be more like how one would expect a code editor to look and feel.

Patterns Inserter

To allow a user to browse and insert block patterns, a new tab-panel interface has been added to the Block Inserter. In order to afford additional space for browsing patterns, the top-level inserter has been redesigned to appear as a panel that appears adjacent to the block list when toggled.

Animation inserting a block pattern using the inserter

Inline Formatting

Previously, the availability of formatting options was constrained by the limited space available in a block toolbar. The inclusion of a collapsible dropdown list of formatting options opens the possibility to add a variety of new formatting options for more niche use-cases. This release adds two new formatting options: subscript and superscript.

Animation formatting text of chemical formula using subscript

Code Editor

This release improves the code editor by embracing what it is: a code editor. The Code Editor now uses a monospace font for the title, and the editor resizes to the viewport.

Screenshot of code editor as it appears in Gutenberg 8.0

8.0 🇧🇬

Features

  • Add subscript and superscript formatting options. (21819)
  • Move the Block Patterns UIUI User interface to the inserter. (20951)
  • Improve layout and usability of code editor. (21643)

Enhancements

  • Add inserter previews to more blocks. (21740)
  • Performance improvements:
    • Import from individual reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-dates component. (21914)
    • Upgrade showdown Markdown processor library. (21862)
  • Allow title and button-based appender to inherit styles. (21749)
  • Output float clearing for all centered blocks. (21608)
  • Update ‘Welcome Guide’ illustrations. (21515)

New APIs

  • A new Block Context API has been partially implemented, currently limited to block settings and editor APIs. PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 APIs will be implemented in the next 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 releases. (21467, 21868, 21921)
  • Add new “G2”-styled icons to the Icons package. (21209)

Bug Fixes

  • Change wp_make_content_images_responsive to wp_filter_content_tags to resolve warnings in WordPress 5.5-alpha. (21514)
  • Collapse selection to end after link insertion. (17126)
  • Fix selected categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. on existing Latest Posts blocks. (21359)
  • Fix overlapping column contents for embeds. (21570)
  • Fix focus styling for date picker calendar days. (21600)
  • NPM Packages
    • Fix “Cannot find module ‘../utils'” error. (21609)
    • Types: Hide element, primitives, icons declarations. (21613, 21784)
  • Inherit font styles in block appender placeholder. (21725)
  • Allow default pasting behavior in FontSizePicker. (21812)
  • Prevent negative custom text sizes. (21815)
  • Fix image center alignment behavior. (21911)
  • Fix centered buttons margins. (21947)
  • Revert the button block to the previous markup. (21923)
  • Avoid using inline RichText element for navigation link. (21856)
  • Ensure resetEditorBlocks is synchronous. (21839)
  • Fix the button outline style for the old button markup. (21816)
  • Fix default attribute on audio preload. (21735)
  • Fix gradient picker double-click 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.. (21732)
  • Fix broken links in handbook. (21686)
  • Make useMediaQuery return the correct value on the first render. (21682)
  • Fix visual issue on windows with 782px. (21661)
  • Allow wrapping for Navigation block links. (21632)
  • Remove redundant margins from the columns block. (21615)
  • Fix media Text padding on inner blocks. (21612)
  • Restore floated image margins. (21500)
  • Fix URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org display for scheduled posts. (21410)
  • Test keycode modifiers for keyboard event as exclusive set. (20733)
  • Fix focus loss for Guide “Finish” button in Internet Explorer. (20599)
  • Replace incorrect Snackbar label attribute with aria-label. (20540)

Experiments

  • Add experimental useEditorFeature hook to simplify access to editor features. (21646)
  • 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. page:
    • Try a fixed toolbar in the navigation page. (21340)
    • Fix panel collapsing in navigation page. (21633)
    • Fix mobile layout for navigation menu page. (21638)
    • Delete empty spaces in menu 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/. endpoint strings. (21453)
  • Edit site:
    • Add current theme to template switcher. (21578, 21768)
    • Declare attributes for Template Part block in block.json. (21796)
    • Update end-to-end test for multi-entity saving in site editor. (21363)
    • Add preview options component. (21309)
    • Improve template parts resolution and saving behavior. (21766)
    • Support REST API 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. queries. (21851)
    • Add extra validation when loading template parts. (21636)
  • Block directory:
    • Add InserterPanel around block directory results. (21748)
  • Widgets:
    • Fix legacy widgets z-index issue. (21586)
    • Fix legacy widgets visual issues. (21585)

Deprecations

  • Add deprecation notice to useApiFetch hook. (21723)

Code Quality

  • Remove nested breakpoint in fullscreen mode CSSCSS Cascading Style Sheets.. (21496)
  • Update npm-package-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.-lint from 4.0.3 to 5.0.0. (21597)
  • Update npm dependencies that warn. (21596)
  • Fix license check script to ignore sub-dependencies of ignored packages. (21606)
  • Package TypeScript types improvements:
    • Mark addQueryArgs arguments parameter as optional. (21926)
    • Relax 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. sprintf arguments type. (21919)
  • Update PHPCS to latest version. (21680)
  • Unify how editor alignments are applied across blocks. (21822)
  • Remove obsolete editor alignment classes. (21906)
  • Remove old icons. (21821)
  • Implement block.json for blocks. (21794, 21783, 21782, 21775, 21787, 21774, 21792)
  • Use register_block_type_from_metadata in Latest Posts block. (21788)
  • Polish RSS block code. (21773)
  • Move camelCaseDash to the package where it is consumed. (21736)
  • Improve URLPopover code from review comments. (21621)

Documentation

  • Remove duplicate sentence in glossary documentation. (21565)
  • Update wp-env docs to reflect current functionality of package. (21809)
  • Extract Block Transforms into its own handbook page. (21734)
  • Update the index of Block 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 reflect current contents. (21726)
  • Clarify attribute type documentation. (21694)
  • Add location for components style.css. (21654)
  • Fix the JSDoc return type for getEntityRecords. (21630)
  • Update triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. links to new document. (21629)
  • Update Getting Started instructions for remote server. (21625)
  • Update the “patterns” to reflect “user interface” instead. (21562)
  • Create document for contributing with triage. (21350)
  • Update triage.md to add more clarity and relevant links. (21802)

Project Management

  • Update bug report template to help identify the editor version. (21564)

Various

  • End-to-end tests:
    • Add test for template part block creation and insertion. (21849)
    • Add test that template part block customizations are loaded from slug and theme attributes. (21852)
    • Fix tests by removing unnecessary assertions and properly install dependencies in @wordpress/api-fetch. (21780)
    • Add end-to-end test for pinned 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. items. (21652)
    • Add test which verifies reusable block after refresh. (20605)
  • Update cleanForSlug() to remove additional non-word characters. (21007)
  • @wordpress/scripts:
    • Support debugging with test-unit-js. (21631, 21861)
    • Install Chromium on demand together with test-e2e script. (20215)
  • @wordpress/create-block block scaffold tool:
    • Make it easier to provide most popular CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress. options. (21751)
    • Split 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/. source files into parts for ESNext template. (21750)
  • @wordpress/env development environment:
    • Expose port 3306 of MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. container. (21545)
  • @wordpress/eslint-plugin:
    • Add the recommended Prettier config to enforce WP coding styles. (21602)
    • Fix no-unused-vars-before-return JSX identifier reference. (21358)
  • Navigation block:
    • Revert changes to data fetching mechanics. (21721)
  • Bundle the block autocompleter in the block-editor package. (21534)
  • Storybook:
    • Add FormToggle component. (18085)
  • Simplify Reusable Block description. (21470)
  • Build tooling:
    • Install Composer dependencies as pre-lint step. (21537)
    • Configure Webpack to watch only build files. (21489)
    • Exit with non-zero status on docgen failed parse. (21690)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36000 words, ~1000 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.

Version Loading Time KeyPress event (typing)
Gutenberg 8.0 9.8s 31.4ms
Gutenberg 7.9 12.0s 36.0ms
WordPress 5.4 9.2s 29.4ms

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