Imaginando el futuro de los plugins con Gutenberg

WordPress

¿Sabías que sólo somos tres personas aquí en Nelio? Y aún así nuestras entradas molan, ¿eh? ¡Es gracias a nuestro nuevo plugin, Nelio Content! ¿Por qué no lo usas tú también?

¡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:

Editor clásico de WordPress
Captura de pantalla del editor clásico de WordPress.

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:

Captura de pantalla de Gutenberg
Captura de pantalla de Gutenberg, donde se pueden ver las herramientas contextuales del segundo bloque (en este caso, un párrafo).

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:

Meta boxes en el editor de WordPress
Captura con algunas meta boxes de WordPress. En concreto, vemos parcialmente la de Yoast SEO, un par de Nelio Content y alguna por defecto.

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):

Propuesta alternativa para Gutenberg de Yoast
Propuesta alternativa para Gutenberg de Yoast. En ella, se modifica el antiguo editor por Gutenberg y se mantiene el concepto de cajas alrededor del editor. (Fuente)

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:

Las cajas de Nelio Content en Gutenberg
Imaginando cómo quedarían las cajas de Nelio Content siguiendo la propuesta de Yoast.

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:

Integrando los campos de las cajas en el propio editor
Integrando los campos de las cajas en el propio editor. Para que quede “claro” que no forman parte del frontend, se añade un pequeño divisor para separarlo de forma lógica. (Fuente)

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:

Edición de un tipo de contenido personalizado
Edición de un tipo de contenido personalizado en el editor actual de WordPress. ¿Cómo encaja esto en Gutenberg? (Fuente)

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):

Modos de visualización en Gutenberg
Modos de visualización en Gutenberg.

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ú?

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.

FlojaNo está malBienMuy bien¡Impecable! (2 votos, promedio: 5,00 de 5)
Cargando…

por

Lidera el análisis y diseño de nuestros servicios, así como el servicio de soporte a los usuarios. Es Doctor en Computación por la UPC y siempre ha estado interesado en una gran variedad de áreas, incluyendo el modelado conceptual, la realidad virtual y la impresión digital en 3D. Contribuye muy activamente en la comunidad WordPress, habiendo participado en meetups, seminarios y en la WCEU.

2 comentarios en “Imaginando el futuro de los plugins con Gutenberg

  1. Según la actualización de ayer han optado (de momento) por una caja (abajo) para meter a capón todos los meta. Veremos por donde tira.

    La idea es buena, y yo siempre he apostado porque los editores visuales son absolutamente imprescindibles para el futuro de WordPress, básicamente porque para seguir creciendo en implantación el objetivo es Weebly y Wix, y su principal atractivo es la edición totalmente visual.

    Por eso, a pesar de las críticas puntuales, que siempre las haré (soy bloguerooooo, que cantaría, no lo puedo evitar), suelo tener mis “causas” en el blog, y una de ellas es promocionar sistemas como Divi y otros que ayudan a popularizar y facilitar a los usuarios usar por primera vez WordPress.

    Buen artículo David, por supuesto 🙂

    1. Hola Fernando,

      Así es, de momento han optado por meter todas las cajas en la parte inferior, “a capón”, que dices tú. De hecho, ya sabía que tenían el área preparada, pero tuve que editar la entrada a todo correr porque antes de ayer salió que ya habían activado el soporte…

      En fin, habrá que ver cómo va evolucionando todo, pero me hubiera gustado ver una evolución más orgánica. En general me suele gustar hacer borrón y cuenta nueva, pero cuando tienes una plataforma como WordPress con miles y miles de usuarios, estas decisiones deberían tomarse con especial cuidado.

      ¡Un abrazo, Fernando!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

He leído y acepto la Política de privacidad de Nelio Software.

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.