Gutenberg: El nuevo editor visual de WordPress


Después de haber creado una gran expectativa, y como ya te adelanté en el episodio nº 26 de mi Podcast, se preveía que fuera en la WordCamp Europe donde se hiciera la presentación de Gutenberg: el nuevo editor visual de WordPress (aunque de momento en versión plugin y beta).

Los editores visuales

Hace tiempo que se pusieron de moda entre los usuarios de WordPress los editores visuales, ya que facilitan enormemente la tarea de crear contenido en un blog o web únicamente arrastrando y soltando bloques, pudiendo ver en tiempo real el resultado de la maquetación.

De esta forma aparecen, entre otros, SiteOrigin, Visual Composer, Divi, Elementor… Sin embargo, la mayoría de ellos funcionan insertando shortcodes dentro de la programación de WordPress, por lo que no resultan interesantes para todos los usuarios, ya que llegan a ralentizar mucho la carga del contenido y con el inconveniente añadido de que al desinstalar el editor, deja los shortcodes dentro de los archivos de páginas, posts, etc

El proyecto Gutenberg

Dado el continuo auge de estos editores, el equipo de desarrollo de WordPress (dirigido por los empleados de Automattic, Matías Ventura y Joen Asmussen) se pone manos a la obra, con el fin de dotar a este CMS de un editor visual que permita “maquetar” mediante bloques, el contenido de los artículos, con la idea de hacerlo más atractivo.

Aunque en un principio se habló de que sería una de las grandes novedades que incluiría la versión 4.8 de WordPress, finalmente no se llegó a incluir dado que aún se encuentra “en pañales”.

Tras más de 6 meses trabajando en este proyecto, Matt Mullenweg lo presentó en la pasada WordCamp Europe 2017, celebrada en París, como versión beta y en formato plugin para que, de esta forma, pueda ser probado por los usuarios y recibir su feedback.

Por este motivo Gutenberg se encuentra ya en el repositorio oficial de plugins de WordPress y se puede descargar e instalar libremente.

El funcionamiento teórico de Gutenberg

Tras activar el plugin se te habilitará en el menú de la izquierda una nueva opción, con el icono de un lapiz, llamada Gutenberg, desde donde podrás crear un nuevo post o trabajar con uno ya creado a modo de demostración.

Al acceder a la opción de crear un nuevo post utilizando Gutenberg, nos aparece una pantalla como la siguiente

A simple vista te puede recordar al modo de “escritura sin distracciones” que tiene actualmente WordPress en el editor de entradas, sin embargo, Gutenberg va un poco más allá.

Insertar bloques de texto

Gutenberg: el editor visual de WordPress
Insertar un bloque de texto en Gutenberg

Esta opción es quizás la más sencilla, ya que una vez que se te habilita el cuadro para escribir texto, te aparece un menú flotante con el que podrás elegir la justificación del texto, la posibilidad de configurar links e incluso elegir si quieres el formato de cita, encabezado, lista o texto preformateado.

Presta mucha atención a las flechas que te aparecen en el lateral izquierdo del bloque de texto, ya que si quieres cambiarlo de posición, no es posible arrastrar y soltar, sino que tendrás que ir pulsando estas flechas para moverlo hacia arriba o hacia abajo… 

Para eliminar el bloque, simplemente tendrás que pulsar sobre el icono de la papelera que te aparece en el lateral derecho del mismo.

Insertar bloques comunes

Gutenberg: el editor visual de WordPress
Insertar bloques comunes en Gutenberg.

Al pinchar sobre el icono de la + dentro del círculo, podrás insertar otros módulos a medida que vas escribiendo.

Desde esta opción podrás optar por insertar un nuevo bloque de texto, una imagen, una galería de imágenes, un encabezado, una cita, un listado o una imagen de fondo para el módulo que estás creando.

 

 

Insertar bloques de formato, separadores y widgets

Gutenberg: el editor visual de WordPress
Insertar bloques de formato con Gutenberg

Si sigues bajando en la ventana flotante, al pinchar sobre el mismo icono de la +, verás que Gutenberg te ofrece otras opciones para insertar más bloques dentro de tu post.

En este caso vas a tener la posibilidad de insertar Citas con un formato distinto al que aparecía en “Quote”, una tabla, texto preformateado, código HTML y bloques de código en otros lenguajes de programación.

Más abajo tienes la opción de insertar líneas de separación o botones.

Y por último tienes la opción de insertar Widgets. En este caso, las opciones que te aparezcan aquí van a depender en gran medida de tu theme y de los plugins que tengas instalados en tu WordPress.

Embeber objetos en Gutenberg

Gutenberg: el editor visual de WordPress
Embeber bloques en Gutenberg

Otra de las opciones que posibilita Gutenberg es la de embeber objetos dentro de bloques dentro del editor de entradas.

La lista de aplicaciones parece interminable.

En la mayoría de los casos basta con insertar la URL para conectar la aplicación y embeberlo dentro de tu post.

¿Parece genial no?

 

 

La realidad de Gutenberg

La teoría está muy bien… pero ha llegado el momento de contar la realidad de Gutenberg: el editor visual de WordPress. La triste realidad diría yo más bien.

En este caso te voy a contar mi propia experiencia y opinión durante las pruebas que he realizado, que no tiene por qué coincidir exactamente con la tuya. Es más, te invito a que pruebes el plugin y me dejes tus comentarios debajo de este artículo para que podamos intercambiar opiniones al respecto.

Si bien es cierto que el plugin te advierte de que está en versión beta y de pruebas y no funciona correctamente con todos los themes, lo cierto es que yo he probado con varios themes y no he conseguido que funcione ni siquiera con los que vienen por defecto con WordPress, con eso ya digo bastante.

A continuación paso a detallarte algunos de los fallos que he detectado en las pruebas que he realizado (Quizás el torpe soy yo y el plugin funciona perfectamente…):

  • La opción “Preview” del menú superior, únicamente se habilita una vez que el post está publicado, no antes (ni siquiera guardándolo).
  • Si guardas el post y después lo publicas, queda duplicado: aparece una vez como borrador y otra como entrada publicada.
  • Si vas insertando bloques a medida que vas escribiendo la entrada, puede funcionar medianamente bien, pero si quieres modificar los bloques una vez que los has escrito, sólo encuentras problemas.
  • Las imágenes no se justifican ni a derecha ni a izquierda, únicamente aparecen con el ancho completo del post. Tampoco tienes posibilidad de editar la imagen ni añadirle ningún link una vez que ya la hayas insertado. Sólo podrás borrarla.
  • Las tablas aparecen por defecto con 2 filas y 2 columnas y así se quedan. No hay posibilidad de añadir ni modificar nada.
  • Los botones, por supuesto, tampoco funcionan. Además de que ni siquiera puedes configurar los colores o formato de los mismos, en el editor los ves correctamente… pero al publicar la entrada aparece como un simple link, sin más.
  • Y de los objetos embebidos mejor ni hablar… no he conseguido que funcione ninguno de los que he probado (excepto los que permite actualmente WordPress). Siempre aparece el mismo mensaje “Sorry, we could not embed that content.”

Conclusión

Bajo mi punto de vista y en mi opinión, Gutenberg está aún en periodo de gestación. Queda mucho trabajo por hacer, muchos problemas que resolver y muchas cosas que mejorar.

Tal y como está en plugin a día de hoy no vale absolutamente para nada: resulta muchímismo más complicado escribir cualquier entrada con Gutenberg que con el actual editor.

Además, si el funcionamiento final de este plugin va a ser lo que se está viendo en el prototipo, mejor que no sigan adelante. A mi personalmente no me parece funcional en absoluto, al no poder arrastrar y soltar los bloques en el lugar donde los necesitas. Con las flechas únicamente puedes cambiarlos de orden…

¿Tú qué opinas? ¿Lo has probado? ¿Te parece útil? Déjame tus comentarios debajo e intercambiamos las opiniones 😉

¿Te parece interesante este artículo?
[Total: 4 Promedio: 4]


Juanma Aranda

Formador (Director AcademiaWP.online, la plataforma de formación con cursos para aprender a utilizar WordPress).
Blogger, podcaster, youtuber, community manager… en fin, multiempleado para mi mismo en esta locura llamada “WordPress para Novatos”. Y por las mañanas, Gestor de Seguros 😉

3 comentarios en “Gutenberg: El nuevo editor visual de WordPress

    • Efectivamente Gerardo.

      Son muchas las expectativas que se habían creado al nuevo editor por módulos de WordPress y lo cierto es que son muchos los usuarios que se sienten defraudados, porque ni es lo esperado, ni lo que hay (hasta ahora) funciona de forma adecuada…

      Saludos!

Deja un comentario