Refine the Posts List block

[jameskoster]

The Posts List block improves the user-friendliness of the Query block in terms of discovery. But beyond that it is problematic because the underlying Query block (and all of its associated complexity) is exposed upon insertion.

1. It is confusing to click one block in the inserter, and see a totally different block(s) inserted on the canvas.
2. Features like pagination will not work correctly on a post or page – this is a feature for templates only
3. Inheriting the query from the URL is useless in this context, and the current UX feels broken

Here's a quick video highlighting these problems:

posts.list.mp4

As you can see, when the Query inherits from the URL, the front/backend does not match. Also, the pagination doesn't appear on the frontend which feels buggy. It's just a confusing experience all-round.

---

It would be interesting to extend the variation so that it retains its "Post List" name post insertion. Since pagination will not work in this context there is scope to simplify the block structure by removing the confusing Query Loop, and restricting which blocks can be inserted inside the posts list. In a similar vein the "inherit query from URL" option can be hidden in the Inspector. Even the filtering options can be simplified as we wouldn't need to ask the user to specify which post type to display.

Thinking a little further down the road, a dedicated block for displaying posts opens the door to:

• More targeted block pattern suggestions that focus on posts.
• Other post-type specific variations to improve the UX
• Hiding the Query block in the post editor altogether
• Optimising the Query block for the template editing experience rather than having to entertain a dual purpose

[jameskoster]

Here's a first take on this:

Posts.Variation.mp4

• "Posts List" renamed simply to "Posts"
• Query Loop block is hidden in the UI
• Post type selector is removed
• "Offset" and "Include sticky posts" option moved to "Advanced" panel
• Confusing "inherit query from URL" setting is hidden
• Filtering options tidied up
• Layout and ordering options tidied up (icons need some attention)

Figma prototype here.

[ntsekouras]

Also, the pagination doesn't appear on the frontend which feels buggy. It's just a confusing experience all-round.

This can also be the case for Query blocks that don't have enough posts to show. The pagination in the editor is not calculating anything and is there for positioning and styling reasons.

Related to that would be: #30369 and #32230.

This is indeed challenging because the inherit option set to true is sensible as a default for template editing, while set to false is sensible default for single post/page editing. There is also technical challenges with innerBlocks like:

Note: A single block can only contain one InnerBlock component.

[jameskoster]

This can also be the case for Query blocks that don't have enough posts to show. The pagination in the editor is not calculating anything and is there for positioning and styling reasons.

Ah yes, I think that's a separate issue. My point here is that the pagination will never display anything on the frontend in this particular scenario. So it doesn't make much sense for that block to even be available for insertion.

[jasmussen]

Coming back to this one, as an excercise I used Figma components to consider an updated "Latest Posts" inspector:

It's definitely challenged with complexity and could use a lot of work. But there might also be reusable ingredients from the above, and in case it inspires anyone, here's the figma.

[jameskoster]

Hey @jasmussen, just clarifying that this issue is focussed on the Posts List block – a Query variant. Latest Posts is something different – an evolution of an old widget iirc.

That said, now I'm wondering if they should be one and the same.

[jasmussen]

Yep, the idea was that the inspectors could at least be similar if not the same, as there's presumably going to be a great deal of overlap.

[jameskoster]

I suppose it will depend on whether we leverage the Query block for Latest Posts. If we do, then a great deal of these options can be removed in favor of the child blocks inside Post Template.

[jameskoster]

Depending on how much control over the query we want to offer, we might provide a 'query builder' interface – based on design tools UX patterns – that handles all manner of filters:

[carolinan]

@jameskoster Can you help me by clarifying in what way the query pagination does not work on a post or page? It is working in my test.

If you are editing a page that you then set as a static home page, it also makes a lot of sense to have a query pagination.

[jameskoster]

Looks like it got fixed :)