Gutenberg 7.1 Includes Welcome Modal, Improves Multi-Block Selection, and Adds Drag-and-Drop Featured Images

The past two weeks have been blazing fast for Gutenberg plugin development. A total of 161 pull requests (patches) were merged into version 7.1 of the plugin. Over 20 bugs were squashed while the team added several enhancements, which include better multi-block selection, a new welcome modal, and drag-and-drop featured images.

The team refactored several areas of the codebase to prepare for future changes and make it possible to use new hooks. API changes include a new custom select control, text highlight, and custom gradient picker components for developers to use in their plugins.

The release also featured a toolbar button for switching between “edit” and “select” mode. The select mode allows you to select blocks without opening the editing controls unless you click again within a block, which switches you back to editing mode. The only noticeable difference is that the editing controls do not appear while in select mode. Wondering when I will ever use this feature…

Welcome Guide Modal

Screenshot of the welcome modal for first-time Gutenberg users.
New welcome guide modal for first-time users.

The new version of the plugin includes a pop-up welcome modal for first-time users. There are currently three panels with short introductions to what blocks are, how to use them, and getting to know the block library.

Ideally, the modal will link out to more extensive documentation in a future iteration. Right now, the information provided does not go into much detail. It feels like a message to say, “Hey, check out this shiny new thing.” However, there needs to be more substance for it to be helpful for first-timers.

Improved Multi-block Selection

Screenshot of selecting multiple blocks in the Gutenberg block editor.
Selecting multiple blocks at once.

The block editor now incorporates a nicer native multi-block selection process. The first aspect of this change is to use the native selection color, which improves accessibility. It also uses native selection behavior when selecting multiple blocks.

The second part is important because it paves the way toward partial block selection in a future release. Currently, when selecting text across multiple blocks, the editor extends this out to select all text from the selected blocks. In the future, it should be possible to select only part of the text across multiple blocks. This would be consistent with normal text-based editors where users can select the last sentence from one paragraph and the first from the next, for example.

Selecting multiple blocks and pasting new content works correctly in 7.1. In the past, the rich text component handled pasting. This resulted in the blocks being split and the pasted content inserted between the split. The block editor now handles the pasting process. This allows users to completely replace multiple selected blocks with a paste.

Drag-and-Drop Featured Images

Screenshot of dragging a featured image from the desktop into the block editor.
Dragging a featured image from the desktop.

Instead of clicking the featured image box to open the media modal, users can now save themselves a click. Just like dragging and dropping an image into the editor, the featured image box now accepts any image file dropped into it.

Table Captions

Screenshot of adding a caption to the table block in Gutenberg.
Adding a caption to the table block.

For those who have long waited for a true table <caption> implementation, keep on waiting.

A year-old ticket that was opened for a table caption feature was closed with a solution matching that of other blocks with captions (e.g., image, gallery). The pull request featured a lengthy discussion over the technical limitations of how to best handle the feature. Ultimately, the decision was to wrap tables in a <figure> element and add the caption via the <figcaption> tag.

While this may work for some who need to add a caption or summary below a table, it is not currently helping users who need captions in their normal spot at the top of a table.

In the long run, users who need to roll out advanced tables will likely need a table block plugin anyway. The Gutenberg and core WordPress implementation is limiting for anything beyond the most basic table output. Real captions would have been a nice touch though.

Alignment for the Navigation Block

Screenshot of aligning items within the navigation block in Gutenberg.
Aligning navigation block items.

The Navigation block, which moved out of the experimental stage in version 7.0, has a new option for justifying the list items to the left, right, or center. This will be an important feature for full-site editing in the long term because users will want to set their nav menu perfectly.

This block will likely be in flux for a while. There are still major questions about how navigation will work on mobile, especially as we inch closer to full-site editing. Will core play a role in making mobile menus? Will themes be left to their own devices? Will themes offer multiple options based on screen size?

Moving Ahead with Templates and Full-Site Editing

Coming off the heels of a somewhat controversial documentation proposal for block-based themes, version 7.1 includes a new demo block template named index.html. It is a fallback template in cases where no templates are available. This is an early, experimental step toward making full-site editing a reality.

Theme developers who want to start looking at what block templates could look like, should view the demo index.html template.

Unfortunately, the release ZIP file available through the official plugin repository does not include the index.html template. It was excluded because of a bug in the build process. However, it may be packaged in a version 7.1.1 minor release. The file is correctly included for developers who clone from the Git repository.

The second step of this process was the addition of a Template Part block. The idea for this block is that it would be a placeholder to add to templates, which would output a template part on the front end.


7 responses to “Gutenberg 7.1 Includes Welcome Modal, Improves Multi-Block Selection, and Adds Drag-and-Drop Featured Images”


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: