Guía completa de los patrones de bloques de Gutenberg (I)

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

La semana pasada, Matt Mullenweg, como es tradición cada año, hizo su ponencia (en este caso, virtual), State of The Word, en la que presentó un breve resumen del estado actual y las novedades de WordPress.

Matt está más que nunca centrado en que nos enamoremos de la experiencia que proporciona el editor de bloques Gutenberg. Una de las novedades que Matt resaltó, y que llegó con la versión 5.5 de WordPress, es los patrones de bloques. Pensé que sería interesante confeccionar esta guía completa sobre los mismos.

La guía está dividida en tres entradas y veremos los siguientes temas:

  1. Introducción a los patrones de bloques
  2. Insertar un patrón en una página
  3. Patrones pre-definidos y otros disponibles en directorios
  4. Añadir patrones disponibles en directorios a tu sitio
  5. Cómo crear un patrón desde cero
  6. Cómo crear un patrón si no eres desarrollador
  7. Cómo convertir bloques reutilizables en patrones de bloques
  8. Temas que usan patrones de bloques
  9. Documentación oficial.

Así que, sin más demora, empezamos con el primer punto.

1. Introducción a los patrones de bloques

Cuando llegó Gutenberg, el gran cambio respecto al editor clásico que conocíamos de WordPress fue que la unidad mínima de edición de cualquier elemento en una entrada o página pasaba a ser un «bloque». Es decir, un título, un fragmento de texto, una imagen, una tabla, todos ellos son un bloque. Y para cada uno de ellos, puedes definir algunas de sus propiedades como es el tamaño de la fuente del texto o de la imagen, su alineación, etc.

Los bloques rápidamente se fueron sofisticando y así, por ejemplo, tenemos bloques como el de galería de imágenes, el de medios y texto o el de fondo que están compuestos por otros bloques.

En el bloque de fondo han cambiado las opciones de alineación, ahora incluye alto completo y la opción de indicar la alineación del contenido dentro del bloque.

Simultáneamente, muchos desarrolladores también han ido proporcionado un gran conjunto de bloques con características únicas para que pudieras mejorar el diseño de tus páginas. Así, por ejemplo, en Nelio desarrollamos el Nelio Compare Images, para comparar dos imágenes con un simple deslizador.

Ferrari F40.
Ferrari F50.
Compara entre el Ferrari F40 y el Ferrari F50.

No sólo ha habido una explosión de bloques que podemos encontrar en plugins y temas, también sus capacidades han ido evolucionando con las distintas versiones de WordPress. Así, actualmente puedes crear bloques reutilizables y, con ellos, incluso crearte una plantilla de página o entrada.

Siguiendo con la idea de disponer de diseños pre-definidos y que se puedan reutilizar de forma rápida y fácil, con la versión de WordPress 5.5 han llegado los patrones de bloques. La idea de un patrón de bloques es muy sencilla: son secciones o fragmentos predefinidos formados por un grupo de bloques que puedes utilizar en la creación de páginas y entradas. Estos diseños pueden ser algo tan simple como una sección en la que se muestran dos botones o un apartado de precios con diseños llamativos y complejos.

2. Insertar un patrón en una página

Empecemos con lo básico, ¿cómo inserto un patrón en mi página?. Bien fácil. Al igual que con los bloques, para insertar un patrón, tan solo tienes que hacer al botón + que encuentras en la parte superior a la izquierda de tu editor y, en vez de añadir un bloque, seleccionar la pestaña Patrones. Allí verás que tienes un pequeño desplegable con los tipos de patrones que puedes seleccionar, los predefinidos de WordPress, los del tema que tengas instalado y cualquier otro que hayas instalado con algún plugin.

Selecciona el patrón que más te guste y verás cómo el conjunto de bloques que lo conforman se inserta en tu página.

Inserción de un patrón en el editor de Guttenberg
Inserción de un patrón en el editor de Guttenberg

Tras insertar el patrón, podrás modificar cada uno de los bloques tal y como has venido haciendo hasta ahora. Además si los bloques de ese patrón están agrupados en un grupo, también podrás modificar las propiedades del grupo como tal. Sencillo, ¿verdad?

3. Patrones pre-definidos y otros disponibles en directorios

La versión WordPress 5.5 ha llegado con un conjunto de patrones de bloques pre-definidos que ya puedes utilizar para crear tus páginas. Tan sólo tienes que hacer click al botón + que te comentado anteriormente para ver qué patrones tienes disponibles en tu sitio.

El tema que tengas instalado y activo también puede ofrecer patrones de bloques específicos de forma predefinida. Por ejemplo, el tema Twenty Seventeen o el tema Twenty Twenty-One de WordPress incluye algunos patrones de bloques y, los temas Go de GoDaddy y Genesis Blocks, también.

Pero si tras salir la versión de WordPress 5.0 ya tuvimos una explosión de bloques que aparecían como setas, con los patrones de bloques tampoco nos quedamos atrás. Puedes descargarte e instalarte bloques y patrones en tu web de forma bien sencilla, como ya te explico más adelante. Aquí tienes dos webs de bloques y patrones que están a tu disposición, aunque seguro que pronto habrá más:

  • Patrones de Shareablock de Jeffrey Carandang: un fantástico sitio web en el que puedes compartir y obtener un montón de bloques, plantillas y patrones para descargarte e instalar en tu sitio.
Captura de pantalla del directorio Shareablock.
  • Gutenberg Hub de Munir Kamal: en el que también encontrarás un montón de bloques, plantillas y patrones que puedes copiar.
Gutenberg Hub website.
Gutenberg Hub website.

También está el plugin Redux Framework, el cual ofrece una biblioteca con más de 1000 bloques, plantillas y patrones de terceros (incluyendo los disponibles en los directorios anteriores) para insertar en tus páginas. El plugin permite descargar hasta 5 patrones gratuitos y luego ya debes pasar a la versión de pago.

Captura de pantalla del plugin Redux-Framework.

Como ves, por patrones disponibles no será.

4. Añadir patrones disponibles en directorios a tu sitio

Como ya he comentado, una opción para añadir los patrones disponibles en Shareablock y GutenbergHub es utilizando el plugin Redux Framework. Si eres un diseñador profesional de webs de WordPress, seguramente sea un una buena opción para siempre encontrar tantos patrones como quieras de forma bien rápida. Pero también puedes instalar los patrones de Shareablock y Gutenberg Hub de forma gratuita. Veamos cómo.

Añadir un patrón de Shareablock

En el caso de Shareablock, para instalar un patrón (y por supuesto, un bloque o plantilla), sólo tienes que seleccionarlo de la web y hacer clic en el botón Download Now.

Features column patter from shareablock.
Patrón Features Column de Sareablock.

La primera vez te pedirá un una dirección de email para enviarte un usuario y contraseña con el que descargar el patrón.

En el correo hay un enlace para iniciar sesión en su web; hazlo y podrás descargarte el patrón que quieras. Una vez seleccionado el patróny tras volver a hacer clic en Download Now, te aparecerá la confirmación de que el patrón ha sido enviado a tu correo.

Shareablock mail with download link.
Shareablock mail with download link.

Tras hacer clic en el enlace proporcionado en el correo, podrás acceder a la web para descargarte el fichero .json del patrón. Una vez descargado, tan solo tienes que arrastrarlo al editor de bloques de WordPress y automáticamente ya verás todos los bloques que conforman el patrón.

Bloques incorporados en el editor.
Bloques incorporados en el editor.

Fíjate que con este sistema hemos copiado los bloques que conforman el patrón al editor, pero no se ha incorporado en nuestra librería.

Añadir un patrón de Gutenberg Hub

Añadir un patrón de Gutenberg Hub es más sencillo. Igual que antes, primero selecciona el patrón que quieres copiar.

Selección de un patrón de Gutenberg Hub.

A la derecha del patrón, verás el botón de Copy Code. Haz clic en el botón y luego simplemente «pega» el contenido de tu portapapeles en tu editor Gutenberg.

¡Pero espera! No tan rápido. Para que se vea con un aspecto parecido al que ves en la imagen, Munir Kamal te recomienda que instales su plugin gratuito, EditorPlus, el cual añade nuevos bloques al editor y extiende Gutenberg con controles avanzados de diseño, tipografías, iconos, Shape Divider, animaciones y muchas más funcionalidades.

Patrón de Gutenberg Hub copiado.

Como puedes ver en la imagen anterior, en la barra lateral derecha del editor dispones de controles avanzados para modificar el diseño del patrón copiado. En cualquier caso, y de forma parecida a antes, fíjate que el patrón que acabamos de pegar no está disponible en la librería de patrones.

Ahora ya sabes qué son los patrones de bloques, dónde encontrarlos y cómo insertarlos en tu web para crear grandes diseños. ¡No te pierdas la próxima entrada en la que aprenderás cómo crear tus propios patrones!

Foto destacada de Raul Cacho Osesen Unsplash.

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.