Gutenberg 12.2 Focuses on User Experience Improvements – WP Tavern


Some Gutenberg plugin releases really feel like heavy-hitters with new user-facing options. Others, corresponding to today’s version 12.2 update, easy over issues and create a extra well-rounded expertise.

Switching between the positioning editor and templates is smoother. The colour picker is not a scorching mess. And, border controls now use the tools panel strategy of permitting customers to allow or disable the choices they need.

Contributors have made progress on updating the Feedback Question Loop block, which can ultimately be the spine of displaying feedback in block themes. One of many tallest hurdles was making nested comments work. With that now mounted, transferring ahead with different comment-related parts ought to be much less problematic. The most recent launch additionally launched the Comments Pagination Numbers block for dealing with paginated remark lists.

View Templates With no Web page Reload

Site editor loaded with the Templates view pulled up in the WordPress admin.
Templates view within the website editor.

When Gutenberg 12.1 launched two weeks in the past, I used to be comfortable to see the brand new and far improved slide-out panel within the website editor for viewing templates. My main grievance: it was sluggish. Switching between the editor and template view required a web page reload.

Within the newest 12.2 launch, this has all modified. Due to client-side routing in the site editor, the transition between the editor and templates feels quick and easy.

Adjustments like this are one of many causes I’ve welcomed the postponement of WordPress 5.9 till late January. A few of these little wrinkles wanted ironing earlier than displaying the positioning editor to the world.

Improved Shade Picker

WordPress block editor with the color options panel open for a paragraph. The color picker is popped up on the screen.
Shade picker popup.

Gutenberg 12.2 introduces a much-improved color picker. The earlier iteration was unwieldy, cumbersome to the purpose of being an annoyance. Customers must scroll and scroll and scroll some extra simply to leap between altering a block’s textual content shade and its hyperlink shade. This was very true if the theme confirmed each its colours and people from core.

The most recent iteration tightens up the UI to the purpose the place customers can see the textual content, background, and hyperlink shade choices all of sudden. In the event that they need to customise any of them, they’ll click on on one to drag up the colour picker popup.

Maybe this transformation will open the door for different shade choices sooner or later, corresponding to one for hyperlink hover/focus. It could have been far too messy within the outdated UI. Nevertheless, the brand new minimalist design leaves ample room.

I’d like to see the border-color management get the identical therapy. Nevertheless, there’s a separate ticket that provides extra fine-tuned management.

Font Measurement UI Change

Typography option open for a heading block in the WordPress block editor. It shows a horizontal list of numbered buttons (1 - 4).
Numbered-style font-size selector.

The font dimension management for supported blocks seems a lot totally different. It exhibits a list of numbered buttons for themes with 5 or fewer customized sizes. The font-size title seems when one is chosen. In any other case, it’s merely an inventory of numbers with no context.

I’ve usually appreciated the progress made towards updating the block choices UI. However, I’m not a fan of this transformation. As a person, what do these numbers even imply? Is the “1” dimension small or medium? There isn’t any method of realizing with out testing it. Plus, the context will change from theme to theme. A UI change like this will have been OK on the again of a standardized naming scheme. Nevertheless, that shall be powerful to implement after three years of utilization.

On the whole, clicking a single button looks like a greater expertise than clicking a dropdown, adopted by a second click on of constructing a range. I’m simply unsure that it really works right here. Nevertheless, I’m open to seeing the place it goes upon additional iteration.

There may be additionally no seen solution to clear the present choice and return to the default dimension. If the theme helps customized sizes, customers can swap to the “Customized” subject and clear it out. This isn’t apparent until you come across it. Customers might additionally hit the “Reset All” button, however doing so resets all typography choices.

The simplest solution to keep away from this UI change is for theme authors to register at the very least six customized font sizes. The choice will robotically revert to its former dropdown choose subject. Thankfully, I’ve 13 within the theme I primarily work on, so it’s a non-issue for me.

Block Template Half Hooks

Theme and plugin builders now have additional action hooks across the block template half system. These ought to be helpful for debugging or different advanced use circumstances.

  • render_block_core_template_part_post fires when a component is discovered from the database.
  • render_block_core_template_part_file fires when a component comes from a theme file.
  • render_block_core_template_part_none fires when no half is situated.

Leave a Reply

Your email address will not be published.