Gutenberg 12.1 fixes block appender layout mismatch, adds model list views, and improves overall styles – WP Tavern

Earlier today, Gutenberg 12.1 landed in the WordPress plugin directory. The latest version brought a lot of improvements to the user experience, including a fix for changing the layout of adding blocks, new global style features, and an improved model list view. Theme authors also have a new flag to enable all appearance related tools.

WordPress 5.9 was supposed to launch today, but it was pushed back to January 25, 2022. Contributors needed more time to refine the site editor and associated tools that came with the release. So far, they are using the extra time fixing bugs and creating a better user experience overall.

No more layout lag

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 cool items out there, but my biggest pet peeve in three years of using the Block Editor has now been fixed.

The annex block (these small + buttons) in the content canvas are now displayed using fixed positioning. This means that when you select blocks, especially those nested within others, the screen no longer bounces, changes the layout, or leaves white space in an otherwise perfect section.

The Appender button does not change the layout.

I know from telling others that this has been a pain point when creating complex layouts in the past. For some, they wouldn’t use the block editor at all because it was so irritating. If you fall into this camp, it’s worth trying again. It is a marked improvement in the user experience.

Global styling improvements

Users can now define custom gradients through the color palette section in the Global Styles sidebar. These will be available sitewide and are unrelated to the theme.

Creation of a custom gradient.

The palette also displays two-tone colors under the same gradient section. However, there is no option yet to create custom two-color filters. This is a read-only section.

The Global Styles panel also splits typography options between text and link elements, opening the door to other HTML elements in the future.

Link typography section.

Users probably shouldn’t 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, changing parameters such as font size or line height would likely be detrimental to the design.

Models and model part views

Gutenberg 12.1 introduces a new model and model parts list view from the site editor. The user interface for this feature has changed a lot over the last few plug-in versions. The list was available through the left sliding panel in the editor for months. Then it was completely removed in 11.9. It reappeared between this version and 12.0.

The panel has now been collapsed to include three links for site, models, and model parts. The first link brings up the site editor. The others display tables of existing models.

Display of the list of models.

Switching between screens seems slow at the moment. However, this is version 1.0 of the site editor that WordPress users around the world will see. This will likely change over time. “The current iteration of the design promotes simplicity and user-friendliness,” Riad Benguella wrote in the announcement post. “Iterations implementing client side navigation and tiled view may be added in the future. “

There doesn’t seem to be a way to add custom templates, such as category or author archive. Clicking the “Add New” button presents options for a home and search page template when using the Twenty Twenty-Two theme.

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

Creation of a custom model part.

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

When you display the model parts list again, it displays the user who created it and has a drop-down list of options (ellipsis button). Currently, the only action is to delete the part.

Display of the model parts list.

I would like to see high level models receive the same treatment as model parts when creating a new one. While there are slight differences between them, both are models at the end of the day. User experience would be beneficial if the creative processes matched.

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

Empty navigation fold

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

Emergency navigation block with a long list of pages.

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

Noteworthy block theme elements

For block theme developers, the standard folders linked to models have been renamed. Old names will continue to work, but authors should update the following in their themes:

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

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

Gutenberg 12.1 also introduces a 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 mistakenly marked the feature as included with the latest version.