Why are spacing options not appearing for my ACF block?

• nickpish

• January 19, 2024 at 6:59 pm

I followed Damon Cook’s extremely helpful tutorial here on creating an ACF slider block w/ Swiper. One thing I cannot figure out is how to get some core block features to appear in the editor, such as spacing, even though I’ve included it in the supports section of the block.json file. I’m attaching the full slider block.json file below- I can get the align, anchor and class name options to appear in the editor sidebar, but I don’t see any of the spacing options. Anyone know what might be going on here? Note that I am not using a theme.json file, so I’m not sure if that’s a factor. On a related note, I’m also not seeing any custom dimensions in the sidebar- in this case, an option for min-height (the “Dimensions” section doesn’t appear at all).

{
	"name": "acf/slider",
	"apiVersion": 2,
	"title": "Slider",
	"description": "Display a slider",
	"category": "media",
	"icon": "slides",
	"keywords": [
		"slider",
		"slideshow",
		"carousel"
	],
	"acf": {
		"mode": "preview",
		"renderTemplate": "template.php"
	},
	"attributes": {
		"align": {
			"type": "string",
			"default": "full"
		},
		"style": {
			"type": "object",
			"default": {
				"dimensions": {
					"minHeight": "30vh"
				}
			}
		}
	},
	"supports": {
		"color": true,
		"align": [
			"full",
			"wide"
		],
		"fullHeight": true,
		"spacing": {
			"margin": true,
			"padding": true,
			"blockGap": true
		},
		"anchor": true,
		"className": true,
		"dimensions": {
			"minHeight": true
		},
		"mode": false
	},
	"example": {
		"attributes": {
			"align": {
				"type": "string",
				"default": "full"
			}
		},
		"innerBlocks": [
			{
				"name": "acf/slide",
				"attributes": {
					"className": "swiper-slide",
					"content": "Slide #1"
				}
			},
			{
				"name": "acf/slide",
				"attributes": {
					"className": "swiper-slide",
					"content": "Slide #2"
				}
			}
		]
	},
	"editorScript": [
		"swiper-core",
		"slider-init-editor"
	],
	"viewScript": [
		"swiper-core",
		"slider-init-front"
	],
	"styles": [
		{
			"name": "default",
			"label": "Default",
			"isDefault": true
		},
		{
			"name": "complex",
			"label": "Complex"
		}
	]
}

• nickpish

• January 22, 2024 at 12:39 pm

For anyone who might land on this thread, I managed to figure this out: I initially thought this issue might be related to using ACF blocks (as opposed to native blocks) but it actually derives from the theme, specifically the need for a theme.json file. I created a theme.json file at the root of my theme folder, added the following settings, and those options (spacing, dimensions, etc.) are now appearing:

{
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
            "contentSize": "1170px",
            "wideSize": "1440px"
        },
		"spacing": {
			"margin": true,
			"padding": true
		}
	}
}

• jez

• June 10, 2024 at 10:19 am

This works however, not if you don’t want margin/padding on for other blocks. The above method will turn it on for all blocks. You’ll have to assign your acf block within the theme.json and give it custom elements like so…

"settings": {
	
		"blocks": {
			
			"acf/acf-block-name": {
				"spacing": {
					"margin": true
					
				}
			},
		
		
			
		}
	},

This will bring up the detail just for your acf block.

However, I am not having the problem that the margin setting I’ve chosen is just adding the number to the inline style and no measurement i/e 20px it just adding margin-top: 20;