Gutenberg 12.0 Focuses on Cleanup and Minor Enhancements

Last week, contributors to the Gutenberg plugin wrapped up the version 12.0 release just ahead of the U.S. Thanksgiving holiday. Most work is being pushed toward the upcoming WordPress 5.9 release, which has been postponed to January 25. As a result, Gutenberg 12.0 has fewer bells and whistles and more bug fixes and maintenance. However, the latest update has a handful of enhancements.

The most notable features are an overhaul of block styles previews, grouped paragraph typography options, and block icons in the global styles sidebar. The site editor also has a new welcome guide, which should ship with WordPress 5.9 and introduce users to the new tool.

Theme authors can now opt-out of the core color palette and gradients. There is still a bug where this does not currently work for the site editor.

Block Styles Previews

WordPress editor focused on an image block.  In the sidebar, the mouse is hovering the "rounded" block style and its preview is shown in a popup.
Hovering a block style to see its preview.

For once in the last few years, the editor sidebar feels kind of clean and organized. When using a theme with multiple block styles, the style previews have been nothing short of an annoyance. The tab that held them took up a lot of space by presenting an entire demo of every option.

In the latest Gutenberg plugin release, the previews have been replaced with text-based buttons, emphasizing the style names. Users can still see what individual block styles look like by hovering over each one or focusing on it with a keyboard.

The downside to this new experience is that longer block-style names can sometimes get cut off. For example, the “Portfolio: Tilt Left” and “Polaroid: Tilt Right” options in my custom theme both read “Portfolio: Ti…” I will have to rethink their names, but that is a small price to pay for the cleaner interface.

Paragraph Drop Cap Control Moved

Paragraph highlighted in the WordPress editor. The typography panel now includes the drop cap option at the bottom.
Drop cap control now under Typography tab.

It seems this release has been one for fixing those irritating issues with the user experience. The option for adding a drop cap to the Paragraph block now rests alongside similar controls under the Typography block options tab.

Formerly, users had to find it under a separate Text Settings tab, which only held the drop cap option. I am sure I have mentioned this being a poor user experience on a few occasions as someone who often reaches for the control. I, for one, am a happy camper with this change.

Icons Shown in the Blocks List

WordPress site editor with the global styles panel opened to its blocks list.  The block names have their associated icons next to them.
Blocks now show their icons.

After the Gutenberg 11.7 release, one of my suggestions was to add icons to the global styles blocks list. Previously, it was a vertical scrollable area with dozens of block names, making it hard to find something specific to customize.

Whether Nik Tsekouras, who wrote the patch for this change, happened to read that Tavern post or saw the same issue with his own experience, I am grateful that he coded a solution. Finding a block is now much faster because I can just scan the list for a recognizable icon.

Themes Can Opt Into All Appearance Settings

Note: This was incorrectly tagged as part of 12.0 but did not make it into the release. However, the code should be merged in the trunk branch of the Gutenberg repository.

For any theme author who has been working with theme.json, you know how unruly the file can get when enabling or disabling specific settings. A new flag allows themes to opt into support of all appearance-related options at once.

An example theme.json file would look like the following:

{
        "version": 2,
        "settings": {
                "appearanceTools": true
        }
}

Setting the appearanceTools flag to true enables support for all border, color, spacing, and typography options. This should cut back on unnecessary JSON code, especially for themers who are opting into almost everything. Theme authors can still disable specific features individually.

Depending on the theme author’s point of view, the potential up or downside to this new flag is that it will also enable support for other appearance-related features in the future. It would allow users to access new features before their themes officially support them. On the flip-side, theme authors may want more control or to run tests before enabling something new.

11 responses to “Gutenberg 12.0 Focuses on Cleanup and Minor Enhancements”

  1. Just a quick note about ‘appearanceTools’: true as I believe it is not working as expected. At first I noticed this was true while trying to implement on Frost, but upon further review, it appears to also not be working with the latest version of TT2. I created an issue to see if others can confirm.

  2. Just a minor note, JSON doesn’t allow for (single quotes) but instead forces to use (double quotes). So the theme.json should instead be:

    {
            "version": 2,
            "settings": {
                    "appearanceTools": true
            }
    }
  3. Thays quite amazing to see how quick guye.berg is moving! One thing that would be super awesome is have a sequentially loading css classes based on the blocks used by the page post. Instead of having to load everything…

  4. Whether Nik Tsekouras, who wrote the patch for this change, happened to read that Tavern post or saw the same issue with his own experience, I am grateful that he coded a solution.

    Great minds think alike :)

    The icons were also part of the global styles mockups which still need to be fully materialized, including things like using the block categories for better separation and scanning.

Newsletter

Subscribe Via Email

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

%d bloggers like this: