Gutenberg 6.7 Introduces Storybook and Gradient Backgrounds

The Gutenberg team released version 6.7 of the Gutenberg plugin last week. The announcement post listed a little over three dozen bug fixes and several enhancements to existing features. The most notable features included in the update are Storybook support and gradient backgrounds for the button block.

All of the bug fixes included in Gutenberg 6.7 were ported to the first WordPress 5.3 release candidate. WordPress 5.3 is expected to be released on or around November 12.

This release also includes updates for experimental features, which can be enabled via the “Experiments” screen under the “Gutenberg” admin menu. The experimental nav menu block received alignment fixes and now only shows nested menu items when the parent item is selected.

First Implementation of Gradient Backgrounds

Screenshot of using the gradient background on the button block in Gutenberg.
Adding a gradient to a button block.

Version 6.7 introduces a new gradient background feature for the button block. The long-term plan is to make gradient backgrounds available to other blocks. The button block is a good testbed for the feature before moving forward with other blocks.

The problem with introducing gradients is that the team didn’t go far enough with theme support early in the process. This is par for the course with Gutenberg development. New features are implemented without knowing exactly how themes fit into the picture. It is only after the feature is implemented that theme support is patched on. Often, this leads to theme authors scrambling to keep up. It would be better for the feature and the theme support to be developed in tandem with feedback from more theme authors in the process.

At this stage, gradients are useless in most theme designs, which have custom color schemes that are unlikely to match Gutenberg’s gradient colors. At best, the gradients look OK with stock WordPress. At worst, they’re garish and an assault on the eyeballs. Starting with theme support would have at least offered theme authors a chance to make this a better experience for users.

There is an open pull request on GitHub to introduce theme support. Theme authors may be able to add custom gradients by version 6.8.

In the future, this should be a powerful feature that allows users via custom theme gradients to create some unique designs for their posts and pages. For now, it is only in the “fun experiment” stage.

Storybook for Developers

Gutenberg components Storybook screenshot.
Gutenberg button component stories.

The Gutenberg development team introduced Storybook support for Gutenberg. Developers can test Storybook support via the Gutenberg Storybook page.

Storybook is a development and testing environment for user interfaces. It allows developers to create, test, and showcase components in an isolated environment apart from the primary platform or application. This essentially allows developers to build components without the dependencies of the platform before porting them over. A story within the Storybook system represents the visual state of a component. Storybooks are collections of stories.

The Storybook support uses the Knobs add-on, which allows developers to edit props dynamically via the Storybook UI. The dashicons component is a good place to test this out. Currently, it accepts values for the icon name, color, and size.

Marcus Kazmierczak, a principal engineer working on special projects at Automattic, wrote a tutorial and shared a YouTube video on how to create a story for Gutenberg components.

For developers wanting to be involved, there are many components that still need a story.

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.

9 Comments


  1. Theme authors may be able to add custom gradients by version 6.8.

    You can do this with JS right now by updating the editor settings. For anyone wanting to completely remove the new gradients:

    wp.data.dispatch(‘core/block-editor’).updateSettings({ gradients: [] });

    …but this unfortunately still leaves the gradients panel. You can use the following code to remove it entirely:

    https://gist.github.com/retlehs/f7c41277ce0d2105f87f3431adcd37d8

    Report


    1. Regarding the code, what if document.getElementsByClassName(‘edit-post-sidebar’) returns nothing? Would suggest proper error handling.

      Report


      1. Use it as a reference :) I’m only loading it on pages with the editor.

        Report


  2. Right on Justin.

    Hopefully, the Twenty-Twenty theme will be tweaked for the Gutenberg release that is included in WordPress 5.3…

    Report


  3. Great post. Makes me want to explore Gutenburg more than I have already. I was one of those who was totally against change to start using it, but now find myself changing all my blogs over to it. I’m really lovinv the reusable blocks feature. That one thing alone makes it entirely possible to add one block to each post or page on your website where crucial info is needed to be displayed, and then in an instant make an update and basically update your entire website in one save. It’s amazing and has changed my overall blogging habits fir the better. I just wish that wordpress.com would make it easier to find your reusable blocks.

    Report


    1. I’m not sure how this applies to WordPress.com rather than Gutenberg as a whole?

      WordPress.com manages reusable blocks in the same way that core does, simply go to the block inserter, scroll down to Reusable Blocks, then click on ‘Manage All Reusable Blocks’.

      The Manage All Reusable Blocks link is also available from the editor settings icon too – ‘…’

      Hope this helps!

      Report


  4. Why not create a button group, instead of these useless features. Button gradients can be done using CSS, they don’t need JS support.

    A button group, however, would be REALLY helpful, and I’m sure lots of developers agree with me when they are forced to:

    1. Use columns to add buttons next to each other.
    2. Use a plugin.
    3. Use some kind of CSS trickery/workaround.

    Report


  5. I really like your post but I have found more interesting resources including this one deleted link while researching for the Gutenberg 6.7 release and I think it would be great if they introduce full theme support so that we can easily use gradients with other blocks as well.

    Report


    1. James, I deleted the link you posted because it was a copy of this post with some of the words changed around. They could’ve at least used their own screenshots. :)

      Report

Comments are closed.