Tutorial on spacing in block themes

[bph]

Discussed in https://github.com/WordPress/developer-blog-content/discussions/68

^{Originally posted by **justintadlock** January 30, 2023} Currently, we have some pretty good [docs for spacing](https://developer.wordpress.org/themes/advanced-topics/theme-json/#spacing) in the theme handbook, which serves as a solid foundation on how to implement spacing in block themes. However, like most docs, the sheer number of options presented doesn't present a look at how to solve each problem that developers might come across. On a recent outreach call, for example, I had a developer who was having trouble with spacing on specific blocks being overwritten by the global `blockGap`. This led them to disabling `blockGap` altogether and implementing CSS-based spacing instead. The goal is to move them entirely over to `theme.json` if possible. These are the sort of real-world problems that pop up and should be explored in a more tutorial-like piece of content. So, I'm opening this up for discussion. Perhaps there are other spacing-specific things that need to be covered for developers?? I envision this post covering all of the existing spacing options (and when to use them) for theme developers and also covering any gotchas, tips, and tricks.

[justintadlock]

Beginning work in a Google Doc: https://docs.google.com/document/d/1rBwagY1gfc_MW5qnFwRZlYc3BhZNuraApYKGptBZEag/edit#

This is nowhere near a first draft yet, so it's not ready for review. 😄 Just updating on progress.

[justintadlock]

The tutorial is now officially ready for review: https://docs.google.com/document/d/1rBwagY1gfc_MW5qnFwRZlYc3BhZNuraApYKGptBZEag/edit#

[bph]

I gave it a first read and only offered minimal suggestions. This is a very deep dive into spacing. I also like that you provided more clarification around the spacer block and provided some great use case assistance.

The section around the Spacer Block would make a fabulous separate blog post by itself. I am a bit sad that the insights gets buried so deep into the post about spacing given that the Spacer block is one of the most used blocks in the ecosystem. (Rank #5 among top 10 used)

[justintadlock]

First review done by @marybaum. :tada:

Second review done by @bph. 💯

I almost feel like we could use a stage between "Needs 2nd Review" and "Ready to Publish" like "Final Editing" (or something).

The section around the Spacer Block would make a fabulous separate blog post by itself. I am a bit sad that the insights gets buried so deep into the post about spacing given that the Spacer block is one of the most used blocks in the ecosystem. (Rank #5 among top 10 used)

On the one hand, this post is "everything" you need to know about spacing. On the other, it is something that could be a standalone post. And, that's definitely something I gave a lot of thought to.

With that said, I'd prefer not to highlight the Spacer block too much. I generally consider it poor practice to stick <div> elements into document structure for no purpose other than create space. That's what CSS is for. The block is there and in use, but I'd hope for developers to shy away from it, preferring to use the margin/padding/gap options when building themes. This is also why it's the last section of the post. With any luck, by the time they get to that section, they realize they don't need it.

[bph]

Thanks for sharing your thoughts on the Spacer Block. I favor highlighting best practices. With that in mind, I agree with you that it is better to leave it all together.

As for the additional state in the process, I was thinking that a writer would process feedback before moving the issue to 'ready to publish'. I also can see that I might have made one too many assumptions, though.

[justintadlock]

As for the additional state in the process, I was thinking that a writer would process feedback before moving the issue to 'ready to publish'. I also can see that I might have made one too many assumptions, though.

There's also the possibility that a second review is already done while the post is still sitting under "Needs 2nd review." Another step might avoid a situation where third reviewer pops in thinking a second review is still needed.

I don't know if it's something we need to change yet. Just some thoughts on going through the process a few times and bumping into this some. Your clarification helps. 👍

[justintadlock]

Note: this post still needs a little more work before publishing on Wednesday (Mar 22). I want to do another editing pass and make sure formatting is correct from the migration from Google Docs. Also, image alt text needs to be added.

[bph]

Your pre-publish checklist, when you need it:

• [x] Post Title in Sentence case
• [x] Are Category or Categories selected?
• [x] All images with alt-text?
• [x] Are Tags identifies?
• [ ] Is there an Excerpt?
• [x] Props added?

[justintadlock]

Published: https://developer.wordpress.org/news/2023/03/everything-you-need-to-know-about-spacing-in-block-themes/