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 release 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 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 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

• 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.
• 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.: Align the Read more string with WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..
• Removes the word-break :break-all CSSCSS Cascading Style Sheets. 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 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

• 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 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. 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 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. Fetch refresh nonces as soon as they expired.

Various

• GithubGitHub GitHub is a website that offers online implementation of git repositories that 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:
  • 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.

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