Bloques de Gutenberg personalizados con blockstudio y ACF

En este artículo rápido, quiero repasar cómo crear un bloque personalizado de Gutenberg usando blockstudio. Blockstudio es un marco de bloque moderno y flexible. Con la adopción de Gutenberg, la capacidad de crear rápidamente bloques personalizados se vuelve cada vez más importante. Esta es una manera increíblemente fácil de crearlos, y aunque debe escribir código para hacerlo, es mucho más simple y efectivo con BS (en comparación con otros métodos). Esta herramienta facilita no solo la adición del bloque, sino también la generación de campos personalizados (tiene la opción entre los bloques ACF Pro o Metabox), guardando información en la base de datos y aplicando fácilmente estilos y scripts en línea.

Echemos un vistazo rápido a la forma en que podemos hacer un bloque personalizado de Gutenberg usando este marco en menos de 5 minutos (PD, nunca he hecho un bloque personalizado). El proceso de hacer un bloque para este sitio, necesito una manera fácil de agregar un código personalizado para mostrar en el front-end en una interfaz fácil de entender. El código va aquí durante varios meses, uso el elemento HTML de código SPX (esto se usa anteriormente). Es una implementación muy simple y algo que ya está instalado en este sitio, porque uso SPX para algunos efectos con oxígeno. 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 pantalla de código de la siguiente manera:

Funcionó, pero quería un bloque de código dedicado para Gutenberg. Así que usé blockstudio + acf para hacer esto:

(Este es el bloque que uso en Gutenberg para insertar los bloques de código en esta publicación) Mi nuevo bloque ofrece esencialmente una interfaz gráfica visual para insertar el código como lo hice con HTML. Pero, este bloque facilita la administración y también ofrece un campo de editor de código directo genial en Gutenberg. Así es como se hizo: primero, instalé blockstudio (complemento) en isotrópico. Por lo general, buscará una carpeta en su tema para cargar archivos de bloque personalizados. Sin embargo, Oxygen Builder, en el que se construye este sitio web, desactiva por completo el tema, por lo que tuve que crear un complemento personalizado de esta Boilerplate oficial para operar en este sitio web. Si lo instala desde esa fuente, todo lo que tiene que hacer es Comience a agregar bloques a la carpeta “Bloques”, y ya hay un bloque de demostración para probar. El proceso de crear un bloque con este cuadro tiene 3 pasos: configúrelo, agregue los campos y luego agregue la marca.
Lea los documentos para descubrir más que son claros y fáciles de seguir para mí, hice un archivo llamado ISO-Code.php en la carpeta de bloque y me inserté el siguiente código (¡bastante simple!): & Lt;? /* Título: Bloque de código Descripción: Visualización del código frontal, usando SPX. Categoría: icono icono ISOTROP: IconBackground Editor: #FFFFFFFFRIGRUNT:#000000 SupportSignTent: False Mod: Edit */ $ Fields = [ [ & apos; Key & apos; = & gt; & apos; code_type & apos;, & apos; etiqueta y apos; = & gt; & ACUALOUS; Tongue & apos;, & ACOQUEO; Nombre y apos; = & gt; & ACQUISO; style & apos;, & apos; type & apos; = & gt; & ACOQUEO; RADIO & APOS;, & ACUROUS; Elecciones y ACUALOus; = & gt; matrix ( & apos; js & aque ;; css & apos;, & apos; php & apos; = & gt; & apos; php & apos;, & apos; html & apos; = & gt; ;; ), & Aqueous; apariencia y acuosa; = & gt; & apos; horizontal & apos;, ], [ & aque; key & apos; = & gt; & apos; code_in & apos;, & apos; etiqueta y apos; = & gt; & ACOQUEO; CODE & APOS;, & ACUROUS; Nombre y apos; = & gt; & ACOQUEO; CODE & apos;, & apos; type & apos; = & gt; & apos; acf_code_field & apos;, ],]; ? & gt; & lt; spx-código tipo = & lt;

acuoso; )?: & apos; idioma y apos ;; ? & gt; & gt; & lt;? ? & gt; & lt;/spx-código & gt; La parte del código inicial 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 editor de código. Lo que es realmente ruidoso en Blockstudio es que este campo personalizado ha funcionado fuera de la caja y se muestra directamente en el editor de Gutenberg. Vale la pena señalar que realmente registra las costumbres directamente en este bloque. Puede elegir aplicar un grupo de campos a un tipo de publicación, pero no necesita ingresar la interfaz de usuario de ACF y crear campos allí, como se hace en la segunda pieza de este código. Los campos se agregan de la misma manera que procederá con PHP normal, y la documentación es relativamente fácil de entender. Probablemente ni siquiera tenga que conocer este lenguaje de programación para calcularlo fuera de https: //www.advancecustomfields.com/resources/register-fields-via-php/
El marcado real es solo un inserto estándar de HTML y PHP de un campo ACF personalizado. Y una vez que se salva, el bloque personalizado de Gutenberg se mostrará en el editor y se presentará en el front-end. Aquí no hay absolutamente ninguna hinchazón, y la marca que se define en el archivo de bloqueo personalizado es la marca que aparecerá en el frente del sitio web. Son bloques reales de Gutenberg. Puede copiar y pegar, hacer reutilizable y más. Razonablemente, podría construir un sitio web completo utilizando esta herramienta solo en Gutenberg. No hay bloqueo del vendedor.

Pensamientos sobre BLOCKSTUDIO personal, uso Gutenberg para administrar, estructurar y crear todas las publicaciones de blog en este sitio web. Sin embargo, para el diseño general y el modelado del sitio, se utiliza el constructor de oxígeno. Blockstudio viene con una biblioteca de algunos bloques bien construidos que puede usar como puntos de partida para sus propias creaciones. Es muy bueno porque le da muchos ejemplos de código que luego puede usar para cambiar en lo que desea construir. Por supuesto, es un marco y comprensión del PHP básico y la forma en que funciona hará que su vida sea mucho más fácil, pero en mi opinión no tiene que saberlo para construir bloques con esta herramienta. Todo lo que necesita saber es cómo copiar y pegar de varias documentación, ejemplos y fuentes.
La documentación de ACF y Blockstudio está increíblemente bien escrita y fácil de seguir.Y si está más familiarizado con el complemento de campo Metabox Custom, también funcionará.Creo que el precio está justificado para la flexibilidad y la potencia de esta herramienta.Recientemente comencé a usarlo y estoy emocionado de probar funciones avanzadas como Twind y Alpine. Abon y distribuir

Si le gustó este contenido, suscríbase al resumen mensual de noticias de WordPress, inspiración para sitios web, ofertas exclusivas y artículos interesantes.
Dar la baja en cualquier momento.No enviamos spam y nunca venderemos o distribuiremos su correo electrónico.