Creación de Bloques de Gutenberg con Advanced Custom Fields (ACF) y LazyBlocks: Una Guía Comparativa

Gutenberg, el editor de bloques de WordPress, ha revolucionado la forma en que creamos y diseñamos contenido en WordPress. Advanced Custom Fields (ACF) y LazyBlocks son dos plugins populares que extienden la funcionalidad de Gutenberg al permitir a los usuarios crear bloques personalizados. En este artículo, discutiremos el proceso de creación de bloques de Gutenberg con ambos plugins y analizaremos sus pros y contras.

1.- Advanced Custom Fields (ACF)

ACF es un popular plugin de WordPress que permite a los usuarios añadir campos personalizados a sus entradas, páginas y tipos de entradas personalizadas. También soporta la creación de bloques personalizados de Gutenberg utilizando una interfaz fácil de usar.

Creación de Bloques con ACF:

Instala y activa el plugin ACF.
Añade la función de callback my_acf_block_render_callback() al archivo functions.php de tu tema:

/**
 * Callback para mapear el nombre del bloque a una plantilla.
 * @param $block
 * @return void
 */
function my_acf_block_render_callback( $block ) {

    // convierte el nombre ("acf/slider") en un slug amigable para la ruta ("slider")
    $slug = str_replace('acf/', '', $block['name']);

    // incluye una parte de plantilla de la carpeta "template-parts/block"
    if ( file_exists( get_theme_file_path("/template-parts/block/content-{$slug}.php") ) ) {
        include( get_theme_file_path("/template-parts/block/content-{$slug}.php") );
    }
}

Registra el bloque en el archivo functions.php de tu tema con acf_register_block_type().

/**
 * Ejemplo para registrar un bloque acf.
 */
function my_acf_block_init() {
    // Comprueba si la función existe para evitar errores.
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name'              => 'my-nice-block-name',
            'title'             => __('Este es mi primer Bloque'),
            'description'       => __('Este es un bloque personalizado creado usando ACF.'),
            'render_template'   => 'ruta/a/tu/plantilla/de/bloque.php',
            'category'          => 'formatting',
            'icon'              => 'admin-comments',
            'keywords'          => array('bonito', 'bloque', 'nombre'),
        ));
    }
}
add_action('acf/init', 'my_acf_block_init');

En el panel de administración de WordPress, navega a Campos Personalizados > Añadir Nuevo.
Crea un nuevo grupo de campos y añade los campos que necesites para el bloque y configura sus ajustes.
En los ajustes del grupo de campos, bajo “Ubicación”, elige “Bloque” para la regla y configúrala como “es igual a” el título de tu bloque (por ejemplo, “Este es mi primer Bloque”).
Crea un nuevo archivo PHP en el directorio template-parts/block de tu tema para que sirva como archivo de plantilla para tu bloque personalizado. Utiliza la convención de nombres content-{slug}.php, donde {slug} es el slug amigable para la ruta derivado del nombre del bloque. Por ejemplo, si el nombre de tu bloque es “acf/tu-nombre-de-bloque”, crea un archivo de plantilla llamado content-tu-nombre-de-bloque.php.
En el archivo de plantilla recién creado, escribe el código PHP y HTML que renderiza el bloque. Comienza con la etiqueta PHP de apertura y utiliza las funciones get_field() o the_field() de ACF para recuperar y mostrar los valores de los campos personalizados que añadiste al bloque. Estas funciones te permiten acceder a los datos almacenados en tus campos personalizados y mostrarlos en la plantilla de tu bloque.

/**
 * Ejemplo de una plantilla de bloque.
 */
<?php
// Obtener los valores de los campos personalizados
$heading = get_field('heading');
$content = get_field('content');
?>

<!-- Mostrar la estructura HTML del bloque -->
<div class="my-custom-block">
    <h2><?php echo esc_html($heading); ?></h2>
    <p><?php echo esc_html($content); ?></p>
</div>

Pros de ACF:

Interfaz fácil de usar.
Una amplia gama de tipos de campos para elegir.
Se integra con otras características de WordPress como tipos de entradas personalizadas y taxonomías.
Extensa documentación y una gran comunidad de usuarios.

Contras de ACF:

Puede ser desafiante para usuarios con experiencia limitada en codificación.
Requiere una versión PRO para algunas características avanzadas.
Pueden surgir problemas de rendimiento con un gran número de campos personalizados.

2.- LazyBlocks

LazyBlocks es un constructor visual de bloques de Gutenberg que te permite crear bloques personalizados de Gutenberg utilizando una sencilla interfaz de arrastrar y soltar.

Creación de Bloques con LazyBlocks:

Instala y activa el plugin LazyBlocks.
En el panel de administración de WordPress, navega a LazyBlocks > Añadir Nuevo.
Introduce el nombre y el slug del bloque, y luego empieza a añadir controles (campos) utilizando la interfaz de arrastrar y soltar.
Configura la salida del bloque eligiendo entre plantilla PHP, HTML o Handlebars.
Añade el código de salida del bloque en el editor proporcionado o crea un archivo de plantilla separado en tu tema. A continuación se presentan las ventajas de cada opción:
- PHP: Proporciona total flexibilidad y control sobre la salida de tu bloque, y te permite utilizar cualquier funcionalidad PHP para personalizar la apariencia y el comportamiento de tu bloque.
- HTML: Ofrece una forma sencilla y directa de definir la salida de tu bloque sin tener que lidiar con código PHP. Ideal para usuarios que prefieren trabajar solo con HTML y CSS.
- Plantilla Handlebars: Combina la simplicidad de la salida HTML con la potencia de la lógica condicional y los bucles, lo que la convierte en una opción versátil para usuarios que necesitan más control sobre la salida de su bloque sin escribir PHP.
Guarda el bloque y estará disponible en el editor de Gutenberg.

Pros de LazyBlocks:

Interfaz intuitiva de arrastrar y soltar.
No se requiere codificación para bloques básicos.
Funciona con Tipos de Entradas Personalizadas y Taxonomías Personalizadas.
Un número decente de tipos de campos disponibles.

Contras de LazyBlocks:

Documentación menos completa en comparación con ACF.
Tipos de campos limitados en comparación con ACF.
Menos características y opciones en comparación con ACF.