Gutenberg 12.1 Fixes Block Appender Layout Shift, Adds Template List Views, and Enhances Global Styles

Earlier today, Gutenberg 12.1 landed in the WordPress plugin directory. The latest release was heavy on improvements to the user experience, including a fix for the block appender layout shift, new global styles features, and improved templates list view. Theme authors also have a new flag for enabling all appearance-related tools.

WordPress 5.9 was slated for launch today, but it has been pushed to January 25, 2022. Contributors needed more time to refine the site editor and related tools bundled alongside the release. Thus far, they are using the extra time by fixing bugs and creating an overall better user experience.

No More Layout Shift

If this was the one and only change in Gutenberg 12.1, I would have been the happiest user in the world. Fortunately, there are other nice-to-have items, but my biggest pet peeve in three years of using the block editor has now been fixed.

The block appender (those little + buttons) in the content canvas are now shown using fixed positioning. This means that when you select blocks, particularly those nested within others, the screen no longer bounces around, shifts the layout, or leaves gaps of whitespace in an otherwise-perfect section.

I know from talking to others that this has been a pain point when building complex layouts in the past. For some, they would not use the block editor at all because it was so irritating. If you fall into this camp, it is worth giving it a try once again. It is a marked improvement in the user experience.

Global Styles Improvements

Users can now define custom gradients via the color palette section in the global styles sidebar. These will be available throughout the site and are not tied to the theme.

The palette also shows duotone colors under the same gradient section. However, there is not an option for creating custom duotone filters yet. It is a read-only section.

The global styles panel also splits typography options between text and link elements, opening the door for other HTML elements in the future.

Users probably should not change this for links. Instead, they should generally match the surrounding text. If we get text-decoration or similar options in the future, the separation might make more sense. However, altering settings like the font-size or line-height would likely be detrimental to the design.

Templates and Template Parts Views

Gutenberg 12.1 introduces a new templates and template parts list view from the site editor. The UI for this feature has jumped around over the past few plugin versions. The list was available via the left slide-out panel in the editor for months. Then, it was removed altogether in 11.9. It reappeared between that release and 12.0.

The panel has now been scaled back to include three links for Site, Templates, and Template Parts. The first link brings up the site editor. The others display tables of existing templates.

Switching between the screens feels slow at the moment. However, this is the 1.0 version of the site editor that WordPress users around the world will see. It will likely change over time. “The current iteration of the design favors simplicity and usability,” wrote Riad Benguella in the announcement post. “Iterations implementing client side navigation and mosaic view might be added in the future.”

There does not seem to be a way to add custom templates, such as a category or author archive. Clicking on the “Add New” button presents options for a Front Page and Search template when using the Twenty Twenty-Two theme.

However, adding a new template part is a much more refined process. After clicking the button to create one, users are presented with an overlay and form as shown in the following screenshot:

Users can give it a custom name and choose between three allowed areas: general, header, and footer. After creating a new part, users are taken to the editor.

When viewing the template part list again, it displays the user who created it and has an options dropdown (ellipsis button). Currently, the only action is to delete the part.

I would love to see top-level templates receive the same treatment as template parts when creating a new one. While there are some slight differences between them, both are templates at the end of the day. The user experience would benefit if the creation processes matched.

Creating custom templates outside of the default list from this screen would also help designers build themes visually from the site editor.

Empty Navigation Fallback

The latest release introduced a fallback for empty Navigation menu block. Ultimately, if no menu is found, it will display the Page List block. Depending on how many pages a user’s site has, this can quickly get out of hand, as shown in the following screenshot of Twenty Twenty-Two:

Theme developers can overwrite this fallback via the block_core_navigation_render_fallback filter hook by either returning a false value or a set of valid child blocks for the Navigation parent. Theme authors, I invite them to make generous use of this filter hook.

Noteworthy Block Theme Items

For block theme developers, the standard template-related folders have been renamed. The old names will continue working, but authors should update the following in their themes:

• /block-templates renamed to /templates
• /block-template-parts renamed to /parts

This change cleans up the top-level theme directory, but it also creates a path toward more standardization in the future. There is already an open ticket for /patterns, and a /styles folder is possible.

Gutenberg 12.1 also introduces an appearanceTools flag for theme.json, allowing theme authors to enable support for all current and future border, color, spacing, and typography options. I covered this in more detail in the Gutenberg 12.0 post, which had erroneously marked the feature as bundled with the last release.