I’ve created a new ACF Block using the block.json approach, and I want to add in support for core Block Editor features like colors and spacing. I’ve added this code to my block.json file:
"supports": {
"align": true,
"color": true,
"dimensions": true,
"spacing": true,
"typography": true
},
So far, so good. That’s making the controls display in the Block Editor, saving the settings, etc. If I put print_r($block) into my block template PHP file, I can see that the settings are there:
[style] => Array
(
[spacing] => Array
(
[padding] => Array
(
[top] => 0
[right] => 0
[bottom] => 0
[left] => 0
)
[blockGap] => 0
[margin] => Array
(
[top] => var:preset|spacing|80
[right] => var:preset|spacing|80
[bottom] => var:preset|spacing|80
[left] => var:preset|spacing|80
)
)
)
The problem is, that’s not doing anything on the front end. I think I need either one of these, neither of which I know how to do:
1. A way to add some kind of auto-generated wrapper HTML element that automatically includes the style attribute.
2. A function that will translate that array into a style attribute string, specifically, for example, converting var:preset|spacing|80 into var(--wp--preset--spacing--80). (I could write a function myself, but I don’t want to do that if something comparable already exists, which it has to, somewhere.)
I scoured the WordPress source and I found a protected method in the WP_Theme_JSON class that does that conversion, but that’s definitely not the right way to do this.
I feel like there is either some obvious thing I’m missing, or I’m butting up against the bleeding edge of ACF Block development. I’m guessing it’s the former. Does anyone here know what I’m missing? It is getting extremely frustrating that I am spending multiple days trying to write code for the Block Editor that I could have finished in less than an hour the “old way.”
