Advertisement
  1. Web Design
  2. WordPress Gutenberg

Cómo crear bloques personalizados para Gutenberg

Scroll to top
Read Time: 6 min

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Gutenberg ha cambiado la forma en que los usuarios crean contenido con WordPress, y la forma en que los desarrolladores crean plugins y temas para WordPress. En este tutorial aprenderás cómo puedes crear bloques personalizados para Gutenberg.

Video: Bloques personalizados para Gutenberg

Una introducción rápida a Gutenberg

Gutenberg es una forma totalmente nueva para que las personas creen contenido en sus sitios WordPress. El editor clásico no ha cambiado mucho desde que WordPress fue creado en 2003, y aunque siempre ha sido muy válido para crear entradas de blog con mucho texto, no es ideal para los sitios web ricos en medios de hoy en día cuyos diseños son más complejos. Gutenberg es la respuesta que da el propio WordPress a los plugins constructores de páginas utilizados en tantos sitios web a día de hoy.

En Tuts+ tenemos una guía de aprendizaje para introducirte a Gutenberg: An Introduction to WordPress Gutenberg, además de este sencillo video de inicio rápido:

Además de estos recursos, tenemos una serie de cursos para iniciarte.

Por último, echa un vistazo a estos temas específicos para Gutenberg si estás interesado en ver lo que otros desarrolladores están haciendo con él:

Métodos para crear un bloque personalizado

Cuando se trata de crear bloques personalizados para Gutenberg, básicamente tienes dos opciones:

  • Crearlo con código desde cero
  • Usar un plugin

La primera opción es lógicamente la más difícil; requiere más conocimientos de código, ya que tienes que registrar tus bloques y personalizarlos a través de JavaScript.

En este tutorial vamos a tomar la ruta más fácil y usaremos un plugin. Las ventajas de usar un plugin son que podemos construir bloques usando una interfaz visual, y que no tenemos que preocuparnos por registrar los bloques con JavaScript. De hecho, no necesitaremos escribir ningún código JavaScript en absoluto.

Plugins para construir bloques Gutenberg

Echemos un vistazo a las opciones de plugin que tenemos a nuestra disposición.

Block Lab

Este es el que vamos a usar. Es gratis y perfecto para nuestras necesidades.

Lazy Blocks

Aunque todavía no he trabajado con este plugin, sus comentarios y valoraciones son muy sólidos y a partir de ellos se deduce que también es una buena opción.

Creación de un bloque simple

Empieza descargando e instalando el plugin Block Lab. Puedes encontrarlo desde tu escritorio de WP, bajo Añadir nuevo plugin. Se añadirán un nuevo grupo de elementos de menú en tu pantalla de administración de WP:

Como estamos usando la versión gratuita del plugin, sólo necesitamos un par de estos nuevos elementos de menú. Haz clic en Añadir nuevo.

¿Qué estamos creando?

Vamos a construir un pequeño bloque CTA (Llamada a la acción). Tendrá un título, una descripción, un botón y algún texto auxiliar. También necesitaremos algunos campos para permitir que el usuario cambie el color de nuestro CTA, agregue un borde si lo desea, y también un fondo. Por último, crearemos un conmutador para que puedan elegir si mostrar o no el texto auxiliar.

Por lo tanto, le damos a nuestro bloque un título ("CTA") lo que le asignará inmediatamente un ID (slug) que necesitaremos más adelante. Después indicamos qué tipo de bloque será. Mantendremos el nuestro como un bloque común.

A continuación, podemos añadir palabras clave. Se utilizan para buscar bloques mientras el usuario está creando un diseño de página. Pulsa Publicar y pasaremos al siguiente paso donde agregamos plantillas de bloque.

Hay dos partes para añadir una plantilla de bloque. Hay lo que se muestra en el editor de back-end y lo que se muestra en el front-end. Para el aspecto en el front-end tendremos que escribir un código HTML que nos dará como resultado los contenidos de bloques de la manera que queramos. También tendremos que introducir en el marcado algunas funciones PHP para extraer el contenido real.

Empieza añadiendo una carpeta de bloques

En la raíz del tema que tengas actualmente activo tendrás que crear una carpeta llamada "bloques". Añadiremos nuestros nuevos archivos de plantilla en esta carpeta. Y si olvidas dónde se supone que deben ir estos archivos, puedes ver la ruta a la que se hace referencia en la captura de pantalla anterior. Nuestro primer archivo se llamará "block-cta.php".

Hecho esto, ahora podemos empezar a agregar campos que el usuario usará para rellenar el bloque. Aquí verás que estoy añadiendo Title, que genera un identificador del mismo nombre. Necesitaremos el manejador para generar el contenido en nuestra plantilla.

Esta parte puede llevar un tiempo, así que comienza a añadir todos los campos que necesites, dándoles nombres, tipos, valores predeterminados, si estarán presentes en el Editor o en el Inspector (la barra lateral) y cualquier otra cosa que creas que necesitan. Visualiza el video de arriba para ver como desarrollo este proceso.

Estos son todos los campos que he creado finalmente:

Una vez guardado esto, ya podemos dirigirnos a una página y añadir nuestro bloque CTA:

Así es como se ve nuestro editor de bloques, con todos los campos que hemos añadido:

Ya podemos rellenar estos campos, aunque no se mostrará nada en el back-end porque aún no hemos construido una plantilla.

Renderizar en el backend y en el front-end

Aquí tienes el fragmento de código que he creado para contener el contenido del bloque y generar los valores introducidos en los campos:

Se explica bastante bien por sí solo. Hay un contenedor div, y luego un <h3> que contiene el título. La descripción se genera automáticamente, al igual que el botón. A continuación, hay una condición para determinar si se debe mostrar o no el texto auxiliar. Cada fragmento de datos se generará utilizando la función block_field().

También podemos añadir estilos, creando una subcarpeta dentro de la carpeta de nuestros bloques. Llámala "css", luego añade otro archivo: block-cta.css y coloca tus estilos dentro de él.

Estos son los estilos que utilicé para este ejemplo:

Ahora, cuando el bloque se represente en el front-end, se verá así:

Los mismos estilos también se aplican al editor del back-end:

Conclusión

Este tutorial te ha proporcionado una buena idea sobre qué necesitas para crear tus propios bloques Gutenberg. ¡Espero que puedas ver todo un mundo en potencia abriéndose ante ti! Los bloques Gutenberg son una forma muy útil de diseñar y reutilizar fragmentos de contenido: ¡estoy expectante por ver lo que creas con ellos!

Enlaces relacionados:

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.