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

[tellthemachines]

So the problem here is that block spacing currently depends on layout to work. Rather than changing that by making it work with the custom layout solution used in Post Template, it would be better for UI consistency to refactor Post Template to use the actual layout support. As it happens, I have a WIP in #49050 that does just that!

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).

I've updated #49050 to add block spacing to Post Template. The main question we need to work out now is where should Post Template layout controls display? That draft puts them in Query as that's where they are currently, but it's a bit weird to have the spacing setting on one block and the layout settings on another.

A related question is: do we really need layout controls for the Query block itself? Given Post Template is its only child, it would be less confusing if Post Template had all the layout/style settings, leaving Query to manage only the post loop logic. I realise it might be tricky back-compat-wise to remove layout from Query, but it's worth asking the question nevertheless.

[andrewserong]

A related question is: do we really need layout controls for the Query block itself? Given Post Template is its only child, it would be less confusing if Post Template had all the layout/style settings, leaving Query to manage only the post loop logic.

Another case for layout controls on the Query block is to be able to adjust spacing between the Post Template block and Pagination blocks when present. So, it could be valuable to have layout at Query level that isn't passed down to the Post Template block (so that it could be either constrained or vertical flex?) and then have the Post Template block have its own layout (e.g. either flow or grid)?

Unfortunately, that's still probably a bit confusing from a user perspective as there's two different levels of layout / spacing to consider when updating a Query Loop and Post Template block 🤔

[phil-sola]

This made me chuckle this morning reading @richtabor's comment above and screenshare of the typography setting changing the blockGap. It actually works as well so please do not remove this bug without first adding an actual control to adjust blockGap for this block.

As Rich has already said above, it makes for horrible designs across the site when you cannot use consistent blockGap spacing across the site. It completely ruins a page when you see the post template block on the front end.

Any ideas or news on when this may be coming?

According to this tracker all columns for the Post Template block are empty

[tellthemachines]

I've updated the description in #49050 and marked it ready for review. I'd love some feedback on the approach, in particular two questions:

• Should the grid/list layout control live in Query loop now that we have the block spacing controls in Post Template?
• Is it better to change the grid controls in Query/Post Template to set minimum column width (so the layout is responsive), or to preserve the current "number of columns" approach?

[mtias]

I feel we should consolidate all the layout and visual tools int he Post Template block and keep Query just for the query.

[richtabor]

I feel we should consolidate all the layout and visual tools int he Post Template block and keep Query just for the query.

Yes. Query is the logic behind the presentation of the Post Template block.

[tellthemachines]

Thanks for the feedback folks! #49050 has been updated to move the layout controls into the Post Template block (List/Grid toggle in the block sidebar, and controls for each layout type in the Layout sidebar panel).