Home Forums ACF PRO ACF Blocks: Using "supports" in block.json, how to get custom style attribute?


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.

  • Awesome… this looks like exactly what I need! Thanks!

  • 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?

  • Did you manage to solve it? I don’t see the styles attributes either.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.