Gutenberg 12.1 Fixes Block Appender Layout Shift, Adds Template List Views, and Enhances Global Styles – WP Tavern
Earlier at present, Gutenberg 12.1 landed within the WordPress plugin listing. The latest release was heavy on enhancements to the consumer expertise, together with a repair for the block appender format shift, new world kinds options, and improved templates listing view. Theme authors even have a brand new flag for enabling all appearance-related instruments.
WordPress 5.9 was slated for launch at present, but it surely has been pushed to January 25, 2022. Contributors wanted extra time to refine the location editor and associated instruments bundled alongside the discharge. To this point, they’re utilizing the additional time by fixing bugs and creating an total higher consumer expertise.
No Extra Structure Shift
If this was the one and solely change in Gutenberg 12.1, I might have been the happiest consumer on the earth. Fortuitously, there are different nice-to-have objects, however my greatest pet peeve in three years of utilizing the block editor has now been fastened.
The block appender (these little + buttons) within the content material canvas are actually shown using fixed positioning. Which means when you choose blocks, notably these nested inside others, the display now not bounces round, shifts the format, or leaves gaps of whitespace in an otherwise-perfect part.
I do know from speaking to others that this has been a ache level when constructing advanced layouts up to now. For some, they’d not use the block editor in any respect as a result of it was so irritating. In case you fall into this camp, it’s price giving it a strive as soon as once more. It’s a marked enchancment within the consumer expertise.
World Kinds Enhancements
Customers can now define custom gradients by way of the colour palette part within the world kinds sidebar. These can be accessible all through the location and are usually not tied to the theme.
The palette additionally shows duotone colors below the identical gradient part. Nevertheless, there may be not an choice for creating customized duotone filters but. It’s a read-only part.
The worldwide kinds panel additionally splits typography options between textual content and hyperlink components, opening the door for different HTML components sooner or later.
Customers in all probability mustn’t change this for hyperlinks. As a substitute, they need to typically match the encompassing textual content. If we get text-decoration or comparable choices sooner or later, the separation may make extra sense. Nevertheless, altering settings just like the font-size or line-height would doubtless be detrimental to the design.
Templates and Template Elements Views
Gutenberg 12.1 introduces a brand new templates and template components listing view from the location editor. The UI for this function has jumped round over the previous few plugin variations. The listing was accessible by way of the left slide-out panel within the editor for months. Then, it was eliminated altogether in 11.9. It reappeared between that launch and 12.0.
The panel has now been scaled again to incorporate three hyperlinks for Web site, Templates, and Template Elements. The primary hyperlink brings up the location editor. The others show tables of current templates.
Switching between the screens feels sluggish in the meanwhile. Nevertheless, that is the 1.0 model of the location editor that WordPress customers world wide will see. It should doubtless change over time. “The present iteration of the design favors simplicity and value,” wrote Riad Benguella within the announcement publish. “Iterations implementing consumer facet navigation and mosaic view may be added sooner or later.”
There doesn’t appear to be a method so as to add customized templates, corresponding to a class or writer archive. Clicking on the “Add New” button presents choices for a Entrance Web page and Search template when utilizing the Twenty Twenty-Two theme.
Nevertheless, including a brand new template half is a way more refined course of. After clicking the button to create one, customers are introduced with an overlay and kind as proven within the following screenshot:
Customers can provide it a customized title and select between three allowed areas: basic, header, and footer. After creating a brand new half, customers are taken to the editor.
When viewing the template half listing once more, it shows the consumer who created it and has an choices dropdown (ellipsis button). At present, the one motion is to delete the half.
I might like to see top-level templates obtain the identical remedy as template components when creating a brand new one. Whereas there are some slight variations between them, each are templates on the finish of the day. The consumer expertise would profit if the creation processes matched.
Creating customized templates outdoors of the default listing from this display would additionally assist designers construct themes visually from the location editor.
Empty Navigation Fallback
The most recent launch launched a fallback for empty Navigation menu block. Finally, if no menu is discovered, it’ll display the Page List block. Relying on what number of pages a consumer’s web site has, this may shortly get out of hand, as proven within the following screenshot of Twenty Twenty-Two:
Theme builders can overwrite this fallback by way of the block_core_navigation_render_fallback filter hook by both returning a false worth or a set of legitimate youngster blocks for the Navigation guardian. Theme authors, I invite them to make beneficiant use of this filter hook.
Noteworthy Block Theme Objects
For block theme builders, the usual template-related folders have been renamed. The outdated names will proceed working, however authors ought to replace the next of their themes:
/block-templatesrenamed to/templates/block-template-partsrenamed to/components
This alteration cleans up the top-level theme listing, but it surely additionally creates a path toward more standardization sooner or later. There’s already an open ticket for /patterns, and a /kinds folder is feasible.
Gutenberg 12.1 additionally introduces an appearanceTools flag for theme.json, permitting theme authors to allow help for all present and future border, coloration, spacing, and typography choices. I lined this in additional element within the Gutenberg 12.0 post, which had erroneously marked the function as bundled with the final launch.
