Creating Gutenberg Blocks with Advanced Custom Fields (ACF) and LazyBlocks: A Comparative Guide

Gutenberg, the WordPress block editor, has revolutionized the way we create and design content in WordPress. Advanced Custom Fields (ACF) and LazyBlocks are two popular plugins that extend Gutenberg’s functionality by allowing users to create custom blocks. In this article, we’ll discuss the process of creating Gutenberg blocks with both plugins and analyze their pros and cons.

1.- Advanced Custom Fields (ACF)

ACF is a popular WordPress plugin that allows users to add custom fields to their posts, pages, and custom post types. It also supports creating custom Gutenberg blocks using a user-friendly interface.

Creating Blocks with ACF:

1. Install and activate the ACF plugin.
2. Add the callback function my_acf_block_render_callback() to your theme’s functions.php file:

/**
 * Callback to map the block name to a template.
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // convert name ("acf/slider") into path friendly slug ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // include a template part from within the "template-parts/block" folder
    if ( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
    }
}

3. Register the block in your theme’s functions.php file with acf_register_block_type().

/**
 * Example to register acf block.
 */
function my_acf_block_init() {
    // Check if the function exists to avoid errors.
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-nice-block-name',
            'title'             => __('This is my first Block'),
            'description'       => __('This is a custom block created using ACF.'),
            'render_template'   => 'path/to/your/block/template.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array('nice', 'block', 'name'),
        ));
    }
}
add_action('acf/init', 'my_acf_block_init');

4. In the WordPress dashboard, navigate to Custom Fields > Add New.
5. Create a new field group, and add the fields you need for the block and configure their settings.
6. In the field group settings under “Location,” choose “Block” for the rule and set it to “is equal to” your block title (e.g., “This is my first Block”).
7. Create a new PHP file in your theme’s template-parts/block directory to serve as the template file for your custom block. Use the naming convention content-{slug}.php, where {slug} is the path-friendly slug derived from the block’s name. For example, if your block’s name is “acf/your-block-name”, create a template file named content-your-block-name.php.
8. In the newly created template file, write the PHP and HTML code that renders the block. Start with the opening PHP tag, and use ACF’s get_field() or the_field() functions to retrieve and display the values of the custom fields you added to the block. These functions allow you to access the data stored in your custom fields and output it in your block’s template.

/**
 * Example of a block template.
 */
<?php
// Get custom field values
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- Output the HTML structure of the block -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

Pros of ACF:

• User-friendly interface.
• A wide range of field types to choose from.
• Integrates with other WordPress features like custom post types and taxonomies.
• Extensive documentation and a large user community.

Cons of ACF:

• It can be challenging for users with limited coding experience.
• Requires a PRO version for some advanced features.
• Performance issues may arise with a high number of custom fields.

2.- LazyBlocks

LazyBlocks is a Gutenberg blocks visual constructor that allows you to create custom Gutenberg blocks using a simple drag-and-drop interface.

Creating Blocks with LazyBlocks:

1. Install and activate the LazyBlocks plugin.
2. In the WordPress dashboard, navigate to LazyBlocks > Add New.
3. Enter the block name and slug, then start adding controls (fields) using the drag-and-drop interface.
4. Configure the block output by choosing between PHP, HTML, or Handlebars template.
5. Add the block output code in the provided editor or create a separate template file in your theme. Below are the advantages for each option:
   • PHP: Provides full flexibility and control over your block’s output, and allows you to use any PHP functionality to customize your block’s appearance and behavior.
   • HTML: Offers a simple and straightforward way to define your block’s output without dealing with PHP code. Ideal for users who prefer working with HTML and CSS only.
   • Handlebars template: Combines the simplicity of HTML output with the power of conditional logic and loops, making it a versatile option for users who need more control over their block’s output without writing PHP.
6. Save the block, and it will be available in the Gutenberg editor.

Pros of LazyBlocks:

• Intuitive drag-and-drop interface.
• No coding required for basic blocks.
• Works with Custom Post Types and Custom Taxonomies.
• A decent number of field types available.

Cons of LazyBlocks:

• Less comprehensive documentation compared to ACF.
• Limited field types compared to ACF.
• Fewer features and options compared to ACF.