Post Template Block: Add blockGap support

[iamtakashi]

I wanted to make a simple pattern with a Query Loop block and separators, and this was what I wanted to make.

But this is what I can do best at the moment because there is no way to specify the gap (top margin) applied to each list element .wp-block-post.

We can remove the gap in themes.json, but obviously, that would be site-wide, and it'd be great if we could change the gap in the editor.

[annezazu]

Cross connecting to this work to address current gaps: #43243 Looks like this functionality is currently TBD. @aaronrobertshaw as a heads up for a great example to think of when considering whether to add block gap to the query loop.

[aaronrobertshaw]

Thanks for the ping.

We are looking to add all block supports to all blocks unless there is a good reason not to. At a quick glance, I don't see any reason we can't adopt the spacing block supports here.

In this particular case, I think if we opt into block gap, padding, and margin support on the Post Template block itself, that might get us to the desired outcome.

Here's a quick video after opting in as suggested above. It needs more testing but I'll aim to put up a PR for it in the next couple of days.

Screen.Recording.2022-10-13.at.3.40.58.pm.mp4

[andrewserong]

I believe this one could also be related to the Post Template block (where the gap occurs), which will need to be refactored slightly to be able to support blockGap. Here's an existing issue for the Post Template block: #44557

[aaronrobertshaw]

Appreciate the extra background and issue for the Post Template block @andrewserong 👍

It does look like the best course of action is to get that refactor of the Post Template block sorted first before adding any further wrinkles to the mix.

I've added a link to #43243 under "Known Issues" on the spacing design tools tracking issue. Feel free to move it to a better location there if you have better ideas 🙂

[andrewserong]

Perfect, thanks @aaronrobertshaw, I think that covers it from both directions now 👍

[richtabor]

Yea I agree that we should add block gap/spacing to the post template block, instead of the query loop itself (simply because there are so many controls already a part of the query loop).

One can change the gutters in the gallery/columns blocks, but not here — making for inconsistent full page designs when adding a grid of blog posts to the page.

Although, for some reason, there's a typography font-size control in the Post Template block - which changes the blog gap. Probably a separate issue, but I'm not sure if Typography controls should exist here, where the text within it all have the controls as well.

CleanShot.2022-11-17.at.10.06.06.mp4