CHECKING STATUS
I AM LISTENING TO
|

Advanced Custom Fields – Free Your Gutenberg Blocks Data

5. February 2019
.SHARE

Table of Contents

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'] );

}

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 );
}
}

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.

Let’s Talk!

Looking for a reliable partner to bring your project to the next level? Whether it’s development, design, security, or ongoing support—I’d love to chat and see how I can help.

Get in touch,
and let’s create something amazing together!

RELATED POSTS

Quick Answer: Modern developers have a rich ecosystem of dummy data tools — from classic Lorem Ipsum text generators and Lorem Picsum image placeholders to powerful libraries like @faker-js/faker and Falso, plus self-hosted Docker mock API servers like Mockoon, Smocker, and JSON Server. Let’s be honest — every developer has been there. You’re building a […]

Want to create stunning 360° virtual tours without dropping hundreds on commercial software like Ipanorama 360? You’re in luck! The open-source JavaScript ecosystem has some seriously impressive options that’ll make your virtual tours look professional without costing a dime. Whether you’re building real estate walkthroughs, museum exhibitions, hotel showcases, or just want to display immersive […]

So here’s the thing — I stream with portrait NDI sources on a landscape canvas, and zooming in on a specific part of the frame in real time has always been a pain. You either bake it into the scene or do awkward hotkey gymnastics. I wanted something more live, more intuitive, more point-and-shoot. So […]

Alexander

I am a full-stack developer. My expertise include:

  • Server, Network and Hosting Environments
  • Data Modeling / Import / Export
  • Business Logic
  • API Layer / Action layer / MVC
  • User Interfaces
  • User Experience
  • Understand what the customer and the business needs


I have a deep passion for programming, design, and server architecture—each of these fuels my creativity, and I wouldn’t feel complete without them.

With a broad range of interests, I’m always exploring new technologies and expanding my knowledge wherever needed. The tech world evolves rapidly, and I love staying ahead by embracing the latest innovations.

Beyond technology, I value peace and surround myself with like-minded individuals.

I firmly believe in the principle: Help others, and help will find its way back to you when you need it.