Creating a Custom Gutenberg Block Using Advanced Custom Fields (ACF) in WordPress: Part 1

Unlock the power of WordPress’s Gutenberg editor with the use of custom blocks.

By utilizing the Advanced Custom Fields (ACF) plugin, you can significantly expand your customization capabilities. In this tutorial, we will walk you through the process of creating a custom Gutenberg block using ACF in a WordPress site.

Installing Advanced Custom Fields Plugin

To start creating your custom Gutenberg block, you need the Advanced Custom Fields (ACF) plugin installed on your WordPress site. If it’s not already set up, you can conveniently download and install it from the WordPress plugin directory.

Crafting Your Custom Block

Next, navigate to Custom Fields > Add New from your WordPress dashboard. Enter a unique title for your block. Subsequently, under the “Location” box, adjust the rules so this field group shows if the block equals your block name.

Adding Fields to Your Block

This step involves defining what content your block will hold. Add fields to your block that will appear in the editor when you add your block to a post or page. These could be text, images, or any other type of content.

Registering Your Block

Scroll down to locate the “Block Settings” section. Here, you can set the block’s name (the name used in the code), title (the name visible in the editor), description, category, and icon. Ensure you check “Active” to make the block accessible for use.

Creating the Block Template

Now, it’s time to instruct WordPress on how to display your block. For this, create a PHP template file in your theme’s directory named after your block. If your block’s name is “testimonial”, your file should be “block-testimonial.php”. This file should contain PHP and HTML to display the content of your block.

<?php 
  $heading = get_field('heading');
  $content = get_field('content');
?>
<div class="testimonial-block">
  <h2><?php echo $heading; ?></h2>
  <p><?php echo $content; ?></p>
</div>

Utilizing Your Custom Block

Congratulations, your custom block is ready to be used in the Gutenberg editor! To use it, simply create a new post or page, click on the “+” button to add a new block, and you should find your custom block in the list.

Remember that ACF Pro is required to use the ACF Blocks feature, and this feature only works with Gutenberg, WordPress’s new block editor. Moreover, verify that your theme supports Gutenberg. If you are unsure, it’s best to check with the theme developer.

By following this step-by-step guide, you can harness the power of custom blocks to take your WordPress website to the next level. Experiment with different types of fields and create blocks that are unique to your site. Enjoy!

Next Steps

If you like this article and want to learn how to continue to enhance your custom ACF block, check out the following articles:

• Creating a Custom Gutenberg Block Using ACF: Part 2 – Mastering ACF Repeater Fields