Cómo escribir tu primer artículo con Gutenberg

Si estás dando tus primeros pasos en el mundo del blogging, será mejor que te vayas familiarizando con Gutenberg, el nuevo editor predefinido de WordPress a partir de la versión 5.0.

La primera diferencia sustancial con el antiguo editor de texto es la presencia de bloques: cada bloque corresponde a un tipo de contenido diferente:

• Texto
• Imagen
• Galería
• Tabla
• Código abreviado, etc..

Todo en un sitio web de WordPress se convierte en un bloque: texto, imágenes, galerías, widgets, atajos, e incluso trozos de HTML personalizado, ya sea añadido por plugins o de otro modo. Los usuarios sólo tendrán que aprender una única interfaz, la interfaz de bloques.

Ojo, puedes también configurar el clásico editor, pero si te acostumbras a la nueva lógica trabajarás de manera mucho más productiva y visual.

Todos los bloques se crean de la misma manera: los bloques más utilizados los encontrarás al alcance, mientras que los podrás ir corriendo a gusto, de manera fácil e intuitiva.

Pero no desesperes, sigue leyendo y descubrirás qué fácil y divertido es escribir un artículo con Gutenberg para tu blog.

¡Abróchate el cinturón que despegamos!

Gutenberg: mucho más que un editor

El nuevo editor de WordPress se basa en el mismo espíritu innovador e idealista del inventor de la imprenta en el siglo XIV, Johannes Gutenberg, que le ha dado su nombre.

Gutenberg WordPress tiene la misión de mejorar y democratizar cada parte del ecosistema de WP, ofreciendo a los usuarios menos “técnicos” la posibilidad de construir páginas y entradas que nunca hubieran podido imaginar.

Todos podremos escribir y maquetar artículos de manera ágil y obtener resultados que hasta ahora habría requerido la experiencia y el coste de un Diseñador pro.

Aquí te dejo un pequeño tutorial de Gutenberg de mi canal de YouTube dedicada a este maravilloso editor para que veas en vivo todo su potencial

El nuevo concepto de bloque

Antes de ver el uso práctico de Gutenberg, comencemos diciendo que la lógica con la que trabaja es completamente diferente a la del editor clásico.

Hasta ahora estábamos acostumbrados a una sola área donde se podían insertar todos los elementos: títulos, párrafos, listas, imágenes, etc. Escribíamos texto, insertábamos una imagen en el texto, etc. en el punto donde se encuentra el cursor parpadeante.

En cambio, Gutenberg trabaja en bloques, es decir, para agregar un elemento hay que insertar un bloque específico. Por ejemplo, si necesitas una imagen, deberás insertar a el bloque de imagen. ¿Quieres incrustar un vídeo de Youtube? Hay un bloque concreto para los videos de Youtube.

En primer lugar, los botones Vista previa, Guardar borrador y Publicar se encuentran, en la parte superior derecha, dentro de una barra que siempre está fija.

En la misma barra, a la izquierda, encontrarás:

• El botón + para añadir un bloque;
• Las flechas para desplazarte por las operaciones realizadas durante la sesión (útiles, por ejemplo, para cancelar la última operación realizada, aunque ctrl + z y cmd + z funcionan igualmente) ;
• El botón i que, una vez pulsado, muestra una ventana con información útil sobre el artículos:
  – el número de palabras,
  – encabezados
  – párrafos
  – bloques

A la derecha, además de las categorías, las etiquetas, la imagen destacada y otras opciones, que siempre hemos tenido, encontrarás dos secciones:

Muy ágil y cómodo. ¿Qué opinas? 😀

Siempre a la derecha en la parte superior hay dos pestañas:

• Documento, con las opciones del documento que te acabo de indicar;
  
• Bloque que permite acceder a la configuración del bloque seleccionado.

Escribe tu primer post con Gutenberg

Añade el primer párrafo usando el bloque específico como en la imagen, haciendo clic en el + : podrás elegir entre los siguientes tipos de contenidos.

En párrafo: puedes escribir tu texto. Cuando es está activado podrás elegir los distintos tipos de formatación (negrita, cursiva, agregar un enlace, como puedes ver en este bloque, que es un párrafo.

Para añadir una imagen, solo tienes que pulsar en Imagen para que puedas elegir entre Subir una imagen del ordenador, insertarla desde la biblioteca de medios o desde el URL. También puedes agregar un enlace a las imágenes.

A veces puede ser una buena idea dinamizar tu artículo, agregando una cita inspiradora, como por ejemplo la siguiente:

“No leas ni hagas caso a la siguiente frase”

Por lo visto, eres rebelde 🙂

Con Gutenberg también puedes insertar en tus artículos, una galería de imágenes chula, como esta:

Jugando con los encabezados en Gutenberg

Establece una buena jerarquía de tus contenidos, o en otras palabras, recuerda siempre quién manda.

Facilitarás la lectura, o mejor dicho, escaneado del texto a tus lectores, además de ayudar a Google de qué temática van tus entradas y tu negocio.

Los títulos y subtítulos te permiten organizar el texto, como también las negritas, cursivas y enlaces. Hasta ahora, en este artículo hay……

¡Redoble de tambores! 🙂

Como siempre, el h1 corresponde al título de la entrada, los h2, h3, etc. son los distintos encabezados.

Como podrás ver, definen el ritmo de la página y por supuesto son importantes porque afectan a la usabilidad de tus contenidos, es decir lo fácil y agradable es la experiencia del usuario.

Para escribir y optimizar los subtítulos, te dejo esta Guía sobre SEO para principiantes en la que encontrarás varias herramientas que te van a venir de maravillas para optimizar tus artículos.

Incrustar un video con Gutenberg

Incorporar un video a tus entradas es súper fácil, ya que es suficiente con que elijas el elemento

Puedes elegir entre Subir o Insertar desde URL, como en el ejemplo concreto que te muestro:

Gutenberg: cómo aplicar un fondo

Con el elemento fondo puedes colocar una heroe image, es decir, aquellos banners que a menudo ves al inicio de una página web.

Es posible insertar el texto que tu quieras, un filtro de color ajustable.

Puedes configurar la imagen como un fondo fijo o inclusive obtener el efecto parallax en la sección Bloque > Ajustes del fondo

Añadir un botón para una llamada a la acción en Gutemberg

Como te había comentado antes, con Gutemberg es súper versatil y puedes no solo contenido multimedia, sino también agregar botones en tus artículos y páginas:

Puedes personalizar siempre tamaño, colores, estilos del botón, css, siempre en la sección Bloque, que encuentras a la derecha, con las siguientes opciones de estilo y color:

Agregar columnas en Gutenberg

Otro de los elementos de diseño en Gutenberg que puede ser muy útil a la hora de organizar y presentar datos es la columna.

De momento, no es un bloque que puedes personalizar mucho, pero las opciones básicas de añadir, alinear, cambiar fuentes y colores

Conclusiones

Espero que este artículo sobre cómo escribir tu primer artículo con Gutenberg te haya sido útil.

No hay forma de detener el cambio. Gutenberg es el futuro, aunque ya tiene sus detractores inclusive antes de que haya sido incorporado a WordPress 5.0.

Para la mayoría de los usuarios novatos, después de algunas dificultades iniciales, ofrecerá una experiencia de crear de contenido increíblemente más potente, con la posibilidad de añadir elementos adicionales, botones, contenido incrustado y mucho más.

¿Y tú, qué opinas de Gutenberg? ¡Cuéntamelo en los comentarios! 🙂