Suite of Post Blocks

[mtias]

We currently offer a "latest posts" blocks with some configuration options which can be pretty nice for setting up homepages with some dynamic content arranged in different sort of grids and lists. There is also some ongoing work to include showing a featured image and the post excerpt as features than can toggled on the block settings.

However, it is clear such a block won't scale to offer all the flexibility that a proper post loop on a theme provides — it's not just showing elements (date, author, and so on) but also their positioning — nor the best editing experience either compared to more granular blocks.

What would be interesting is to explore a "Post" block that works as the wrapper for the post_ID context, and which contains an inner blocks area with several available child blocks:

• Post Title
• Post Author
• Post Date
• Post Excerpt
• Featured Image
• Post Content
• Categories
• Tags

This would allow displaying a "post" element in any context and with full flexibility.

wp:post { id: 1 }
    wp:post-title
    wp:featured-image
    wp:post-excerpt

Furthermore, this block can support templates, so on insertion it can offer a few defaults (just post title, post title and excerpt, featured image to the side, etc).

Starting with a single post would allow us to determine how the child blocks should be structured. By having each element be a child block, we can also expand on the configuration options much more elegantly: the date format display would be easier to connect, the excerpt can offer to customize the number of words and the trailing cutoff, the image can have specific settings, and so on.

If this proves convenient, we can then look at a more general purpose Query block that would allow to control the query parameters and then use the "post" block for display. This could be super useful for themes to build sophisticated static pages with dynamic content but full control over layout and content.

[richtabor]

Just for clarification, that screenshot is of three Post blocks using the Columns block? Or a block that adds posts based on a templateOption selection (using this Post block)? Just wrapping my head around it :)

[youknowriad]

Or a block that adds posts based on a templateOption selection (using this Post block)?

This one I think. The parent block being something like a "repeater" block.

Edit: The block can probably support both.

[mtias]

The parent block being something like a "repeater" block.

Yes, I figure we'd end up with a "Loop" container that defines and handles the query options. Inside, it would use a Post block with a specific template/layout.

That's why I think we can converge on the problem by enhancing the Latest Posts block and implementing these more granular sets of post child blocks.

[getdave]

So is the idea that this is a single block for now then later it might be combined with a post list block to provide the "item" for the list? It could also function as a stand alone block foe rendering a single post.

Practically if used within post listing, how would this block receive the post id context? Would it require the parent list block to dispatch to update the attrs of the child post blocks?

It would be great to see this come to life. Do we see the individual sub blocks (eg: post meta block) living at the top directory level a la the single column block?

[mtias]

In the context of loops this block would work rather like a template.

[luisherranz]

I love the idea of combining a Query block with Post blocks. I've seen so many custom-coded pages over the years whose only purpose was to output posts from a custom query that I'm shedding a tear right now.

Some questions:

• Have you taken a look at what the Newspack team is doing? It looks like they are working in a similar block for their theme, although it is not as flexible: https://videopress.com/v/xDLCB0QV
• Would this support pagination? If so, how would it work?
• Would it be possible to include the list of posts in the REST API response?
  (Maybe add an option to the Query block that adds a _link which works with _embed).

[mtias]

Thanks for chiming in @luisherranz

I saw that block, it bundles a lot of customization options in a single block (similar to "Latest Posts" in core), which is what I'm looking forward to exploring here as a more flexible and usable alternative.

Related: #16283

Would this support pagination? If so, how would it work?

Pagination as slideshow-style or as navigating to another URL?

[luisherranz]

Well, I was actually thinking about pagination to another URL, like /custom-list/page/2.

I know that's probably way more complex than your original idea, so it's just a thought... But it could solve a pattern that has not been easy to solve in the past: lists of posts based on custom queries.

Some examples that require code right now but could be solved with a Paginated Query block:

• Posts from some category, but excluding an author or tag.
• Posts from two categories merged together.
• Products with a discount greater than X%, ordered by the discount.
• Gadgets containing a Review block, ordered by their review score.
• Restaurants that belong to a certain city, ordered by the number of comments.

Besides, users would have much more freedom when choosing the way those posts are displayed thanks to the child blocks.

[mtias]

Oh, this would be part of work on dynamic pages that map to the template hierarchy and includes archive pagination. Those would have the concept of main query / loop or something similar, but is a bit beyond the scope of this one.

[luisherranz]

Glad to hear there are plans for that :)

[shaunandrews]

Worked up a flow for how a Post block could work in Gutenberg, using the newer block UI and taking a few liberties.

You can take the Figma prototype for a spin yourself to get a better feel for it: https://www.figma.com/proto/Lnc1Z6PLVIwGyn21a724e6/Blocks-Suite-of-Post-Blocks?node-id=47%3A0&viewport=-7295%2C-71%2C1&scaling=min-zoom

[mapk]

Post Tags block was merged, so I checked it off the list. #19580

[mapk]

Post Author block has also been merged. #19894

[youknowriad]

Going to close this issue now that we have most of these blocks. We should explore improving these blocks on specific issues.

[mtias]

It'd be great to create a pattern / variation with something similar to the original design from this issue to determine what is still missing.

[youknowriad]

So I was able to get the "content" of the screenshot above. Here are the limitations I found:

• the Post Featured Image doesn't show up on the editor, it just shows a placeholder
• I'm unable to show the list of posts as a horizontal list, the Query block always shows these as vertical lists. I believe we might want to offer different visualization options in the "Query Loop" block.
• The Post Content block is very weird. I can directly edit the content of the posts inside the loop, I'm not certain that's a great thing there.

Maybe we can make some issues based on this or consolidate into other existing issues? cc @MichaelArestad @shaunandrews

[mtias]

Let's add these to the query block milestone as well #24762 cc @ntsekouras

[ntsekouras]

The Post Content block is very weird. I can directly edit the content of the posts inside the loop, I'm not certain that's a great thing there.

Created a discussion issue here: #25394.

I'm unable to show the list of posts as a horizontal list, the Query block always shows these as vertical lists. I believe we might want to offer different visualization options in the "Query Loop" block.

Edited this issue: #24934 to include the above.

the Post Featured Image doesn't show up on the editor, it just shows a placeholder

New issue here: #25410

[iamtakashi]

I've made a few other issues related to Query Loop block and display. Some are just questions like "how might we make a design like this with the Query block", but all of them have a visual similar to the one in this issue that I anticipate users wanting to see in themes or have access to via Patterns. I have more "out there" layout ideas. If it's helpful to open issues like these I can keep doing :)

• Query Loop in Multi-column? Query Loop: More multi-column layout options #25462
• Display Posts in Carousel Display Posts in Carousel (Query Loop?) #25501
• Display Posts in Slider Display Posts in Slider (Query Loop?) #25502
• Display Posts in Sortable Table Display Posts in Sortable Table #25503
• Display Posts as Inline List Display Posts as Inline List #25505
• Post meta blocks inside sentence Post meta blocks inside sentence #25448
• Read More Button Read More Button  #25450
• Post Date Style Customization Post Date Style Customization  #25456
• Multi-column Post Excerpt Multi-column Post Excerpt #25459