Cómo crear un bloque personalizado de Gutenberg en WordPress (en 3 pasos)

El editor de WordPress Block (“Gutenberg”) ofrece una amplia gama de bloques construidos, pero una sola dimensión no siempre se ajusta a todos. Sal de la caja, Gutenberg puede no tener todo lo que necesita para construir un hermoso sitio web basado en bloques. Afortunadamente, hay formas de expandir la biblioteca construida de Gutenberg. Usando un complemento como Genesis Custom Blocks, puede construir sus propios elementos utilizando el editor familiar de WordPress. Puede incluir un bloque de productos asociado que puede usar fuera de los productos de WooCommerce ordinarios o un bloque de cupón que solo aparece a los clientes conectados.
En este artículo, discutiremos por qué tantos propietarios de sitios web desarrollan bloques personalizados de Gutenberg. Luego le mostraremos cómo construir el suyo en tres pasos simples. ¡Vamos a empezar! Una introducción a los bloques personalizados (y por qué es posible que desee crearlos) es posible que el editor de WordPress Gutenberg fuera controvertido cuando se introdujo por primera vez. Sin embargo, ahora se acepta generalmente que el editor de bloques ofrece más propietarios de sitios de flexibilidad. Aunque hay mucho que ser agradable, este editor tiene algunas limitaciones, especialmente cuando se usa terceros complementos. Por ejemplo, el complemento de la base de WooCommerce tiene una característica de los productos asociados que puede usar en varias ubicaciones en su sitio. Sin embargo, esta característica no está disponible como un bloque.
Genesis Custom Blocks es un complemento que puede usar para construir sus propios bloques. Crear un elemento personalizado puede ser útil si se esfuerza por dar vida a su visión creativa utilizando la selección predeterminada de WordPress. También puede ser una excelente manera de darle a su sitio un aspecto único o incluso una nueva funcionalidad. Diseñar sus propios bloques también significa que no tendrá que instalar complementos de WordPress simplemente para acceder a sus bloques. Esto puede ayudar a minimizar la cantidad de complementos instalados en su sitio, lo cual es una buena noticia para la seguridad. También puede reducir el tiempo que necesita para mantener sus complementos. Si ha expandido su sitio con múltiples complementos, aplicaciones, sistemas u otros servicios de terceros, los bloques personalizados pueden ayudar a la compatibilidad. Puede diseñar estos elementos para asegurarse de que se integren con todo el software y los servicios adicionales que utiliza su sitio. Aunque es posible crear un efecto de bloqueo personalizado agregando código a sus páginas y publicaciones, esto puede consumir mucho tiempo y puede ser frustrante. También deja muchas oportunidades para errores humanos, como errores de ortografía y errores de escritura. Por lo general, es mucho más fácil implementar su diseño como un bloque de contenido reutilizable. Luego, cada vez que desee usar este bloque, simplemente puede seleccionarlo del editor familiar Gutenberg.
Cómo crear un bloque personalizado de Gutenberg en WordPress (en 3 pasos) en este artículo, utilizaremos el complemento Genesis Custom Blocks para crear un elemento personalizado. Por ejemplo, crearemos un bloque orgánico del autor que pueda agregar al final de las publicaciones de blog. Este bloque consistirá en un campo de imagen en el que el autor puede agregar su foto o avatar y un área para su biografía. También puede agregar cualquier campo adicional que desee usar. Después de activar los bloques personalizados de Genesis de complemento, está listo para comenzar. Paso 1: Configure su bloque en el tablero de WordPress, navegue a bloques personalizados> Agregar nuevo. Luego puede darle a su bloque un nombre descriptivo: a continuación, configurará las propiedades del bloque. Esto lo ayudará a encontrar este bloque más fácil en el selector de bloques de Gutenberg. En este paso, puede elegir el icono que representará este bloque en el editor y la categoría en la que se almacenará. Puede elegir entre las categorías de bloque predeterminadas o crear una nueva seleccionando Agregar una nueva categoría. Si tiene la intención de crear más bloques, puede ayudarlo a crear una categoría para almacenar todos sus bloques de génesis:
También puede asignar algunas palabras clave a este bloque. Estas palabras clave facilitarán la búsqueda de este bloque en el selector. Puede ingresar un máximo de tres:

Por defecto, puede usar bloques personalizados en páginas y publicaciones. Sin embargo, puede cambiar este comportamiento predeterminado utilizando los botones de tipos de publicación. Debido a que crea un bloque orgánico del autor en este ejemplo, es posible que desee limitarlo a las publicaciones, ya que es inusual asignar un autor a las páginas de un sitio web. El Slog de bloques se genera automáticamente sobre la base de su nombre. Sin embargo, puede editar este sirviente si es necesario. Usaremos el servidor para crear nuestra plantilla de bloque en un paso posterior, por lo que es importante tener en cuenta esta información. PAS 2: Diseñe su bloque personalizado de Gutenberg, luego agregará algunos campos de editor a su bloque personalizado. Estos campos son puntos de datos que puede editar cada vez que usa este bloque (por ejemplo, agregando una foto en un campo “Imagen”). Para agregar un campo, seleccione el campo Editor y luego haga clic en el icono más:

En la etiqueta de campo, ingrese el texto que se mostrará junto al campo introductorio. Esta es su oportunidad de darle al autor una indicación del contenido que deberían presentar. Bajo el tipo de campo, elija el tipo de entrada que este campo debe aceptar. Esto puede ayudarlo a asegurarse de que todos los autores usen el bloque de manera consistente.

Genesis Custom Blocks acepta una amplia gama de tipos de campo, incluida la “casilla de verificación”, “imagen” y “alternar”. Para un autor biológico del autor, generalmente incluirá un campo de imagen en el que el autor puede mostrar su foto o avatar. También necesitará un espacio para su biografía. Para hacer esto último, puede crear un texto simple inseriendo el texto agregando un bloque de texto. Alternativamente, puede darle al autor más espacio para trabajar agregando una “textura”. Esta textura de campo crea una opción para insertar el texto en varias líneas, que es adecuada para párrafos. A medida que agrega diferentes campos, tendrá acceso a diferentes opciones de configuración. En las siguientes capturas de pantalla, usamos texto como tipo de campo. Para un campo de texto, puede proporcionar un texto sustituyente y especificar un límite de caracteres. También puede usar el ancho de campo para especificar cómo se debe mostrar en su sitio web:

Puede repetir estos pasos para cada campo en el bloque personalizado. Cuando esté satisfecho con la configuración de su bloque, haga clic en Publicación. Este artículo ahora estará disponible en WordPress Block Selector.

Paso 3: Cree una plantilla de bloque para mostrar el nuevo bloque correctamente, deberá crear un bloque para el tema de WordPress. Esto incluye todos los datos de campo utilizados en su bloque personalizado, como su cabeza y la foto del autor. Deberá almacenar las plantillas de bloques en el director de directorio. La forma en que accede a este directorio variará según su entorno de alojamiento. Sin embargo, la mayoría de los proveedores de alojamiento proporcionarán acceso FTP. Luego, puede usar un cliente FTP, como Filezilla, para conectarse de forma remota a su proveedor de alojamiento. Si no está seguro de cómo hacer esto, puede ayudarlo a consultar la documentación de su proveedor o puede comunicarse con ellos directamente para obtener ayuda. Después de haber conectado con éxito a su sitio web, puede abrir el director del tema activo. En este director, cree una nueva carpeta llamada “bloques”. Luego cree un nuevo archivo PHP en el directorio de bloques. Puede nombrar este archivo en el siguiente formato: block- {block-slug} .php Asegúrese de reemplazar “LUG de bloque” con la babosa para el bloque que creó en el paso anterior. Por ejemplo, podría parecer “bloque-custom- block.php”. En este momento, Génesis puede reconocer con éxito la plantilla de bloque. Sin embargo, deberá codificar la plantilla usando HTML y cualquier funciones de PHP. La forma en que complete este paso variará según su bloque. Sin embargo, encontrará muchos ejemplos de código en el sitio web de Genesis Custom Blocks. Después de completar con éxito estos pasos, debería poder acceder al bloque personalizado en el editor de Gutenberg:
Si su bloque no aparece automáticamente, puede acceder a la biblioteca del editor de Gutenberg haciendo clic en todo.Luego puede seleccionar la categoría en la que creó el bloque personalizado; ahora debería poder insertarla en la página o publicación.La conclusión de Gutenberg ofrece una selección decente de bloques construidos, pero está lejos de ser una lista exhaustiva.Usando un complemento como Genesis Custom Blocks, puede ir más allá de la biblioteca de Gutenberg.En este artículo le mostré cómo diseñar y desarrollar un bloque personalizado de Gutenberg, en tres etapas: configure el bloque personalizado de Gutenberg.
Diseñe su bloque.

Construya una plantilla de bloque.
¿Tiene alguna pregunta sobre la creación de un bloque personalizado de Gutenberg en WordPress?¡Pregunte en la sección de comentarios a continuación!