Automattic / Automattic/block-experiments
Themes that opt into block-gap will not have proper spacing between items
- Dominant language
- JavaScript
- Stars
- 131
- Forks
- 18
- PR merge metrics
- No merged PRs in 30d
Description
Themes can opt into a a block spacing property, a `blockGap` in theme.json. This property spaces out blocks vertically using a simpler heuristic that's easier to adjust than margins, as it doesn't have to account for any first-child/last-child extra margins.
It works by first setting the top and bottom margins of all blocks in a container to 0. Then it applies a top margin on block number n+1, like so:

This rule is not applied inside the layout grid container:

It appears that the top margin is applied inside containers using a new named mechanism. Here's the rule for groups:

So it seems like we need to look into how layout grid can opt into those rules.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by tracing the layout grid container and comparing its spacing behavior with the named layout rules used by groups. Confirm where block-gap spacing is applied, then verify that consecutive items in a grid container receive the expected spacing without unwanted first- or last-child margins.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100