Display Posts as Inline List

[iamtakashi]

Related: #25501 #25502 #25503

This particular example is a kind of "out-there" style, but we see posts displayed as an inline list.

To be clear, I'm not advocating all these examples as something the core Gutenberg needs to support 😄 It might make sense to be a third-party plugin. I just wanted to surface those examples to raise awareness of various use cases that the user might want to achieve with a query.

[mtias]

I think what's interesting here is seeing how easy it'd be for a third party block to author this output using as many tools from @wordpress as possible. For example, it seems the query should be managed by the main Query block, but perhaps the Loop block output is switched entirely to do this inline rendering.

[mtias]

@kjellr do you think this is achievable now with patterns?

[kjellr]

@kjellr do you think this is achievable now with patterns?

I love a Friday challenge! The answer is yes and no.

It is not possible natively yet. These are the blockers there:

• As noted in Featured Image block: Allow free-form resizing #27620, featured images have no width or height controls yet.
• Right now, blocks are all block elements that flow vertically, and there's no built-in way to change that. Allow post meta to be arranged inline #26899 is generally about that problem, but we can open another issue for it if necessary.

On the other hand, this sort of style is possible if you combine the pattern with block styles:

This required some pretty aggressive CSS though. Blocks in the editor come with a lot of extra divs that serve various purposes, and I had to force those all to be display: inline. It mostly worked, but it didn't work on appenders, so I ended up hiding those. I also had to force some specific margins on each block. The code's over here in case anyone wants to give it a look: PHP / CSS.

Using block styles is interesting as a proof-of-concept, but it obviously bars this from working in the upcoming Pattern Library. A native solution would be better. We should definitely give the featured image block its own size controls, and I think some sort of inline solution is worth including for the scenario outlined in #26899. Once we figure those out, I think this should work without any extra hacking.

[mtias]

It seems like inner-blocks should have a display option for "inline". Though I have no clue how much mayhem that may unleash on the block wrappers :) cc @youknowriad @ellatrix

[youknowriad]

This definitely seems like another "type" for the layout prop of "InnerBlocks"

[ellatrix]

Why does inner blocks have to be concerned with "inline"? Inner blocks itself doesn't render any divs, it's up to the block to style all this.

[mkaz]

The container block needs to be set to inline so all the display:block elements inside it can flow.

I'm not sure it should be done with InnerBlocks, my thought is it should be a layout prop for the Group block, (or maybe a variant). The issue I see with InnerBlocks is that each block will be required to implement to set that prop, a user can't insert an InnerBlock when building a block theme.

Here is the case I'm thinking: trying to put an icon in front of the Post Categories block, we have an icon block and the category block, I'd like to piece them together as two inline blocks together.

Here's an example with the post meta from TwentyNineteen:

[mkaz]

As in anything, there are ticket precedence, same inline issues raised in #26899 and #24473

[jasmussen]

I created #31418 to suggest dimension controls on the Featured Image block. While it wouldn't necessarily enable the inline display discussed here, it would likely complement it nicely.