Creación de bloques sin JavaScript: prueba de ACF, Block Lab y Lazy Blocks

No todo el mundo puede o quiere construir bloques en JavaScript todavía y, a veces, tiene que instalar tres o cuatro colecciones de bloques hasta que encuentre los bloques que le gustaría.

Hay una tercera forma: los complementos que crean los bloques para usted a partir de un conjunto de campos personalizados específicos, con una plantilla para controlar la visualización de los bloques en la interfaz. Las tres opciones más populares para hacer esto incluyen: Block Lab, ACF (Advanced Custom Fields) y Lazy Blocks.

Mi caso de uso para esta prueba es una pequeña tarea que me propuse realizar con cada uno de los complementos: crear un bloque para los miembros del equipo de una empresa que incluye los siguientes campos: nombre, apellido, foto de rostro, biografía, número de teléfono, y dirección de correo electrónico y use el bloque en una página en una pantalla de dos columnas con dos miembros del equipo.

Para cada complemento demostraré

• cómo crear el Fieldgroup,
• cómo crear la plantilla para la interfaz y
• cómo usar los bloques para crear una página de equipo.

Usé Local by Flywheel como mi herramienta de desarrollo local. El sitio de prueba se ejecutó en WordPress 5.1.1, Gutenberg 5.4 y Business Theme de WordPress.com

Después de leer esta publicación, podrá seleccionar el complemento que se ajuste a sus necesidades.

Creación de un Team Block con Block Lab

Los miembros del equipo de XWP crearon Block Lab y está disponible como complemento gratuito con una versión comercial. Primero usé Block Lab, instalé el complemento y luego comencé un nuevo bloque.

Aquí está el video sobre cómo configurar los campos.

El siguiente paso es configurar la plantilla de bloque.

Cuando miré la ubicación esperada, la plantilla formará parte del directorio de temas en una subcarpeta llamada /blocks/. Eso es algo que un desarrollador debe recordar, ya que hay cierto bloqueo de contenido al cambiar de tema.

Para crear la plantilla, abrí mi editor de código, creé el archivo block-team-member.php y agregué HTML + y PHP mínimo para hacer referencia a los campos.

 <h2>
<?php block_field( 'nombre' );?> 
<?php block_field( 'apellido' );?>
</h2>
<p><img class="foto del equipo" src="<?php block_field('imagen'); ?>"
 alt="<?php block_field( 'nombre' );?> 
<?php block_field( 'apellido' );?> " ancho="150"/>
<?php block_field( 'breve-biografía' ); ?></p>

<p><em>Puede llegar a <?php block_field( 'first-name' );?></em> 
<br/>por correo electrónico <span><a href="mailto:<?php block_field( 'dirección de correo electrónico' ); ?>">
<?php block_field('dirección de correo electrónico'); ?></a></span>
 o <br/>
por teléfono: <span><?php block_field( 'extension' ); ?></span></p> 

En el último paso, terminé la configuración de este bloque con las Propiedades del bloque

• Le puse el icono a una persona,
• seleccionó los "Elementos de diseño" como Categoría y
• agregó "miembro del equipo, equipo" como palabras clave

Todo esto es necesario para el insertador de bloques en el editor.

Vamos a ver cómo funciona.

Agregué una nueva página llamada Conozca a nuestro equipo de Block Lab y agregué los miembros del equipo, usando el bloque "Miembro del equipo".

Por ahora, decidí llenar toda la información dentro de los límites del editor de bloques. Durante la configuración del grupo de campo, también tuve la opción de mostrar los controles de formulario en la pestaña Opciones de bloque en la barra lateral. Por el momento, he determinado que es solo una preferencia personal. Una vez que hace clic fuera del bloque, el formulario desaparece y el bloque se representa de forma similar a su representación frontal.

Ahora que tengo el bloque finalizado, puedo agregar más miembros del equipo a la página. Decidí que me gustaría que estuvieran en un bloque de columnas con dos columnas.

Hasta ahora tan bueno. No me entusiasmó que la ubicación de la plantilla apunte a la carpeta del tema.

Cuando quiero cambiar el tema, todavía me gustaría mantener el bloque y el diseño del bloque con mi sitio, por lo que tendría que asegurarme de copiar la carpeta de bloques en el directorio del nuevo tema. Otra forma se describe en la documentación de Blocklab en Github. Ofrece dos filtros para cambiar la ubicación predeterminada de la plantilla:

“Para usar una plantilla diferente dentro de su tema, use el filtro block_lab_override_theme_template ($theme_template). Para usar una plantilla diferente fuera de su tema (por ejemplo, en un complemento), use el filtro block_lab_template_path ($ template_path)”.

Esto fue bastante fácil de configurar, incluso si no es un desarrollador de PHP, probablemente pueda usar la función block-field() de PHP y asegurarse de hacer referencia a los nombres de campo correctos.

Block Lab, en esencia, le brinda un método para crear los campos y configurar las propiedades del bloque en una pantalla, y luego debe agregar la plantilla de bloque correspondiente a una carpeta /blocks/ en el directorio de su tema. Es bastante sencillo.

Creación de un bloque de equipo con ACF 5.8

ACF (Advanced Custom Fields) versión 5.8 salió con un generador de bloques (solo disponible en la versión Pro). Para mi prueba utilicé ACF 5.8 RC 1. La versión final ya está disponible. Elliot Condon es el autor del complemento y la primera versión se lanzó en 2011. El complemento se ha convertido en una herramienta de desarrollo muy popular para autónomos y agencias por igual y tiene más de 1 millón de instalaciones.

Su éxito y versatilidad hacen que la creación del grupo de campo sea un proceso más complicado en comparación con los otros dos complementos. La versión Pro 5.8 contiene la primera versión de su herramienta de construcción de bloques.

Esta es la vista de administrador del grupo de campo "Miembro del equipo".

Ahora, ¿cómo convierto esto en un bloque? La documentación es lo suficientemente completa. Nota: En esta prueba fui en un orden ligeramente diferente...

Comencé con Field Group y necesitaba volver a esa pantalla de administración después de registrar el bloque (ver más abajo).

Usé dos archivos. Primero, necesitaba registrar el bloque en el functions.php de mi tema. Para el código de representación de plantilla/bloque, utilicé content-block-team-member.php también para almacenarlo en la carpeta del tema activo.

Verás cómo esos dos encajan en un segundo. El resto del trabajo lo realiza el complemento en el back-end.

Así que escribamos el código de bloque en PHP

El primer fragmento es el registro del bloque. Le di un nombre, un título, una descripción, señalé la plantilla de representación, le di una categoría, un ícono y algunas palabras clave, bajo las cuales el productor de contenido puede encontrar el bloque en el Insertador de bloques. Me desplacé hasta el final de functions.php de mi tema y agregué este fragmento:

 función registro_acf_bloques() {
   // registrar un bloque de miembros del equipo.
   acf_register_block(matriz(
       'nombre' => 'miembro-del-equipo-acf',
       'título' => __('Miembro del equipo ACF'),
       'descripción' => __('Un bloque personalizado de miembro del equipo creado a través de ACF 5.8'),
       'render_template' => 'contenido-bloque-miembro-del-equipo.php',
       'categoría' => 'formato',
       'icono' => 'administrador-comentarios',
       'palabras clave' => array( 'miembro del equipo', 'equipo' ),
   ));
}
// Comprobar si la función existe y conectarse a la configuración.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

Este código proviene directamente de la documentación y solo cambié algunos valores.

En la siguiente sección, creé la plantilla de representación de bloques. El nombre del archivo debe coincidir con el atributo "render_template" en el texto anterior, que es " content-block-team-member.php "

También seguí la documentación de ACF y solo cambié algunos valores y actualicé el código de visualización.

 <?php
// crea el atributo id para un estilo específico
$id = 'miembro del equipo' . $bloque['id'];

// crea la clase de alineación ("alignwide") a partir de la configuración del bloque ("wide")
$alinear_clase = $bloque['alinear'] ? 'alinear'. $bloque['alinear'] : '';

// Cargar valores y asignar valores por defecto para los campos del bloque.
$short_bio = get_field('short_bio') ?: 'la breve biografía va aquí...';
$first_name = get_field('first_name') ?: 'First Name';
$apellido = get_field('apellido') ?: 'Apellido';
$imagen = get_field('imagen');
$dirección_email = get_field('dirección_email');
$extensión = get_field('extensión');
?>

" class="miembro-del-equipo">
       

   

   " alt="" alt=" " ancho="150"/>
       
       

       

       
       
   

Como comencé con Fieldgroup, necesitaba regresar y asegurarme de que el grupo esté asociado con el bloque que acabo de registrar. Debajo de la pantalla Fieldgroup, creé una regla para la ubicación: Debe leer: “Mostrar este grupo de campo si el Bloque es igual a Miembro del equipo ACF.

Ahora veamos cómo funciona esto en el editor de bloques cuando agrego dos miembros.

Fue una experiencia interesante. Puede usar el formulario en la sección del editor para ingresar los datos. Otra opción es ingresar los datos en los campos del formulario disponibles en la barra lateral y verás la actualización del bloque en tiempo real. Puede alternar entre los dos métodos, pero haciendo clic en el botón "Cambiar a editar" o "Cambiar a vista previa", según el método que esté utilizando en este momento.

La interfaz de usuario del editor de bloques funciona bien. Vale la pena pasar por la configuración y el código más elaborados necesarios.

Creación de un Team Block con Lazy Blocks

El tercer complemento de esta prueba se llama "Lazy Blocks" de Nikita de nkdev.info, el mismo equipo que también publicó la colección de bloques GhostKit.

No solo me permite almacenar información en post_content, sino que también tengo la opción de almacenarla en la tabla post_meta.

Aquí hay un video del uso de la interfaz para crear los campos.

Como esta pantalla de administración se enfoca en obtener toda la información para crear los bloques, a la izquierda creé mis campos y en la barra lateral. Completé la información necesaria para registrar un bloque con el editor.

Debajo, pude agregar el HTML para frontend y backend. La sintaxis es incluso más fácil que Block Lab y, por supuesto, mucho más fácil que las plantillas de ACF.

No necesité agregar ningún código a functions.php de mi tema ni necesité crear archivos adicionales con mi código de plantilla.

Puede agregarlo todo aquí, con la ayuda del resaltado de sintaxis y las etiquetas de combinación en lugar de las llamadas a funciones. La documentación muestra múltiples formas de escribir su código de plantilla. Definitivamente soy un fanático de Handlebars (plantillas semánticas), ya que en este contexto está mucho más cerca de las etiquetas de combinación de otros sistemas.

Copié/pegué el mismo código en la pestaña "Editor HTML", para poder ver la interfaz debajo de los campos del formulario.

Usémoslo.

Esto parece funcionar. Fue un poco incómodo que el formulario no desapareciera cuando anulé la selección del bloque. Ocupa mucho espacio en el editor. Aunque quería tener a los miembros del equipo en un bloque de dos columnas, no logré arrastrar y soltar los dos bloques en un bloque de columnas. Mencioné esto en mi tema de soporte y nK respondió: "... ocultar los controles cuando el bloque no está seleccionado es una buena característica, que ya se agregó en ACF Blocks y se agregará pronto en Lazy Blocks". Aquí lo tienes, todo a su debido tiempo.

Conclusión: Complejo, Evolucionado o Fácil.

ACF 5.8 tiene una función de construcción de bloques muy robusta, y todos los que han estado usando el complemento para construir sitios estarán muy contentos de poder crear bloques dinámicos para sus clientes. Está bien pensado y los desarrolladores de todos los conjuntos de habilidades se pondrán en marcha rápidamente.

Alguien que no esté bien versado en PHP tendrá su parte justa de prueba y error para que todo funcione. Se volverá aún más complicado cuando los requisitos para los bloques se involucren más y vayan más allá del caso de uso de esta prueba. Esta no es una herramienta para principiantes de WordPress o implementadores de sitios de bricolaje que no escriben mucho código por sí mismos.

Por ahora, solo la versión ACF 5.8 Pro viene con la función de creación de bloques. Condon está contemplando convertirlo en un complemento independiente. (Mira lo que opinan los Twitteratti sobre la idea…)

Block Lab se encuentra en sus primeras etapas de desarrollo. Logra abstraer la mayor parte de la arquitectura de bloques y reduce la cantidad de código que debe escribirse. La documentación es muy útil. La plantilla se almacena en un archivo separado y debe mantenerse con el resto de los archivos de temas. Si en mi empresa lo usáramos para cualquiera de nuestros proyectos, almacenaríamos el archivo de plantilla con uno de nuestros complementos auxiliares, para que nuestros clientes puedan cambiar de tema sin perder el contenido y la visualización de los bloques creados con Block Lab.

La versión Pro cuenta con funciones adicionales, como campos repetidores, importación/exportación de bloques, campos de objetos de usuario, campo de mapa y muchas más funciones de bloques.

XWP es una agencia que trabaja con clientes empresariales en el alojamiento VIP de WordPress.com y otras corporaciones. Los miembros de su equipo están contribuyendo con otras grandes ideas en el espacio de WordPress, incluido el Personalizador, AMP y Tide. Espero que el complemento permanezca y crezca con Gutenberg Phase 2 hasta convertirse en un sistema sólido para implementadores de sitios, agencias y desarrolladores de temas.

Lazy Blocks es una delicia para configurar y, como se mencionó, soy un fanático de la sintaxis de plantillas de Handelbars. Es fácil de aprender incluso para principiantes, y con un poco de práctica, el propietario de un sitio podría crear bloques de Gutenberg específicos para su sitio. El manejo de bloques en el editor, aunque funciona, es un poco torpe, ya que la pantalla no cambia entre el estado de selección de bloque y el estado de deselección en este momento.

Si existe el requisito de tener campos adicionales para una página o una sección de una publicación, Lazy Blocks es una gran herramienta para crear prototipos y pasar rápidamente de la idea a la prueba de concepto.

La única advertencia: no pude averiguar quiénes son las personas detrás de nkdev.info y el nombre Nikita. El sitio web solo revela que es una empresa joven pero nada más. Si usa el complemento, asegúrese de tener el Plan B en su lugar en caso de que los desarrolladores abandonen el complemento antes de que despegue.

ACF 5.8 es bastante complejo; Block Lab es un semi-complejo muy flexible y único; y Lazy Blocks tiene un nombre adecuado y es el más fácil de usar. Ninguno de ellos le permite salirse con la suya sin escribir código, ya que cada bloque necesita alguna salida de visualización en HTML.

Déjame saber lo que piensas acerca de estos tres complementos de generación de bloques. Además, si encontraste otro complemento que te permite construir bloques sin entrar en Javascript, ¡quiero saberlo! ¡Por favor comparte tus pensamientos y descubrimientos en los comentarios!