An Intro to WordPress blocks with Advanced Custom Fields

When WordPress unveiled Gutenberg Blocks in 2018, it signaled fundamental changes with how site designers, developers, and administrators would go about building and maintaining sites.

Here at Rule29, we use Advanced Custom Fields to build custom WordPress sites for our clients. With more than two million installations, ACF is one of the most popular tools out there for building flexible, easily maintainable websites.

ACF is great in terms of web development, but we also like how it helps us maintain brand consistency. We can offer clients great designs showing what their site will look like on the front end; we can also offer a consistent vision of how a client will be able to manage their site in the back-end admin area.

But back to the development side of things: it’s been important for us to be able to build custom blocks with ACF. And while developing custom WP blocks in general can involve a significant learning curve, ACF gives us tools that simplify the process. This post will show an overview of how we use those tools.

So if you have some experience with PHP and ACF, and are curious about building custom blocks, this post will outline the process and hopefully leave you curious to learn and try more!

Once you know the kind of block you want to build, there are three basic steps in the process:

1. Register the block
2. Build the fields
3. Render the block

Step 1: Register the Block

You can either do this in your functions.php file, or you could make a separate file (like “blocks.php”) in case you are registering multiple blocks and want to keep them all in one file.

You’ll use two ACF tools here:

• A function to register the block:

acf_register_block_type()

• A hook to tell WordPress about your new code

'acf/init'

In this example, we’ll register a “Call to Action” module. Here’s what the code will look like*.

• Line 3: Hook this new code into WordPress
• Line 4: Declare a wrapper function that you can register multiple functions in
• Line 10: Register your new block
• Lines 11-18: The settings for your block.
• Line 18: The name of the file that will render your block. (More on this in Step 3…)

*This is by no means the only way to organize this code! Different developers will go about this different ways. This is only meant to be a relatively simple overview… definitely not the final word!

Step 2: Build the Fields

Here, you are going to go into ACF in your admin area and set up the fields you want to display on your site. For this CTA module, it would look something like this.

Important to note: in the Location field, you need to select “Block”. If you’ve registered the block correctly in Step 1, the block name will appear in the dropdown on the right-hand side.

Step 3: Render the Block

First, you’ll want to create a directory in your theme files where your block templates will live. It could look something like this:

Here’s where you’ll write the PHP that will output your block. The ACF docs provide a template that can get you started here, so you don’t have to write it from scratch. The top half will create some values that will come in handy for writing your CSS:

Then, under that, you’ll use ACF functions to get your fields’ values. The big picture looks like this (but we’ll zoom in on a couple of examples).

The two most common functions you’ll use are:

get_field()

This will return a field’s value that you can store in a variable (lines 40 and 44):

the_field()

This will display a field’s value:

From there, you’ll write the CSS to adjust it to your site’s styles… then, you and/or your client are ready go into your Admin area, select your new block, fill out the fields, and place it on your page.

Final thoughts

Advanced Custom Fields can be a great tool for building custom modules and admin experiences for your clients. It can also be a way to explore your creativity as a developer. What kind of cool modules can you build? How can you creatively and efficiently code them? This article only scratched the surface of what’s possible. Hopefully it can give you an additional option in your theme and content development process. Happy building!