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:
- Introducción a los patrones de bloques
- Insertar un patrón en una página
- Patrones pre-definidos y otros disponibles en directorios
- Añadir patrones disponibles en directorios a tu sitio
- Cómo crear un patrón desde cero
- Cómo crear un patrón si no eres desarrollador
- Cómo convertir bloques reutilizables en patrones de bloques
- Temas que usan patrones de bloques
- 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.
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.
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.
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?
Nelio Content
Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.
Panozk
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.
- Gutenberg Hub de Munir Kamal: en el que también encontrarás un montón de bloques, plantillas y patrones que puedes copiar.
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.
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.
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.
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.
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.
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.
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