Blocks

When adding a new block to the Gutenberg editor there is a base class the contains the main functions you need to do this.

Getting started

First you need to create a new class for your block to be located in classes/ACF/Block/

For this example I will be using the Testimonials example which has been used by ACF here

<?php

namespace SiteName\Classes\ACF\Blocks\Common;

// Base Fields provides core ACF fields for us to use when registering the field group
use NanoSoup\Nemesis\ACF\BaseFields;

// Block provides the helper functions for registering a new block
use NanoSoup\Nemesis\ACF\Blocks\Block;

// BlockInterface this provides us with the structure our block class should follow
use NanoSoup\Nemesis\ACF\Blocks\BlockInterface;

// Timber used for rendering the view
use Timber\Timber;

/**
 * Class Testimonials
 * @package ACF\Blocks
 */
class Testimonials extends Block implements BlockInterface
{
    //...
}

As you can see above we are extending the base Block class while implementing the Block interface provided by Nemesis. This is so we can make sure we have the functions needed to add the block correctly.

The constructor function

Once you have included the methods from the interface we need to start populating them. The first is the constructor function. This is used to register the block and field group once ACF has loaded.

/**
 * @return mixed|void
*/
public function __construct()
{
    parent::__construct();
    add_action('acf/init', [$this, 'registerBlock']);
    add_action('acf/init', [$this, 'registerFieldGroup']);
}

registerBlock

This block is what builds the block within the editor for Gutenberg, all this does is register the details for it - the rendering functionality comes later.

For further details on what is available check out: https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-registration/

/**
 * @return mixed
*/
public function registerBlock(): void
{
    // This will set the key for the block
    $this->setBlockName('testimonial')

        // This sets the title of the block
        ->setBlockTitle('Testimonial')

        // This passes the rendering function for the block
        ->setBlockCallback([__CLASS__, 'renderBlock'])

        // (Optional) This defines the icon to be used for the block
        ->setBlockIcon('format-quote')

        // This sets the block category - you can either use an existing one or make a new one
        // Nemesis will handle the creation of a new one if needed
        ->setCat('generic', 'Generic Blocks')

        // This sets what Gutenberg configuration / styling components are available to
        // the user, by default Nemesis removes the 'align' functionality
        ->setSupports(['align' => true])

        // This sets which post type this block is valid for - by default Nemesis
        // limits it to pages and posts
        ->setPostTypes([
                'page',
                'post',
                'custom-type'
            ])

        ->saveBlock();
}

renderBlock

In this function you can get the data from the fields and them pass them into your custom view for the block.

/**
 * @param $block
 * @return mixed|void
*/
public static function renderBlock($block): void
{
        $vars['block'] = $block;
        $vars['fields'] = get_fields();

        $vars['fields']['avatar'] = new \Timber\Image($vars['fields']['avatar']);

        Timber::render( '/classes/ACF/Blocks/views/testimonials.twig', $vars );
}

Block field group

This function is no different from adding a normal field group (see: https://github.com/NanoSoup/Nemesis/wiki/ACF-Field-Groups) the only difference is the location attribute of the field group:

'location' => [
    [
        [
            'param' => 'block',
            'operator' => '==',
            'value' => 'acf/testimonial',
        ]
    ]
],

You set the location to be for block and then the value is the slug of your block prefixed with acf/