La guía completa de patrones de bloques de Gutenberg (I)

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

Matt está más enfocado que nunca en hacer que nos enamoremos de la experiencia que brinda el editor de bloques de Gutenberg. Una de las novedades que destacó Matt, que llegó con la versión 5.5 de WordPress, son los patrones de bloques . Pensé que sería interesante hacer esta guía completa sobre ellos.

La guía se divide en tres publicaciones y veremos los siguientes temas:

1. Introducción a los patrones de bloques
2. Insertar un patrón en una página
3. Patrones predefinidos y otros disponibles en directorios
4. Agregue patrones disponibles en directorios a su 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 dilación, ¡comencemos!

1. Introducción a los patrones de bloques

Cuando llegó Gutenberg, el gran cambio con respecto al editor clásico que teníamos en WordPress fue la introducción del concepto de “bloque”. Se suponía que todo era un bloque: el título de la publicación, sus párrafos, listas, imágenes… cada uno de ellos era un bloque, con sus propias propiedades de personalización para configurar su tamaño de fuente, título, alineación, etc.

Los bloques rápidamente se volvieron más sofisticados y ahora tenemos galerías de imágenes, bloques de medios/texto o incluso bloques que contienen otros bloques.

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

No solo ha habido una explosión de bloques que se pueden encontrar en plugins y temas, sino que sus capacidades también han evolucionado con las diferentes versiones de WordPress. Por lo tanto, actualmente puede crear bloques reutilizables y, con ellos, incluso crear una página o una plantilla de publicación.

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

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

Comencemos con lo básico, ¿cómo se inserta un nuevo patrón en una página? ¡Muy fácil! Al igual que con los bloques, para insertar un patrón solo tienes que hacer clic en el botón + en la parte superior izquierda de tu editor y, en lugar de agregar un bloque, selecciona la pestaña Patrones . Allí verás que 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 un plugin.

Selecciona el patrón que más te guste y observa cómo se insertan en tu página el conjunto de bloques que lo componen:

Después de insertar el patrón, puedes modificar cada uno de los bloques como lo has estado haciendo hasta ahora. Además, si los bloques de ese patrón están agrupados, también puede modificar las propiedades del grupo en su conjunto. Sencillo, ¿verdad?

3. Patrones predeterminados y más patrones de directorios de terceros

La versión WordPress 5.5 viene con un conjunto de patrones de bloques predefinidos que ahora puede usar para crear sus páginas. Solo tienes que hacer clic en el botón + que mencioné anteriormente para ver los patrones disponibles en tu sitio.

Además, su tema activo también puede definir sus propios patrones de bloques. Por ejemplo, el tema de WordPress Twenty Seventeen o Twenty Twenty-One incluye algunos patrones de bloques, al igual que los de GoDaddy y Genesis Blocks, por mencionar un par de ejemplos.

Después del lanzamiento de WordPress 5.0 tuvimos una explosión de bloques, y ahora estamos viendo el mismo resultado con los patrones de bloques: puedes descargar e instalar bloques y patrones en tu sitio web muy fácilmente, como explicaré más adelante. Aquí tenéis dos webs de bloques y patrones que están a vuestra disposición, aunque seguro que pronto habrá más:

• Shareablock Patterns de Jeffrey Carandang : un sitio web fantástico donde puede compartir y obtener montones de bloques, plantillas y patrones para descargar e instalar en su sitio.

• Gutenberg Hub de Munir Kamal, donde también encontrarás un montón de bloques, plantillas y patrones.

También está el complemento Redux Framework , que ofrece una biblioteca con más de 1000 bloques, plantillas y patrones de terceros (incluidos los disponibles en los directorios anteriores) para insertar en sus páginas. El complemento le permite descargar hasta 5 patrones gratuitos y luego puede actualizar a la versión paga.

4. Agregue patrones disponibles en directorios a su sitio

Como ya mencioné, puede usar el complemento Redux Framework para agregar patrones de Shareablock y GutenbergHub fácilmente. Si eres diseñador profesional de sitios web WordPress, seguro que es una buena opción para encontrar siempre tantos patrones como quieras de forma muy rápida. Pero también puede usar nuevos patrones de bloques sin necesidad de un complemento premium. Veamos cómo.

Agregar un patrón Shareablock

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

La primera vez se le pedirá una dirección de correo electrónico para que pueda obtener un nombre de usuario y una contraseña.

En el correo electrónico hay un enlace para iniciar sesión en su sitio web; Inicie sesión y ahora podrá descargar el patrón que le interesa. Simplemente selecciónelo y haga clic en Descargar ahora nuevamente, para que reciba el patrón de bloque en su correo electrónico.

Después de hacer clic en el enlace proporcionado en el correo electrónico, puede acceder a la web para descargar el archivo .json del patrón. Una vez descargado, simplemente arrástrelo al editor de bloques de WordPress y automáticamente verá todos los bloques que forman el patrón.

Es un proceso engorroso, pero hace el trabajo. Desafortunadamente, notará que el patrón de bloques no aparece en su biblioteca...

Agregue un patrón de centro de Gutenberg

Agregar un patrón desde Gutenberg Hub es más fácil. Como antes, primero seleccione el patrón que desea copiar.

A la derecha del patrón, verá el botón Copiar código . Haga clic en el botón para copiarlo en su portapapeles y luego péguelo en su editor de Gutenberg. Esto pegará el bloque en su editor, pero omitirá la biblioteca.

¡Pero espera! No tan rapido. Si desea personalizar completamente los bloques resultantes, Munir Kamal recomienda que instale su complemento gratuito, EditorPlus, que agrega nuevos bloques al editor y amplía Gutenberg con controles de diseño avanzados, fuentes, íconos, divisores, animaciones y mucho más. caracteristicas.

Si lo hace, verá en la barra lateral derecha del editor que tiene controles avanzados para modificar el diseño del patrón copiado.

Ahora ya sabe qué son los patrones de bloques, dónde encontrarlos y cómo insertarlos en su sitio web para crear excelentes diseños. ¡No te pierdas el próximo post donde aprenderás a crear tus propios patrones!

Imagen destacada de Raul Cacho Oses en Unsplash .