Create Custom Blocks

Register Block

Add something like the following to functions.php. This will create the custom category and register our blocks.

Change block-name to your custom block name.

// adds custom category to block inserter for our custom blocks 
// and moves it to the top of the panel
function custom_block_category( $categories ) {
    $custom_block = array(
        'slug'  => 'custom-theme-blocks',
        'title' => __( 'Custom Theme Blocks', 'gcc-blocks' ),
    );

    $categories_sorted = array();
    $categories_sorted[0] = $custom_block;

    foreach ($categories as $category) {
        $categories_sorted[] = $category;
    }

    return $categories_sorted;
}
add_filter( 'block_categories_all', 'custom_block_category', 10, 2);

// ACF Blocks - Register blocks
add_action( 'init', 'register_acf_blocks' );
function register_acf_blocks() {
	register_block_type( __DIR__ . '/blocks/block-name/block.json' );
}

Then, create a folder named blocks within the theme. Within the blocks folder, create a folder named the block name you are creating. Inside that folder, create 2 files.

1. block.json
2. block-name.css (your block styles will go here)
3. block-name.php (see next step)

Block.json will contain something like the following.

Change block-name to your custom block name.

{
    "name": "acf/block-name",
    "title": "Block Title",
    "description": "Description of what our custom block does.",
    "style": [ "file:./block-name.css" ],
    "category": "custom-theme-blocks",
    "icon": "<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 196.8 162.7' style='enable-background:new 0 0 196.8 162.7;' xml:space='preserve'><style type='text/css'>.st0{fill:url(#SVGID_1_);}</style><linearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='98.4125' y1='9.6296' x2='98.4125' y2='153.0367'><stop  offset='0' style='stop-color:#C7E099'/><stop  offset='0.33' style='stop-color:#99D1A1'/><stop  offset='0.66' style='stop-color:#2C7D7B'/><stop  offset='0.9847' style='stop-color:#083F5F'/></linearGradient><path class='st0' d='M166.4,147.3c4.6-5.9,7-11.5,7-20.9V92.7c0-5.3,2.2-8,6.7-8h5.4v-6.6h-5.4c-4.5,0-6.7-2.6-6.7-7.8V28.1 c0-12.3-6.3-18.4-19-18.4h-4.9v0h-102v0h-4.9c-12.6,0-18.9,6.1-18.9,18.4v42.2c0,5.2-2.3,7.8-6.9,7.8h-5.4v6.6h5.4 c4.6,0,6.9,2.7,6.9,8v42.2c0,12.3,6.3,18.1,18.9,18.1h4.9v0h71.1l-47.6-47.3V56.8H118l0,51.5l43.8,43.6l4.4-4.4 C166.2,147.4,166.3,147.3,166.4,147.3z M160.6,141.9l-36.3-36.1V50.6H67.8l-3.1,0v53.3l0,4.4l38.7,38.4H47.4v-0.1h-4.5 c-7.8,0-11.7-4.1-11.7-12.4V92.8c0-3.4-0.5-5.9-1.5-7.6c-1-1.7-2.6-2.9-4.8-3.8c2.2-0.8,3.7-2.1,4.8-3.8c1-1.7,1.5-4.2,1.5-7.6V28.7 c0-8.3,3.9-12.7,11.7-12.7h4.5v0h102v0h4.4c7.9,0,11.8,4.5,11.8,12.7v41.5c0,3.4,0.5,5.9,1.5,7.6c1,1.7,2.6,2.9,4.8,3.8 c-2.2,0.8-3.9,2.1-4.8,3.8c-1,1.7-1.5,4.2-1.5,7.6v37.7c0,2-0.3,4-1,5.9C163.9,138.4,162.7,140.5,160.6,141.9z'/></svg>",
    "keywords": ["keyword", "keyword", "keyword"],
    "acf": {
        "mode": "edit",
        "renderTemplate": "block-name.php"
    },
    "align": "full"
}

Create Field Groups

Next, create a field group. Note that any and all ACF fields can be used within your block – there are no limitations.

From the location rules, use the “Block” rule to select your newly registered block type.

Render Block

Lastly, you’ll need to tell ACF how to render your block. It’s essentially the same process you’re used to for displaying custom fields – only that your HTML + PHP is wrapped in a function.

Also add something like the following to block-name.php

<?php
/**
 * Block-Name Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during backend preview render.
 * @param   int $post_id The post ID the block is rendering content against.
 *          This is either the post ID currently being displayed inside a query loop,
 *          or the post ID of the post hosting this block.
 * @param   array $context The context provided to the block by the post or it's parent block.
 */

// Support custom "anchor" values.
$anchor = '';
if ( ! empty( $block['anchor'] ) ) {
    $anchor = 'id="' . esc_attr( $block['anchor'] ) . '" ';
}

// Create class attribute allowing for custom "className" and "align" values.
$class_name = 'block-name-block';
if ( ! empty( $block['className'] ) ) {
    $class_name .= ' ' . $block['className'];
}
if ( ! empty( $block['align'] ) ) {
    $class_name .= ' align' . $block['align'];
}

// Load values and assign defaults.
$value = get_field('acf_field_name', get_the_ID());
// may not need get_the_ID() above

if($value) {
?>
<p id="block-value">Block Detail: <?php echo $value; ?></p>
<?php } ?>