Advanced Custom Fields - Free Your Gutenberg Blocks Data

Updated 25.03. : Some function names changed in the latest beta version.

IN BETA

ACF 5.8 Beta introduced an easy way to create your custom Gutenberg blocks. I am already using it heavily for a current project, to easily organize content and media assets.

Really powerful, when combined with Timber as well, which has been the foundation of many of my themes for years now ;)

ORGANIZE YOURSELF

Organizing data using ACF is nice, but sometimes you seek access to that saved block data directly. I hate it when I am confined to boundaries and the data flow is restricted or hidden. I need things to be accessible to choose the creative flow myself.

SIMPLE EXAMPLE

// Parse blocks from post content
$blocks  = parse_blocks($your_post_content);
$collect = array();

// Loop through the blocks
foreach($blocks as $block){

//Setup global block post data context
// before: acf_setup_postdata
acf_setup_meta( $block['attrs']['data'], $block['attrs']['id'], true );

// Get ACF fields
$fields = get_fields();

// I am using this to organize my assets.
// Each block of mine has a unique identifier as its first field:
// $uid = $block['attrs']['data'][array_keys($block['attrs']['data'])[0]]
// I would do:
// $collect[$uid] = $fields; 

// Collection of fields using the block id. 
$collect[$block['attrs']['id']] = $fields;

// Restore global context
// before: acf_reset_postdata
acf_reset_meta( $block['attrs']['id'] );

}

// Parse blocks from post content

$blocks = parse_blocks($your_post_content);

$collect = array();

// Loop through the blocks

foreach($blocks as $block){

//Setup global block post data context

// before: acf_setup_postdata

acf_setup_meta( $block['attrs']['data'], $block['attrs']['id'], true );

// Get ACF fields

$fields = get_fields();

// I am using this to organize my assets.

// Each block of mine has a unique identifier as its first field:

// $uid = $block['attrs']['data'][array_keys($block['attrs']['data'])[0]]

// I would do:

// $collect[$uid] = $fields;

// Collection of fields using the block id.

$collect[$block['attrs']['id']] = $fields;

// Restore global context

// before: acf_reset_postdata

acf_reset_meta( $block['attrs']['id'] );

}

There you go, enjoy some free block data :)

I was a big skeptic, when it comes to WordPress and the new Gutenberg editor, but combined with ACF + Timber its pure magic :) Looking forward to things to come!

Cheers
Alex

Enjoy coding …

9
Leave a Reply

newest oldest most voted

Guest

Vincent Morel

Just missing something here. Where do you find the block ID?

Author

Alex

$block[‘attrs’][‘id’] holds the ID of the block.

Regards
Alex

Thanks! I understand. Seems last update broke “acf_setup_postdata”… We’ll need to find another way…

Hi,
function names changed in the latest version.

// Setup postdata allowing get_field() to work. acf_setup_meta( $block['data'], $block['id'], true );

// Reset postdata. acf_reset_meta( $block['id'] );

The relevant reference code, can be found in pro/blocks.php

Yes thanks! I juts find out! :)

Gabor Lippert

You saved me from going crazy with this article. Thank you!!!

Glad I did, we are all crazy enough already :)
Alex

Carlos Eduardo

Great article Alex, helped me a lot!

I need to update a custom field inside a specific block. Do you know how update a field value inside that ‘acf_setup_meta’??

I tried using the ‘update_field’ function, but it saves the field on the post itself, not the block :(

Hi Carlos,
Take a look at the pro/blocks.php. Block content is saved within the post_content.
acf_parse_save_blocks & acf_parse_save_blocks_callback handle the block comment replacement.
It should be a matter of getting the current post content, replacing the target block comment and saving it again.
If I have some time tomorrow, I will take a closer look.
Cheers
Alex

Advanced Custom Fields – Free Your Gutenberg Blocks Data

IN BETA

ORGANIZE YOURSELF

SIMPLE EXAMPLE

Enjoy coding …

9
Leave a Reply

Alexander

Advanced Custom Fields – Free Your Gutenberg Blocks Data

IN BETA

ORGANIZE YOURSELF

SIMPLE EXAMPLE

Enjoy coding …

9 Leave a Reply

Alexander

9
Leave a Reply