Creating your own blocks in Gutenberg with ACF

Making your own blocks is one of the nice features of the new WordPress Gutenberg editor that was introduced in late 2018. You can check a live example of what it does here : https://wordpress.org/gutenberg/

The Gutenberg Editor replaced the previous WordPress content editor (now called Classic Editor) which was a classic TinyMCE textarea field with added buttons to format the content, a bit like in MS Word.

Gutenberg introduces a new page builder-like concept, the content field of every page or post is in fact a collection of individual blocks that can be arranged as the content writer wants. It’s much more simple than most page builders, these blocks are headings, paragraphs, lists, images, quotes etc. The number of pre-built blocks is limited and that’s a good thing as hopefully it also allows you to create custom blocks of content.

There are different ways to create your own blocks, our favored technique at Outsourcify is to use the ACF plugin. Beware though you need to install ACF Pro to support Gutenberg blocks.

Creating a block is a bit like creating a plugin and all the code below for all custom blocks used by a website could actually be included in a custom plugin. It can also be done directly in the theme, with most of the magic happening in the functions.php file. It’s relatively simple, you need to register the block, create a field group with all fields that would be needed for the block (could be author and citation for a quote for example), and then create the PHP template file to render the block.

Here for the purpose of the example we will create a very simple block that displays a text inside a rounded blue box.

Register a block

The acf_register_block() function is used for creating the block. You can use this function to customize the details of the block including a name, title, description, icon or more.

Function.php:

add_action('acf/init', 'my_acf_init');
function my_acf_init() {
    // check function exists
    if( function_exists('acf_register_block') ) {
    	// register a testimonial block
    	acf_register_block(array(
            'name'              => 'content-theme',
            'title'             => __('Content with theme color'),
            'description'       => __('A custom content with theme color block.'),
            'render_callback'   => 'my_acf_block_render_callback',
            'category'          => 'formatting',
            'icon'              => 'format-aside',
            'Keywords'          => array( 'content-theme', 'theme'),
       ));
    }
}

Create a field group

After you have registered the block, you can now see it in the ACF plugin page and create all of the fields you want.

From the location rules, you must select “Block” and choose the block you have registered. Now those custom fields are associated to the block.

Render the block

Finally, you’ll need to call your template to render the block and then create your template with HTML and PHP.

Function.php:

function my_acf_block_render_callback( $block ) {
// convert name ("acf/content-theme") into path friendly slug ("content-theme")
 $slug = str_replace('acf/', '', $block['name']);
//Add template path of template(.php file) on your folder.
   if( file_exists(
get_theme_file_path("/templates/blocks/block-{$slug}.php") ) ) {
include( get_theme_file_path("/templates/blocks/block-{$slug}.php") );
    }
}

Block-content-theme.php

<?php
/**
* Block Name: Content with theme color
*
* This is the template that displays the content theme block.
*/

?>
<div class="content-theme">
<div class="title">
  <?php the_field('theme_title'); ?>
</div>
<div class="content">
  <?php the_field('theme_desc'); ?>
</div>
</div>

Adding the block in the editor

That’s it you can now use your block in the editor.

You have 2 different modes: the editor and preview modes. The preview mode requires that you import the frontend CSS file in order to display the block the way you planned it.

Editor mode

Preview mode

This function is used to import your theme CSS. It’ll display the theme css from the front-end in the back-end for preview purposes.

Function.php:

function acf_block_style() {
    wp_enqueue_style('admin-blocks', get_template_directory_uri() .'/css/main.min.css');
}
add_action( 'admin_enqueue_scripts', 'acf_block_style' );

Main.min.css:

.content-theme .content-theme__title {
 font-size: 40px;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 font-weight: bold; }

.content-theme .content-theme__desc {
 margin-top: 20px;
 padding: 30px;
 border: 3px solid #1CAAF5;
 color: #2F077B;
 border-radius: 15px; }

So now the block here looks like it should :

And it should look the same on the website’s frontend.