Cómo crear un bloque Gutenberg personalizado en WordPress (Easy Way)

¿Quieres crear un bloque Gutenberg personalizado para tu sitio WordPress? Después de la actualización de WordPress 5.0, necesita usar bloques para crear contenido en el nuevo editor de bloques de WordPress.

WordPress incluye varios bloques útiles que puedes usar cuando escribes contenido. Muchos plugins de WordPress también vienen con sus propios bloques que puedes usar.

Sin embargo, a veces puede que desee crear su propio bloque Gutenberg personalizado para hacer algo específico.

Si está buscando una solución fácil para crear bloques Gutenberg personalizados para su sitio WordPress, entonces está en el lugar correcto.

En este tutorial paso a paso, le mostraremos la forma más sencilla de crear un bloque WordPress personalizado para Gutenberg.

Nota : Este artículo es para usuarios intermedios. Necesitará estar familiarizado con HTML y CSS para crear bloques Gutenberg personalizados.

Paso 1: Comenzar

Lo primero que debe hacer es instalar y activar el plugin Block Lab.

Es un plugin de WordPress que te permite crear bloques personalizados desde tu panel de administración sin mucha molestia.

Para instalar el plugin, puedes seguir nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, puede continuar con el siguiente paso de crear su primer bloque personalizado.

Paso 2: Crear un nuevo bloque

Por el bien de este tutorial, vamos a construir un bloque detestimonios.

Primero, diríjase a Block Lab " Add New desde la barra lateral izquierda de su panel de administración.

En esta página, debe dar un nombre a su bloque. En el campo de texto "Introducir el nombre del bloque" se puede escribir cualquier nombre que se desee.

Vamos a nombrar nuestro bloque personalizado: Testimonios.

En el lado derecho de la página, encontrará las propiedades del bloque. Aquí puede elegir un icono para su bloque y seleccionar una categoría de bloque en el cuadro desplegable Categoría.

El slug se rellenará automáticamente en función del nombre del bloque, por lo que no tendrá que cambiarlo. Sin embargo, puede escribir hasta 3 palabras clave en el campo de texto Palabras clave, para que su bloque pueda ser encontrado fácilmente.

Ahora vamos a añadir algunos campos a nuestro bloque. Puede agregar diferentes tipos de campos como texto, números, correo electrónico, URL, color, imagen, casilla de verificación, botones de opción y mucho más.

Añadiremos 3 campos a nuestro bloque de testimonios personalizados: un campo de imagen para la imagen del revisor, un cuadro de texto para el nombre del revisor y un campo de área de texto para el texto del testimonio.

Haga clic en el botón + Añadir campo para insertar el primer campo.

Esto abrirá algunas opciones para el campo. Echemos un vistazo a cada uno de ellos.

• Etiqueta de campo : Puede utilizar cualquier nombre de su elección para la etiqueta de campo. Vamos a nombrar nuestro primer campo como Imagen del Revisor.
• Nombre del campo : El nombre del campo se generará automáticamente basado en la etiqueta del campo. Usaremos este nombre de campo en el siguiente paso, así que asegúrese de que sea único para cada campo.
• Tipo de campo : Aquí puede seleccionar el tipo de campo. Queremos que nuestro primer campo sea una imagen, así que seleccionaremos Imagen en el menú desplegable.
• Field Location : Puede decidir si desea añadir el campo al editor o al inspector.
• Texto de ayuda : Puede añadir texto para describir el campo. Esto no es necesario si está creando este bloque para su uso personal.

También puede obtener algunas opciones adicionales según el tipo de campo que elija. Por ejemplo, si selecciona un campo de texto, obtendrá opciones adicionales como texto de marcador de posición y límite de caracteres.

Puede hacer clic en el botón Cerrar campo una vez que haya terminado con el campo de imagen.

Siguiendo el proceso anterior, añadamos otros 2 campos para nuestro bloque de testimonios haciendo clic en el botón + Añadir campo .

En caso de que desee reordenar los campos, puede hacerlo arrastrándolos utilizando el icono de hamburguesa en el lado izquierdo de cada etiqueta de campo.

Para editar o borrar un campo en particular, debe pasar el ratón por encima de la etiqueta del campo para obtener las opciones de edición y eliminación.

Una vez que haya terminado, haga clic en el botón Publicar , presente en el lado derecho de la página, para guardar su bloque personalizado de Gutenberg.

Paso 3: Crear una plantilla de bloques

Aunque ha creado el bloque personalizado de WordPress en el último paso, no funcionará hasta que cree una plantilla de bloque llamada block-testimonials.php y la cargue en su carpeta de temas actual.

El archivo de plantilla de bloques le dirá al plugin cómo mostrar sus campos de bloques dentro del editor. El plugin buscará el archivo de plantilla y luego lo usará para mostrar el contenido del bloque.

Si no tiene este archivo, se mostrará un error que dice "Template file blocks/block-testimonials.php not found" (Bloques de archivos de plantillas/bloques-testimonios.php no encontrados).

Vamos a crear el archivo de plantilla de nuestro bloque.

Primero, cree una carpeta en su escritorio y nómbrela bloques . Creará su archivo de plantilla de bloques dentro de esta carpeta y luego lo cargará en su directorio temático actual de WordPress.

Para crear el archivo de plantilla, puede utilizar un editor de texto plano como el Bloc de notas.

Cada vez que añada un nuevo campo a su bloque personalizado, necesita añadir el siguiente código PHP a su archivo de plantilla de bloques:

1

Sólo recuerde reemplazar agregue su nombre de campo aquí con el nombre del campo.

Por ejemplo, el nombre de nuestro primer campo es reviewer-image, por lo que añadiremos la siguiente línea al archivo de plantilla:

1

Simple, ¿no es así? Hagamos lo mismo para el resto de nuestros campos:

123

A continuación, añadiremos algunas etiquetas HTML al código anterior con fines de estilo.

Por ejemplo, puede envolver la imagen del revisor dentro de una etiqueta img para mostrar la imagen. De lo contrario, WordPress mostrará la URL de la imagen que no es lo que quieres, ¿verdad?

También puede agregar nombres de clase a sus etiquetas HTML y envolver su código dentro de un contenedor div para darle estilo al contenido de su bloque (lo cual haremos en el siguiente paso).

Así que aquí está nuestro código final para nuestra plantilla de bloques:

123456789>> >        

        

    

Finalmente, nombre el archivo como block-testimonials.php y guárdelo dentro de la carpeta blocks .

Paso 4: Estilice su bloque personalizado

¿Quieres darle estilo a tu bloque personalizado? Puede hacerlo con la ayuda de CSS.

Abra un editor de texto plano como el Bloc de notas y añada el siguiente código:

1234567891011121314141516171818192021.testimonial-block { width: 100%; margin-bottom: 25px;} .testimonial-image { float: izquierda; width: 25%; padding-right: 15px;} .testimonial-box { float: izquierda; width: 75%;} .clearfix::after { content: ""; clear: both; display: table;}

Una vez hecho esto, nombre el archivo como block-testimonials.css y guárdelo dentro de la carpeta blocks .

Paso 5: Subir el archivo de plantilla de bloques a la carpeta de temas

Ahora subamos la carpeta de bloques que contiene nuestro archivo de plantilla de bloques personalizado a nuestra carpeta temática de WordPress.

Para ello, necesita conectarse a su sitio WordPress usando un cliente FTP. Para obtener ayuda, puede consultar nuestra guía sobre cómo subir archivos a su sitio WordPress usando FTP.

Una vez que esté conectado, vaya a la carpeta /wp-content/themes/. Desde aquí necesita abrir la carpeta de temas actual.

Ahora suba la carpeta blocks , que contiene el archivo de plantilla de bloques y el archivo CSS, a su directorio temático.

Una vez hecho esto, puede proceder al paso final para probar su bloque personalizado.

Nota : El plugin Block Lab le permite crear bloques específicos de tema. Si cambias el tema de WordPress, entonces necesitas copiar la carpeta de bloques a tu nuevo directorio de temas.

Paso 6: Pruebe su nuevo bloque

Es hora de probar nuestro bloque de testimonios personalizados. Puede hacerlo dirigiéndose a Páginas " Añadir nuevo para crear una página nueva.

A continuación, haga clic en el icono Añadir bloque (+) y busque el bloque Testimonios. Una vez que lo encuentre, haga clic en él para añadir el bloque personalizado a su editor de páginas.

Ahora puede añadir un testimonio a esta página utilizando su bloque personalizado. Para añadir más testimonios, siempre puede insertar nuevos bloques de testimonios.

Una vez que hayas terminado, puedes previsualizar o publicar la página para comprobar si funciona correctamente o no.

Eso es todo! Has creado con éxito tu primer bloque de WordPress personalizado para tu sitio.

¿Sabías que puedes ahorrar tiempo con los bloques reutilizables en tu editor? Echa un vistazo a nuestra guía sobre cómo crear fácilmente bloques reutilizables en el editor de bloques de WordPress y utilizarlos en otros sitios web.

También puedes ver nuestra guía sobre cómo crear un tema personalizado de WordPress sin escribir ningún código.

Si te ha gustado este artículo, suscríbete a nuestros tutoriales de vídeo de YouTube Channel for WordPress. También puede encontrarnos en Twitter y Facebook.