ACF Gutenberg Blocks

Warning

If you’re not using ACF plugin, this feature won’t be available

Worldess has built-in support for registering new custom gutenberg blocks through Advanced Custom Fields.

To register a block go to the initializer config/initializers/custom_gutenberg_acf_blocks.php and uncomment the last line in the custom_gutenberg_acf_blocks() function.

The function is very well self documented:

config/initializers/custom_gutenberg_acf_blocks.php

<?php

function custom_gutenberg_acf_blocks() {
    /*
     * Create Gutenberg Block with Advanced Custom Fields.
     * This function is a wrapper around the `acf_register_block` function. Read more about it at
     * https://www.advancedcustomfields.com/blog/acf-5-8-introducing-acf-blocks-for-gutenberg/
     *
     * Note: You can reapeat it for as many blocks as you have to create
     *
     * Params:
     *     string, mandatory:
     *         "block name"; if you use spaces in the name, they'll get converted to `-`
                where needed. You'll need to name your partial the same as this param.
                E.g.: having "Home Page" Wordless will search for `views/blocks/home-page.html.pug`
                partial
     *     array, optional:
     *        title           => if blank use $block_name
     *        description     => if blank use $block_name
     *        category        => if blank use 'formatting'.
                                 Default categories are:
                                    'common',
                                    'formatting',
                                    'widgets',
                                    'layout',
                                    'embed'.
     *        icon            => if blank use 'smiley'; you can use any icon name from
     *                           https://developer.wordpress.org/resource/dashicons/
     *        render_callback => if blank use the default '_acf_block_render_callback',
     *        keywords        => if blank use ['acf', 'block']
     *
     */

    /* Example:
    create_acf_block('slider', [
        'title' => 'Slider',
        'description' => 'Slider',
        'category' => 'widgets',
        'icon' => 'admin-comments',
        'render_callback' => '_acf_block_render_callback',
        'keywords' => [ 'image', 'slider' ]
    ]);
    */

    // create_acf_block('slider', array());
}

add_action('acf/init', 'custom_gutenberg_acf_blocks');

Having a block registered this way, you will found it selectable in the ACF field group’s options.

Said you’ll register a block like

<?php

create_acf_block('slider', [
    'title' => 'Slider',
    'description' => 'Slider',
    'category' => 'widgets',
    'icon' => 'admin-comments',
    'render_callback' => '_acf_block_render_callback',
    'keywords' => [ 'image', 'slider' ]
]);

Wordless will search for two partials to render:

• views/blocks/admin/_slider.html.pug
• views/blocks/_slider.html.pug

The first one is used to render the block in the backend Gutenberg’s interface. If absent, then the second will be used.

You will be obviously free to render the block anywhere in your front-end template, since it’s a simple partial:

render_partial('blocks/slider')

Note

You can change the path where the partial is searched for by using the wordless_acf_gutenberg_blocks_views_path filter