Cómo funciona Gutenberg

Manual de Gutenberg

Aprende a usar y configurar todos los bloques del editor Gutenberg.

Además de la parte central del editor, que analizamos en el capítulo anterior y que nos permite crear y editar el contenido de una entrada o página de WordPress, Gutenberg cuenta con una barra de herramientas superior y un sidebar de ajustes que también es importante explorar.

La barra de herramientas superior

Como habíamos visto al principio, Gutenberg cuenta con una barra de herramientas en la parte superior de la página.

Barra de herramientas de Gutenberg

La barra de herramientas superior de Gutenberg.

 

Esta barra de herramientas podemos verla conformada por dos grupos de botones: los botones de la izquierda y los botones de la derecha. Los primeros están relacionados con el contenido del documento mientras que los segundos tienen más que ver con la entrada en general.

En el grupo de la izquierda tenemos hasta el momento 4 botones:

Añadir bloque

El botón Añadir bloque abre la biblioteca de bloques para que podamos elegir cuál de éstos insertar en el documento.

Es idéntico al botón que aparecía debajo del último bloque, cuando estamos trabajando en el documento.

Biblioteca de bloques de Gutenberg

Herramientas para el contenido.

Deshacer

El típico botón para deshacer la última acción realizada. Algo que por supuesto ya existía en el editor clásico y que el nuevo editor de WordPress conserva.

Rehacer

El clásico botón para rehacer lo que deshicimos con el botón anterior. También ya existente en el editor de WordPress desde hace años.

Estructura del contenido

Gutenberg nos deja ver la estructura del documento.

Podemos ver la estructura del contenido.

Este botón abre una ventana modal que nos muestra información relativa al contenido de la entrada:

– Cantidad de palabras.
– Cantidad de párrafos.
– Cantidad de encabezados.
– Cantidad de bloques.

También muestra un esquema del documento donde podemos ver todos los encabezados con su orden jerárquico.

Ésto último es muy útil para darnos cuenta fácilmente si el documento está correctamente estructurado o si nos quedó algún encabezado huérfano.

➖ ⚫ ➖

En el grupo de botones de la derecha hay hasta ahora 5 elementos:

Guardar borrador

Algo para destacar es que el documento se va guardando automáticamente a medida que editamos. En el editor clásico también era así pero la diferencia es que estaba separado el auto-guardado del guardado manual.

Con Gutenberg en cambio, el auto-guardado de un borrador es lo mismo que el guardado manual, y podemos cerrar tranquilamente el editor sin miedo a perder nada.

Distinto es cuando hacemos cambios en una entrada ya publicada. En este caso sigue funcionando igual que antes y debemos Actualizar la entrada para que se publiquen los cambios, sino podríamos perderlos.

Vista previa

Te permite acceder a una vista previa del documento y funciona exactamente igual que con el editor clásico.

Publicar

No necesita explicación. Lo único para destacar es que ahora WordPress te pide confirmación antes de publicar la entrada. Algo que me parece excelente respecto al editor clásico, que publicaba la entrada con un solo clic.

Más de una vez publiqué por accidente una entrada que solo quería guardar como borrador.

Ajustes

El botón de la rueda dentada sirve simplemente para activar/ocultar el sidebar de ajustes de la entrada.

 

Si hacemos clic en el último botón de 3 puntitos se abre un menú con más opciones:

Herramientas de la entrada o página.

Las herramientas de la entrada de Gutenberg.

Editor visual / Editor de código

Nos permite ver el documento visualmente o como código, muy parecido a las pestañas Visual y HTML del editor clásico.

Fijar la barra de herramientas arriba

Esta opción lo que hace es que la barra de herramienta del módulo que estamos editando no salga justo arriba del módulo sino que la veamos integrada en la barra de herramientas superior del editor Gutenberg.

Mostrar consejos

Teniendo activa esta opción se van abriendo ventanas con consejos sobre el editor y sus funciones a medida que trabajamos.

Atajos del teclado

Abre una ventana modal con todos los atajos disponibles en Gutenberg (también accesible con Shift + Alt + H). Más adelante te detallo todos los atajos del teclado disponibles hasta el momento en el editor Gutenberg.

Copiar todo el contenido

Copia absolutamente todo el contenido de la entrada al portapapeles para que podamos pegarlo en una nueva entrada, o en cualquier otro lado.

¿Estás listo para publicar?

Como mencionaba hace un rato, una de las cosas que me gusta de Gutenberg es que al momento de publicar una entrada te pide confirmación, por si le dimos al botón Publicar por error.

Publicar entrada con Gutenberg

WordPress te pide confirmación antes de publicar una nueva entrada.

 

Ahora cuando hacemos clic en Publicar se abre una ventana en el mismo lugar preguntándonos si estamos listos para publicar. Además nos permite cambiar la opción de visibilidad, así como la fecha y hora de su publicación.

Luego de confirmar la publicación la misma ventana te da la opción de Ver la entrada (algo que ya estaba en el editor clásico) o bien  Copiar el enlace (nuevo) para compartirlo en algún otro medio.

Nueva entrada publicada

Luego de publicar podemos ver la entrada o copiar el enlace (nuevo).

El sidebar de ajustes de Gutenberg

El sidebar de ajustes de la entrada o página es (de las cosas de Gutenberg) lo más parecido al ya conocido sidebar del editor clásico de WordPress.

Este sidebar de ajustes está divido en dos pestañas principales:

? Documento. Contiene las opciones generales de la entrada al igual que el editor clásico.

? Bloque. Cuando tenemos seleccionado algún bloque aparecen aquí las opciones de ese bloque en particular.

Dentro de la pestaña Documento las opciones te van a resultar bastante familiares si ya dominas el editor clásico.

Visibilidad

En esta imagen podemos ver cómo se asigna el tipo de visibilidad que deseamos para el documento.

Las opciones son las mismas de toda la vida, pero es más clara la forma de verlas y además ahora WordPress nos explica brevemente las diferencias entre cada una.

Fecha de publicación

La manera de programar una entrada también es más clara. Ahora tenemos un calendario desde el cual elegir visualmente el día de publicación y asignar un horario.

Un gran avance frente al rústico y poco intuitivo método del editor clásico de WordPress.

Formato de la entrada

El formato de entrada ahora también se elige desde un selector desplegable, con lo cual todas sus opciones no ocupan espacio.

Fijar en la portada

La novedad de esta herramienta radica en que antes estaba un poco escondida entre las opciones de visibilidad y ahora es una opción aparte mucho más visible.

Vale aclarar, para quienes nunca la hayan visto antes, que esta opción sirve para fijar la entrada actual en la parte superior de la portada como destacada.

Es útil en el caso de que utilicemos la portada en modo de blog, lógicamente. Si tenemos una portada de página estática no cumple ninguna función.

Pendiente de revisión

En el editor clásico existe una opción que no está más en Gutenberg, la opción Estado. El estado de una entrada indicaba si se encuentra en borradorpublicada o pendiente de revisión.

Era un selector que, así como tal no tenía mucho sentido, si entendemos que una entrada siempre está en borrador cuando recién la creamos y pasa a publicada automáticamente al hacer clic en Publicar.

Para lo único que servía era para indicar justamente el estado intermedio: Pendiente de revisión; muy útil cuando en un blog o sitio de noticias hay autores que redactan el contenido y un editor que es el encargado de revisarlo y publicarlo.

Más que un estado, es una señal para indicarle al editor que el artículo ya está listo para ser revisado y publicado. Por eso en Gutenberg la marca Pendiente de revisión tiene mayor sentido.

➖ ⚫ ➖

Las opciones que siguen funcionan exactamente de la misma forma que en el editor clásico así que no creo que tenga mucho sentido entrar en ellas.

  • Revisiones.
  • Categorías.
  • Etiquetas.
  • Imagen destacada.
  • Extracto.
  • Comentarios.

El editor de código de Gutenberg

Al igual que el editor clásico, Gutenberg nos da la posibilidad de editar una entrada tanto visualmente como desde el código HTML. En el caso del nuevo editor de WordPress, tenemos dos formas de acceder al código de nuestro contenido.

? La primera es accediendo al código de un bloque en particular. Esto lo conseguimos haciendo clic en los tres puntos que aparecen a la derecha de un bloque (ahora están en la barra de herramientas), cuando estamos trabajando en él, y luego en la opción Editar como HTML.

Editor HTML de Gutenberg

Editar el código HTML de un bloque.

 

? La segunda es abriendo el editor HTML de todo el documento. Lo conseguimos haciendo clic en los tres puntos que aparecen a la derecha de la barra de herramientas superior de la entrada, y luego en Editor de código.

Esta última opción es lo más parecido a la pestaña HTML del viejo editor clásico.

Editor de código de Gutenberg

Editando el código HTML de una entrada con Gutenberg.

 

Si analizamos brevemente el código generado por el editor Gutenberg vemos que es totalmente compatible con el editor clásico, y con cualquier otro editor HTML. Podríamos copiar todo el código de una entrada y pegarlo en cualquier otro lado que funcionaría sin problemas.

A diferencia de otros editores por bloques, Gutenberg no utiliza shortcodes, sino etiquetas de comentario HTML para definir cada bloque del contenido y clases especiales para el formato, como podemos ver a continuación.

Código del editor Gutenberg de WordPress

Analizando el código del editor HTML de Gutenberg.

 

Como los bloques se definen mediante etiquetas de comentario HTML podemos desactivar Gutenberg sin preocuparnos por que aparezcan errores o códigos raros en la entrada.

Además estas etiquetas nos permiten identificar rápidamente un determinado bloque cuando estamos editando.

Los atajos del teclado de Gutenberg

El editor Gutenberg cuenta con un montón de atajos de teclado para ejecutar más rápido las funciones que necesitamos al editar una entrada o página. Para acceder al listado actualizado de atajos podemos hacer Shift + Alt + H cuando estamos en el editor.

Atajos de teclado Gutenberg

Los atajos del teclado de Gutenberg.

 

Los atajos de teclado que están disponibles a la fecha de redactar este manual de Gutenberg son los siguientes:

¿Qué quieres hacer?Entonces teclea…
Guardar los cambiosCtrl + S
Deshacer tus últimos cambiosCtrl + Z
Rehacer tu último deshacerCtrl + Shift + Z
Mostrar u oculta la barra lateral de ajustesCtrl + Shift + ,
Navegar a la parte siguiente del editorShift + Alt + N
Navegar a la parte anterior del editorShift + Alt + P
Cambiar entre el editor visual y el editor de códigoCtrl + Shift + Alt + M
Seleccionar todo el texto mientras tecleas (pulsa de nuevo para seleccionar todos los bloques)Ctrl + A
Limpiar la selecciónEsc
Duplicar el bloque seleccionadoCtrl + Shift + D
Eliminar el bloque seleccionadoCtrl + Alt + Backspace
Insertar un nuevo bloque antes del bloque seleccionadoCtrl + Alt + T
Insertar un nuevo bloque después del bloque seleccionadoCtrl + Alt + Y
Cambiar el tipo de bloque después de insertar un nuevo párrafo/
Cambiar el texto seleccionado a negritasCtrl + B
Cambiar el texto seleccionado a cursivasCtrl + I
Subrayar el texto seleccionadoCtrl + U
Convertir el texto seleccionado en un enlaceCtrl + K
Eliminar un enlaceShift + Alt + S
Añade un tachado al texto seleccionadoShift + Alt + D
Mostrar el texto seleccionado en fuente mono-espacioShift + Alt + X

Manual de Gutenberg

Aprende a usar y configurar todos los bloques del editor Gutenberg.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

WordPress es Mejor con Divi

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *