Gutenberg 2.1 – The New Version of Gutenberg Editor

The new version of the Gutenberg Editor – Gutenberg 2.1 has been released. The updated version was released yesterday with few changes in design, writing flow details and some tiny tweaks in the editor.

The changelog had a full list of more than 50 improvements in Gutenberg 2.1 this time. The release has emphasized on some design and writing flow details—lighter up/down movers, engaging the UI-less focus mode more often, and more. Gutenberg 2.1 has also brought many extensibility API improvements, exposing internal editor state through selectors, enhancements to the meta-box handling and implements the “Copy All” button as if it was a plugin as an example of how to leverage native hooks.

Now, let’s have a closer look at the changes in Gutenberg 2.1.

Gutenberg 2.1 has iterated on the design of up/down arrows and how the focus is managed. The main aim of this patch is to reduce the visual and cognitive weight of the up/down movers. And the reason behind this patch was that Gutenberg had received a lot of fair feedback around the UI feeling distracting and impacting the writing flow. It is a part of an ongoing effort to improve the writing flow by refining the UI.

iterated on the design of updown arrows

The updated editor shows immediate visual feedback when dragging and dropping images into the editor. The image/gallery block is immediately appended and the URL is updated once the upload completes. It is similar to the behavior we have while uploading the image from the block itself.

Showing a preview of the block immediately after drag and drop

Apart from these improvements, Gutenberg 2.1 also introduced many other enhancements and some of them are listed below:

  • Expose state through data module using selectors. This is an important piece of the extensibility puzzle.
  • New button outline and focus styles.
  • Show original block icon after converting to reusable block. Also hides the generic reusable block from inserters. This moves data logic out of the inserter.
  • Add HTML handler to the drop zone. Allows drag and drop images from other web pages directly.
  • Added ability to align the text content of a cover image to the right, left, or center of the image.
  • Refactor CopyContentButton as a core extension to illustrate how to add functionality to the editor outside of blocks.
  • Try new markup for Galleries using lists.
  • Fix scrolling issues around nav menus.

Check out the full list of changelog to know more about the enhancements in Gutenberg 2.1.

The Gutenberg developers are looking forward to finalizing the nested block’s interface (with its own Columns component), some remaining important extensibility hooks for plugins, and adding drag-drop functionality for moving and inserting blocks.

Subscribe here to keep up with the Gutenberg Editor updates. And if you have anything to add, share or ask, feel free to use the comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *