Construyendo una biblioteca de patrones de bloques de Gutenberg

Gutenberg representa un gran cambio hacia el diseño web basado en patrones. En este artículo discutiré los enfoques que tomamos al crear nuestra propia biblioteca flexible de bloques Gutenberg personalizados.

Fondo

El lanzamiento de Gutenberg en diciembre de 2018 representó el mayor cambio en WordPress desde su inicio. La nueva interfaz de 'arrastrar y soltar' basada en bloques cambia la forma en que los desarrolladores crean temas, cómo los diseñadores consideran dividir los sitios en partes componentes y cómo los editores de contenido administran y planifican la creación de contenido.

Este es un cambio fundamental hacia el diseño de sitios web basados ​​en patrones; un sistema de elementos reutilizables que se pueden aplicar de forma coherente en un sitio web para crear la mejor experiencia de usuario posible y optimizar el flujo de trabajo. Si bien muchos de nosotros ya estábamos trabajando con patrones, Gutenberg impulsa este cambio a un ritmo acelerado. Dado que WordPress impulsa a un tercio de los sitios web en todo el mundo, el impacto de este cambio no puede ser exagerado.

Este artículo destaca algunos de los problemas que enfrentamos como desarrolladores al comenzar a planificar y construir una biblioteca de patrones, cómo superamos las limitaciones inherentes a Gutenberg y el enfoque que tomamos para crear nuestro sistema flexible de bloques personalizados.

Nuestro objetivo

Como creadores especializados de sitios web WordPress personalizados, Gutenberg nos ha brindado la oportunidad perfecta para crear una biblioteca unificada de patrones; un conjunto de bloques adaptables para usar con muchas de nuestras creaciones de sitios web personalizados.

No solo queríamos adoptar esta nueva experiencia de edición, queríamos poder ofrecer una solución utilizando nuestro propio sistema sin depender de un conjunto limitado de bloques Gutenberg centrales, o un mosaico de soluciones de terceros listas para usar.

Un conjunto completo de bloques al alcance de la mano también significa que no tenemos que crear cada bloque desde cero para las nuevas compilaciones de sitios web de Gutenberg. Esto nos permitiría dedicar aún más tiempo a refinar la estética de un sitio y agregar el tipo de toques finales y optimizaciones que ayudan a separar un sitio web de su competencia.

Desafíos

Flexibilidad de diseño

Necesitábamos un sistema de diseño versátil con varios patrones que nos dieran la flexibilidad de crear una variedad de temas personalizados.

Lograr un buen equilibrio entre poder mantener un número finito y realista de patrones, sin comprometer el diseño del tema, iba a ser un desafío.

Un cambio en el desarrollo del tema

Antes de Gutenberg, adoptamos varios enfoques diferentes para el desarrollo de temas. El más común era crear plantillas de página individuales para partes separadas de un sitio. Las plantillas serían muy prescriptivas e incluirían campos personalizados para cada sección diseñada. Una plantilla de 'Estudios de caso', por ejemplo, puede incluir campos para un editor de texto, galería de imágenes, testimonios, etc. Sin embargo, una vez incluidos en la plantilla, no se pueden cambiar fácilmente.

Este enfoque no solo es restrictivo en términos de diseño de página, sino que por lo general significaba que se necesitaban esfuerzos repetidos con cada sitio nuevo basado en plantillas; es necesario crear campos, configurar plantillas y codificar componentes separados para mostrarlos en la interfaz.

Para adaptarnos a Gutenberg, necesitábamos cambiar nuestro enfoque de desarrollo, comprender cómo podemos crear componentes reutilizables y adoptar la flexibilidad que ahora nos ofrece Gutenberg para la creación de nuevos sitios web.

Gutenberg no es tan flexible

Fuera de la caja, Gutenberg tiene más de 30 bloques básicos disponibles. Todo, desde componentes de contenido básico como párrafos, encabezados y elementos de lista hasta widgets e incrustaciones más complejos.

Para muchas de las compilaciones de nuestro sitio web, una buena cantidad de estos bloques centrales no son relevantes o no tienen el nivel de funcionalidad que nuestros temas exigirían de ellos. Necesitábamos una forma de crear nuestro propio conjunto de patrones que realizaran funciones muy específicas apropiadas para el diseño del tema.

Otro problema que pronto encontramos con Gutenberg es que no es fácil ni intuitivo crear diseños más complejos utilizando bloques centrales.

Un patrón para un bloque de "contenido e imagen", por ejemplo, puede requerir que un encabezado, párrafo, lista y botón aparezcan junto a una imagen y con la opción de mostrar la imagen a la izquierda o derecha de ese contenido, y que estos elementos sean se muestra en un diseño coherente.

Este nivel de libertad no es fácil con Gutenberg. Si bien hay varios bloques que pueden agregar texto, imágenes y botones, estos son de naturaleza bastante atómica y cuando se agregan individualmente aparecen como bloques apilados separados. Desde el principio quedó claro que Gutenberg no era lo suficientemente flexible y que necesitábamos poder construir nuestros propios bloques personalizados.

Nuestra solución

Un sistema de diseño versátil

Antes del lanzamiento de Gutenberg, ya habíamos invertido mucho tiempo en la investigación y visualización de patrones para nuestra biblioteca de patrones.

Esto implicó auditar varios de nuestros sitios web y prototipos existentes para compilar una biblioteca de estructura alámbrica de elementos de uso común.

Nuestros diseñadores y desarrolladores continuaron trabajando juntos para comprender cómo se podrían combinar estos elementos en bloques de Gutenberg y cómo se podría crear un tipo de bloque específico para que, con opciones de personalización limitadas, se pueda hacer que un solo bloque se vea significativamente diferente de un tema a otro.

Una vez que clasificamos nuestros patrones en bloques, estábamos listos para comenzar a construir.

Bloques de construcción con campos personalizados avanzados

Es casi seguro que todos los desarrolladores de temas se hayan encontrado con Advanced Custom Fields (ACF) en algún momento. A través de una interfaz intuitiva, se pueden crear una multitud de diferentes tipos de campos; cualquier cosa, desde campos de texto básicos y editores de contenido hasta selectores de fechas, incrustaciones de mapas y campos de galería. Estos se pueden asignar fácilmente a diferentes áreas de un sitio, como tipos de publicaciones, plantillas de página, categorías y páginas de usuario.

La última versión de ACF, ACF blocks, extiende toda esta funcionalidad familiar a Gutenberg. Los grupos de campos se pueden crear y asignar a diferentes bloques basados ​​en ACF de la misma manera que con otras áreas del sitio.

Con unas pocas líneas de código necesarias para registrar un bloque y campos de salida, es posible crear un bloque personalizado básico en cuestión de minutos. La facilidad con la que se pueden crear bloques con este enfoque nos permitió centrarnos en la configuración, la salida y el estilo de los bloques.

Ahora pudimos crear un conjunto de bloques personalizados que brindaban toda la flexibilidad de Gutenberg pero se limitaban al diseño del tema, lo que ayudaría con diseños consistentes.

Complemento de biblioteca de patrones

Después de crear algunos bloques de ejemplo, decidimos empaquetar nuestros bloques dentro de un complemento personalizado con la ayuda del equipo de ingeniería.

Este complemento basado en bloques permite la implementación rápida de patrones personalizados para nuevas compilaciones de sitios web. Luego, estos se personalizan aún más a nivel de tema.

Nuestro complemento de biblioteca de patrones incluye algunas características útiles:

1. Archivos de plantilla de bloques básicos que nos permiten agregar rápidamente nuevos bloques;
2. Funciones para permitir que los bloques centrales y los bloques personalizados se inicialicen y se incluyan en categorías personalizadas;
3. Una pantalla de configuración de administrador donde cada bloque se puede habilitar o deshabilitar;
4. Capacidad para anular el diseño y la estructura de un bloque dentro del tema;
5. La capacidad de anular el estilo de bloque a nivel de tema;
6. Carga de hojas de estilo a nivel de tema dentro de Gutenberg para que la vista previa del administrador de bloques tenga el mismo aspecto que los bloques frontales. El uso de la cuadrícula CSS nos ayudó a maximizar la flexibilidad en la estética y el diseño, al tiempo que minimizamos los cambios estructurales;
7. Los bloques específicos se pueden limitar a ciertos tipos de publicaciones para mantener la coherencia.

El desarrollo del complemento de la biblioteca de patrones será una evolución continua, pero ahora tenemos más de 15 bloques que se pueden usar para construir una proporción significativa de nuestros diseños de temas flexibles.

Nuestro conjunto de bloques incluye patrones de contenido e imagen, testimonios, artículos relacionados y bloques de equipo junto con más patrones de estilo de "escaparate" que incluyen galerías, estadísticas y controles deslizantes.

Resumen

Estamos muy entusiasmados con las oportunidades que nos han abierto Gutenberg y nuestra biblioteca de patrones personalizados.

No solo podemos continuar impulsando nuestra oferta de sitios web personalizados utilizando la última experiencia de edición, sino que también podemos producir sitios web altamente flexibles con un enfoque de desarrollo unificado que nos ayuda a crear experiencias ricas para los usuarios finales.

Han pasado casi 2 meses desde que comenzamos a usar nuestra biblioteca de patrones de bloques de Gutenberg, que ahora estamos usando en muchas compilaciones de sitios nuevos. Los clientes han estado ansiosos por utilizar Gutenberg y los comentarios de los clientes han sido realmente positivos hasta ahora.

“¡Matt y Pammy entregaron un tutorial sobre los elementos del sitio que han creado y son increíbles! La flexibilidad y el profesionalismo son fantásticos y estoy muy agradecido por todo su increíble trabajo en esto hasta ahora. Realmente emocionado con el sitio web ahora. Gracias"

- Rachel Smith, YMCA Nottingham

Continuaremos expandiendo nuestra biblioteca de patrones de bloques personalizados y refinando con más mejoras a medida que pasemos más tiempo con Gutenberg. Actualmente estamos trabajando en nuestro quinto sitio basado en Gutenberg, ¡así que busque un caso de estudio pronto!

Si necesita ayuda con su desarrollo de WordPress, no dude en contactarnos.