Automattic / Automattic/block-experiments

Themes that opt into block-gap will not have proper spacing between items

Open
#251 1 comment 0 reactions 0 assignees View on GitHub
Bug
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:
Screenshot 2021-12-13 at 10 45 45

This rule is not applied inside the layout grid container:

Screenshot 2021-12-13 at 10 46 47

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

Screenshot 2021-12-13 at 10 49 07

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.