WP Tavern

Gutenberg 10.7 Integrates With the Pattern Directory, Introduces New Block Design Controls

Justin Tadlock · · 12 Comments

Gutenberg 10.7 landed yesterday. Within a few hours, the development team also released version 10.7.1 of the plugin with a few bug fixes. The latest update primarily focuses on work expected to land in WordPress 5.8 this July.

The feature freeze deadline for the current WordPress development cycle passed on Tuesday. This should mean that no new features beyond Gutenberg 10.7 will make it into the core platform. WordPress 5.8 Beta 1 is slated for June 8.

This release feels like the team has polished the interface and experience for the better. Users can also look forward to several enhancements, such as additional block design options.

Block Pattern Directory Integration

Gutenberg now serves its default block patterns via the pattern directory on WordPress.org. This moves their development outside of the plugin and core WordPress, which means designers can iterate on them without a user needing to update. They will always have the latest version available from the editor.

WordPress editor with pattern inserter.
Inserting a pattern into the content canvas.

The pattern directory will be a handy tool for end-users. For many, it will likely serve as a path toward building more complex layouts in the WordPress editor. At the moment, it only houses 10 patterns. This will change after it is opened to community submissions.

Shaun Andrews shared some of the ongoing design work for the directory, and it is beautiful. I am eager to see the final result when it launches.

Pattern directory with large hero header and a grid of patterns.
Recent work on the block pattern directory.

A side note about block patterns: there is currently a bug that may cause some of those bundled with themes to not appear in the inserter.

New Block Design Controls

Version 10.7 introduces several new design controls for blocks. The most exciting feature for many will be margin controls for more precise control over spacing. Theme authors must set the settings.spacing.customMargin key to true in their theme.json files to enable this.

Currently, only the Site Title and Site Tagline blocks support margin controls. However, now that the initial feature has landed, we should expect others to follow suit in future versions.

Editing the Site Title and Tagline blocks in the WordPress editor.
Spacing and typography controls for title and tagline

The Site Title block also has letter case typography controls.

The development team upgraded the Column block with a couple of new options. Users can now customize the padding and colors for individual columns.

Editing Column block spacing and colors in the WordPress editor.
Customizing individual columns.

One of the more low-key enhancements happens to be one of my favorite changes. The Media & Text block received a new “media width” block option in the sidebar. This makes getting the correct width a far better experience than using the drag handle in the content canvas.

In the WordPress editor, adjusting the media width for the Media & Text block.
Adjusting the media width in the Media & Text block

I may begin using this block more now. I had been shying away from it for any use case beyond the default width settings.

Another welcome enhancement is Cover being added as a transform option for the Group block. It will only appear if the block has a background.

Template Editor Welcome Guide

Overlaid welcome message to the new template editor feature.
Welcome message for the template editor.

Template-editing mode will be one of the most highlighted features for WordPress 5.8. It allows users to switch from content to template editing while never leaving the post screen. Therefore, users will need a welcome guide to explain the new feature.

Currently, the message reads:

Welcome to the template editor

Templates express the layout of the site. Customize all aspects of your posts and pages using the tools of blocks and patterns.

It is a solid starting point, but it does not fully explain what this mode is about. I expect the development team to smooth it out a bit, maybe add an extra slide or two, or even link to a dedicated documentation page on WordPress.org. Helping users set off on the right foot with this new feature should mitigate confusion and lower the support burden.

There is currently an open call for volunteers to provide feedback on the template editor while building a portfolio-type landing page (see my results). Make sure to get involved if you can spare half an hour or more.

Buttons Block Uses column-gap

Four Button blocks aligned in the WordPress editor with correct spacing.
Gap between buttons.

This is more of a theme developer note, but some users may have noticed lines of buttons not extending to the edge of their container. In certain situations, at least.

Essentially, the space between individual Button blocks used a bit of a hacky, old-school CSS margin solution to create the gutter space between each. In the modern world of flex and grid layouts, it is something most designers dread seeing. It overcomplicates things and makes for more bloated CSS, particularly if you want to make adjustments based on screen size.

I am highlighting this change because it is one of those stages where the block system is becoming more polished under the hood. And, it could be the start of more exciting things to come for theme authors.

“This is great, this is beautiful, themers are going to love it,” wrote Joen Asmussen in the ticket. “At some point once the dust settles, we should see if this gap could become a global styles property; since it’s so easy to change and resilient, it would be nice to handle in such a neat way.”

It is a welcome sight to see the use of column-gap land in the plugin. Of course, it could use row-gap for vertical spacing instead of margins in those cases where Buttons extend beyond a single row.

Now, can we do the same for the Columns, Gallery, and Query Loop blocks? Normalizing the system for gutters/gaps between flex items can save dozens upon dozens of lines of code in the long term.

12 Comments

  1. Steve Grant

    As WP goes more toward the page builder / Wix market one thing which other developers of bespoke CMS sites for clients may want is this snippet:

    function my_unregister_patterns() {
    remove_theme_support( 'core-block-patterns' );
}
add_action( 'after_setup_theme', 'my_unregister_patterns' );

    That hides all the core patterns, allowing us to add only the ones the clients signed-off!
    In my case I never want clients to see the block directory so that snippet is very vital. Clients of corporate sites want a tightly curated selection of patterns, as signed off by their marketing team.

    Now if only I could figure out how to disable the Block Inserter Search pulling in those weird external 3rd party Fremium blocks ! I mean the result listing which tells editors in the Block Inserter: “Available to install Select a block to install and add it to your post.” (!)

    If anyone knows how to unhook those 3rd party Block Install suggestions I will be very grateful!

    Report

  2. Sally G

    Still waiting for a multiparagraph block for longish articles, right? Clinging to Classic Editor in the meantime.

    Report

    • CW

      Does it not work for you to use multiple paragraph blocks or a group block with several paragraph blocks inside it? I’m just curious.

      Report

      • In reply to CW
        Sally G

        It just seems complex to create a new block for every paragraph, and have to group them. I am used to working in Open Office or something similar, just changing style tags for a heading, subhead, body text, etc.

        I am a bit of an amateur at WP, done some work on and off over time, attended Word Camps in 2015 & 16, and now getting more involved with a few sites. (I also worked in InDesign, and now in Affinity Publisher—the lack of control over spacing around images is making me crazy, too, even in the classic editor.)

        Report

    • Justin Tadlock

      I feel like I’m missing some context here. Basic paragraph functionality is at the core of the WordPress editor. You just hit the Enter key to create a new paragraph after the previous one.

      Report

    • Paal Joachim Romdahl

      Hey Sally

      I assume you mean articles flowing automatically from one column to the next. A way of connecting the columns together, so that the overflow of text from column one goes into column two. I think you might be interested in checking out this Github issue:
      Word flow in columns
      https://github.com/WordPress/gutenberg/issues/29184

      Report

    • Knut Sparhell

      You have tried the Classic Block, which is “multi paragraph”?

      It seems to get little attention, and has been available from day 1. Should be good for those who like the classic way for content, without reverting to the full classic editor.

      Report

      • In reply to Knut Sparhell
        Sally G

        Yes, Classic Block is the block I am using most consistently; on a new site that I brought over from Joomla, all the posts that were brought over are in classic blocks and I am copy editing as I categorize and tag.

        For the other site on which I work most, created by a colleague in Elementor, I use Classic Editor for any new material I create.

        Report

  3. sbphoto

    In the default button creator, why do they not have a hover class that you can design the hover effect in the default WP install of Gutenburg?

    Report

Comments are closed.

%d bloggers like this: