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.
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.
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
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:
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.
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.
Luego de publicar podemos ver la entrada o copiar el enlace (nuevo).
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 borrador, publicada 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.
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.
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.
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.
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 cambios | Ctrl + S |
| Deshacer tus últimos cambios | Ctrl + Z |
| Rehacer tu último deshacer | Ctrl + Shift + Z |
| Mostrar u oculta la barra lateral de ajustes | Ctrl + Shift + , |
| Navegar a la parte siguiente del editor | Shift + Alt + N |
| Navegar a la parte anterior del editor | Shift + Alt + P |
| Cambiar entre el editor visual y el editor de código | Ctrl + Shift + Alt + M |
| Seleccionar todo el texto mientras tecleas (pulsa de nuevo para seleccionar todos los bloques) | Ctrl + A |
| Limpiar la selección | Esc |
| Duplicar el bloque seleccionado | Ctrl + Shift + D |
| Eliminar el bloque seleccionado | Ctrl + Alt + Backspace |
| Insertar un nuevo bloque antes del bloque seleccionado | Ctrl + Alt + T |
| Insertar un nuevo bloque después del bloque seleccionado | Ctrl + Alt + Y |
| Cambiar el tipo de bloque después de insertar un nuevo párrafo | / |
| Cambiar el texto seleccionado a negritas | Ctrl + B |
| Cambiar el texto seleccionado a cursivas | Ctrl + I |
| Subrayar el texto seleccionado | Ctrl + U |
| Convertir el texto seleccionado en un enlace | Ctrl + K |
| Eliminar un enlace | Shift + Alt + S |
| Añade un tachado al texto seleccionado | Shift + Alt + D |
| Mostrar el texto seleccionado en fuente mono-espacio | Shift + Alt + X |
0 comentarios