The Gutenberg 6.3 release is an important milestone in terms of accessibility of the editor.

Gutenberg comes with a lot of features by default, each block can be manipulated with custom controls in its toolbar and inspector panel, block movers, a drag handle. The block UI 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 make 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 bug 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

• A11y: Support Navigation and Edit modes to ease navigating between blocks.
• Support text alignments in Table block columns.
• Support changing the separator block color.

Enhancements

• Improvements to the BlockPreview component:
  • Support previewing multiple blocks (a template).
  • Unify BlockPreview and BlockPreviewContent into a unique component.
  • Hide block appenders.
  • Expose the component in the block-editor module.
  • Scale the preview content according to the width of the preview container.
• Improvements to the Modal component design:
  • Increase the padding of the Modal component.
  • Correct the position of the close button.
• Use classnames instead of inline styles for text alignments in:
  • Verse block.
  • Quote block.
  • Paragraph block.
• Add a purple color option to the default color palette.
• A11y: Visible focus and active styles for Windows high contrast mode.
• Improve the design of the inline image controls in the Gallery block.
• I18n: Align the Read more string with WordPress Core.
• Removes the word-break :break-all CSS rule from the table cells.
• Update the Notice dismiss button to match other Gutenberg UI (color and icon).
• Modifies the shortcut hierarchy in the keyboard shortcuts modal.
• Remove edit gallery toolbar button.
• Add the possibility to disable document settings panels registered by plugins.
• ESLint plugin: Enable wp global by default in the recommended config.

Experiments

• Add a settings page to the plugin 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 widget area header.
  • Add the BlockEditorKeyboardShortcuts component.
  • Fixed block paddings.

New APIs

• Support Entities Local Edits in the Core Data Module.
• Support autosaving entities in the Core Data Module.
• Add support for disabled dropdown items in SelectControl.
• Add onFocusOutside prop as a replacement to Popover onClickOutside.
• Stop using unstable props on DropdownMenu.

Bug Fixes

• Prevent tooltips from appearing on mouse down.
• Avoid passing event object to save button onSave prop.
• Prevent image captions loss when editing a Gallery block.
• Rerender FormtTokenField component when the suggestions prop changes.
• Handle scalar return types values in useSelect.
• Fix php notice that can be triggered while using the Search block.
• Fix the Resolve Block Modal columns sizes.
• Fix duplicate content when pasting text into newly focused RichText.
• Fix Table block cell selection when clicking on the edge of the cells.
• Prevent the CSS reset from applying to the meta boxes.
• Fix misaligned Block toolbars on floated blocks.
• Fix the Notice component close button alignment and height.
• Link to the full size images in the Gallery block.
• Avoid leaking CSS transforms when disabling block animations.
• A11y: Avoid focusing the PostTitle component when switching between code and visual editor.
• A11y: Add a confirmation step to enable the Custom Fields option.
• Disable block insertion buttons and prevent moving blocks depending on the contextual restrictions (template locking and default block availability).
• Fix Block manager not honoring the allowed_block_types hook.
• Keep the Image block alt and caption attributes while uploading a new image.
• Don’t render drop zone below the default block appender.
• Prevent horizontal arrow navigation errors.
• Fix shifting menu items on DropdownMenu.
• Make API Fetch refresh nonces as soon as they expired.

Various

• Github actions:
  • Automatically assign issues to PR authors.
  • Automatically assign the First-time Contributor label.
• Avoid unguarded getRangeAt usage and add eslint rule.
• Make the e2e transforms tests more stable.
• ESLint no-unused-vars-before-return rule: Exempt destructuring only if to multiple properties.
• Output an informational message for deprecations when no version provided.
• Refactor registry selectors to allow calling them from other regular selectors.
• Bail early in the deactivatePlugin e2e test utility if plugin is already inactive.
• Fix the CheckboxControl styles in a WordPress agnostic context.
• Move the auto-draft status and default title handling to the server.
• Code quality tweaks to the Table block e2e tests.
• Fix JSDocs errors across the entire repository.
• Upgrade Lerna to the latest version (3.16.4).
• Upgrade Puppeteer to the latest version (1.19.0).
• Upgrade ESLint to the latest version (6.1.0).
• Run npm audit fix to fix dependency vulnerabilities.
• Audit and fix all missing or obsolete package dependencies.
• Fix issue with jest caching of block.json files.
• Add eslint-plugin-jsdoc lint rule for better JSDoc linting.
• Fix intermittent RichText e2e test failures.
• Replace the react-click-outside dependency usage with our own Higher-order component withFocusOutside.
• Improve the usage of eslint-disable directives.
• Migrate the Github Actions to the new YAML syntax.

Documentation

• Enhance the components Design Documentation and guidelines:
  • DateTime component.
  • Spinner component.
  • ClipboardButton component.
• Add section about adding new dependencies to WordPress packages.
• Add Figma ressources to the Design documentation.
• Document URL inputs reusable components.
• Typos and tweaks: 1, 2, 3.

Mobile

• Refactor BlockToolbar out of BlockList.
• Fix toolbar bottom inset for iPhone X devices.

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.

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg

The number of Gutenberg contributors is growing significantly and it’s a pleasure to see how people from all around the world come together to build and improve the software. I’d like to take this opportunity to thank the 48 contributors that participated in this release.

Among the improvements of Gutenberg 6.2, a feature that might seem small but which a lot of people were waiting for: the possibility to customize the target of the Button block (open the link in a new tab).

We also had a lot of people asking for the possibility to use all kinds of block types in the Cover and Media & Text blocks, so we’ve removed their nested block restrictions.

From a Developer Experience perspective, this release introduces a new PHP API to simplify the registration of block styles variations.

// Registering a style variation using a registered WP style.
register_block_style(
	'core/quote',
	array(
		'name'         => 'fancy-quote',
		'label'        => 'Fancy Quote',
		'style_handle' => 'myguten-style',
	)
);

// Registering a style variation using an inline style.
register_block_style(
	'core/quote',
	array(
		'name'         => 'not-fancy-quote',
		'label'        => 'Not Fancy Quote',
		'inline_style' => '.wp-block-quote.is-style-not-fancy-quote { color: blue; }',
	)
);

6.2 🇧🇩

Enhancements

• Introduce Link Target support in Button block.
• Limit the maximum height of the HTML block.
• Show the preview button on mobile viewports.
• Remove nested block restrictions from the Cover and Media & Text blocks.
• A11y: Improve and standardize the block styles focus and active states.
• Always collapse block alignment toolbars.

New APIs

• Add a simple API to register block style variations on the server.
• Allow alternative blocks to be used to handle Grouping interactions.
• Add allowedFormats and withoutInteractiveFormats props to the RichText component to control the available formats.
• Expose position prop in DotTip component.
• Support hideLabelFromVision prop in all control components.

Bug Fixes

• Fix using the Classic block in nested contexts.
• Fix lost nested blocks if the container block is missing.
• Fix pasting content into nested blocks.
• Fix race condition in the block moving animation causing blocks to overlap.
• A11y: 
  • Make the Table block accessible at high zoom levels.
  • Change the font size picker markup to use select.
  • Match the primary button disabled state to Core’s color contrast.
• Fix the z-index of the block toolbars for blocks following wide aligned blocks.
• Hide the columns count control when the columns block placeholder is shown.
• Prevent the block movers from disappearing on middle breakpoints for full/wide blocks.
• Slimmer top/bottom spacing inside notices shown outside the editor canvas.
• Fix converting video shortcode into video blocks when file type sources are used.
• Localize the read more link in the latest posts block.
• Fix issue with inconsistent nesting appender.
• Fix styling of IconButton used in ButtonGroup components.
• Remove Change Permalinks button when permalink is not editable.
• Fix aspect ratio typo and recalculate padding in embed block.
• Ensure hour/minute fields are always shown left to right in RTL languages.
• Refactor the empty line padding in the RichText component. This fixes padding issues in the list block in Firefox.
• Improve the stability of the RichText placeholder.
• Add custom placeholder support for the button block.
• Show the image size labels on the block-based widget screen.

Documentation

• Clarify the block title and description conventions.
• Add RichText component documentation to the Block Editor Handbook.
• Improve the repository triage docs.
• Adds documentation for the PluginDocumentSettingPanel SlotFill.
• Tweaks and typos: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 , 13, 14.

Divers

• Fix Travis instability by waiting for MySQL availability before installing the plugin.
• Continue the generic RichText component refactoring.
• Remove the usage of the editor store from the block editor module.
• Update the MilestoneIt Github action to read the plugin version from master.
• Refactor the post meta block attributes to use a generic custom sources mechanism.
• Avoid docker containers automatic restart.
• Bump Lodash dependencies to 4.17.14.
• Fix the build command on Windows environments.
• Remove inappropriate executable permissions from core-data package files.
• ESLint Plugin: Exempt React hooks from no-unused-vars-before-return.
• Use React Portal based slots for the block toolbar.
• Use combineReducers utility from the data module instead of redux.
• Adds missing babel-jest and core-js dependencies to the scripts package.

Mobile

• Tapping on an empty editor area creates a new paragraph block.
• Fix video uploads when the connection is lost and restored.
• Track unsupported block list.
• Insert new block below the post title if the post title is selected.
• Run the mobile tests in the Gutenberg CI server.
• Replace use of deprecated componentWillReceiveProps in ImageEdit.
• Show placeholder when adding block from the post title.
• Blur post title any time another block is selected.
• Inserting block from the post title replaces empty blocks.
• Update Video caption placeholder color to match other placeholder text styles.
• Move the post title selection state to the store.

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.

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg