Bloques de Gutenberg fáciles de personalizar usando Blockstudio y ACF

En este breve artículo, quiero repasar cómo crear un Gutenberg Block personalizado usando Blockstudio. Blockstudio es un marco de bloques moderno y flexible para WordPress. Con la adopción de Gutenberg, la capacidad de crear rápidamente bloques personalizados es cada vez más importante. Este es un método increíblemente fácil para crearlos, y aunque necesita escribir código para hacerlo, es mucho más simple y eficiente con BS (en comparación con otros métodos).

Esta herramienta facilita no solo agregar el bloque, sino también generar campos personalizados (puede elegir ACF Pro o Metabox Blocks), guardar información en la base de datos y aplicar estilos y scripts en línea con facilidad.

Echemos un vistazo rápido a cómo podemos hacer un bloque Gutenberg personalizado usando este marco en menos de 5 minutos (PD: nunca antes había hecho un bloque personalizado).

El proceso de hacer un bloque

Para este sitio web, necesito una manera fácil de agregar un código personalizado que se muestre en la interfaz en una interfaz fácil de entender.

Durante algunos meses, he estado usando el elemento HTML de bloque de código SPX (esto es lo que se usa arriba). Es una implementación realmente simple y algo que ya está instalado en este sitio web, ya que uso SPX para algunos efectos con Oxygen. Sin embargo, SPX no viene con elementos de Gutenberg. Debido a que es un elemento HTML, insertaría un cuadro HTML en Gutenberg y luego implementaría la visualización del código de la siguiente manera:

Funcionó, pero quería un bloque de código dedicado para Gutenberg. Entonces, usé Blockstudio + ACF para hacer esto:

(este es el bloque que estoy usando en Gutenberg para insertar los bloques de código en esta publicación)

Mi nuevo bloque esencialmente proporciona una GUI visual para insertar el código como lo estaba haciendo con HTML. Pero este bloque hace que sea más fácil de administrar y también ofrece un campo de editor de código genial directamente en Gutenberg.

Así es como se hizo:

Primero, instalé Blockstudio (complemento) en Isotropic. Por lo general, buscará una carpeta dentro de su tema para cargar sus archivos de bloques personalizados. Sin embargo, Oxygen Builder, que es en lo que se basa este sitio web, deshabilita completamente el tema, por lo que necesitaba crear un complemento personalizado a partir de este modelo oficial para que funcione en este sitio web.

Si lo instala desde esa fuente, todo lo que necesita hacer es comenzar a agregar bloques a la carpeta "Bloques", y ya hay un bloque de demostración para que lo pruebe.

El proceso de creación de un bloque utilizando este marco tiene 3 pasos: configurarlo, agregar los campos y luego agregar el marcado.

Para mí, hice un archivo llamado iso-custom-code.php en la carpeta Blocks e inserté el siguiente código (¡bastante simple!):

El fragmento inicial de código le da a Gutenberg toda la información que necesita para registrar el bloque en el editor. Por ejemplo, puede darle un título y un icono. A partir de ahí, agregué dos campos personalizados. El primero es un campo de radio que puede usar para seleccionar el tipo de código. El segundo campo es un campo de editor de código.

Este no es un campo ACF estándar, sino un complemento de terceros que usa el método ACF general para agregar un tipo de campo personalizado. Lo realmente genial de Blockstudio es que este campo personalizado funcionó de inmediato y se muestra directamente en el editor de Gutenberg.

Vale la pena señalar que en realidad está registrando los campos personalizados directamente en este bloque. Puede elegir aplicar un grupo de campos a un tipo de publicación, pero no es necesario ingresar a la interfaz de usuario de ACF y crear ningún campo allí, como se hace en la segunda parte de este código.

Los campos se agregan de la misma manera que lo haría con PHP normal, y la documentación es relativamente fácil de entender. Probablemente ni siquiera necesite conocer este lenguaje de programación para poder resolverlo: https://www.advancedcustomfields.com/resources/register-fields-via-php/

El marcado real es solo una inserción HTML y PHP estándar de un campo ACF personalizado. Y una vez que se guarde, el Gutenberg Block personalizado se mostrará en el editor y se renderizará en la interfaz. No hay absolutamente ninguna hinchazón aquí, y el marcado que se define en el archivo de bloque personalizado es el marcado que se mostrará en la parte frontal del sitio web.

El beneficio final es que puede usar las características nativas de Gutenberg ya que los bloques que crea son bloques reales de Gutenberg. Puede copiar y pegar, hacer reutilizable y más. Razonablemente, podría construir un sitio web completo usando esta herramienta solo en Gutenberg. Tampoco hay bloqueo de proveedor.

Reflexiones sobre BlockStudio

Personalmente, estoy usando Gutenberg para administrar, estructurar y crear todas las publicaciones de blog en este sitio web. Sin embargo, para el diseño general del sitio y las plantillas, se utiliza Oxygen Builder.

Blockstudio viene con una biblioteca de algunos bloques bien construidos que puede usar como punto de partida para sus propias creaciones. Esto es realmente genial porque le brinda una tonelada de ejemplos de código que luego puede usar para modificar lo que está buscando construir. Por supuesto, es un marco y comprender el PHP subyacente y cómo funciona te hará la vida mucho más fácil, pero en mi opinión, no necesitas saberlo para poder construir bloques con esta herramienta. Todo lo que necesita saber es cómo copiar y pegar desde varias documentaciones, ejemplos y fuentes.

Tanto la documentación de ACF como la de Blockstudio están increíblemente bien escritas y son fáciles de seguir. Y si está más familiarizado con el complemento de campo personalizado MetaBox, ese funcionará igual de bien.

Creo que el precio está justificado por la flexibilidad y potencia de esta herramienta. Recientemente comencé a usarlo y estoy emocionado de probar las funciones avanzadas como Twind y Alpine.