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 …

Extended example:

$collect = [];
$blocks = parse_blocks($your->post_content);	
		
foreach($blocks as $block){
		
	if( isset($block['attrs']['data']) && !empty($block['attrs']['data'][array_keys($block['attrs']['data'])[0]])){	
								
		acf_setup_meta( $block['attrs']['data'], $block['attrs']['id'], true );
			
		$fields = get_fields();
			
		 acf_reset_meta( $block['attrs']['id'] );
				
		$collect[$block['attrs']['data'][array_keys($block['attrs']['data'])[0]]] = array('render' 	=> 	render_block( $block ),
																				 'field' 	=>	$fields,																							
																				  'block'  	=> 	$block
																				);
	}else{
          $collect['main'] .= render_block( $block );
}
}

$collect = [];

$blocks = parse_blocks($your->post_content);

foreach($blocks as $block){

if( isset($block['attrs']['data']) && !empty($block['attrs']['data'][array_keys($block['attrs']['data'])[0]])){

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

$fields = get_fields();

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

$collect[$block['attrs']['data'][array_keys($block['attrs']['data'])[0]]] = array('render' => render_block( $block ),

'field' => $fields,

'block' => $block

);

}else{

$collect['main'] .= render_block( $block );

}

The $collect array will hold all data, including all ACF fields. You will have full access to any field, including repeater fields. The $collect[‘main’] will just collect the standard post content.

20 Comments

Oldest

Newest Most Voted

Inline Feedbacks

View all comments

Vincent Morel

1 year ago

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

Author

Alex

Reply to Vincent Morel

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

Regards
Alex

Reply to 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!!!

Reply to Gabor Lippert

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 :(

Reply to Carlos Eduardo

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

Jake

8 months ago

Hi Alex

Thanks for taking a stab at this. Don’t know why this have to be this difficult.

I’m trying to grab a field within a repeater from another block, but still on the same page.

I’m simply trying to output the titles of each field in a repeater from a different block.

How do I do that?

Thanks SO much for any assistance you can throw my way.

Reply to Jake

Hi Jake,
will whip up an example, when I have the time tomorrow.

Wow, that would be amazing. Thanks Alex

Hey Alex

Don’t mean to be pushy, but did you happen to figure out something? No worries if not.

Hey Jake,
have not forgotten about you. Had no time to do it yet, but its on my agenda. Hope to find some time today or tomorrow.
Later
Alex

Added an extended example above. I am using the same setup on a client website to pull in repeater field data.
Cheers
Alex

7 months ago

That’s very nice of you, thanks a lot.
Help a noob out, how do I make use of it?
Do I var_dump($collect) to output the array? If so, that just does array(0) { }

Have you passed in the correct post_content ?
$your->post_content is just a placeholder!

Chad

4 months ago

I understand how the basis of this works. I changed the parse_blocks to have my post info in it. BUT it is throwing an error on page:

Warning: key() expects parameter 1 to be array, null given

Any help would be appreciated.

Reply to Chad

Hi Chad,
parse_blocks parses the post content. So $post->post_content or $post[‘post_content’], depending on the way your posts or post have been queried.

Last edited 4 months ago by Alex

Advanced Custom Fields – Free Your Gutenberg Blocks Data

IN BETA

ORGANIZE YOURSELF

SIMPLE EXAMPLE

Enjoy coding …

Alexander