Gutenberg 7.4 Adds New Color Controls, Link UI, and Block Scaffolding for Developers

February 6, 2020

The Gutenberg development team launched version 7.4 of the plugin yesterday. The update includes a few user-facing features: a text color control for the group block, background-color control for the columns block, and a new link UI for rich text components. For developers, the team introduced a script for launching a block plugin from the command line.

After a dramatic increase in speed in the last update, version 7.4 continues down the same path. When tested against a post with approximately 36,000 words and 1,000 blocks, page load speeds dropped from 5.461s to 5.037s and keypress events from 34.63ms to 34.54ms. This is not a significant reduction, but every improvement helps.

The update includes over two dozen bug fixes and several enhancements. Work toward the navigation block continues. The experience is slowly getting better, but it still doesn’t feel ready for production.

The team also launched an early, experimental mechanism for handling global styles, a feature that may be complete this year. Global styles would allow themes to set default colors, typographical settings, and potentially more. Theme authors should keep an eye on the development of this feature and offer feedback.

Group Block Gets Text Color Control

gutenberg-7-4-adds-new-color-controls-link-ui-and-block-scaffolding-for-developers Gutenberg 7.4 Adds New Color Controls, Link UI, and Block Scaffolding for Developers
Changing the text color for an entire group.

The Gutenberg team once again cleans up one of my biggest gripes. When using the group block in the past, end-users could not apply a text color to every sub-element of the group block. Instead, they had to add a text color to any blocks within the group. It was a painstaking process at times, particularly with groups of many blocks.

With this change in version 7.4, users can apply a text color to the entire group at once, and that color should trickle down to sub-blocks. Of course, users can still change the color of inner blocks if necessary.

Columns Block Gets Background Color Control

gutenberg-7-4-adds-new-color-controls-link-ui-and-block-scaffolding-for-developers-1 Gutenberg 7.4 Adds New Color Controls, Link UI, and Block Scaffolding for Developers
Customizing the background color on a columns block.

Gutenberg 7.4 adds the background color control to the columns block. This makes it work similarly to the group block by adding a background color to the entire containing block. Unfortunately, it did not receive the same text color control in this release.

Currently, there is still no way to add background and text colors to an individual column. End-users can only add a color on the sub-blocks within a column. The feature is a step in the right direction, but it’s still missing some essential color options.

Link UI Updated

gutenberg-7-4-adds-new-color-controls-link-ui-and-block-scaffolding-for-developers-2 Gutenberg 7.4 Adds New Color Controls, Link UI, and Block Scaffolding for Developers
Inserting a link into a paragraph with the new UI.

This is a minor change but welcome. The link UI for rich text, a component used for blocks such as paragraphs, now has the same UI as the navigation and button blocks. The consistency is nice, but I am a fan of the improvement overall.

The UI change is subtle, but it already feels slightly more comfortable after a day of use.

Block Scaffolding for Developers

gutenberg-7-4-adds-new-color-controls-link-ui-and-block-scaffolding-for-developers-3 Gutenberg 7.4 Adds New Color Controls, Link UI, and Block Scaffolding for Developers
Initial JavaScript file for an auto-created block plugin.

For developers who want to jump-start a new block plugin, the Gutenberg team released an official script for getting started. By running the npm init @wordpress/block command, the script will install and run you through setting up a custom block. The script creates an entire plugin folder, including the necessary PHP, CSS, and JavaScript files.

This script is ideal for building single-block plugins, which will eventually be exposed via the official WordPress block directory. Because it creates an entire plugin, it is probably not the best route for creating new blocks within an existing plugin.

Source

Share this article:
 

eHost managed wordpress hosting

We’re listening.

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

SHARE IT HERE:

Related Posts

Goodbye Featured Themes, For Now

Goodbye Featured Themes, For Now

Front page of the theme directory, featuring popular themes.Yesterday, the featured themes page was quietly removed from the WordPress theme directory. Previously, it was the primary page users would see when visiting the directory. It has now been replaced with the...

How to make a WordPress website

How to make a WordPress website

Have you always wanted to create your own website? WordPress is the way to go! Whether you want to create your own personal blog, an online store, or a business website – with WordPress, creating your own website is easy as pie. If you know what you’re doing, of...

Publishing Break

Publishing Break

The Tavern is taking a break for the week as both of its authors are out. We’re happy about expanding families, and saying “boo” to the flu. In the meantime, here are some of my favorite WordPress-powered sites that I follow and learn from: Finally, the podcast I did...

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.