Row Block: Add Axial Block Gap Support

[iamtakashi]

If I'm not missing anything obvious, the row block doesn't currently allow "unlink sides" to give different gaps for vertical and horizontal. It'd be great if the block had the axial block gap support like the Social Icons block.

For example, several post meta info is in a row block here. The gap is good for horizontally, but the same gap is too much for vertically.

If the row block has the axial block gap support, I will give much small gap vertically. Something like...

[richtabor]

I played around with it locally; I'm actually not so sure about the necessity of X and Y block gap support in the row/group blocks. Unless I'm mistaken, the only reason you'd need Y spacing in the row block, is if the blocks were set to wrap multiple lines (screenshot below) and you want a different X and Y — otherwise, the Y value would never be applied.

We'd want to tie the axial logic to whether or not the blocks are set to wrap — and I'm not sure about that.

In the case above, you could probably have a parent group block, with a row block for the author, date and categories, then the tags block after that. The parent group block gap would set the Y space, and the row block would set the X space.

[iamtakashi]

Thanks, @richtabor. The suggestion wouldn't entirely prevent the situation because the category list can also be on the second line if the viewport is small.

I think I get the hesitation to introduce an option tied to one of the layout options now behind the tab. However, the pattern with all the post meta in a row block isn't uncommon to see, and it makes sense to me to allow theme designers to fine-tune the row block with the axial block gap support.

[richtabor]

@iamtakashi Do you mind pasting the block markup you're using here? I'd like to get a sense of exactly how you're implementing this.

[iamtakashi]

@richtabor Sure. The part of the markup is like this. In the theme I'm working on, the part is inside a narrow column, but that doesn't matter for this discussion. Having a few categories and tags and narrowing the viewport would help illustrate my situation.

<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex"}} -->
<div class="wp-block-group">
	<!-- wp:post-date {"isLink":false} /-->
	<!-- wp:post-author {"showAvatar":false,"isLink":true} /-->
	<!-- wp:post-terms {"term":"category"} /-->
	<!-- wp:post-terms {"term":"post_tag"} /-->
</div>
<!-- /wp:group -->

The pattern appears with TT3 like this.

If I apply the suggestion, this will be the outcome when the viewport is narrow. Notice the category list is on the second line and the unwanted vertical gap.

[ndiego]

I have found the need for vertical blockGap in a few patterns I was experimenting with recently. But Rich is correct in that it only applies when Rows are wrapped.

[t-hamano]

This issue may be a bit complicated.

Currently, the Gallery block and Social Links block support axial block gap support, but these two blocks are defined to have only flex layout type.

However, the group block has constrained and flex layouts. For the constrained layout (default group), axial block gap should not be supported, but I think the current blockGap UI doesn't take the layout type into account.

cc @andrewserong Because we recently discussed blockGap support in #47518.

[andrewserong]

Thanks for the ping @t-hamano!

For the constrained layout (default group), axial block gap should not be supported, but I think the current blockGap UI doesn't take the layout type into account.

That's correct. The issue is further complicated a bit in that because Row and Stack are variations of Group, when we apply block spacing in global styles, we can't target a particular variation. I think one path forward would be to make both the blockGap UI and the style output aware of the layout type when supporting axial sides. That should be do-able, but it does add a little more complexity to solve the problem.

It would probably also be a good thing to implement so that axial directions can be supported for future layout types (like Grid) as yet another Group block variation. So it'd be good thing to solve for in the long-term. CC: @tellthemachines just for visibility as we've discussed the idea of a Grid layout type and the group block's variations lately.

[webmandesign]

+1 from me. (As from #53255.)

It would be awesome if this was implemented somehow. Having vertical gap control for Rows with enabled wrapping allows us applying more precise responsive design.

For example, I use a Row in my theme's header with quite generous horizontal gap, but on mobile devices I'd prefer to have much smaller vertical gap between wrapped inner blocks.

[JiveDig]

+1. Bumping this for the same reasons. When a navigation menu, post meta, etc., wraps the vertical spacing can be too much. We also often have a grid of rows/columns and want the row gap larger than the column gap.