Creative. Development. Hiking.

I wanted to use Advanced Custom Fields with amberpetersen.com, which is using a block theme. But I need to change my approach since block themes do not use template php files. The two specific instances I needed are re-usable blocks for hero images and galleries. (The gallery block is coming soon to the site, not quite production ready.)

Advanced Custom Fields and my Custom Headers

Firstly, I incorporated the custom headers by hard coding them, which was not my permanent solution. Each page has a different headline and background image and I wanted them editable without changing code. So, I activated my ACF Pro plugin and researched how to use it with the new platform. Out of my research, I learned that I can register the blocks through the functions.php file, set up the custom field in the CMS, style and use. Below is the example code snippet I used for registering my hero block.

/* Register ACF Blocks */
function xyz_register_acf_gutenberg_blocks() {
	if ( function_exists( 'acf_register_block' ) ) {
		// Register the hero block.
		acf_register_block(array(
			'name'            => 'hero',
			'title'           => __( 'Hero', 'xyz' ),
			'description'     => __( 'A hero block.', 'xyz' ),
			'render_template' => get_template_directory() . '/template-parts/gutenberg/hero.php',
			'category'        => 'layout',
			'icon'            => 'slides',
			'mode'            => 'preview',
			'keywords'        => array( 'hero', 'slider' ),
		));
	}
}
add_action( 'acf/init', 'xyz_register_acf_gutenberg_blocks' );

Next, I created a custom field and gave it all the options I needed in my headers: logo, headline and background image. The steps are the same except for one setting, the Location. Now, Block is an option, it connects to what I’ve registered in the functions file. With that set, it’s an available block on my pages.

ACF and Custom Gallery Blocks

For my next project, I’m working on a custom gallery block as I’m not excited about the gallery block functionality on the CMS-side. I would prefer it to be in one block, instead of stacking images on the page. I also want to add more functions to it as well, lightbox or slider, I haven’t determined yet what I’d like yet. Stay tuned!

Have you used ACF on any of your latest projects and have other ideas on its use? Please drop a comment below or reach out to me directly through this form.