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 on act and Gutenberg.

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 the manner in which 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 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 before we started

There are two files necessary to create a custom Gutenberg block. first is functions.php in which you will write code to register your custom block and 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 custom block.

function my_acf_init() {
 
 // check function exists
 if( function_exists('acf_register_block') ) {
  
  // register a testimonial block
  acf_register_block(array(
          'name'   => 'testimonial',
   'title'   => __('Testimonial'),
   'description'  => __('A custom testimonial block.'),
   'render_callback' => 'my_acf_block_render_callback',
   'category'  => 'formatting',
   'icon'   => 'admin-comments',
   'keywords'  => 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.

Use

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

1. Title ( type: text )
2. Name ( type: text )
3. Designation ( type: text )
4. Image ( type: image )
5. Background Colour ( type: color picker )
6. Text Colour ( type: color picker )
7. Alignment ( type: select )

Add a new post and select the block called Testimonial inside formatting category or whatever you’ve added at the tome of registering 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 front end. Beautiful !!!! We have created our first custom block using ACF.

You can check code at my GitHub repository.

BRdhanani/acf-gutenberg-block

Check out wholeblogs.com for more references and blogs.