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

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

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

Screenshot of changing the background color for a group of columns in Gutenberg.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

Screenshot of the new Gutenberg UI for adding links.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

Screenshot of a code editor that showcases the initial code for creating a block plugin.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.

Like this:

Like Loading…

Keep reading the article at WordPress Tavern. The article was originally written by Justin Tadlock on 2020-02-06 16:06:59.

The article was hand-picked and curated for you by the Editorial Team of WP Archives.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the product, We may receive an affiliate commission.

Leave a Comment

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

Show Your ❤️ Love! Like Us
Scroll to Top