How to create a Gutenblock with ACF

Hi, this is the first in a small series about creating Gutenberg Blocks (Gutenblocks) with Advanced Custom Fields (ACF). 

As ACF is an easy way for new developers to extend WordPress, I always make it my to-go-to plugin when I want something custom within a theme. It’s easy, pretty fast and with clear documentation easy to understand.

Before we start, I suggest reading a bit about ACF first. I will talk about a few basic things in WordPress that might be a little hard for some of you to understand, but if they are unclear, I have a good reason to write about that for you!

So, let’s get into it! 

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’); ?>

    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.

This is all you need to do! You got your first block up and running!

If you want to see how this works, go to an existing page or post or create a new one, insert the new block and edit the block by clicking the pencil in the options bar. This switches the block from preview mode to edit mode with the field you just created. Fill in the field and press the eye in the options bar again. This way you switch to the presenting mode and you see your changes! Save the page, go your site and your done!