Gutenberg 10.9 renames query block, adds collapsible list view items, and deploys rich URL previews – WP Tavern


Yesterday, Gutenberg 10.9 landed in the WordPress plugin directory. The update revises Query and Query Loop blocks, allows users to expand or collapse items in publisher list view, and introduces rich URL preview maps for links. The new version also incorporates an updated model mode authoring modal and moves the block manager.

This update brings several improvements, notably to the user experience. One of my favorite low-key upgrades is a new set of add map, bug, key, post author, and security icons by Filipe Varela, a product designer at Automattic.

Another small but compact UI change is the inclusion of the post type in the publisher’s breadcrumbs. The type singular name tag now replaces the root element “Document”.

In recent cycles, the new template editor that was supposed to launch with WordPress 5.8 has been enabled by default. The goal has always been to allow everyone to experience it, whether on a classic theme or as a block. The dev team has now reduced this to only automatically be enabled for block themes. Classic themes must register to support it. Theme authors should read the recent Template Editor Preview by Riad Benguella for full details.

Renamed Query and Query Loop Blocks

Query Loop block in the editor.

To question? Query loop? What is all this? If you are unfamiliar with these terms, you are not alone. Even on the developer side, the early implementation of the query and its internal query loop block could be a bit confusing. For the average user, this probably makes even less sense.

Gutenberg 10.9 takes a step towards clearing up this confusion for end users. The old Query Loop block is now called Post Template. It’s a much more accurate description of what he does. It is the “model” that generates individual messages. It has all the things you see, such as post content or snippet, featured image, tags, categories, etc. This model is of course customizable via the block editor.

While this is a step towards a less complex user experience, it’s still not quite what it needs to be. The Query block has been renamed Query Loop. This is where the last problem lies. The terminology may not yet be confused.

The goal is to expose users to a variant of this block called Posts List. It already exists, but query terminology still appears when using it. There is an open ticket to resolve this issue.

The main victory of this update is the revised text in the sidebar of the Query Loop block. “The query block is a powerful and complex block,” said Matias Ventura, lead developer at Gutenberg, in a GitHub post. “It can be intimidated for users without proper guidance. We can use this block as an opportunity to explain some of the underlying concepts of WordPress software in a more didactic way.

More advanced options, such as URL inheritance and post types to include, now have longer descriptions. Each should guide the user through features that have been around for a long time in the developer world.

If you are a theme author and have already built with these two blocks, don’t worry about breaking everything when updating. The Query block has simply been renamed to “Query Loop” in the text intended for the user. Under the hood, it’s always the same. The old Query Loop block has been literally renamed to Post Template (core/post-template block name). It is backward compatible. However, you must update all calls made to the wp:query-loop block at wp:post-template.

Expand and collapse nested list view blocks

List view in the post editor, showing expanded and collapsed blocks with nested internal blocks.
List view with collapsed nested blocks.

The development team introduced expand / collapse functionality for the editor list view. Once the panel is open, users should now see arrow icons next to each item with nested blocks. Closing one or more of them makes it easier to see all or more higher level blocks at once.

The downside is that the open / closed state is lost after the list view is closed. If I had one request it would be to store this data when editing the post. This would improve the user experience with longer documents, especially when switching between browsing and editing.

This update, along with the persistent behavior of the list view in Gutenberg 10.7, made for a much more complete browsing experience.

Rich URL Previews

The editor will now show a preview of the website in the linker pop-up window. This feature only works for links in rich text context, such as in Paragraph, Title, and List blocks. The preview also only appears after the link is defined and clicked, not the first time you type it.

If available, the pop-up preview displays the site icon, title, image, and description.

“However, in the near future, we plan to expand this to provide internal URL overviews and roll out support in more areas of the software,” George Mamadashvili wrote in the Gutenberg 10.9 announcement post.

Granted, I wasn’t excited to add this feature. It felt like unnecessary bloat when more pressing issues were on the table. However, over the past day I enjoyed the quick insights when double checking links in posts.

Leave A Reply

Your email address will not be published.