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.

Appender button does not shift layout.

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.

Creating a custom gradient.

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.

Link typography section.

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.

Templates list view.

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:

Creating a custom template part.

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.

Template Parts list view.

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:

Navigation block fallback with long page list.

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.

Category: News, Opinion, Plugins

Tags: gutenberg
Share this:Click to email this to a friend (Opens in new window)Click to share on Facebook (Opens in new window)Click to share on Twitter (Opens in new window)Click to share on Telegram (Opens in new window)Click to share on WhatsApp (Opens in new window)Click to share on Pocket (Opens in new window)Click to share on Reddit (Opens in new window)Like thisLike Loading…

Share:

Facebook
Twitter
Pinterest
LinkedIn

Leave a Comment

Your email address will not be published.

Table of Contents

On Key

Related Posts

Best Google Maps Plugins for WordPress

Before we start looking at any plugins, it’s good to review the way Google Maps work. There are several components in the Google Maps API family, all of which can be found on the Google Maps API Family page. When working with WordPress, we are mainly interested in two of these APIs: Static Maps APIMaps

How to Get a Custom Field Value via Shortcode

Sometimes we want to make it easy for site administrators to include the value of a custom field (maybe created as part of a custom meta box) into a post. An ideal solution to this challenge is to use shortcodes. You can either do this through these two plugins: Get Custom Field Values Custom Fields

Best Auto Translation Plugins for WordPress

Having the content of your website available in different languages can mean a much bigger audience for you. A very simple way to do this is to provide automatic translators, they’re not the same as manually translating all your content, but do a pretty good job. It’s better to have an automatic translation plugin than

Best WordPress Multilanguage Plugins

The two main contenders as best multilanguage plugins for WordPress are WPML and QTranslate. If you want a quick answer to which one comes out on top, I would say go for WPML. If you have enough time to give them a test drive, by all means, do so and judge for yourself which one