Cómo creamos nuestro sitio web usando el editor de bloques

En caso de que no lo hayas notado, la apariencia de nuestro sitio web cambió ligeramente . Rediseñamos nuestro sitio web, actualizando fuentes, estilos, paleta de colores... pasando de esto:

a esto:

Pero lo más interesante de estos cambios no es cómo se ven: decidimos reconstruir nuestro sitio web desde cero para que pudiera convertirse en un sitio completamente basado en bloques. Hoy me gustaría explicarte cómo pasamos de un tema hecho a medida basado en plantillas de página a otro tema totalmente personalizado que se apoya en bloques de WordPress para todo .

De dónde venimos

Cuando lanzamos Nelio Content hace tres años, decidimos reorganizar por completo todas nuestras webs y centralizar nuestra presencia online bajo un único dominio y marca: neliosoftware.com . Lógicamente, una de las tareas que hicimos fue contactar con Silo Creativo para que nos ayudara a diseñar la imagen de nuestra nueva web. Aquí podéis ver una de las primeras propuestas que hicieron:

Cuando dimos el visto bueno a ese diseño inicial, y siguiendo nuestras peticiones, Ricardo y Verónica se pusieron manos a la obra e implementaron un tema a medida con todas las plantillas necesarias para las distintas partes de nuestra web : página principal, blog , posts, ayuda. páginas, … Diseñaron todo y cada uno de los diseños se implementó en una plantilla de página. Teníamos una página rápida que era engorrosa de editar.

Y entonces llegó Gutenberg.

Comprender el contenido de nuestro sitio web

El nuevo editor de bloques de WordPress , Gutenberg , supone un cambio de paradigma para la creación de contenidos en un WordPress . Hasta ahora, crear páginas era un proceso tedioso y poco amigable para los usuarios, a menos que estuviera usando un creador de páginas. Pero Gutenberg vino con una promesa bajo el brazo : crear contenido visualmente atractivo en WordPress debería estar al alcance de cualquiera . Y queríamos probar esta afirmación y ver si realmente podíamos crear un hermoso sitio web basándose únicamente en Gutenberg.

Si habías visto la web que te mostramos anteriormente, sabrás que tenía un diseño sencillo y elegante , incluyendo elementos como:

• Páginas con una imagen destacada que tomó el primer pliegue
• Bloques con texto descriptivo e imágenes y/o video
• formularios de contacto
• Páginas legales
• Tablas de precios
• Testimonios de nuestros usuarios
• listados de características

Nada demasiado lujoso, pero interesante, no obstante. ¿Podríamos crear todo esto en Gutenberg ? Pensamos que sí, y lo intentamos. Esto es lo que hicimos y lo que encontramos.

Nuestro nuevo tema

Lo primero que hicimos para diseñar el nuevo sitio web fue crear un tema desde cero. Para ello, decidimos partir del conocido tema de inicio “guiones bajos”. Es un tema súper básico que viene con las plantillas mínimas y necesarias para tener un tema de WordPress operativo, y está bien documentado y bien organizado.

Adaptación de guiones bajos

Cada tema de WordPress tiene un conjunto de páginas que son comunes a todas las instalaciones de WordPress e independientes del contenido que termines generando en tu sitio web. Me refiero, por ejemplo, a la página del blog donde aparecen las últimas publicaciones, el diseño de una sola publicación, la página de error 404, la página de resultados de búsqueda, etc. Entonces, el primer paso para crear nuestro tema usando bloques de WordPress es adaptar los guiones bajos a nuestro propio estilo para que estos “genéricos” tengan el look and feel que queremos. Y eso fue lo que hicimos.

Si observa la captura de pantalla anterior, verá que descargamos el tema con _sassify! opción habilitada, por lo que el tema se descarga con estilos en formato SASS, organizado en múltiples archivos y lo que hace que sea extremadamente fácil de editar. Nos tomó algunas horas escribir CSS y algunas personalizaciones de PHP en functions.php , pero pudimos obtener el tema perfecto:

Bloques de WordPress como bloques de construcción

Una vez que tengamos un tema inicial con el que nos sintamos cómodos (en nuestro caso, el tema que creamos a partir de los guiones bajos, pero en tu caso podría ser un tema que hayas encontrado en wordpress.org , un tema premium que hayas comprado hace tiempo hace, o incluso un tema personalizado como el nuestro), es hora de diseñar todas nuestras páginas usando los bloques de WordPress .

Entonces, sin más preámbulos, echemos un vistazo a todos los "desafíos" que enfrentamos durante esta etapa y cómo implementamos todo usando bloques de WordPress.

Bloques predeterminados

Los bloques que WordPress incluye por defecto son un poco limitados: párrafos, imágenes, galerías… Nada demasiado sofisticado, todos parecen más enfocados a crear publicaciones de blog que a diseños de página.

Pero eso esta bien.

Está bien porque, para empezar, hay muchas páginas en un sitio web que parecen publicaciones de blog. Por ejemplo, las páginas con información legal o una política de privacidad y cookies están más cerca de una publicación de blog de lo que podría haber pensado en un principio.

Pero también está bien porque podemos crear hermosas páginas con componentes extremadamente simples. Por ejemplo, en podemos combinar texto y videos. Esto es algo que podemos lograr fácilmente con los bloques de medios y texto :

Bastante cerca, ¿eh?

Combinación de bloques predeterminados

Los bloques simples pueden ser extremadamente poderosos cuando se combinan. Por ejemplo, considere la siguiente captura de pantalla, donde tenemos una lista de características:

¿Cómo se abordaría esto? Bueno, si lo miras detenida y lógicamente, verás que cada función es una combinación de una imagen y un texto (¿te suena familiar?). Luego, verá que claramente tenemos tres columnas, así que... ¿qué pasa si combinamos bloques de Medios y Texto con un bloque de Columnas ?

¡No está mal, estamos bastante cerca! Al combinar bloques, debes ser inteligente. El uso de un solo bloque Columnas significa que es posible que las funciones no estén correctamente alineadas horizontalmente, ya que cada columna se organiza de forma independiente de la otra. Para resolver este problema, debe ser un poco astuto: en lugar de agregar un solo bloque de Columnas con múltiples funciones en cada columna, creemos varios bloques de Columnas para asegurarnos de que solo haya una función en cada columna:

¡Y BUM! Ahora tenemos tres columnas de características con filas correctamente alineadas.

Bloques predeterminados con esteroides

Hay casos en los que los bloques predeterminados se acercan lo suficiente a lo que queremos, pero no se ven bien. Si nos enfrentamos a un problema visual, es muy probable que podamos resolverlo usando CSS, y la mejor parte es que Gutenberg funciona muy bien con las clases de CSS.

Por ejemplo, si queremos que nuestros bloques de imagen tengan una sombra (opcional), podemos crear una clase CSS simple que agregue la sombra a la imagen y luego aplicar dicha clase usando la sección Avanzada del bloque de imagen:

El problema con esta solución es que estamos mezclando la interfaz de usuario con detalles de implementación (el nombre de una clase CSS). ¿Por qué diablos debería saber que hay una clase llamada shadow que agrega una sombra a una imagen? Bueno, esto también tiene una solución simple.

La interfaz de programación del editor de bloques de WordPress expone una función llamada registerBlockStyle para, como su nombre indica, registrar estilos de bloques. Algo tan simple como:

 registerBlockStyle ( 'core/image', { name: 'image-with-shadow', label: __( 'Shadow', 'nelio' ), } );

nos permite registrar un nuevo estilo para el bloque de imagen ( core/image ) llamado Sombra que, cuando se aplica, da como resultado que el bloque de imagen tenga la clase has-style-image-with-shadow :

Bloques personalizados

Finalmente, para aquellos casos en los que ningún bloque predeterminado sea suficiente, puede crear su propio bloque (o usar un bloque de terceros ya existente). Implementamos esta solución en varios casos: en las tablas de precios de Nelio Content y Nelio A/B Testing, el mapa que aparece en nuestra página de contacto (que, por cierto, se mostró en profundidad en nuestro post sobre cómo crear un bloque), y los resultados en términos de usabilidad son impresionantes:

si no sabes o no quieres crear tus propios bloques, te dejo algunos plugins que incluyen bloques adicionales para muchas cosas:

• FantasmaKit
• Bloques atómicos
• cobloques
• Bloques de Kadence

Nuestra experiencia

Hace un par de meses decidimos que teníamos que renovar un poco nuestra web e implementarla usando Gutenberg. Nuestro objetivo era doble: por un lado, queríamos actualizar un poco la web y darle un aire más fresco. Por otro lado, queríamos aprender más sobre Gutenberg, tanto a nivel de usuario como a nivel de desarrollador. Al final conseguimos migrar toda la web a Gutenberg y el resultado ha sido un éxito absoluto. Te animamos a que tú también lo hagas y, si tienes alguna duda, no dudes en dejarla en los comentarios.

Por cierto, el post de hoy está inspirado en la charla que di en WordCamp Lisboa 2019. Aquí tenéis mis diapositivas:

Imagen destacada de Samuel Zeller en Unsplash .