How to create custom Gutenberg block using ACF

In this blog, we will create a beautiful custom Gutenberg block using ACF. Before starting, let’s take some outer look at act and Gutenberg.

Contents

What is ACF?

Propelled Custom Fields (ACF) is a WordPress module that gives you a lot more noteworthy control of your WordPress content, using custom post meta to advance the substance with organized information.

It permits you to construct and arrange various sorts of information handle that will show up in meta boxes when your substance editors update posts, pages, or custom post types (and considerably more).

What is Gutenberg?

Gutenberg is a fresh out-of-the-plastic new supervisor for the WordPress stage.

It will fundamentally change how you make posts, pages, items, and pretty much everything else on your site. Gutenberg will show up as a feature of WordPress 5.0. Thus, it’s imperative to find a good pace now.

It’s time to create a beautiful custom Gutenberg block

Let’s start to create our custom block without wasting much time in the introduction. I am using the default twenty-twenty theme provided by WordPress but you can also use your custom theme for the development of Gutenberg Blocks.

Files You need to look at before we started

There are two files necessary to create a custom Gutenberg block. The first is functions.php in which you will write code to register your custom block and the second is a template file that decides how your block looks like in the front end as well as backend.

Getting Started

Open your functions.php file and add the following code to register the custom block.

function my_acf_init() {
	
	// check function exists
	if( function_exists('acf_register_block') ) {
		
		// register a testimonial block
		acf_register_block(array(
		        'name'			=&gt; 'testimonial',
			'title'			=&gt; __('Testimonial'),
			'description'		=&gt; __('A custom testimonial block.'),
			'render_callback'	=&gt; 'my_acf_block_render_callback',
			'category'		=&gt; 'formatting',
			'icon'			=&gt; 'admin-comments',
			'keywords'		=&gt; array( 'testimonial', 'quote' ),
		));
	}
}

function my_acf_block_render_callback( $block ) {
	
	// convert name ("acf/testimonial") into path friendly slug ("testimonial")
	$slug = str_replace('acf/', '', $block['name']);
	
	// include a template part from within the "template-parts/block" folder
	if( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
		include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
	}
}

Now, Open your template file and write rendering code inside it. You can check it in the following path

 /template-parts/block

in my Github repo.

How to Use it?

Click on the Custom Fields menu item on the WordPress dashboard. Create a new Field group called Testimonial and add the below fields:

Title ( type: text )
Name ( type: text )
Designation ( type: text )
Image ( type: image )
Background Colour ( type: color picker )
Text Colour ( type: color picker )
Alignment ( type: select )

Add a new post and select the block called Testimonial inside the formatting category or whatever you’ve added at the time of registering the block.

Add the values from the of the above custom fields using the control panel on the right.
Now you will be able to see the content of your block template written in PHP inside the block.
You can also add the values of the custom field by clicking on the inspector control edit icon, in the block.
Your block will look like the below screenshot after following the above steps:

Let’s take a quick look at our ACF fields.

Let’s see how it look likes in the front end. Beautiful !!!! We have created our first custom block using ACF.

If you want to create a custom Gutenberg block without ACF then go through my other post: here