La llegada de WordPress 5.0 cada vez está más cercana. Y entre las muchas novedades que va a incluir esta nueva iteración del CMS de Automattic, está Gutenberg. Y es que este nuevo editor esta encontrando entre la comunidad casi tantos defensores como detractores. Si sois seguidores de SiloMag, seguro que habeis visto algunos de los artículos que hemos compartido sobre estas discusiones.
Desde Silo Creativo hemos hablado anteriormente sobre Gutenberg, tanto para mostrar algunas de sus características, como para crear una nueva entrada. Si nunca has trabajado con Gutenberg, te recomiendo hacer una lectura rápida de estos artículos, ya que en este vamos a dar por conocidos conceptos que ya hemos visto en esos textos. Pero hoy queremos ir un paso allá, y vamos a ver como podemos construir una página de inicio en WordPress. Si, gracias al uso de los bloques, podemos usar Gutenberg como si fuese cualquiera de los Page Builders existentes. Por no decir, directamente, que Gutenberg es el Page Builder del futuro WordPress.
Ante todo, decir que Gutenberg sigue aun en desarrollo, por lo que aun le faltan muchas funcionalidades y no es completamente estable. Por eso os seguimos recomendando que no lo uséis en producción, y solo lo hagáis en entornos de prueba. Con este artículo queremos seguir explorando las posibilidades que nos da Gutenberg, y que estemos completamente preparados para su lanzamiento oficial.
El futuro de los Page Builders con Gutenberg
Como hemos visto en otros artículos, Gutenberg no es más que la evolucion del editor de WordPress a un sistema basado en bloques. ¿Y a que nos recuerda inevitablemente esto? Pues a cualquiera de los diferentes Page Builders disponibles para WordPress. Durante los últimos años estos plugins han tenido un crecimiento enorme, sobre todo por su facilidad de uso, y que se puede construir sin apenas conocimientos previos diseños muy llamativos.
Entonces, ¿que va a pasar con estos plugins, la amplia mayoría de pago, ante la llegada de Gutenberg? Pues en estos momentos, y suponemos que con la llegada de WordPress 5.0, el tablero se mantendrá más o menos igual. Gutenberg aun tiene pocas opciones, o estas están muy simplificadas, y no muestra todo su potencial con la amplia mayoría de las plantillas actuales (sobre las plantillas y Gutenberg hablaremos en el siguiente punto). Además hay que tener en cuenta que cuenta con una interfaz diferente a la del resto de Page Builders. Por lo que muchos usuarios serán reacios a hacer una transición inmediata.
Así que es previsible que estemos durante un tiempo en que ambas opciones coexistan, mientras que los desarrolladores van creando diferentes tipos de bloques para Gutenberg. Hasta que llegue el momento en el que Gutenberg coja suficiente peso como para ser una alternativa real. Pero como decimos, a día de hoy no deja de ser una elección con menos opciones, pero gratuita, a los Page Builders más conocidos y reconocidos de WordPress.
Gutenberg y las Plantillas para WordPress
Aquí esta uno de los puntos débiles que tiene Gutenberg actualmente. Y es que, si no estamos usando una plantilla o tema que esté actualizado para sacar partido de Gutenberg, nos estaremos perdiendo varias de sus funcionalidades. Pera mostrar este punto, veamos la siguiente imagen:
A la izquierda esta instalado la conocida plantilla Twenty Seventeen, que viene por defecto en WordPress. Y a la derecha, esta activado la plantilla Gutenberg Starter Theme, disponible en GitHub, y que ha sido creada por Automattic para mostrar las posibilidades de Gutenberg.
No es extraño ver análisis de Gutenberg con temas que no están preparados, por lo que realmente están usando una versión capada de este nuevo editor. Por este motivo, si quieres experimentar con Gutenberg, te recomiendo que instales la plantilla Gutenberg Starter Theme, para poder exprimir todo lo que tiene que ofrecer.
Creando nuestra Página de Inicio
Entremos en materia. Nuestra pagina de inicio va a tener varias secciones, en las que vamos a ver algunos de los bloques más útiles que nos ofrece. De nuevo queremos recordar que usemos un tema compatible con Gutenberg, para que tengáis disponibles las mismas opciones que vamos a usar en esta pequeña guía. Para las imágenes, hemos hecho uso de el repositorio de fotografías disponibles en Unplash.
Para que nos resulte más sencillo, y también para que todo tenga cierto orden, vamos a ir desarrollando el tutorial según el bloque que vamos insertando. Así también comentamos algunas de las características más relevantes, o de las que vamos a hacer uso para nuestra página de inicio.
Imagen de Fondo
Lo primero que queremos hacer es una imagen que ocupe todo el ancho del navegador, y que tenga un texto superpuesto. De este tipo de composiciones con imagen y texto hemos hablado en nuestro blog hace pocos días. El bloque a elegir será el de Imagen de fondo. Y como hemos visto antes, gracias a que tenemos activado la plantilla Gutenberg Starter Theme, podemos alinear la imagen al ancho completo.
Una opción curiosa que nos ofrece el panel lateral de opciones de bloque es la posibilidad de oscurecer la imagen. Con esto, el texto se mostrará más contrastado, sin tener que recurrir a una edición extra del fondo.
Párrafo
Quizás sea el bloque por antonomasia de Gutenberg, pero no por ello íbamos a dejar de utilizarlo. Hace unas semanas, dentro de nuestro texto sobre el uso de las Feature Queries, hablamos de como la propiedad CSS de capitalizar la primera letra de un texto no estaba disponible en todos los navegadores. Pues mirad que opción nos da Gutenberg:
Exacto, podemos insertar esta opción en nuestros texto de forma sencilla. Y no queda nada mal, como podéis ver.
Columnas de texto
En el actual editor de WordPress, siempre ha sido complejo hacer columnas de texto. Y esto con Gutenberg se ha acabado. Tan sencillo como insertar el bloque, elegir el número de columnas, y empezar a escribir. Además, podemos designar el tipo de alineación que tiene el texto en cada columna.
Incrustar video
Sigue siendo igual de sencillo a como se hace actualmente. Pero la diferencia es que, como ocurre en otros bloques, podemos elegir diferentes alineaciones, o que el vídeo se presente a pantalla completa.
Estos elementos embebidos no solo se reducen a las típicas webs de video, o Twitter. Podemos insertar fotografías de Instagram, canciones de Spotify, hilos de Reedit. Os animo a que miréis el listado, ya que es bastante amplio. Y seguro que os lleváis alguna sorpresa.
Galería
Normalmente, al crear una galería de imagen, suelo recurrir a plugins como Jetpack, del que hemos escrito con anterioridad. Con Gutenberg, es tan sencillo como añadir el bloque Galería, y empezar a seleccionar imágenes. No sin olvidarnos de designar el número de columnas que va a tener nuestra galería.
En nuestro ejemplo, tenemos seis fotografías en total, para una galería a cuatro columnas. El solución que nos da Gutenberg es hacer que las fotografías de la última fila nos ocupe el ancho total de la galería. Y como un imagen vale más que mil palabras, esto es lo que obtenemos.
Código
Este bloque es muy útil, ya que si queremos insertar un trozo de código, nos respeta las tabulaciones y los espacios, mostrándose de forma correcta. Y si lo combinamos con una clase CSS adicional, podemos dotar de color a nuestro código. Si no estás muy habituado a este lenguaje, te recomiendo que eches un vistazo a nuestro artículo de introducción a CSS que tenemos disponible en el blog de Silo Creativo.
Columnas (beta)
Un bloque que aun está en beta, pero que es muy interesante. Al igual que en las columnas de texto que vimos antes, podemos elegir el numero de columnas que va a tener nuestro bloque. La diferencia es que aquí podemos agregar bloques dentro de cada columna. Por lo que las posibilidades se multiplican.
En nuestro ejemplo, hemos querido hacer una previa de perfiles, con una imagen, texto y un botón. Tan simple como ir añadiendo cada bloque dentro de cada columna, e ir subiendo o bajando según la posición en donde queremos que esté. Tremendamente sencillo. La contrapartida: no es un elemento responsive, por lo que siempre tendremos el mismo número de columnas por filas, sea cual sea el dispositivo donde veamos la página.
Conclusiones
Como hemos visto durante todo el artículo, Gutenberg supone un golpe en la mesa para la creación, en este caso, de páginas para WordPress. Pero se nota en ciertos aspectos que aún se encuentra en desarrollo por ciertas características que echamos en falta.
Aun así, esto no es motivo para que vayamos experimentando con esta herramienta y vayamos creando nuestros propios diseños. Cuanto antes estemos preparados ante lo que está por venir en WordPress, mejor será nuestra transición, y antes podremos agregar estas novedades en nuestras webs o la de nuestros clientes.
Y vosotros, ¿habéis creado ya alguna página con Gutenberg? Podéis compartirlas en los comentarios para que verlas, y compartir vuestras experiencias!
