How to add Block Gap support to Custom Blocks in WordPress

I maintain a couple of custom blocks for the WordPress sites we build at Resknow. One of them is a Grid block, which has a Grid Item child block. The Grid Item itself it just a container for InnerBlocks. Until now, you’d have to insert a group inside a Grid Item if you wanted to adjust the gap between the inner content.

Until now, when I finally worked out how to add support for Block Gap directly on the Grid Item.

Declare Support for Block Gap in block.json

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

You need to make sure you include __experimentalDefaultControls - I’m not sure why but without it the controls don’t seem to show up.

With the above, the controls show up, but nothing happens. For Block Gap to work, you need add layout support:

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

I still don’t entirely understand what the layout property does, but it’s required for Block Gap to work and seems to be used by the Column and Group core blocks.