What’s new in Gutenberg? (14 August)

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/ 6.3 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. is an important milestone in terms of 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) of the editor.

Gutenberg comes with a lot of features by default, each 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. can be manipulated with custom controls in its toolbar and inspector panel, block movers, a drag handle. The block UIUI User interface also includes the content of the block itself which can be complex from block to another. This makes it very challenging for screen reader users to navigate the content of their posts.

To address that issue, we’re introducing the Navigation Mode. By default the editor is loaded in this mode, it allows you to move from block to block using a single Tab press. You can also use the arrow keys to navigate between blocks. Once you reach the block you want to edit, you can enter the Edit Mode by hitting the Enter key. The Escape key allows you to move back to the Navigation Mode.

It’s very important for us to 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). the editing experience as enjoyable as possible for all the users with different accessibility needs. This feature is very early, please help us test it and we’re looking forward to taking your feedback into consideration.

This feature includes dozens of improvements and 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. fixes including:

  • support for text alignments in table block columns.
  • Border color support for the separator block.

For developers, new APIs are available such as the BlockPreview component that allows you to render and preview blocks in any context.

6.3

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): Support Navigation and Edit modes to ease navigating between blocks.
  • Support text alignments in Table block columns.
  • Support changing the separator block color.

Enhancements

Experiments

  • Add a settings page to the 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 to enable/disable experimental features.
  • Add padding when interacting with nested blocks to ease parent block selections.
  • Widgets Screen:
    • Prevent the block toolbar from overlapping the 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. area 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..
    • Add the BlockEditorKeyboardShortcuts component.
    • Fixed block paddings.

New APIs

Bug Fixes

Various

Documentation

Mobile

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 6.3.0 4.8s 53.5ms
Gutenberg 6.2.0 4.5s 49.7ms
Gutenberg 5.3 (WordPress 5.2) 5.6s 60.1ms

👏 Kudos to all the contributors. Thank you.

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