What’s new in Gutenberg? (12th June)

More than 40 contributors participated in this 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. 6 of them submitted their first PR to the repository.

Some very important improvements to 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 UIUI User interface landed in this release. A new type of notices called Snackbars has been introduced.

A Snackbar displays a succinct message that is cleared out after a small delay. It can also offer the user options, like viewing a published post but these options should also be available elsewhere in the UI.

For a distraction-free experience, all the notices used in the editor to inform about the post saving/publishing, reusable blocks creation and updates have been updated to use this new type of notices.

This release also adds the grouping/ungrouping feature that makes it easy to select a number of blocks and group them inside a container block.

An important usability change has been made to how nested blocks are selected. Now you click through each layer to reach the deepest nesting level, making it easy to configure each block along the way.

From a developer perspective, this version introduces useDispatch and useSelect APIs to the data module. If you’re building custom plugins relying on the data module, make sure to check out the dedicated post.

5.9 🇨🇦

Features

• Allow grouping/ungrouping blocks using the Group block.

Enhancements

• Improve the selection of inner blocks: Clickthrough selection.
• Introduce the snackbar notices and use them for the save success notices.
• Use consistent colors in the different menus items.
• Consolidate the different dropdown menus to use the DropdownMenu component.
• Expand the prefered-reduced-motion support to all the animations.
• Add a subtle animation to the snackbar notices and provide new ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. for media queries.
• Redesign the Table block placeholder.
• Always show the side inserter on the last empty paragraph block.
• Widgets Screen:
  • Add the in progress state to the save button.
  • Add the RichText Format Library.
• Improve the Group and Ungroup icons.
• The Spacer block clears all the previous floated blocks.

Bug Fixes

• Focus the Button block’s input upon creation.
• Prevent Embed block crashes when used inside locked containers.
• Properly center the default appender placeholder.
• Correct default appender icon transition jump in Safari.
• Only apply appender margins when the appender is inside of a block.
• Avoid loading reusable blocks editor styles in the frontend.
• Correct position of the “Remove Featured Image” button on small screens.
• Allow the legacy widget block to render core widgets.
• 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):
  • Fix wrong tab order in the data picker component.
  • Remove the access keyboard shortcuts from the Format Library.
• Bail early in createUpgradedEmbedBlock for invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. block types.
• Fix DateTimePicker styles when used outside the WordPress context.
• Prevent the Spacer block from being deselected when resized.
• Remove the word breaking from the Media & Text block.
• Keep the seconds value untouched when editing dates using the DateTimePicker component.
• Fix tooltips styles specificity.
• Fix php errors happening when calling get_current_screen.

Various

• Introduce useSelect and useDispatch hooks to the data module.
• Adding embedded performance tests to the repository.
• Support the full plugin release process in the automated release tool.
• Speed up the packages build tool script and the Gutenberg plugin build config.
• Extract media upload logic part into a new @wordpress/media-utils package.
• Introduce Milestone-It Github Action to auto-assign milestones to merged PRs.
• Move the transformStyles function to the block-editor package to use in the widgets screen.
• Allow 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 authors to override the default anchor attribute definition.
• Add overlayColor classname to cover blocks editor markup.
• Skip downloading chromium when building the plugin zip.
• Add an e2e test to check the heading colors feature.
• Lint the ESlint config file (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.).
• Fix i18n ESlint rules and use them in the Gutenberg setup.
• Fix error in the plugin release tool when switching branches.
• Remove unused stylesheet file.
• Improve the setup of the WordPress packages package.json files.
• Remove the use of popular plugins in e2e tests.
• Ignore linting files located in build folders by default.
• Add default file patterns for the lint command of wordpress/scripts.
• Extract the ServerSideRender component to an independent package.
• Refactor the HoverArea component as a React Hook instead.
• Remove useless dependency from the wordpress/edit-post package.
• Deprecate components/selectors and actions moved to the editor package.
• Update browserslist dependency.

Documentation

• Document the remaining APIs of the data module.
• Add an ESNext example to the 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. docs.
• Fix inline docsinline docs (phpdoc, docblock, xref) and add tests for color utils.
• Document missing MenuItem prop.
• Typos and tweaks: 1, 2, 3, 4, 5, 6, 7, 8, 9.

Mobile

• Fix caret position when splitting text blocks.
• Fix the initial value of the “Open in New Tab” toggle.
• Fix Video block crash on drawing on Android.
• Fix caret position after inline paste.
• Focus the RichText component on block mount.
• Port KeyboardAvoidingView, KeyboardAwareFlatList and ReadableContentView to the wordpress/components package.
• Fix press of Enter on post title.
• Move the native unit tests to the Gutenberg repository.
• Improve the styling of the Quote block.
• Share RichText line separator logic between web and native implementations.
• Fix Video block showing a black background when upload is in progress or upload has failed.
• Allow passing a style prop to the Icon component.
• Enable sound on the Video block.
• Start playback immediately after video goes full screen.
• Fix mobile quotes insertion and removal of empty lines.
• Move unselected block accessibility handling to block-holder.
• Make the More block ready-only.
• Fix crash when deleting all content of RichText based block.
• Fix for extra BR tag on Title field on Android.
• Open Video, Quote and More blocks to public.

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.9.0	4.9s	66.3ms
Gutenberg 5.8.0	4.8s	62.8ms
Gutenberg 5.3 (WordPress 5.2)	5s	58.4ms
Gutenberg 4.8 (WordPress 5.1)	7.6s	147.9ms

---

👏 Kudos to all the contributors. Thank you.

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