"blockGap" in theme.json seems to be a boolean Property — How to create real gap between blocks: both backend

In theme.json settings undre version:3,

"spacing": {
  "blockGap": true
},

is boolean, any efforts to make it set like:

"spacing": {
  "blockGap": "2rem"
},

generates warning in VS Code —

Incorrect type. Expected "boolean". Enables --wp--style--block-gap to be generated from styles.spacing.blockGap.

A value of null instead of false further disables layout styles from being generated.

What approach should I follow to ensure that all gutenberg blocks in backend/frontend should have certain gaps.

In theme.json settings undre version:3,

"spacing": {
  "blockGap": true
},

is boolean, any efforts to make it set like:

"spacing": {
  "blockGap": "2rem"
},

generates warning in VS Code —

Incorrect type. Expected "boolean". Enables --wp--style--block-gap to be generated from styles.spacing.blockGap.

A value of null instead of false further disables layout styles from being generated.

What approach should I follow to ensure that all gutenberg blocks in backend/frontend should have certain gaps.

• block-editor
• block-themes

Share Improve this question asked Apr 28 at 3:09 WordCentWordCent 1,96466 gold badges3434 silver badges6060 bronze badges 1

• we can do it through CSS, but I belive it must be doable through theme.json – WordCent Commented Apr 28 at 3:10

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You can define a default for BlockGap in the "styles" section of your theme.json: styles.spacing.blockGap

{
  ...
  "settings": {
     "spacing": {
       "blockGap": true //turns overall blockGap support in the editor on and off
     },
  },
  "styles": {
     "spacing": {
       "blockGap": "2rem" // sets the default style for the blockGap property
     },
  },
  ...
}