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

December 11, 2019

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

gutenberg-7-1-includes-welcome-modal-improves-multi-block-selection-and-adds-drag-and-drop-featured-images Theme Builder Layout
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

gutenberg-7-1-includes-welcome-modal-improves-multi-block-selection-and-adds-drag-and-drop-featured-images Theme Builder Layout
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

gutenberg-7-1-includes-welcome-modal-improves-multi-block-selection-and-adds-drag-and-drop-featured-images-1 Theme Builder Layout
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

gutenberg-7-1-includes-welcome-modal-improves-multi-block-selection-and-adds-drag-and-drop-featured-images-1 Theme Builder Layout
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

gutenberg-7-1-includes-welcome-modal-improves-multi-block-selection-and-adds-drag-and-drop-featured-images-2 Theme Builder Layout
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.


Share this article:

eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:


Related Posts

wordcamp-houston-returning-after-10-years Theme Builder Layout

WordCamp Houston Returning After 10 Years

After a 10-year hiatus, WordCamp Houston will return in 2020. The event will run from May 9-10 at the Hilton Houston NASA Clear Lake and expects 250-300 attendees. The team behind the Texas-based WordCamp is still in the process of putting the event together and is...

does-social-media-influence-your-seo Theme Builder Layout

Does social media influence your SEO?

Siobhan Cunningham Siobhan is lead of the Social media team at Yoast. She enjoys writing and is interested in basically any type of digital communication. Handling your social media is a necessary part of any marketing strategy, but it’s also a vital part of any good...

get-involved-with-block-based-wordpress-theme-experiments Theme Builder Layout

Get Involved With Block-Based WordPress Theme Experiments

As the WordPress theme review team wound down their team meeting yesterday, they were finalizing what their focus area for 2020 would be. The general agreement among members was that block-based themes should be at the top of the list. There was some pushback from a...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.