Creating portable ACF Blocks

For the last couple of months in my day job, I’ve been working some significant changes to Advanced Custom Fields block editor integration system, ACF Blocks.

ACF Blocks was first introduced to support WordPress 5.0’s initial implementation of the block editor back in ACF PRO 5.8, and as you can imagine that looked and worked very differently to the current way of working with blocks in WordPress 6.0.

Due to that legacy of needing to support so much backwards compatible code, ACF Blocks could never really keep up with the pace of development in the block editor. For this reason, the upcoming release of ACF 6.0 introduces block version. This allows users opt in to new versions of ACF Blocks, which can track new version of WordPress to let us implement all the new cool stuff.

I’m not going to go into detail here on all the changes coming, as we’ve got a public preview of ACF 6.0’s block changes over on GitHub — Go check that out read all the changes there.

Anyway, over on that thread this week, Bill Erickson asked if ACF could introduce a way to automatically load fields for a block from the block folder, meaning you’d have truly portable blocks.

One of my favourite things about the ACF Blocks rewrite in 6.0 is that ACF Blocks is now much closer to WordPress, in that we’re using WordPress’s own filters and hooks to extend in ACF Blocks. This means you get full support for everything WordPress introduces that doesn’t require block specific JS implementation, and because we’re using those filters and actions – you get the chance to add your own handlers along the way to extend things.

Specifically, this means because blocks can be registered earlier than acf/init, you can do things along the way, such as adding a handler to check every ACF registered block to see if the block folder also contains an acf-fields.json file – and ask ACF to register to those fields before acf/init, so they’re available to the block.

Here’s an example of how to do that:

add_action( 'acf/include_fields', 'add_block_fields' );
function add_block_fields() {
	// Loop over each ACF block.
	foreach ( acf_get_block_types() as $block ) {
		if ( isset( $block['path'] ) ) {
			$path = $block['path'] . '/acf-fields.json';
			if ( file_exists( $path ) && ! empty( $block['name'] ) ) {
				// Need to load this block.
				$json = json_decode( file_get_contents( $block['path'] . '/acf-fields.json' ), true );

				// Make sure the location for this field group is set to this block.
				$json['location'] = array(
					array(
						array(
							'param'    => 'block',
							'operator' => '==',
							'value'    => $block['name'],
						),
					),
				);
				$json['local']       = 'json';
				$json['local_file']  = $path;
				acf_add_local_field_group( $json );
			}
		}
	}
}

In my example here, we’re using a slightly customised version of an ACF JSON export that strips away the array at the top level, to just contain one field group, and because we know all the information about the block inside the load, we can dynamically inject the ACF Field Group location rules to ensure it’s displayed on the block.

If you want to see a fully working example of this, in a working “ACF Block as a plugin”, I’ve thrown up a second blog post today that walks you through that: Creating a portable “Slider” ACF Block


Comments

18 responses to “Creating portable ACF Blocks”

  1. helloI really like your writing so a lot share we keep up a correspondence extra approximately your post on AOL I need an expert in this house to unravel my problem May be that is you Taking a look ahead to see you

  2. Normally I do not read article on blogs however I would like to say that this writeup very forced me to try and do so Your writing style has been amazed me Thanks quite great post

  3. I’ve been following your blog for some time now, and I’m consistently blown away by the quality of your content. Your ability to tackle complex topics with ease is truly admirable.

  4. Your writing is like a breath of fresh air in the often stale world of online content. Your unique perspective and engaging style set you apart from the crowd. Thank you for sharing your talents with us.

  5. Wow superb blog layout How long have you been blogging for you make blogging look easy The overall look of your site is magnificent as well as the content

  6. Ive read several just right stuff here Certainly price bookmarking for revisiting I wonder how a lot effort you place to create this kind of great informative website

  7. I loved as much as you will receive carried out right here The sketch is tasteful your authored subject matter stylish nonetheless you command get got an edginess over that you wish be delivering the following unwell unquestionably come further formerly again as exactly the same nearly very often inside case you shield this hike

  8. I just wanted to express my gratitude for the valuable insights you provide through your blog. Your expertise shines through in every word, and I’m grateful for the opportunity to learn from you.

  9. Fantastic site Lots of helpful information here I am sending it to some friends ans additionally sharing in delicious And of course thanks for your effort

  10. Looking to make informed decisions based on comprehensive data? Explore Iraq Business News for access to valuable statistics, industry reports, and trend analyses tailored for business leaders

  11. Normally I do not read article on blogs however I would like to say that this writeup very forced me to try and do so Your writing style has been amazed me Thanks quite great post

  12. Thank you for the auspicious writeup It in fact was a amusement account it Look advanced to more added agreeable from you By the way how could we communicate

  13. I loved as much as you will receive carried out right here The sketch is attractive your authored material stylish nonetheless you command get got an impatience over that you wish be delivering the following unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike

  14. Every time I visit your website, I’m greeted with thought-provoking content and impeccable writing. You truly have a gift for articulating complex ideas in a clear and engaging manner.

  15. I loved as much as youll receive carried out right here The sketch is attractive your authored material stylish nonetheless you command get bought an nervousness over that you wish be delivering the following unwell unquestionably come more formerly again as exactly the same nearly a lot often inside case you shield this hike

  16. Usually I do not read article on blogs however I would like to say that this writeup very compelled me to take a look at and do so Your writing taste has been amazed me Thanks quite nice post

  17. Fantastic site Lots of helpful information here I am sending it to some friends ans additionally sharing in delicious And of course thanks for your effort

  18. I was recommended this website by my cousin I am not sure whether this post is written by him as nobody else know such detailed about my difficulty You are wonderful Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *