«No me gusta Gutenberg, qué manía le tengo».

Si no lo has dicho tú, seguro que lo ha dicho alguien de tu entorno profesional.

Pues chicos, qué queréis que os diga… El editor de texto de WordPress ha cambiado, de tal manera que permite muchas más opciones que el antiguo editor. Y eso no lo tienes que odiar, ¡hay que aprovecharlo!

Pero… una de nuestras imperfecciones es ser resistentes al cambio. Aparece algo nuevo, raro, y sigues con lo antiguo hasta que no queda más remedio.

Esto es y será siempre un error porque cuando hay un avance y está claro que lo antiguo va a desaparecer no hay que mirar hacia otro lado. Llegará un momento en que lo antiguo desaparecerá y te pillará en pañales, entonces más vale que te pongas las pilas ya con lo nuevo.

Así que espero que no te des la vuelta y sigas por aquí para conocer todas las posibilidades del editor de texto Gutenberg para WordPress.

Te lo voy a explicar todo en texto y acompañare las explicaciones también con vídeos.

?? Tutorial de Gutenberg para redactores y copywriters: de la A a la Z

Vamos por el principio. Cuando vas a escribir una entrada para blog, en la parte derecha de la pantalla te encuentras una columna dividida en las siguientes 2 pestañas.

Lo primero que has de saber es que en Gutenberg, por defecto, trabajaremos por bloques. Un bloque es cada una de las pequeñas parte en las que se dividen nuestros documentos.

Los bloques más comunes son los párrafos de texto. Pero hay más tipos de bloques, como ves bajo estas líneas

Para que lo entiendas mejor, te describo los tipos de bloques que aparecen en la imagen superior:

• Párrafo.
• Imagen.
• Botón de descarga.
• Ninja Forms: con esta opción puedes insertar un formulario creado con el plugin para formularios Ninja Forms. Si no tienes ningún formulario creado con Ninja Forms, no usarás esta opción.
• Encabezado: aquí puedes escoger entre h1, h2, h3 y h4.
• Galería: sirve para insertar varias imágenes a la vez.
• Lista: es esto que estás viendo.
• Cita: sirve para resaltar algún trozo de texto que te interese mucho.
• Audio: con esto insertarás una pista de audio. La forma de insertar es como las imágenes. Puede ser desde una URL o subiendo el archivo a la web.

En la opción de bloques más utilizados salen los más utilizados por ti. A mí me sale esto, pero a ti te puede salir algo diferente.

Siempre que trabajes con cualquier bloque tendrás una barra de ajustes. En el cuadrito más a la derecha de esta barra, saldrán siempre estas opciones que tienes aquí.

• Ocultar los ajustes del bloque: con esta opción ocultas la barra que tienes a la derecha de la pantalla, la que dice «documento/bloque».
• Duplicar: duplica automáticamente el contenido del bloque actual.
• Insertar antes: deja un espacio para que añadas algo antes del bloque actual.
• Insertar después: deja un espacio para que añadas algo justo debajo del bloque actual.
• Editar como HTML: transforma el bloque que estás escribiendo en código HTML. Si conoces este lenguaje puede resultarte útil esta opción.
• Añadir a los bloques reutilizables: los bloques reutilizables son aquellos que guardas para poderlos utilizar en más artículos que escribas. Si el bloque que estás diseñando es uno de esos que te va a interesar utilizar muchas veces, con esta opción podrás añadirlo a este grupo para usarlo siempre que quieras.
• Agrupar: con esta opción aumentas la sangría, es decir, los márgenes por defecto cambian. Si agrupas un bloque y quieres volver al aspecto original, encontrarás también la opción de desagrupar.
• Eliminar el bloque: para borrar el bloque actual.

Hemos visto los apartados comunes a todos los bloques y anteriormente los bloques que aparecen como más utilizados. Ahora tienes las siguientes opciones.

Vamos a ver todas una por una.

?? Bloques comunes

En la parte de bloques comunes tenemos las siguientes opciones, algunas ya vistas como más utilizadas.

⏩ Párrafo

Cuando comienzas a escribir un párrafo tienes una barra superior que te permite hacer lo siguiente:

• Cambiar el tipo o estilo de bloque: con esta opción podrás transformar el tipo de bloque de párrafo a otro que puede ser encabezado, lista, cita y algunos más. Dependiendo del tipo de bloque las opciones de transformación son diferentes.

• Cambiar la alineación del texto: por defecto los textos están alineados a la izquierda, pero puedes cambiarla a centrada o alineado a la derecha.

• Poner negritas.

• Poner cursivas.

• Insertar un enlace.

• Más controles de texto enriquecido: con esta opción puedes hacer 2 cosas: tachar palabras o integrar una imagen.

La opción de tachar te permite escribir un trozo de texto tachado. Integrar una imagen significa que puedes elegir una imagen de la bibloteca e insertarla dentro del bloque. Ojo, esto no es lo mismo que añadir una imagen como bloque aparte. Con esto lo que consigues es crear un párrafo que tenga una imagen en su interior.

¿Qué más podemos hacer con los párrafos? Mira hacia la derecha y verás que hay unas opciones de ajustes más avanzados.

Como ves, la primera opción es cambiar el tamaño de la fuente.

Puedes también capitalizar, que significa comenzar el párrafo con una letra mayúscula muy grande, que es como empiezan algunos libros o artículos de revistas.

Y después tienes los ajustes de color. Con ellos puedes cambiar tanto el color de la letra del bloque como el color del fondo del bloque. Ojo, esto vale solo para el bloque actual, no para todo el documento. En estas opciones tienes la paleta de colores para elegir y además tiene la posibilidad de introducir el código numérico del color que quieras usar, en caso de que lo sepas.

Para todos los tipos de bloques tienes una opción de «avanzado». Lo que te permite es introducir código CSS. Pero esto es solo para los que conozcan este lenguaje de programación.

⏩ Lista

Eligiendo una lista, el editor nos deja hacerla como lista desordenada u ordenada. La lista desordenada es la típica que lleva un circulito negro al principio de cada ítem. Mientras, la lista ordenada es la que lleva los elementos ordenados empezando por el número 1.

⏩ Imagen

Pulsa la opción de imagen cuando quieras insertar una en tu artículo.

Te encontrarás 3 opciones:

• Subir una imagen desde tu ordenador.

• Insertar una imagen desde una URL.

• Insertar una imagen de las que ya tienes en la biblioteca de medios de tu página web.

En estos casos puedes cambiar el tamaño de las imágenes, título y texto alternativo, tal y como sucedía con el editor clásico.

Si miras la parte derecha de la página mientras insertas la imagen verás las opciones avanzadas y novedosas en Gutenberg.

Como ves, puedes insertar una imagen como de costumbre con la opción por defecto o como máscara circular.

⏩Fondo

Con esta opción puedes agregar un fondo al bloque, que será una imagen o un vídeo. Esta imagen o vídeo se tomará de la biblioteca de medios o se subirá desde tu ordenador.

Dentro del fondo que subas podrás escribir como si tuvieras un párrafo corto. Los ajustes que aparecen a la derecha de la pantalla son los mismos que para un párrafo. Esto es, puedes capitalizar, cambiar el tamaño de la letra, los colores del fondo y del texto.

⏩Encabezado

La opción de encabezado sirve para escribir titulares, que siempre tendrán un tamaño de letra mayor. Este bloque es muy similar al párrafo, la única diferencia es que permite jugar con los tipos de letra y colocar la que más interese.

Puedes elegir entre H2, H3 y H4. En la columna de la derecha también es posible elegir entre H5 y H6 pero, sinceramente, no te recomiendo estas opciones ya que en muchas ocasiones apenas se nota la diferencia de tamaño si comparamos con la letra de los párrafos.

También existe la opción de cambiar el color del encabezado.

⏩Galería

La opción de galería permite seleccionar varias imágenes de la biblioteca e insertarlas al mismo tiempo en el documento.

Dentro de la opción de galería podemos tener las imágenes ocupando el ancho completo del documento o bien alinaeadas a la izquierda o a la derecha. Si están alineadas a la izquierda o a la derecha se verán mucho más pequeñas que con la opciones de ancho completo.

Asimismo, en la parte derecha de la pantalla tenemos otras opciones avanzadas. Una opción es la de recortar imágenes, que está señalada por defecto y la otra la del número de columnas.

⏩Cita

La opción de cita es una de las más interesantes. Da un énfasis visual al texto y es muy útil cuando queremos resaltar un trozo de texto saliendo de la monotonía de unos párrafos todos con el mismo tipo de letra.

Tienes dos tipos de cita, las cuales se diferencian por el tamaño de la letra.

⏩Archivo

Esta posibilidad es muy interesante si quieres que tu audiencia se descargue algún archivo que le regales. Puedes subir un archivo PDF desde tu ordenador y añadir un botón de descarga.

Para que te hagas una idea, he preparado un archivo pdf con un trocito de texto de este post, como prueba. Te lo puedes descargar aquí mismo.

⏩Vídeo

Con este tipo de bloque insertarás un vídeo subiéndolo desde tu ordenador, o tomándolo de la biblioteca de medios. También puedes insertarlo desde una URL, como sucede con los vídeos de YouTube o Vimeo.

Te recomiendo que elijas siempre que puedas la inserción desde URL ya que los vídeos son archivos demasiado grandes y no conviene subirlos a una página web.

?? Formatos

En el apartado de formatos tenemos lo siguiente:

De aquí no voy a explicarte todo porque, como puedes ver, en algunas opciones hay que saber código y los redactores no solemos saber (siempre hay excepciones). No obstante hay algunas opciones que aportan mucho.

⏩Clásico

Con esta opción volverás al editor clásico de WordPress, que, por cierto, parece que volará definitivamente en diciembre de 2021.

⏩Párrafo de cita

Se usa para dar énfasis al texto, como las citas, pero en este caso es mucho mejor porque permite más opciones avanzadas.

En la columna derecha vemos que hay dos estilos de párrafo de cita: por defecto y color sólido. También se puede cambiar el color del texto, cosa que con el bloque de cita es imposible.

⏩Verso

El verso puede utilizarse para poesías o letras de canciones. Tiene varias posibilidades de alineación.

⏩Tabla

Superinteresante esta opción. Puedes crear tus tablas como haces en un documento de Word definiendo el número de filas y el número de columnas.

Después de tener la tabla construida se puede editar añadiendo o borrando filas o columnas al formato original. Permite cambiar el color pero solo del fondo de la tabla, no del texto.

?? Elementos de diseño

Gutenberg nos ofrece los siguientes elementos de diseño.

⏩Grupo

Un grupo es un bloque que engloba a otros bloques.

Las opciones que tienes son el ancho, que puede ser amplio o completo. El ancho completo es de mayor magnitud que el amplio. Además, en la parte derecha de la pantalla tienes la opción de cambiar el color del fondo.

Si dentro del espacio del bloque escribes un texto, este quedará con un margen izquierdo mayor, es decir, comienza más hacia la derecha.

⏩Más

Activando esta opción salen unas líneas discontinuas y el texto «leer más».

El contenido anterior a este bloque se mostrará en el extracto de tu página de archivo. Esto de la página de archivo no es algo que toquemos los redactores, por tanto no voy a profundizar más. Si quieres saber algo más sobre las páginas de archivo, te aconsejo que leas este artículo.

⏩Botón

Al elegir esta opción hacemos 2 cosas: escribir un texto para el botón y escribir también el enlace, esto es, a dónde te vas a dirigir pulsando el botón.

Tienes varias opciones en la edición del botón:

• Que tenga color de fondo o no lo tenga.

• Editar con letras negritas o cursivas.

• Cambiar el color tanto del texto como del fondo del botón.

• Abrir en una pestaña nueva cuando se pulse el botón.

• Modificar la forma del contorno del botón.

• Modificar la forma del contorno del botón.

Los botones se utilizan mucho en las llamadas a la acción. Si te interesa que escriba textos persuasivos para ti, te dejo el botón de llamada a la acción (creado con Gutenberg) que te lleva a la página donde te explico cómo trabajo en mi servicio de copywriting.

⏩Columnas

Esta opción es muy atractiva. Lo que teníamos que hacer con maquetadores visuales ahora podemos hacerlo con Gutenberg, al menos en parte.

Seleccionando este bloque hay 5 posiblidades de diseño de columnas. Con las opciones de la columna derecha de la pantalla se puede modificar el ancho de las columnas.

⏩Medios y texto

Este tipo de bloque sirve para, por ejemplo, colocar una imagen al lado de un texto. Existen distintas opciones de alineación de ambos elementos.

También se puede cambiar el color del fondo del bloque, recortar la imagen y activar la opción de aplicar en los dispositivos móviles. Esta posibilidad es muy interesante para el diseño responsive.

⏩Salto de página

Esta posibilidad te interesa si quieres que tu contenido quede dividido en más de una página.

⏩Separador

El separador añade un elemento visual que sirve como separación. Se puede elegir entre varios tipos de separaciones:

• Línea contínua.

• Línea discontinua.

• Puntos.

Se puede cambiar el color del separador y su longitud.

⏩Espaciador

El espaciador es un trozo de espacio en blanco que puedes añadir entre 2 bloques. En la parte derecha puedes variar su altura en pixeles, que por defecto está en 100.

?? Widgets

Aquí tienes todas las opciones.

⏩Shortcode

Esta opción no la voy a tener en cuenta porque se necesitan conocimientos de código.

⏩Archivos

Seleccionando esto aparecen las fechas en las que tienes publicados artículos, como mes y año. Más posiblidades para esto es colocar al lado de la fecha el número de entradas publicadas. Asimismo, se puede configurar la lista para que quede como desplegable y así poder elegir la fecha.

⏩Últimos comentarios

Usando este bloque se insertan los últimos comentarios del blog. Puedes modificar el bloque de la siguiente forma:

• Cambiando la alineación de los comentarios.

• Mostrando o no el avatar de los comentarios.

• Mostrando o no un extracto del texto del comentario.

• Mostrando o no la fecha del comentario.

• Eligiendo el número de comentarios que quieres que se muestren.

⏩Calendario

Con este bloque insertarás un calendario del mes actual, o del mes más cercano en el que escribiste un artículo en tu blog. Tendrás un enlace en los días correspondientes a la publicación de tus artículos. Si haces clic en los números, accederás al extracto del artículo publicado ese día.

También tienes, en la parte de abajo, un enlace al mes anterior en el que publicaste más artículos. Haciendo clic en el nombre del mes, accederás a los extractos de los artículos publicados en dicho mes.

⏩Categorías

Activando este bloque te saldrá la lista de categorías. Con ellas puedes hacer lo siguiente:

• Alinearlas de varias formas.

• Mostrarlas como desplegable.

• Mostrar el número de entradas que tiene cada categoría.

• Mostrar la jerarquía. Esto sirve para que se vea si tienes subcategorías.

• Comic de copywriting
• General
• SEO copywriting

⏩Últimas entradas

Este bloque muestra las últimas entradas. Como en los demás aquí también puedes hacer modificaciones:

• Mostrar las entradas como lista o en forma de cuadrícula.

• Mostrar o no el contenido de las entradas.

• Mostrar la fecha de las entradas.

• Ordenar las entradas: puede ser por orden temporal de más antiguo a más nuevo y de más nuevo a más antiguo. También pueden ordenarse por orden alfabético directo o inverso.

Se puede elegir mostrar todas las entradas o solo las de unas categorías en concreto.

Otra opción a escoger es cuántas entradas queremos que nos muestre.

Si hemos elegido que las entradas se muestren en columnas, también se puede determinar el número de las mismas.

⏩RSS

Este bloque sirve para insertar las entradas de cualquier feed RSS o Atom. Como en opciones anteriores, aquí hay también varias posiblidades de alineación del feed.

⏩Buscar

Usando este bloque tendrás un cuadro de búsqueda donde podrás insertar las palabras que desees encontrar en el artículo. Tienes la opción de alinearlo a izquierda, derecha o centro.

⏩Nube de etiquetas

Si tu sitio tiene etiquetas, en este bloque se te mostrarán en forma de nube. Asmismo, para cada etiqueta se puede mostrar el número de entradas que la llevan.

También cabe la posibilidad de mostrar las categorías en forma de nube.

Tu sitio ni tiene ningún etiquetas, así que no hay nada que mostrar aquí de momento.

?? Bloques incrustados

Con los bloques incrustados, podrás insertar contenido desde una URL. Gutenberg ofrece mucha cantidad de posiblidades aquí.

• 

• 

• 

Te dejo aquí un vídeo que incrusté seleccionando la opción de WordPress.tv. La URL estab prevismente copiada en el portapapeles.

?? Bloques reutilizables

En lo que se refiere a el editor Gutenberg común a todos, solo nos queda hablar de bloques reutilizables. Son aquellos que diseñas y guardas para luego insertarlos donde quieras.

Si se trata de un bloque sencillo puedes hacerlo tú mismo. Si no, quizá necesites a un programador que te lo haga.

En esta web tengo un bloque reutilizable que consiste en una imagen y un formulario para insertar en los posts con el objetivo de que las visitas se suscriban a mi newsletter.

Zona de «Documento»

En esta parte, que se encuentra a la derecha de la pantalla, tenemos todos los ajustes generales del documento completo.

• 

• 

Como ves, esto es muy similar a lo que teníamos con el editor clásico. Veamos algunos ajustes interesantes.

• Enlace permanente: aquí puedes editar la URL del artículo.
• Categorías: muestra las categorías y permite crearlas. Lo mismo sucede con el apartado de etiquetas.
• Imagen destacada.
• Extracto.
• Comentarios.

Bien, con esto tenemos todo lo básico y más importante que debes saber como redactor para manejarte con Gutenberg.

No obstante, no es todo. También tienes más bloques en caso de que uses plugins como SEO Yoast y Woocommerce, por ejemplo.

Espero haberte ayudado con el texto y los vídeos… y, por supuesto, me gustaría conocer tu feedback, saber qué te ha parecido este tutorial de Gutenberg. Si ya lo conocías todo, si te ha parecido útil, en fin, todo lo que se te ocurra comentar.

¡Te espero por aquí! Te agradezco desde ya que me dejes un comentario.