Hace no tanto tiempo la edición y maquetación de contenidos en WordPress era ardua y contaba con cierta complicación. Incluso en ocasiones no quedaba otra opción que armarse de valor, «remangarse» y tirar de nuestros conocimientos de código HTML para hacer algunas tareas realmente triviales (centrar algunos elementos por ejemplo).
Bien es cierto que en muchos sitios web actuales tendremos instalados temas que cuentan con sus propios editores de bloques (por ejemplo en Divi) y otros que los tienen instalados como plugin (el más conocido es Elementor). Pero con la llegada de Gutenberg al ecosistema de WordPress, la maquetación de textos, imágenes y medios se simplificó sobremanera. No puede obviarse que quizás a día de hoy, Gutenberg es insuficiente a la hora de hacer el diseño web de una home o una landing, por ejemplo, pero con él bien se pueden hacer estupendos posts o artículos con un aspecto muy atractivo y con poco esfuerzo.
¿Qué es Gutenberg?
Se trata de una funcionalidad (aunque en la web oficial del proyecto se hace referencia a él como un nuevo «paradigma«) para la construcción y publicación de contenidos en WordPress. Inicialmente apareció como plugin para finalmente integrarse en el core de las instalaciones de WordPress. La intención es que haya cuatro fases de funcionalidades (edición, personalización, colaboración y multilenguaje) que prometen revolucionar lo que actualmente supone WordPress. Todo de lo que hablemos en este artículo forma parte de la primera fase, la de edición. El resto están en un proceso muy inicial pero está habiendo actualizaciones en el núcleo de WP que nos indican que podrían estar desarrollándose nuevas funcionalidades.
A nivel práctico podríamos decir que Gutenberg es la forma en la que podremos introducir y maquetar cualquier tipo de contenido en las páginas y entradas de una web hecha en WordPress. Se basa en la introducción de diversos bloques, uno tras otro, que se pueden complementar entre si. Un bloque puede ser un párrafo de texto, una imagen, listas de opciones y un larguísimo etcétera que veremos a continuación.
Por supuesto, su nombre proviene de Johannes Gutenberg, el inventor que ideó la imprenta en el año de 1450.
¿Hay que hacer algo para instalar Gutenberg?
Si tu web está actualizada, en lo que a la versión de WordPress se refiere, no necesitas instalar nada. Al entrar a la edición de entradas y artículos verás que ya te encuentras con esta estructura de maquetación:
He marcado en rojo cuatro zonas claramente diferenciadas:
- Barra superior, consta de dos partes:
- En la parte izquierda podrás añadir nuevos bloques (cosa que podrás hacer directamente en la propia área de bloques o contenido), así como acceder a las opciones de deshacer/rehacer o acceder a las estadísticas de la página.
- En la parte derecha, tenemos básicamente el acceso al guardado y publicación.
- Título: en ella tenemos pocas opciones, simplemente servirá para indicar el título descriptivo de nuestra entrada.
- Área de bloques: que es dónde trabajaremos introduciendo los sucesivos bloques.
- Menú derecho. Aquí tendrás acceso a dos funcionalidades:
- Opciones de página: cambiar la imagen destacada, cambios de diseño, enlace permanente o atributos de página.
- Opciones de bloque: al seleccionar cualquier bloque aquí es donde veremos sus propiedades avanzadas de edición.
¿Cómo se introduce un bloque?
La única zona donde podremos poner bloques es en el área de bloques (o blocks). Allí al pulsar nos saldrá un icono «+» que nos permitirá elegir que bloque queremos añadir:
El bloque que seleccionemos aparecerá en el área de bloques. Como habrás podido ver existe un botón inferior que pone «Ver todos». Con él podremos tener acceso a todos los bloques que nos aparecerán en la parte izquierda de la pantalla:
Llegados a este punto tenemos que decir que además de bloques, existen también los «patrones» que suponen estructuras de contenido de mayor complejidad y que también veremos más adelante.
Hay que indicar que tanto los patrones como los bloques serán compatibles con la mayoría de temas, y se adaptarán a aspectos como la propia tipografía que tenga preinstalada cada web. Por ello el uso de Gutenberg en cada web puede tener un aspecto similar, pero no exactamente idéntico. Así, verás que las capturas de pantalla y ejemplos que te mostramos para ver el resultado de introducir los diversos bloques y patrones, son de color «rojizo». Esto se debe a que hacemos las pruebas en una web que tiene esos colores base. Si tu web es azul, los contenidos serán acordes a ese color.
Vamos a ver a continuación los diferentes tipos de bloques que existen. ¿Te animas a conocerlos?
Bloques en Gutenberg
Los diferentes bloques de Gutenberg se pueden agrupar en varios tipos:
- Bloques de texto
- Bloques de medios
- Bloques de diseño
- Bloques de widgets
- Bloques de incrustados
Vamos a ir desglosando uno a uno todos ellos.
Bloques de texto
Párrafo
Si hay un bloque que destaca por encima del resto, al menos en el número de utilizaciones que haremos de él, este es el de párrafo. Con este bloque de texto, introduciremos cada uno de los párrafos de nuestras páginas.
Al introducirlo (y veremos que esto es algo común a cualquier otro bloque) aparecerán dos elementos que serán comunes al resto de blocks y patrones:
- Una barrita superior que nos permitirá editar algunos aspectos de este bloque en concreto (en cada bloque aparecerán unas u otras opciones).
- Un menú lateral que como ya vimos, también nos va a dejar gestionar otros aspectos (en este caso, colores).
Vamos a ver un ejemplo:
Encabezado
Con este bloque incluiremos un encabezado (desde H1 hasta H6):
Lista
Este bloque permite incluir listas de elementos (ya sean ordenadas o sin ordenar):
Cita
Para añadir citas y pensamientos:
Código
Permite introducir trozos de código sin que se ejecuten (HTML, CSS o PHP por ejemplo):
Clásico
Nos permite incluir bloques «a la antigua usanza»:
Preformateado
Podemos incluir texto cuyos caracteres son del mismo tamaño aunque los formateemos. Esto puede ser útil para tabular contenidos con espacios:
Párrafo de cita
Una vistosa forma de mostrar una cita:
Tabla
Se pueden integrar tablas con un diseño atractivo y personalizable:
Verso
Básicamente se usa para incluir poesías o trozos de texto:
Bloques de medios
Imagen
Con él podremos incluir una fotografía o dibujo.
Galería
La galería básicamente nos permite meter una cuadrícula de imágenes:
Audio
Con este bloque podremos subir un audio y se generará para el usuario un completo control de dicho audio:
Fondo
Este bloque sirve para introducir un fondo con texto (el fondo puede ser un color o una imagen):
Archivo
Simplifica mucho el hecho de subir archivos a la web y que el usuario lo pueda descargar (un pdf por ejemplo):
Medios y texto
Este es un bloque de dos columnas con una imagen a un lado y el contenido a la derecha:
Vídeo
Realmente apenas se usa, salvo que por alguna razón requieras subir el archivo a tu propia web. Genera una interfaz al estilo youtube para que el usuario vea dicho vídeo.
Bloques de diseño
Botones
Genera un botón o varios botones:
Columnas
Si queremos encolumnar varios textos o imágenes, mediante este útil bloque, podremos crear «x» columnas y cada una de ellas rellenarlas con el contenido que deseemos:
Grupo
Con este elemento podremos agrupar muchos otros en uno único.
Más
Nos permite incluir un elemento «Read More» o «Leer más». Esto se utiliza especialmente para la previsualización en la vista «blog» de las entradas. Así, no se mostrará el contenido que encuentre a partir de dicho elemento.
Salto de página
Mediante la inclusión de los saltos de página podremos dotar de paginación una publicación.
Separador
Nos introducirá una barra horizontal muy interesante para dividir diferentes contenidos de la misma página.
Espaciador
El espaciador es un elemento «invisible» (aunque se puede colorear si se desea), que permite separar elementos un número determinado de pixels.
Bloques de widgets
Shortcode
Sirve para introducir shortcodes o trocitos de código que a la hora de verlos el usuario se convierten en otra cosa:
Archivos
Para mostrar la sección «Archivo» de la web.
Calendario
Se muestra un calendario de publicaciones.
Categorías
Se muestra las categorías de la web.
HTML personalizado
Se puede introducir HTML a nuestro gusto.
Últimos comentarios
Se muestran los últimos comentarios de la página.
Últimas entradas
Se muestran las últimas entradas del blog.
RSS
Se puede mostrar una lista de distribución RSS, ya sea de esta web o de cualquier otra.
Iconos sociales
Para introducir iconos.
Nube de etiquetas
Muestra una nube de etiquetas.
Buscar
Incrusta la opción de búsqueda en la propia página.
Bloques de incrustados
Sirven para introducir tarjetas (cards) y contenidos de diversas webs bien contenidas. Un ejemplo claro serían vídeos de YouTube o Vimeo, o una tarjeta de Twitter. En este caso siempre presentarán el contenido de manera nativa.
Actualmente están disponibles los de:
- Incrustado (para contenidos genéricos)
- YouTube
- WordPress
- SoundCloud
- Spotify
- Flickr
- Vimeo
- Animoto
- Cloudup
- Crowdsignal
- Dailymotion
- Imgur
- Issuu
- Kickstarter
- Meetup.com
- Mixcloud
- ReverbNation
- Screencast
- Scribd
- Slideshare
- SmugMug
- Speake Deck
- TikTok
- TED
- Tumblr
- VideoPress
- WordPress.tv
- Amazon Kindle
Patrones de Gutenberg
Ya hemos visto todos los bloques que Gutenberg incorpora. ¡Pero ahí no acaba todo!. Existen también los archiconocidos patrones, que no son otra cosa que combinaciones algo más complejos de los bloques y que suponen un ahorro importante a la hora de maquetar contenidos.
Has de tener en cuenta que cuando introduzcas cualquier patrón te introducirá algunos aspectos como defecto, textos (normalmente del Quijote), imágenes, etc. Simplemente tendrás que cambiar esos elementos por los que realmente te interesen: tus fotografías, frases, párrafos, etc.
Pueden repartirse también en varios tipos diferentes que son:
- Patrones de botón
- Patrones de columnas
- Patrones de galería de imágenes
- Patrones de galería
- Patrones de texto
Vamos a verlos todos ellos
Patrones de botón
Dos botones
Crea una estructura de dos botones diferentes:
Tres botones
Idem, pero con tres botones:
Patrones de columnas
Dos columnas de texto
Una bonita estructura de texto en dos columnas:
Dos columnas de texto con imágenes
Idem, pero cambiando el encabezado por dos imágenes:
Tres columnas de texto con botones
Interesante patrón de tres columnas con textos y botones:
Patrones de galería de imágenes
En este caso solo hay uno (a día de hoy al menos).
Patrón de dos imágenes contiguas
Dos imágenes encolumnadas:
Patrones de Cabeceras
Patrón de cabecera grande con un encabezado
Interesante patrón similar al bloque de «fondos» pero añadiendo un botón:
Patrón de cabecera grande con un encabezado y un botón
Este básicamente es el mismo que el fondo:
Patrones de texto
Patrón de encabezado y párrafo
Otra estructura con texto y su encabezado:
Patrón de cita
Adecuación de cita, añadiéndole una imagen:
Conclusiones sobre el diseño web en WordPress con Gutenberg
Nuestra opinión es clara: es interesante conocer en profundidad Gutenberg y estar al tanto de sus actualizaciones y nuevos añadidos. Nos permitirá añadir funcionalidades en la maquetación de contenidos, ahorrándonos recursos en cuanto a plugins adicionales que tendríamos que añadir. ¿Vale para diseñar una web completa? A día de hoy, no. Es cierto que podremos montar un sitio web sólo con Gutenberg, pero carecerá aún de bastantes aspectos visuales modernos comunes. Ahora bien: habrá que estar atentos, ya que se están viendo muchísimas actualizaciones en Gutenberg y es previsible que acabe convirtiéndose en una herramienta mucho más potente.
