This is with the Gutenberg plugin installed the new feature allows presets for Margins.
[“spacing”]=> array(1) { [“margin”]=> array(2) { [“top”]=> string(21) “var:preset|spacing|80” [“bottom”]=> string(21) “var:preset|spacing|80”
The margin currently returns a string that is 21 characters and in a fun format. I can make a filter or check the variable for just numbers and so on. My question isn’t how I can get what I need from the string…
My question is, is this going to be changing once that preset goes live for Gutenberg to all websites and does ACF have a better way of handling it in the pipeline?
I do have ACF Pro.
I am using Blocks so it returns the $block variable.
This is specifically found when block.json has
"supports": {
"spacing": {
"margin": true
}
}
So the margin is set to True and you obtain this margin by calling
$block['style']['spacing']['margin']['bottom']
Which is another question in itself, are there any plans to change this array location in the future? I can ask another topic about this.
This reply has been marked as private.
Hello, I am also wondering the best approach to using these new spacing presets with ACF blocks. Does anyone have a solution?
Agreed that the status of this would be great to know. There are workarounds to this output of course but it doesn’t seem ideal, and I wouldn’t want future updates to break those workarounds…
Wondering the same. This seems to affect all block editor values, such as
$block['style']['elements']['link']['color']['text'] that now have values like var:preset|color|blue.
You can use get_block_wrapper_attributes() in your ACF blocks and it converts these.
the last response here is not helpful.
Has anyone a proper solution for this ?
At the moment I use
$padding_top_string = $block['style']['spacing']['padding']['top'];
$padding_top_value = (int) substr($padding_top_string, strrpos($padding_top_string, '|') + 1);
this seems much to dirty…
When I do get_block_wrapper_attributes() it only gets the classes and not the styles. I know styles are being set because I can see values for $block['style']['spacing']['padding']['top']. Any clue why my styles wouldn’t be showing?
Commenting here just in case there are others who may need this solution. The function that is most helpful here is wp_style_engine_get_styles. When used in your block rendering script, you can call this function to produce the inline styles needed to render your block correctly.
I made a little utility function for doing so and generally include it in all of the ACF blocks we’re building. Hope it helps. =)
/**
* Given an $block object from an ACF block for gutenberg:
* This will return a string of CSS inline values suitable for
* inclusion in the block output in PHP.
*
* @param mixed $block
* @return $style as string
*/
function acf_blocks_calculate_inline_styles( $block ) {
if ( ! empty( $block['style'] ) ) {
$style_engine = wp_style_engine_get_styles( $block['style'] );
$style = $style_engine['css'];
} else {
$style = '';
}
return $style;
// echo '<div style="' . $style . '">Block content</div>';
}
SteveRyan’s approach does the trick beautifully.
