Probando Gutenberg 2.0.0, el próximo editor de contenido para WordPress

Introducción

Hace unos días salió Gutenberg 2.0.0 (actualizado hace menos días a la 2.1.0), la última versión de lo que será el nuevo editor de contenido de WordPress 5.0. A estas alturas ya muchos sabemos que esto está polarizando fuertemente a la comunidad, pues reemplazar el editor estándar no es algo que se haga fácilmente, sobre todo cuando pensamos en temas como compatibilidad hacia atrás, como acomodar Gutenberg en situaciones como el desarollo de plugins y temas, y otras cosas tan sencillas como cambiar el flujo de trabajo de millones de usuarios de WordPress.

¿Qué es Gutenberg?

Para los que aún no lo conozcan, Gutenberg es un nuevo editor de contenido para WordPress; hasta ahora el plan es que reemplace al editor de siempre que ya conoces para cuando salga WordPress 5.0, y difiere del anterior en que usa un esquema de bloques de contenido, en el cual cada uno tiene sus respectivas propiedades: por ejemplo, tu post ahora en vez de contener un chorizo de texto tendrá un bloque en el que escribes el título, un bloque donde va el subtítulo, otro o varios distribuidos para el cuerpo, y así en adelante. Por ahora hay varios tipos de bloques, y la idea es que en el futuro hayan muchos más.

Por ahora mientras se encuentra todavía en etapa de desarrollo, Gutenberg existe como un plugin que puedes usar en tus sitios de prueba, pero por todo lo que quieras, no lo uses en sitios de producción. Hoy en su versión 2.0 ha mejorado muchísimo, pero de eso a que lo quieras adoptar de una vez todavía falta un buen trecho. Conste que estás avisado.

Ahora bien, ¿porqué Gutenberg justo ahora? esto que voy a decir quizás no le guste a muchos, pero en lo que a mi respecta Gutenberg nace del miedo; del miedo que viene de  las experiencias que ofrecen plataformas modernas, con Medium y Wix a la cabeza entre muchos otros más, y que a fin de cuentas está costando usuarios a WordPress. Y seamos honestos, el  editor de WordPress, aunque es funcional, es algo rudimentario que queda en la plataforma; muchos usan otras herramientas externas para redactar sus publicaciones, y luego las traen al editor.

Una cosa es segura: Gutenberg es algo que sucederá tarde o temprano, así le disguste a una buena parte de la comunidad, pues cuenta con el apoyo total de Matt Mullenweg, el creador de WordPress. Ahí tienen: resistirse es inútil…

Cambios en Gutenberg 2.0

Gutenberg 2.0 en verdad trae muchísimos cambios, tantos que no veo la necesidad de repetirlos, mejor lee este excelente post de Matías Ventura donde se expone una lista muy completa, así como la bitácora de cambios de la página del plugin en WordPress. Entre todos esos cambios, hay varios que saltan a la vista; por ejemplo las nuevas prestaciones de copiar y pegar, algunas mejoras sustanciales en la experiencia de diseño y edición, y en cuanto a accesibilidad.

Probando cambios significativos

Todos estos cambios se probaron en un ambiente de pruebas local con XAMPP dando el soporte de Apache, PHP y MariaDB, usando WordPress actualizado a la versión 4.9.2. Como podrás leer en el título del post, sólo estoy probando los cambios significativos (a mi parecer) en esta versión, y no todo Gutenberg.

Copiar y pegar en Gutenberg

Copiar y pegar en Gutenberg ha pasado de ser algo que torturaba tu contenido en formas que no imaginabas, a ser una funcionalidad que ya está haciendo casi todo lo que debe. Hoy en día la característica es bastante decente y ya retiene buena parte del formato, y aparte hace un muy buen trabajo interpretando el contenido que pegues, creando los bloques pertinentes como encabezado, texto, listas y otros. Probé con LibreOffice y con Google Docs (no tengo Office en casa), y los resultados son bastante buenos: por ejemplo, esto es copiar desde LibreOffice (la primera línea es el bloque del título del post):

¿Qué tal una tabla con formato básico?

Como puedes ver, la copia de LibreOffice a Gutenberg se produce sin problemas, exceptuando por alineaciones.

Pero, ¿qué tal Google Docs? al parecer todo en orden también:

Lo que ves es un pegado de un documento de Google Docs. No le falta nada, excepto la alineación en algunas celdas de la tabla. Copy & paste desde Google Docs, correcto.

Markdown en Gutenberg

El documento de nuevas características igual menciona que ha mejorado la compatibilidad con Markdown, un formato de marcado basado en texto que es bastante usado en la comunidad. Por ejemplo, el siguiente documento en Markdown:

## Énfasis

*Itálicas*

_Itálicas de nuevo_

**Negritas**

__Negritas de nuevo__

## Listas no numeradas

* Elemento 1
* Elemento 2
* Elemento 3

## Listas numeradas

1. Elemento 1
2. Elemento 2
3. Elemento 3

## Citas

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

## Separador

---

## Otra cita

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

Produce todos los bloques pertinentes en el editor. Impecable, si me preguntan. El formato Markdown básico (y no tanto) ya está cubierto excepto los casos de sintaxis más complejos.

En general y como mencioné antes, al pegar contenido se generan correctamente todos los bloques correspondientes a párrafos, encabezados, listas, etc. Irónicamente, lo único que no veo como hacer es como pegar como texto desde el editor visual (se puede cambiar a vista de código y pegarlo pero son más pasos), es decir, pegar sin retener el formato de origen. Fuera de esto último que se puede remediar con un pegado intermedio en el bloc de notas, la funcionalidad de copiar y pegar ya está muy completa y es un gran punto a favor de aquellos que tienen un flujo de trabajo fuera de WordPress para editar sus posts, a pesar de que con Gutenberg quizás no tengan que hacerlo más.

Galerías en Gutenberg

Para crear una galería basta con crear un bloque de galería de imágenes, arrastrar y soltar dos o más imágenes, ajustar un par de propiedades y voilá, una galería rápida. Aún no hay un indicador de progreso, así que todavía le falta eso a esta característica para ser verdaderamente funcional; con la actualización 2.1.0 se añadió cierta respuesta visual adicional al soltar las imágenes en el área indicada, lo cual ya es un progreso, pero aún falta más. Esta es una muestra de como queda la galería:

Toda la disposición de la galería es cosa de Gutenberg, al establecer las columnas en seis detectó que para el último renglón sólo habían dos y ajustó las imágenes en factor de esto. Muy impresionante…

TOC y contadores elementos de documento en Gutenberg

Se integró en un solo lugar mostrar varias cuentas de documento: palabras, encabezados, párrafos y bloques, así como una tabla de contenido de tu documento que funciona muy bien a modo de vista de esquema, similar aunque mucho más sencilla a la que encuentras en Word o bien al navegador de documento de LibreOffice, aunque como dije antes, mucho más austero en funcionalidad.

Algo que me gustó de la tabla de contenidos es que muestra sugerencias, que en mi caso fue advertirme que todos los niveles de título tenían el mismo estilo (h1 para los que sepan HTML), pero todos sabemos que eso no le gusta al motor de búsqueda de Google; así que tienes la oportunidad de afinar tu post antes de publicarlo. Esta sencilla recomendación tiene repercusiones en el buen SEO de tu página, así que creo que es una característica muy útil.

Transformaciones en el menú elipsis

Ahora el menú elipsis muestra las transformaciones posibles dependiendo del bloque en que estés trabajando; están bien agrupadas debajo de las funciones principales del bloque, así como también se muestran en la barra de herramientas contextual del mismo bloque: de esta manera están a la mano siempre y no estorban visualmente:

Y por cierto, las transformaciones funcionan muy bien; estas permiten convertir un bloque en otro tipo, reacciona al tipo de bloque que se tenga seleccionado: en la imagen como puedes ver está seleccionado una cita, y al ver las opciones del menú transformaciones vemos que se puede convertir en una lista, en un párrafo o en un encabezado. Otros bloques tendrán otras posibles transformaciones dependiendo de su tipo.

Y de pronto, un error

Una de las muestras en las que Gutenberg aún no está listo: después de cerrar el post de prueba en que estaba trabajando para este artículo, cerré y parecía que todo estaba en orden. Hoy, al intentar abrir el post me encuentro con un error:

Hasta este punto Gutenberg me había parecido bastante estable, y en cierta manera me decepcionó que con cosas tan sencillas el post se echara a perder por alguna causa inexplicable. Sin embargo, lo que me ganó de vuelta fue la forma en la que Gutenberg se recupera del error, que no sé si sea la definitiva pero si puedo decir que es muy efectiva: se te ofrecen tres opciones que son intentar recuperación, la cual en mi caso no hizo nada y por ende no sirvió; la segunda es copiar texto del post, la cual te permite hacer una copia al portapapeles de todo el texto de tu contenido, lo que te permite rescatar lo que tenías realizado hasta ese momento (en mi caso así fue), y la última es copiar error, y como su nombre lo dice, copia el error generado al portapapeles, para que algún desarrollador (tu incluso) puedan depurar el código.

Y como dato adicional, perdí revisiones: de tener 26, inexplicablemente pasaron a ser 9.

Lo bueno y lo malo de Gutenberg 2.0

Primero las cosas buenas:

1. El plugin como tal ya funciona en un estado decente como para darnos una buena idea de como será el futuro cercano hablando de edición de contenido en WordPress.
2. Copiar y pegar funciona de manera bastante elegante, me atrevo a decir hasta impresionante; los que usen copiar y pegar su contenido desde otros editores pueden estar tranquilos, Gutenberg los tiene cubiertos.
3. La tabla de contenidos y cuentas de documento funcionan muy, muy bien, y proveen funcionalidad sólida.
4. El equipo de desarrollo de Gutenberg está avanzando a ritmo frenético sobre las actualizaciones, y ha mejorado una barbaridad desde sus primeras versiones.
5. Buena recuperación de errores con el editor.

Ahora lo malo:

1. Toda la funcionalidad va de un “bastante rota” a un “más o menos completo”, lo que hace cuestionar si esto va a estar listo pronto. Quedan muchos errores graves que tienen que ver con guardar el post, perder revisiones, contenido que desaparece y muchas otras más.
2. El soporte de metaboxes me parece que aún es bastante malo.
3. Sería bueno contar con un control de márgenes y relleno para compensar cualquier ajuste que haga falta, y no los veo por ningún lado.

Y por último, lo que nadie sabe:

1. Como se integrará con plugins y temas, aún es algo de lo que no se sabe mucho.

Cerrando el post

Como mencioné, sólo revisé las que me parecieron las mejoras notables en esta versión de Gutenberg; pero a decir verdad, me quito el sombrero ante los desarrolladores que verdaderamente están trabajando en esto, pues si revisaron el post de el anuncio de la versión 2 verán que los cambios son en verdad bastantes, muchos de ellos cosas imperceptibles para el usuario final, pero que contribuyen a la experiencia al usar Gutenberg, que debo decir ha mejorado enormidad desde sus inicios.