Home › Forums › ACF PRO › ACF Blocks: Using "supports" in block.json, how to get custom style attribute?
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.”
Try incorporating get_block_wrapper_attributes() into your ACF block’s container. It should take the values you’re setting via the controls and add the appropriate styles and classes for it.
It took me way too long to find that function and I was equally annoyed and writing overly complex custom conversion functions to work off the values as I didn’t know there was a better way.
When using get_block_wrapper_attributes()
I only get class=""
and not styles=""
. I know my styles for padding are being set properly because I get the string "var:preset|spacing|MM"
for $block['style']['spacing']['padding']['top']
and it is working properly in standard blocks. How can I get styles into my custom blocks?
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.