How to create a Gutenblock with ACF

Time needed: 5 minutes.

How to create a Gutenblock with ACF in 4 small steps

1. Install Advanced Custom Fields (ACF)

   To start creating a Gutenblock with ACF, you first need to install ACF itself. You can do this via the Plugin Repository within WordPress. Install the plugin, activate it and on the left in the sidebar, you, now see a new menu item called “Extra fields”.

2. Create a Gutenblock in the functions.php

   With ACF installed, we move to our theme directory and open the functions.php of the theme you are working in. 
   
   Remember, if you altering a theme that is not yours, please make sure you use a child theme, otherwise everything you do will be removed when updating the theme!
   
   Within the functions.php, we start writing our first bit of code. We start with the following:
   
   function my_register_blocks() {
if ( function_exists( 'acf_register_block' ) ) {
acf_register_block( [
'name' => 'employee',
'title' => __( 'Employee', 'yoast' ),
'render_template' => get_template_directory() . '/blocks/employee.php',
] );
}
};
add_action( 'acf/init', 'my_register_blocks' );
   
   Let’s talk about what we are doing.
   
   First, we have the function “my_register_blocks()”; This will contain all blocks that we are going to create. The second line is a check if the function “acf_register_block” exists. If not, we don’t do anything, as we only need to execute the function when ACF is installed and activated.
   
   After that, we call the function to create a Gutenblock with ACF. We give it an array with multiple values:
   
   The name -> when referring to the block in code, 
   The title -> The label for users to see
   Render template -> The file that contains the block.
   
   For more information about this function, please look into the docs on the site of ACF.

3. Add an ACF group and link it to the block

   When we are done, we go to ACF in the WP admin and go to “new group”. On top, fill in a name for your block. For now, let’s go for “employee”. 
   
   Press “add new field”, Fill in the label with “employee”. The field name will be inserted by default.
   
   Scroll down a bit and go to “location”. In the dropdown “Show this group”, select “block and on the most right dropdown select “My block”. 
   
   Scroll back to the top and on the right side of the screen, you see a “publish” button. Press this and we are done with ACF in WP.

4. Create a file and create the ACF block

   Back to the code! In de function where we create our block, we set a path to a file where we build our block. Go to that file / create that file in the right place and let’s start putting some code down.
   
   <div class=”block_employee”>
<?php the_field(‘employee’); ?>
</div>
   
   Let’s explain what we did. We open a DIV with a simple class name so we can style it a bit. Second, we use the ACF function “the_field()” to render the field that we just created. In the function, we give the name of the field we created in WP so the template knows which field we need.