Imaginando el futuro de los plugins con Gutenberg

¡Gutenberg! El futuro editor de WordPress con el que parece que pronto escribiremos entradas, maquetaremos páginas y daremos muerte a los insufribles page builders. O, bueno, eso es lo que nos prometen, porque aunque visualmente es muy espectacular, la verdad es que ahora mismo está todavía muy verde.

Si no conoces nada del proyecto (¿en serio?), te recomiendo que leas la entrada de nuestro amigo Fernando: ¿Qué es eso del proyecto Gutenberg para WordPress? En ella, Fernando hace una breve introducción al nuevo editor y comparte sus impresiones con el proyecto:

Matt Mullenweg anunció en la pasada WordCamp Europe en París que uno de los principales cambios que quiere introducir en WordPress es el cambio del editor por un sistema basado en bloques, y esa nueva cosa se llama Gutenberg. (…) La idea [detrás de Gutenberg] es una especie de editor muy visual, sin distracciones, que simplifica sobremanera el editor.

El verdadero problema de Gutenberg es que si su objetivo es facilitar la creación de contenidos, o sea, simplificar el proceso de editar en WordPress, no lo consigue, pues prácticamente casi cada acción requiere más clics, búsqueda de iconos, movimientos de ratón que con el editor actual.

Fernando Tellado – AyudaWP

¡Pues vaya! Las perspectivas no parecen muy halagüeñas, ¿eh?

Hasta la fecha, nosotros hemos mirado un poco el progreso de Gutenberg desde la barrera. Nos parece una idea interesante y con muchísimo potencial (y esta es una visión que comparten prácticamente todas las personas a las que hemos entrevistado últimamente, como Caspar o Alice), pero que hay que implementar con cuidado (y no sé si Matt está por la labor).

Sea como fuere, está claro que Gutenberg es un tema de moda y no podíamos dejar pasar una semana más sin abordarlo. A pesar de los cantos de sirena detrás del proyecto, hay algunos temas que nos preocupan. En concreto, la integración de los plugins (¿alguien ha dicho «Nelio Content«? ¿Eres tú Nelio A/B Testing?) con el nuevo editor no pintaba nada fácil…

El nuevo editor de Gutenberg

El editor actual de WordPress es un viejo conocido. Lo cual no me sorprende, la verdad; si bien ha recibido algún lavado de cara en los últimos años (especialmente con la llegada de WordPress 3.8 y la integración del proyecto MP6), no deja de ser el típico editor clásico WYSIWYG basado en TinyMCE, con su barra de herramientas en la parte superior y un estilo que intenta imitar lo que verán nuestros usuarios cuando accedan a la entrada:

El nuevo editor Gutenberg cambia totalmente de paradigma y ¿moderniza? la forma en que escribiremos entradas. La principal novedad de este editor es que todo el contenido de la entrada se organiza en bloques: un párrafo, una cita, una imagen, una galería… todas estas cosas son «bloques», independientes los unos de los otros, con sus propias herramientas de edición contextuales y con la capacidad de moverlos de un lado a otro:

Como puedes ver, Gutenberg cuenta con una interfaz bastante más limpia y minimalista que el editor clásico. A mí personalmente me encanta este diseño, ya que las interfaces de usuario, cuanto más sencillas, mejor; creo que es una muy buena apuesta para atraer a nuevos usuarios y para re-enganchar a los menos activos. Ahora bien, tal y como indicaba Fernando en su entrada, «casi cada acción en Gutenberg requiere más clics, búsqueda de iconos y movimientos de ratón que con el editor actual» y eso, para los usuarios más profesionales, puede suponer una bajada de rendimiento… así que habrá que ver qué tal es la acogida entre esos profesionales.

Pero, vaya, que en la entrada de hoy no pretendo hacer un repaso a Gutenberg o sus funcionalidades, sino que quiero centrarme en algo muy, muy importante para el ecosistema WordPress, y es la integración de los plugins con el nuevo editor. Por si no te has dado cuenta, la página de edición de WordPress no sólo incluye el editor; también está llena de cajas con funcionalidades extra. Muchas de estas cajas son funcionalidades extra que añaden los plugins, como por ejemplo las cajas de Social Media o Referencias de nuestro plugin Nelio Content:

Problemas de integración: las cajas (meta boxes) en el editor

Las primeras versiones de Gutenberg no trataron el tema de las cajas (puesto que no lo consideraron prioritario) y simplemente existía un issue en el repo del proyecto comentando la necesidad de integrarlas en algún momento. El problema de integrar las cajas en Gutenberg es bastante más complicado de lo que parece. Por un lado, tenemos que el equipo de desarrollo de Gutenberg está usando tecnologías bastante modernas para su implementación (básicamente, lo están escribiendo todo de cero con React, un framework JavaScript), con lo que portar las cajas actuales (definidas en PHP) al nuevo editor puede ser bastante complicado. Por otro lado, el proyecto tampoco definía dónde y cómo pondríamos esas cajas (recordemos que ahora hay como básicamente dos áreas: en el lateral, pequeñas, o debajo del editor, más grandes).

¿Cómo podemos solucionar todo esto? Por lo pronto, el equipo de Gutenberg ha preparado un área (Ajustes Extendidos) bajo el editor en la que, en teoría, podremos poner nuestras cajas. De hecho, la versión 1.5 de Gutenberg de hace un par de días permite ya ver las cajas en este área sin que el desarrollador tenga que hacer nada. Ahora bien, ¿es esta la mejor forma de proceder? En mi opinión, no, porque Gutenberg está reinventando la rueda y está volviendo a lo que ya teníamos: un editor con cajas extra a su alrededor (a la derecha y debajo del editor). Me explico.

El otro día estaba leyendo el blog de Yoast y vi que el tema de la integración con Gutenberg es algo que también les preocupa, y mucho. Básicamente, Joost pone en relieve lo que acabo de exponerte: Gutenberg y su edición por bloques revolucionarán WordPress, pero su implantación no tiene por qué cambiar toda la UI de golpe. De hecho, bastaría con cambiar el editor en si clásico por el editor Gutenberg y mantener la página de edición tal cual, con su concepto de cajas a su alrededor (y con con un pequeño lavado de cara si quieres):

Con esta propuesta, estamos ante una interfaz más familiar y totalmente compatible hacia atrás (como mínimo, sobre el papel; la verdad es que ignoro si habría problemas a nivel interno/de implementación). Siguiendo la idea de Yoast, es muy sencillo pensar cómo podría quedar un plugin como Nelio Content dentro de Gutenberg:

Sin duda, una solución sencilla, elegante y funcional. El único inconveniente que alguno podría verle es que, en realidad, no estamos «innovando»; seguimos con la misma solución de siempre y, por lo tanto, con los mismos problemas de siempre. Pero es que creo sinceramente que eso no es un inconveniente, sino una virtud. Usar este tipo de solución nos permite implantar Guntenberg de forma iterativa, sustituyendo los componentes por partes, pasito a pasito: primero el editor, luego las cajas, etc.

En Github hay algunas soluciones alternativas que eliminan en cierto modo el concepto de caja e integran esos «ajustes adicionales» en el propio editor:

pero a mí particularmente no me convence, ya que se está mezclando demasiado el front end y el back end: toda la información aparece en el mismo componente dentro de la misma vista.

La potencia de WordPress como CMS

Si WordPress ha llegado hasta donde ha llegado ha sido gracias a su enorme versatilidad. Hace ya muchísimos años que WordPress es algo más que una simple plataforma de blogging, así que no podemos diseñar un editor pensando única y exclusivamente en entradas de un blog (que es lo que, de momento, parece Gutenberg). Por ejemplo, en Github encontramos a Kevin Whoffman compartiendo la captura de pantalla del editor de un tipo de contenido personalizado:

Tal y como cuenta Kevin, estamos ante un contenido personalizado que depende única y exclusivamente de los campos personalizados. Este tipo de contenido no dispone siquiera del editor clásico de WordPress, así que ¿qué sentido tendría usar Gutenberg? ¿Cómo podríamos adaptar esto a la propuesta actual de Gutenberg?

El soporte de Gutenberg a contenidos personalizados no ha sido confirmado. Sinceramente, esto parece más una forma de evitar el problema que de solucionarlo.

Kevin Whoffman

La solución de Yoast soluciona estos problemas, en tanto que propone reemplazar solamente el editor y dejar el resto de la interfaz de usuario con su estilo clásico. Genial, ¿no crees?

De todas formas, debo confesar que la solución actual de las cajas no acaba de convencerme al 100%. Al final, tanta caja de tanto plugin complica la interfaz de WordPress una barbaridad, alejándolo de esa meta de «ser sencillo».  Así pues, para solucionar este problema, me gustaría proponer el siguiente paso a la solución de Yoast: el uso de vistas para agrupar cajas. El editor Gutenberg actual permite cambiar entre un editor visual y un editor de texto, a través de un pequeño menú con puntos suspensivos en la esquina superior derecha (en la propuesta de Yoast está en la esquina superior izquierda):

Pues bien, podríamos añadir nuevas «vistas» en ese menú para que la interfaz que se le presenta al usuario (es decir, para que el conjunto de cajas/herramientas que ve) dependa de lo que quiere hacer en cada momento. El conjunto de vistas disponible podría depender de los plugins o estar fijado de antemano en 4 o 5 grandes categorías. Por ejemplo, yo empezaría con algo así:

1. Edición Visual. Aquí tendríamos el editor visual junto con las cajas típicas: selección de categorías y etiquetas, caja de publicación, etc.
2. Edición Raw. En este tipo de edición, tendríamos por defecto el editor de texto/HTML, junto con, de nuevo, las cajas que hay en el editor visual (porque sí, nadie impide que una misma caja aparezca en múltiples vistas). En contenidos personalizados como el de Kevin, no existiría la opción de seleccionar la vista Edición Visual y la Edicion Raw no tendría el editor de texto, sino que ofrecería únicamente la caja creada con Advanced Custom Fields para editar los meta campos.
3. Analíticas. Aquí podríamos tener cajas como la que incluye Nelio Content con analíticas de interés en redes sociales, el funcionamiento en Google Analytics, el análisis de calidad de Yoast, etc.
4. Social. Cualquier caja que contenga información para interaccionar con los usuarios podría estar aquí: los mensajes sociales de Nelio Content, las cajas de comentarios de WordPress, etc.
5. Meta. La vista «cajón de sastre», donde podríamos meter las cajas que no encajan en ningún otro lado.

¿Qué te parece? ¿Cuáles pondrías tú?

Nelio A/B Testing

Me sorprendió mucho la calidad del plugin, lo fácil que fue configurarlo y el increíble soporte que me dio Nelio. Recomiendo encarecidamente usar Nelio A/B Testing.

Josette Millar

WordPress.org

Ver planes

Resumiendo

Gutenberg es un proyecto muy ambicioso y con muchísimo potencial. La idea de los bloques es fantástica y, aunque quizás haya que pulirla, creo que es el futuro de WordPress. ¿El problema? Pretende cambiar más cosas de las que probablemente le conciernan.

Gutenberg aún no ha sabido dar una respuesta convincente para que los plugins puedan integrarse. Se están planteando muchas soluciones en el Github del proyecto para no romper con todo lo que tenemos hasta ahora. De hecho, hay quien aboga por una implantación por fases, sustituyendo los diferentes componentes de la página de edición poco a poco. En este sentido, creo que la propuesta de Yoast es la más sensata de todas, precisamente porque es la más conservadora.

Entiendo que el equipo de Gutenberg quiera llevar WordPress al siguiente nivel y, por lo tanto, les parezca que es un buen momento para hacer «borrón y cuenta nueva». Pero creo que hay que ir con cuidado y, por eso, propongo la idea de las vistas como una fórmula para «cambiar lo de siempre sin tocar nada». Es decir, mantengo las cajas de WordPress, pero añado orden y limpieza con las vistas.

¿Tú cómo lo ves?

Imagen destacada de Mr Cup / Fabien Barral vía Unsplash.