En este post vamos a crear una página web estática con Gutenberg el nuevo editor de bloques de WordPress con el objetivo de averiguar qué características tiene para el diseño web y cuáles son sus limitaciones.

Bloques de diseño

Gutenberg tiene módulos sencillos enfocados al diseño para la maquetación, algo que nos da un poder que con el editor clásico no teníamos por defecto.

Bloque de fondo: Un gran bloque muy visual, está formado por un fondo con imagen y un título sencillo, se puede utilizar como cabecera simple, una pena que no tenga opciones con efecto paralaje o formato para el texto.

Bloque Separador: permite crear un espacio en blanco entre otros bloques para crear diseños donde los elementos no se aglutinen y darle «aire» al diseño.

Bloque de columnas: Un bloque básico para crear columnas de elementos, sencillamente magnífico y necesario para la maquetación, en el editor clásico no existía esta opción.

De esta manera podemos crear diseños más elaborados y secciones como la típica «Sección con contenido en Zig Zag» combinando imágenes y texto.

Incluso podemos crear secciones como la de recomendación de usuarios fácilmente gracias a las columnas.

Bloque de Medios y Texto: Un bloque combinado de imagen y texto muy útil para la maquetación, además tiene opciones de ancho completo y crea un diseño bastante logrado para una sección de la web.

Bloque de Botones: poner botones con el editor clásico de WordPress no era lo más cómodo del mundo, ahora es realmente sencillo y combinado con un título y texto tienes una llamada a la acción sencilla.

Limitaciones

Maquetar con Gutenberg está muy bien en general pero los bloques tienen pocas opciones de personalización avanzadas lo que te limita mucho al crear un diseño.

Podemos encontrar limitaciones de personalización básicas en casi todos los bloques, por ejemplo, el bloque de fondo, donde no podemos dar estilo al texto, también existen escasas opciones para los bloques compuestos como el de medios y texto.

Aparte de limitaciones de las opciones básicas, tampoco existen opciones avanzadas para el diseño, como efectos paralaje, estilo «Hover» para los botones u opciones de estilo para las imágenes sencillas.

Problemas

También podemos encontrar problemas con la interfaz y bugs poco agradables,

Un ejemplo es la selección de las columnas o el bloque de separador, que tienes que hacer clic en el selector del bloque para seleccionarlo, ya que hacer clic en el contenido no te lo selecciona.

Conclusión

El editor de bloques Gutenberg de WordPress tiene una interfaz preparada para usar bloques y un drag and drop avanzado pero aún le queda mucho para ser una buena herramienta para maquetar.

Tiene que evolucionar tanto en opciones como en bloques, ya que las opciones básicas se quedan cortas para crear un diseño elaborado.

Aun así, se puede crear un diseño sencillo que se ajuste al estándar de diseño de la mayoría de webs de hoy en dia.

Esperamos las nuevas fases del editor Gutenberg, ya que tiene mucho potencial y aún es un diamante sin pulir.

También espero que te haya gustado esta review del editor de WordPress orientada a la maquetación de una web estática.