Block: Post Template: Allow setting up custom gap

[webmandesign]

What problem does this address?

It would be great if we could set up custom gap between Post Template items (entries, posts).

Currently it is hard coded in CSS to 1.25em (here and here) and there is no way to tweak this other than with custom CSS code.

What is your proposed solution?

Maybe allow option to set up spacing.blockGap in editor?

[tomdevisser]

This would have to be added to "supports" in block.json, currently spacing only has margin and padding options.

I think the question here should be, would block gap be beneficial in multiple core blocks or is it an edge case? If it has use-cases in multiple core blocks then it would be an interesting idea to give this priority, otherwise other options might take precedence.

[webmandesign]

Thanks for the input.

I'm a theme author, so technically I'm OK if there was no option for user to set this. Less options, the better.

But as a theme author I find it unnecessarily difficult to change the spacing as of now. I am using this custom CSS currently:

:root {
	--wp--block--post-template--gap: 2em;
}

.wp-block-post-template.is-flex-container {
	gap: var(--wp--block--post-template--gap);

	@media (min-width: 600px) {
		@for $i from 2 through 6 {
			&.is-flex-container.columns-#{ $i } > li {
				width: calc( ( 100% / #{ $i } ) - var(--wp--block--post-template--gap) + ( var(--wp--block--post-template--gap) / #{ $i } ) );
			}
		}
	}
}

As you can see, I'm creating a new --wp--block--post-template--gap CSS variable for this, which makes the whole setup much easier for me. If similar approach would be implemented in Gutenberg/WordPress, I'd be happy :)

[webmandesign]

I can create a PR for this, but would like to know what is the best approach to naming similar block-specific CSS custom properties in Gutenberg/WordPress. Is there any guideline?

[andrewserong]

Thanks for opening up this issue, adding block spacing would be great! The Post Template block will need some more work to properly support block spacing, and there's an existing issue for tracking that work over in #44557.

[richtabor]

@webmandesign are you cool if we close this as a duplicate to #44899? Seems a good approach would be to refactor via #44557 and opt the block to the proper dimensions support — rather than a CSS approach.

[webmandesign]

@richtabor Sure. Sorry for duplicate issue.