🥽 Beta testers needed! Stay up to date with the latest news from CTRLS.DEV

Create Gutenberg Blocks with ACF 5.8+ PRO

How to register and customize Gutenberg blocks with the Advanced Custom Fields plugin (no JavaScript needed)



In this tutorial, I will show you how to create a custom Gutenberg block by using the Advanced Custom Fields plugin.

There is only one requirement, and it is to have at least ACF 5.8 PRO version installed. Also if you are using the repeater and block fields as the example in this tutorial you should also need the PRO version.

Note: This is a simplified solution that requires only PHP; no JavaScript or CSS will be needed to create and customize our Gutenberg block.

The Setup

Before we create our ACF group we should take a look at the additional files and folders we have to create inside our theme folder. You may want to organize things differently and that’s okay as long as you change the path for the render_template.

Inside venues.php we are going to place our code which will be used to display the block layout within Gutenberg and in the front-end template.

my-theme/
  template-parts/
    blocks/
      venues.php
  functions.php
  ...

But before I show you the venues.php code we need to add the code below inside our theme functions.php. This will check if the ACF version supports the acf_register_block_type() and then register our block by passing some arguments.

// ACF 5.8+ PRO with Gutenberg
if (function_exists('acf_register_block_type')) {
  add_action('acf/init', function() {
    acf_register_block_type(
      array(
        'name' => 'venues',
        'title' => ('Tour Venues'), 
        'description' => __('Manage tour venues...'),
        'render_template' => 'template-parts/blocks/venues.php',
        'icon' => 'editor-table',
        'keywords' => array('tour', 'venues'),
      )
    );
  }, 10, 1);
}

Note: The name value should be the same as the Repeater slug and render_template value should be the path to our block template file.

Subscribe to our Newsletter* if you find our content useful and would like to receive regular updates with the latest posts.

Advanced Custom Field Group

Once we create the structure and add the ACF init action hook in our functions.php we are ready to create and set up our Advanced Custom Field group.

There are couple of things I want to highlight, but if you have worked with ACF before you will notice them right away.

  1. Make sure that you have Location > Show this field as Block and select the custom ACF register Block title. (In our case Tour Venues)
  2. I pointed out this above but make sure that the Repeater slug is the same as the ACF register block name value.

The Gutenberg Block

Now we may view and add our Gutenberg block within the editor.

We are also ready to customize its layout and styling (take a look at the venues.php template below).

If you have worked with Advanced Custom Fields and have a bit of experience on your hands you wouldn’t have any issues with the code. However, if there is anything unclear please check the documentation or ask your questions in the comments below.

The PHP code at the top of the template is used to utilize the Advanced tab CSS classes that are available and can be applied to any block within Gutenberg.

Note: I don’t want to overwhelm the reader so I am using the TwentyTwenty theme stylesheets, but you can easily apply your own styles and load them inside the Gutenberg editor using the enqueue_block_editor_assets() hook.

At this point, you should have a functioning Gutenberg block that is built on top of Advanced Custom Fields.

In the 4 screenshots below you can view the different sections where you can add, edit, or preview your Gutenberg block.

What’s Next?

That’s a basic example you can build upon or use it to create your own custom solution. It is a simple and elegant way to quickly create Gutenberg blocks.

However, if you want to use the full power and capabilities of the editor you still need to go back to JavaScript and use the WP core way of building and extending blocks.

To additionally improve your Gutenberg skills I would recommend you start from the Block Editor Handbook and then move on to and take a look at some of the paid courses available at Udemy.

‘Til the next one.

* We have a NO SPAM policy so you won't reaceive any meaningless emails from us!

Related Content

Integrate Bitly Short URLs Within WordPress

How to use Bitly to generate short URLs and track your social media clicks.

READ MORE...

Adding License Key Feature to Your Premium WordPress Theme or Plugin (3/3)

How to use your API server and glue everything we have done so far together.

READ MORE...

Adding License Key Feature to Your Premium WordPress Theme or Plugin (2/3)

How to set up our API server and link up the previously created functions with our server app.

READ MORE...

Leave a Reply

Your email address will not be published. Required fields are marked *

Adding License Key Feature to Your Premium WordPress Theme or Plugin (1/3)
Track your WordPress.org Plugin Stats on Your Site

Thank you for reading our content. Use the buttons below to spread the love and share Adding License Key Feature to Your Premium WordPress Theme or Plugin (2/3) with your followers.