What’s new in Gutenberg (8 july)

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.5 has been released. This is the last 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 releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. that is going to be included entirely (without experimental features) in WordPress 5.5.

Drag and Drop

Since its first introduction, the experience of drag and dropping blocks to reorder them has stayed almost untouched. This release includes several iterations to improve on this interaction. Drag and drop supports vertical reordering more clearly, it replaces the cloned element with a nice little drag chip and smooth the scroll-on-drag behavior.

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) improvements

One important addition in this release is the possibility to disable arrow navigation across blocks. While writing long form content, it’s very important to be able to navigate using arrow keys between blocks, this can be confusing for screen reader users. We now have an option to disable that behavior.

Easy upload for external images.

Another workflow people use while writing is to rely on external tools to write or collaborate on their posts and when ready, copy/paste these into the 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. editor.

The downside is that any external images used there are hosted elsewhere and may not always persist. In this release, if an image block is using an external images, you’ll have the possibility to upload it to the media library while keeping it as is on the post with a single click.

8.5 🇸🇪

Features

  • A11yAccessibility 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): Add an option to keep the caret inside blocks in edit mode. (23546)
  • Add anchor/id support to all static blocks. (23197)

Enhancements

  • Add an edit button to the gallery images. (23554)
  • Image block: Allow uploading external image if image host allows it. (23565)
  • Drag And Drop:
    • Enable for multi selection. (23477)
    • Improve the drag and scroll behavior. (23082) (23448)
    • Don’t show a cloned block while dragging. (23024)
    • Polish the block drag chip. (23609)
  • Image editing:
    • Move zoom control to toolbar dropdown. (23677)
    • Add original aspect to dropdown. (23659)
    • Add 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. to 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/. image edit. (23539)
    • Polish zoom slider. (23418)
    • Add permission checks to the endpoint. (23423)
  • Block Directory:
    • Return inactive plugins in search results. (23688)
    • Use CDN for block directory assets. (23499)
  • Add line height rule to the post title. (23656)
  • Avoid ordering block types per frecency inside block categories. (23643)
  • Polish the document 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. controls. (23578)
  • Add modern color scheme support. (23558)
  • Use a consistent close icon across the UIUI User interface. (23551)
  • Redesign the transform menu. (23028) (23449)
  • Redesign the canvas inserter. (22789)
  • Unify tooltip styles. (23382)
  • Add block variations to the slash inserter. (23364)
  • Hide the most used blocks by default and add an option to enable it. (23358)
  • Add reusable block tab to inserter. (23296)
  • Add keyboard shortcuts for moving blocks. (23276)
  • Cover block: Don’t show the matrix alignment button when no background set. (23196)
  • Spacer: Show tooltip with height value on resize. (23077)
  • Improve post publish buttons alignment. (22390) (23487)
  • Makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). Preview and Save Draft buttons use the same style. (21192)
  • Add unlink URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to buttons block. (23445)
  • Clean the patterns list to include in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (23608)
  • Add pullquote block tranformations. (23562)
  • Remove block label from child block appender. (23393)
  • A11y: Move blocks between levels using keyboard. (22453)

New APIs

  • Support orientation prop in InnerBlocks. (23416)
  • Support a flexible useItems 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. for the autocompleters API. (22853) (23385)
  • Stabilize the image editing REST API endpoint. (23536)
  • Stabilize the block directory REST API endpoint. (23528)
  • Add descriptions to Block patterns. (23070)

Experiments

  • Site Editor:
    • Remove the button block appender. (23436)
    • Improve the template parts insertion flow. (23295)
    • Fix template part resolution for edited files. (23591)
    • Fix inspector panels buttons. (23464)
    • Add template part block keyword. (23623)
    • Allow wide alignment. (23488)
    • Remove templateIds state. (22893)
  • Navigation screen and block:
    • Fix saving issues. (23559)
    • A11y: Improve keyboard navigation on the Navigation block toolbar. (23281)
    • Fix text size no longer overwritten. (23360)
    • Adjust Navigation block submenu padding and spacing. (23380)
    • Update placeholder label. (23297)
    • Hide the block toolbar on the navigation screen. (23021)
    • Allow setting up menus that auto add new pages. (22697)
    • Allow Search block to be added alongside links. (22656)

Bug Fixes

  • Block Directory:
    • Support .svg extension for results icons. (23442)
    • Throw error if we have an issue registering blocks. (23439)
    • Remove the overflow on the Add button. (23409)
    • Fix double border in block list. (23625)
  • Fix the upload icon size. (23553)
  • Allow scrolling over Popovers. (23696)
  • Fix quote left border color in dark mode. (23692)
  • Fix empty block list appender visibility on aligned blocks. (23672)
  • Fix horizontal Block Mover Layout. (23640)
  • Fix invisible drop target indicator. (23638)
  • Rich text: Fix soft line break in caption on enter. (23622)
  • Fix clicking Gallery items buttons on Safari. (23586)
  • Hide block list appender in a reusable block if it’s not being edited. (23584)
  • Revert “Remove the style CSSCSS Cascading Style Sheets. class when the default style variation is chosen”. (23548)
  • Classic block:
    • Add height: Auto to content wrapper. (23547)
    • Add scroll to last edit position. (23544)
    • Adjust placement of the toolbar. (23438)
    • Prevent content loss by regularly dispatching changes. (23408)
    • Fix undo keyboard shortcut. (23376)
  • Fix the Gallery images buttons rendering. (23471)
  • Fix Post title top margin. (23447)
  • Fix file names generation for edited image files. (23440)
  • Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when cropping imùges. (23432)
  • Polish block moving animation. (23401) (22640)
  • Fix small RTL 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 Buttons block. (23390)
  • Fix centered legacy button. (23381)
  • Fix React warning while unmounting slots. (23365)
  • Don’t show the “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.” action if the user is not allowed to delete posts. (23174)
  • add inline font-sizes and colors to the editor for themes that don’t enqueue the preset classes. (22356) (22668) (23717)
  • Create Block: Fix missing scripts section in scaffolded package.json. (23443)
  • Scripts: Fix build script with style.css files. (23710)
  • Restore removed props and behavior back to Query Controls. (23419)
  • Add support for hexadecimal colors in gradient presets. (23363)

Performance

  • Improve the performance of the keyboard shortcuts binding. (23394)

Documentation

  • Add a documentation page explaining how the repository is organized. (23563)
  • Document the WordPress 5.5 backported code. (23478) (23708)
  • Add .markdownlint.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. configuration extending scripts configuration. (23655)
  • Add “Create a Block” tutorial Create a Block tutorial. (22831) (23654)
  • Update wp-env Ubuntu documentation. (23650)
  • Add documentation for InnerBlocks orientation prop. (23641)
  • Remove DropZone position argument from documentation to reflect removal in WordPress 5.4. (23577)
  • Update categories in block registration documentation. (23572)
  • Update ESNext usage in public API. (23475)
  • Clarify the wp-block-styles documentation. (23359)
  • Add documentation for setting up Prettier for markdown. (23286)
  • Typos and tweaks: (23542) (23489) (23590) (23300) (23534) (23467)

Code Quality

  • Optimize useSelect calls (dependencies) (23255) (23247) (23245) (23249)
  • Reduced the number of SASS color variables. (23648) (23454)
  • Remove unused getBlockIndex selector from useBlockDropZone hook. (23634)
  • Scroll on drag: Remove blockNodes context dependency. (23561)
  • Add missing notices dependency. (23517)
  • Remove BlockPopover key prop and related code. (23504)
  • Show a warning when SlotFillProvider is missing. (23493)
  • Block toolbar: Remove data-align attribute. (23468)
  • Extract block draggable scroll behaviour into React hook. (23444)
  • Refactor Dropdown to use functional component. (23142)
  • Refactor Embed Edit component: Class component to Function component. (22846)
  • Extract navigation link rendering code from the navigation block. (21075)
  • Block editor: Use vanilla JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. instead of Lodash if possible. (21063) (23633)
  • Add “engines” to the package.json and “engine-strict = true” to the package.json. (23600)
  • Block Directory: Remove custom permission check in favor of canUser. (23624)
  • Remove REST_WP_REST_Block_Types_Controller_Test which now exists in WordPress Core. (23500)
  • Editor: Remove unnecessary block directory dependency. (23476)
  • Plugin Controller: Return the plugin without the extension. (23395)
  • Clean up image editor REST route. (23368)
  • Make slash inserter tests more stable. (23367)
  • Post Author block: Fix end-to-end test fixture indentation. (23209)

Build Tooling

  • Add new command for pre-releasing npm packages. (23357)
  • Move the CI setup from Travis to 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. (23523) (23520) (23518) (23470) (23538)
  • Add npm cache to Github workflows and use checkout v2. (23482)
  • Update bin/validate-package-lock.js error message. (23435)
  • Minor improvements to the release tool and release documentation. (23441)
  • Tools: Always append prerelease to version update in package.json when preparing npm release. (23480)
  • Scripts: Add custom TerserPlugin configuration. (22990)
  • Scripts: Exclude node_modules from source map processing in start script. (23711)
  • Fix rc version number added to the CHANGELOG. (23433)
  • Tests: Jest – Add typeahead plugin. (23366)
  • Tests: Run end-to-end tests only as an adminadmin (and super admin). (23588)
  • End-2-end Tests: Add test for using block variation with the slash inserter. (23585)

Various

  • RangeControl: Integrate NumberControl + update internal state flow. (23006)
  • Create Block: Generate a block.json file. (23399)
  • Sync Block Context changes from Core. (23602)
  • Scripts: Remove default exclude rule for node_modules for SVG, CSS and Sass files. (23495)
  • REST API: Sync /themes endpoint with Core’s. (23321)

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.

Version Loading Time KeyPress Event (typing)
Gutenberg 8.5 6.86 s 27.84 ms
Gutenberg 8.4 7.22 s 27.85 ms
WordPress 5.4 8.91 s 40.52 ms

Kudos for all the contributors that helped with the release. 👏

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