En este video vamos a utilizar el nuevo editor de bloques de WordPress para maquetar una entrada del blog y ver qué ventajas y desventajas tiene para crear y maquetar el texto.

Maquetando una entrada con Gutenberg

El editor de bloques de WordPress puede ser una lata a la hora de escribir el contenido de una entrada pero vamos a ver los bloques más utilizados en una entrada y que nos permiten hacer para maquetar el texto y otros elementos.

Encabezados

Los encabezados son los títulos de nuestro articulo y con ellos debemos indicar los temas y subtemas de los que trata nuestra publicación.

Los encabezados no tiene opciones de formato desde el editor de bloques por defecto, normalmente las opciones o el formato lo dará el tema por CSS.

Recordar que hay que tener una jerarquía de títulos correcta y un solo encabezado h1 en cada publicación para ayudar al usuario a esquematizar nuestro contenido y también para ayudar a los motores de búsqueda en el posicionamiento SEO.

Si no quieres utilizar demasiados sub encabezados puedes usar la negrita para la maquetación del texto.

Imágenes

Una ventaja de este bloque es que no necesitamos la imagen para ver el bloque en la maquetación, de esta manera podemos indicar en qué lugar van a ir las imágenes antes de tenerlas.

Es un bloque muy sencillo de usar  con varias opciones para cambiar el tamaño de la imagen o su miniatura.

Lo realmente novedoso son las opciones de ancho amplio y ancho completo que permiten crear una maquetación del contenido con un diseño muy visual.

También podemos envolver la imagen en texto si queremos tener una maquetación que se parezca más a una revista digital.

Galerías

El bloque de galerías de imagen no ha cambiado demasiado desde el editor clásico, no trae opciones de personalización avanzadas, ni tampoco navegación por la galería.

Únicamente podemos elegir a dónde lleva el elemento, y el número de columnas de la galería.

También podemos elegir si las miniaturas se recortan o no.

Citas y párrafo de cita

Las citas sirven para crear un texto al estilo de «cita célebre» aunque también las podemos utilizar para dar consejos.

Tienen un estilo visual diferente al párrafo que hace que destaque.

En WordPress encontramos 2 bloques que podremos usar con estos objetivos, «el bloque cita» y «el bloque de parrado de cita».

Texto pre formateado

El texto pre formateado es texto sin estilo que no ejecuta el código escrito. Lo ideal sería que este texto apareciera dentro de una caja con barra de navegación pero en algunos temas rompe la maquetación de la entrada.

Imagen integrada

Con este bloque podemos integrar imágenes en el texto o en los encabezados.

De esta manera podemos insertar iconos al lado de los títulos para que los usuarios que escanean títulos se paren masa a leerlos.

Separadores y Espaciadores

Los separadores crean una línea divisoria dentro del contenido de una entrada, puede utilizarse para separar secciones de un artículo.

El bloque de espaciador crea un espacio en blanco y se utiliza para separar elementos de la entrada, cuando quedan demasiado juntos y hacer que el diseño «respire» no agobiando al usuario.

Fondo para los párrafos

Una de los puntos fuertes que le veo al nuevo editor de bloques es la opción de fondo de los párrafos.

Dando color al fondo de los párrafos podemos destacar parte de nuestra entrada para que el usuario se centre dónde queremos.

De esta manera podemos crear avisos, consejos, anuncios u lo que queramos de forma muy visual.

Editor clásico de WordPress

Si no nos acostumbramos a la maquetación con bloques podemos utilizar el editor clásico de WordPress gracias al bloque clásico.

Una ventaja de este bloque es que nos permite escribir de forma rápida sin tener que gestionar los bloques, y después si queremos podemos convertir en bloques para mejorar la maquetación.

De esta manera los escritores y periodistas no morirán en el intento al escribir textos largos.

Botones

El bloque de botones nos permite insertar de forma fácil un botón sencillo.

Es muy útil en la maquetación de una entrada, ya que muchas veces vamos a querer que un usuario vaya a otra página o a otro lugar y una forma sencilla de hacerlo es con botones.

También podemos hacer que se descarguen un archivo mediante un botón con el bloque «archivo».

Insertar contenido externo

Los bloques de incrustados nos permiten poner un servicio externo como YouTube o Twitter en nuestra entrada.

De esta manera podemos insertar videos de YouTube o audios de SoundCloud y usar otros muchos servicios web.

Una manera rápida de insertar el contenido externo es pegando la URL en un párrafo y WordPress automáticamente lo convertirá en un bloque.

Este bloque también tiene ancho amplio y ancho completo, y queda muy bien para los videos de YouTube.

Los temas y Gutenberg

Dependiendo del tema que estés utilizando la maquetación de las entradas con Gutenberg puede verse modificada, esto es debido a que el estilo de muchos elementos viene dado por el tema.

En el video vemos el resultado final con diferentes temas y hemos visto algunos errores como:

• El texto pre formateado puede no está adaptado a tu tema.
• La imagen envuelta en texto puede quedar de forma diferente a la esperada.
• Algunos elementos del editor clásico se descolocan.
• El párrafo de cita no tiene estilo.
• El bloque de insertado tiene un espacio en blanco enorme.

Conclusión

El nuevo editor de bloques de WordPress tiene sus virtudes y sus fallos, pero hay que quedarse con el lado bueno, que es la maquetación avanzada de los elementos de una entrada.

Con Gutenberg podemos maquetar una entrada con más libertad de diseño y conseguir mejores sensaciones con nuestro contenido.

Por ejemplo, podemos maquetar una entrada al estilo de una «Revista» con grandes imágenes a ancho completo y textos enormes sin dejar de lado el estilo de un blog.

Y también podemos crear una maquetación vertical que haga que nuestro contenido se lea genial en dispositivos móviles.

Otro de sus puntos fuertes es la facilidad al crear algunos elementos, como botones, insertar videos, crear fondos etc…

Por otro lado, hemos visto algunos fallos de interfaz y algún pequeño problema dependiendo de qué teme estemos utilizando, aunque este editor está en su primera fase y tiene que ir evolucionando.

Espero mejoras cuando se creen más funcionalidades nativas o nuevos plugins que modifiquen y mejoren el editor de bloques.

Como siempre espero que te sea de ayuda y nos vemos en el próximo tutorial!