Gutenberg, el nuevo editor de WordPress · Tutorial
A partir de la versión5.0, WordPress incorpora un nuevo editor de texto para sus páginas y artículos. El mismo nombre de la versión, Gutenberg, que homenajea al inventorde la imprenta, nos da una idea de la importancia de los cambios que esto va a suponer.
La edición pasa de realizarse en forma continua, como un procesador de texto, a una edición por bloques, donde cada elemento: título, texto, imagen, etc. es un bloque separado, aunque, como veremos, el editor está construido para seguir dando la apariencia de una edición escrita normal.
En el futuro es previsible que la edición por bloques permita la creación de columnas y otras ventajas ahora solo al alcance de los que utilizan plugins de maquetación de página. Por esta razón es necesario que nos familiaricemos con el nuevo editor cuanto antes, ya que el desarrollo de WorPress va a continuar en esta línea.
Durante un periodo transitorio, sin embargo, seguirá existiendo la opción de utilizar eleditor clásico, incorporado ahora como plugin.
La nueva consola de edición
Si abrimos la edición de un nuevo artículo de blog/ noticia, lo que encontramos es esta pantalla:
Editar un texto sencillo
En principio, si queremos escribir un artículo simple, la edición no cambia demasiado. Arriba aparece un espacio para el título y debajo un bloque ya creado donde podemos empezar a escribir directamente:
Lo que a primera vista cambia son los 3 iconos de la derecha, que nos servirán para elegir qué tipo debloque queremos incorporar tras el título:
Si solo queremos un bloque de texto solo tenemos que empezaren la línea de debajo, tras escribir el título del artículo:
Al situarnos con el cursor para empezar a escribir el nuevo texto aparecerá a la izquierda un nuevo icono, que nos permitirá añadir nuevos bloques. Y esta vez tendremos más opciones para elegir:
Con esta nueva herramienta podremos incorporar los bloques habituales, así como widgets o elementos incrustados provenientes de redes sociales, entre otros.
Pero si nuestra idea es seguir editando un artículo sencillo, solo tendremos que escribirlo o pegarlo, si lo traemos de otra aplicación:
Podemos observar entonces que cada párrafo incorporado se convierte automáticamente en un bloque de texto diferenciado,con editor propio aunque reducido a la mínima expresión.
Además nos ofrece ciertas opciones adicionales, desde reutilizarlo hasta borrarlo.
Por último, si nos posicionamos con el puntero en alguno de los párrafos aparecerá a la izquierda del mismo un manejador que nos permite moverlo arriba o debajo de los párrafos anterior o posterior.
Incorporar una imagen al texto
Para incorporar una foto a nuestro texto solo debemos crear un bloque nuevo y elegir como tipo de bloque el de imagen. Subiremos la foto o la traeremos de la biblioteca. Al hacerlo aparece un editor de bloque de imagen que nos permite aplicar el estilo de alineamiento respecto del texto.
Elementos del editor en la parte superior izquierda
En la parte superior izquierda aparecen unos iconos con los que realizar sencillas operaciones, como deshacer o rehacer acciones o comprobar y navegarpor la estructura del artículo:
Elementos del editor en la parte superior derecha
En la parte superior derecha aparecen unos botones con los que realizar las habituales acciones de guardado y visionado previo de los cambios. También aparecen dos iconos que nos permitirán acceder a los ajustes del editor y a lacolumna derecha de opciones de documento y bloque.
Opciones de Documento
Si pinchamos el icono de la rueda podremos hacer aparecer o desaparecer la columna derecha en la que están situadas las Opciones de Documentoy Opciones de Bloque.
Con el selector situado en Opciones de Documento, podremos acceder a los ajustes del documento que aparecerán, debajo, en la columna de la derecha.
En este caso podemos ver los apartados sobre los que podemos actuar. La mayoría de ellos no son distintos de los que había en la anterior versión.
- Estado y visibilidad para controlar si será un artículo de acceso público o no.
También realizar programaciones o cambiar la fecha de edición.
Fijar en portada, dejarlo para revisión, indicar el autor o borrarla.
El resto de opciones son:
- Nº de revisiones del documento.
- Categorías asignadas.
- Etiquetas asignadas.
- La imagen destacada.
- El extracto manual, si lo usamos.
- El permiso para los comentarios.
- La pestaña de Editor nos permite
volver al editor clásico, silo tenemos instalado. - La pestaña Layout, nos permite cambiar de plantilla,
si tenemos esa opción.
Opciones de Bloque
Si en la columna de la derecha optamos por las Opciones de Bloque se abrirán otro tipo de ajustes, un menú distinto para cada tipo de bloque utilizado.
- En un Bloque de Texto nos permite cambiar el tamaño de texto, el color de texto y fondo, aplicarle una capitular al párrafo y en ajustes avanzados, aplicarle cualquier estilo CSS
- En un Bloque de Titular (encabezado) nos permite cambiar el tamaño de titular entre los previamente definidos por jerarquía (H1, H2, H3, H4, H5…), la alineación del titular, y en ajustes avanzados, aplicarle cualquier estilo CSS.
- En un Bloque de Imagen nos permite cambiar el texto alt, tan importante para el SEOel tamaño de la imagen, si deseamos que sea una imagen enlazada y el tipo de enlace, y en ajustes avanzados, aplicarle cualquier estilo CSS.
- De la misma manera existen otros tipos de menú para bloques de citas, de incrustación de videos o enlaces de redes sociales, etc.
Opciones del editor
El propio editor también es configurable mediante un menú desplegable en la columna derecha de la consola. Este menú nos permite ajustar varias opciones:
- Seleccionar el posicionamiento de la Barra de Herramientas. Entre una encima de cada bloque y una barra de herramientas única para todo el documento.
- El Modo
de Enfoque, si lo seleccionamos, hace que se realce el bloque en el que estamos trabajando.
- El Modo a
Pantalla Completa, nos permite trabajar sin otros elementos que nos
distraigan, a pantalla completa.
- En la sección Editor podemos seleccionar el Editor
de Código, para trabajar, si nos parece conveniente con código HTML directamente. El Editor Visual, es el que aparece por
defecto.
- En la sección de Plugins, podemos trabajar con las opciones de cada plugin que tengamos integrado.
- Existe una sección de Herramientas, para manejar bloques a reutilizar (se pueden marcar
como tales desde cada editor de bloque), atajos de teclado y copiado.
- La sección de Opciones, como veremos a continuación, nos permite añadir o quitar ajustes de esta columna.
Ajustes de las Opciones del Editor
Como hemos visto, la última opción del anterior menú nos permite, a su vez, ajustar el número de opciones de los propios menús, mediante una ventana emergente donde podemos elegir qué paneles de selección queremos ver y cuales ocultar (si no los utilizamos habitualmente).
Volver al editor clásico
Si después de trastear un rato con el nuevo editor, no os sentís cómodos, existe la posibilidad de volver a utilizar el antiguo editor, dado que la gente de WordPress ha preparado un plugin “Classic Editor”, que se puede instalar, tras la actualización a WP 5.0. Para ello, una vez instalado el plugin, desde el menú de Opciones de Documento, solo tendremos que pulsar el enlace al Editor Clásico del panel Editor. Así mismo desde el Editor Clásico podremos volver al Editor de Bloques.
Pero es conveniente acostumbrarse al nuevo editor, ya que esta posibilidad de cambio va a ser temporal.
Otras ventajas y recursos
Es de prever que en el futuro el editor de bloques se expanda y se convierta en algo parecido a un constructor como el que nos ofrecen algunos plugins (WPBakery Page Builder o SiteOrigin por ejemplo), pero ahora también nos ofrece algunas características poderosas como la incrustación de bloques de redes sociales o la posibilidad de guardar y reutilizar bloques (por ejemplo para logos o separadores de diseño propio…).
Para que estas enseñanzas se reafirmen os dejamos aquí algunos recursos sobre Gutenberg:
- Tutorial de Gutenberg en PDF, que podéis descargar de nuestro repositorio de documentos de comunicación y diseño.
- La página de desarrollo de Gutenberg en castellano
- La página oficial de Gutenberg en inglés
