What’s New in Gutenberg? (20th March)

This is the last 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/ release that will be entirely included in WordPress 5.2 and it’s an exciting one.

First, it introduces a 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. management modal with the ability to enable/disable blocks from the block inserter.

The release also includes the possibility to nest different kind of blocks in a Cover Block container.

The journey to improve different parts of the editor UIUI User interface is continuing as well with improvements to the hover and selected block states with better 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) and less distraction.

---

5.3 🇵🇹

Features

• Add the block management modal: Ability to hide/show blocks in the inserter.
• Support nested blocks for the Cover Block.
• Add an experimental Legacy Widget Block (enabled only in 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 for the moment).

Enhancements

• Update the block outlines for the hover and selected states.
• Allow undoing automatic pattern block transformations.
• Add a RichText collapsed format toolbar for code, inline image and strikethrough formats.
• Allow collapsing inserter panels when searching.
• Add ability to transform video shortcodes to video blocks.
• Add ability to transform audio shortcodes to audio blocks.
• Add new wordpress/data actions to invalidate the resolvers cache.
• Support custom classNames in the ToggleControl component.
• Clarify the button to exit the post lock modal.
• Improve the block validation error message.
• Automatically use the WordPress babel config when using wordpress/scripts CLICLI Command Line Interface. Terminal (Bash) in Mac, Command Prompt in Windows, or WP-CLI for WordPress..
• Add keyboard shortcuts to indent/outdent list items.
• Use links instead of buttons in the document outline.
• Use <s> for strikethrough, not <del>.
• Center the tooltips content.
• Update wording of the block switcher tooltip.
• Add support for the reduced motion browser mode.

Bug Fixes

• Always show the current month in the Calendar block for All CPTs but post.
• In the Latest posts block, avoid full line clickable titles.
• Avoid relying on DOM nodes to add the empty line in RichText component. This fixes a number of lingering empty lines.
• Fix the MediaPlaceholder icon color on dark backgrounds.
• Fix the Classic block toolbar in RTL languages.
• Fix the more tag in the Classic block.
• Fix the quote to heading block transformation.
• Fix “null” appearing when merging empty headings and paragraphs.
• Fix the block insertion restrictions in the global inserter.
• Fix the prepareEditableTree custom RichText Format 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..
• Changes to the internal RichText format representation to separate objects (inline image..) from formats (bold…). This fixes a number of RichText issues.
• Fix the Spinner component styling in RTL languages.
• Fix focus loss when using the Set Featured Image buttons.
• Fix template lock not being taken into consideration.
• Fix composed characters at the beginning of RichText.
• Fix several block multi-selection bugs.
• Allow using a float number as a step when using the RangeControl component.
• Fix error when pasting a caption shortcode without an image tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.).
• Fix focus loss when combining sidebars and modals (or popovers).
• Escape the greater than character when serializing the blocks content into HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers..
• Fix pasting links into the classic block.
• Include missing CSS in the classic block.

Documentation

• Enhance the i18n process documentation with a complete example.
• Add design guidelines to several components:
  • The Button component
  • The CheckboxControl component
  • The MenuItemsChoice component.
  • The MenuGroup component.
• Update the JavaScript setup tutorial to rely on the wordpress/scripts package.
• Lowercase block editor and classic editor terms to conform to the copy guidelines.
• Use a central script to generate the 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/. API documentation and run in parallel.
• Update the packages release process.
• Update the plugin release docs to rely on a lighter SVN checkout.
• Add automatic generation of JavaScript API documentation for:
  • @wordpress/element
  • @wordpress/escape-html
  • @wordpress/html-entities
  • @wordpress/keycodes
  • @wordpress/a11y
  • @wordpress/blob
  • @wordpress/block-library
  • @wordpress/compose
  • @wordpress/dom
  • @wordpress/i18n
  • @wordpress/autop
  • @wordpress/dom-ready
  • @wordpress/block-editor
  • @wordpress/rich-text
  • @wordpress/blocks
  • @wordpress/deprecated
  • @wordpress/priority-queue
  • @wordpress/shortcode
  • @wordpress/viewport
  • @wordpress/url
  • @wordpress/redux-routine
  • @wordpress/date
  • @wordpress/block-serialization-default-parser
  • @wordpress/plugins
  • @wordpress/wordcount
  • @wordpress/edit-post
• Link to the editor user documentation and remove the user documentation markdown file.
• Typos and tweaks: 1, 2, 3, 4, 5.

Various

• Upgrade to React 16.8.4 (React Hooks).
• Fix the dependencies of the e2e-tests and the e2e-test-utils npm packages.
• Avoid disabling regeneratorRuntime in the babel config to avoid globals in npm packages.
• Work on various e2e tests stability improvements.
• Regenerate RSS/Search block test fixtures.
• Move to travis.com as a CI server.
• Add clickBlockToolbarButton e2e test utility.
• Add e2e tests:
  • to check the keyboard navigation through blocks.
  • to verify that the default block is selected after removing all the blocks.
  • to check the InnerBlocks allowed blocks restrictions.
• Add unit tests for the isKeyboardEvent utility.
• Remove CC-BY-3.0 from the GPLv2 compatible licenses.
• Polish the wordpress/block-editor module:
  • Move the block specific components to the package.
  • Update the classnames to follow the CSSCSS Cascading Style Sheets. guidelines.
• Update eslint rules npm packages.
• Simplify the hierarchical term selector strings.
• Update the Latest comments block to use the “align support config” instead of a custom implementation.
• Remove the block snapshots tests.
• Remove post install scripts and only run these in CI to improve test performance.
• Tweak the plugin build zip script to avoid prompting when the build environment is clean.
• Add withRegistry higher-order component to the wordpress/data module.
• Add missing module entry point to the notices 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..
• Remove the Gutenberg 5.3 deprecated functions.
• Ensure sourcemaps published to npm contain safe relative paths.
• Remove the replace_block filter usage and extend coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor settings instead.
• Improve handling of transpiled packages in unit tests.
• Add CLI arguments to launch e2e tests in interactive mode more easily.
• Select a unique radio input in a group when using the tabbables utility.

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 5.3.0	17.19 s	42.57 ms
Gutenberg 5.2.0	16.79 s	41.85 ms
Gutenberg 4.8 (WordPress 5.1)	23.43 s	82.75 ms
Gutenberg 4.7 (WordPress 5.0)	27.60 s	99.13 ms

---

👏 Kudos to all the contributors. Thank you.

#core-editor, #editor, #gutenberg