¿Qué es Gutenberg para WordPress?

Gutenberg, el nuevo editor de WordPress

El 27 de mayo de 2018 WordPress cumplió 15 años de vida, y como todo adolescente, se vuelve un poco rebelde y juguetón. Durante todos estos años hemos podido escribir, las entradas primero y luego las páginas, en un editor de texto que nos recuerda mucho al de cualquier correo electrónico como Gmail o a un editor de texto como Word, pero muy simplificado. Pero ahora ha salido el nuevo editor de WordPress, y queremos conocerlo.

Como todo adolescente, WordPress quiere experimentar cosas nuevas, trayendo de cabeza a los padres y a los que le quieren, y a este niño le ha dado por querer cambiar a Gutenberg, que es la nueva forma de editar contenido en WordPress.

Gutenberg no es ni más ni menos que una reacción a la forma de introducir contenido plataformas como Wix o Medium, y su intención es sustituir a TinyMCE. Se trata de un editor del lado del cliente construido con React (un framework de Javascript), lo cual hace que tenga varias características, entre otras, que sea muy ágil en su respuesta.

Además, utiliza un sistema de bloques, de manera que el usuario pueda ver a tiempo real una edición lo más cercana posible al resultado final del contenido que está escribiendo.

Breve historia del proyecto

Tenemos la primera noticia sobre el proyecto Gutenberg para WordPress el 22 de mayo de 2017, cuando Matias Ventura anuncia las novedades sobre Gutenberg en make.wordpress.org, contando que tienen un futuro editor para WordPress visible en GitHub con 13 bloques implementados por el equipo de desarrolladores y los colaboradores. Pero no es hasta el 23 de Junio de 2017, cuando Matias Ventura anuncia que Gutenberg está disponible en el repositorio de plugins de WordPress en su versión 0.1.0 para que la gente lo pruebe. A partir de aquí empieza un calvario de críticas, de hecho Gutenberg tiene una puntuación muy mala dentro del repositorio de WordPress, debido a las valoraciones de los primeros meses (y a que la gente es muy ansias).

A finales de agosto de 2017, concretamente el 29 (vaya veranito…), el equipo de desarrolladores anuncia la versión 1.0.0 de Gutenberg, con mejoras como «arrastrar y soltar» para los archivos media, selector para cambiar el tamaño de las miniaturas en las imágenes de los bloques, puntero para añadir nuevos bloques, etc. No obstante, el proyecto está todavía demasiado verde.

A lo largo del final de verano hasta la navidad se sucedieron las diferentes versiones del plugin, con múltiples mejoras, se suceden los continuos #WPDrama en torno a Gutenberg, pero el proyecto sigue adelante hasta que casi a final de año (11 de diciembre) se lanza la versión 1.9, en la que se presentan los bloques globales reutilizables como novedad destacada.

No será hasta un mes después, a mediados de enero de 2018, cuando ve la luz la versión 2.0 de Gutenberg, con notables mejoras como la introducción del panel lateral en sustitución del menú desplegable con las opciones, la creación de galerías a partir de arrastrar múltiples imágenes, etc.

A lo largo de este 2018 las mejoras han sido continuas y cada vez más frecuentes, puesto que se hablaba de que Gutenberg se lanzaría en el primer trimestre de 2018. En la actualidad, si descargamos el plugin, vemos que la versión disponible en el momento de escribir este artículo es la 3.1.0.

La novedad es que en la recientemente celebrada WordCamp EU (WCEU), el creador de WordPress, Matt Mullenberg, contó la hoja de ruta del proyecto Gutenberg.

Hacia dónde va Gutenberg

Según cuenta WPTavern sobre la charla de Matt Mullenberg, a lo largo de Julio de 2018 se lanzará una versión 4.9.x de WordPress en la que se ofrecerá una «fuerte invitación» a instalar o Gutenberg o el editor clásico de texto, y a partir de ahí, en agosto pretenden corregir todos los problemas críticos del plugin, y llevar a cabo la integración de Gutenberg en el core de WordPress. Esto daría el pistoletazo de salida a la preparación para el lanzamiento de la versión 5.0 de WordPress, que supondría la puesta de largo del nuevo editor de WordPress.

Además, hacia final de año, pretenden que exista una versión móvil de Gutenberg, una de las grandes aspiraciones de los desarrolladores del proyecto. Esto sería interesante, ya que nos permitiría escribir, o al menos editar, de forma cómoda cualquier entrada desde nuestro móvil. Estaremos atentos, por lo pronto, los que nos dedicamos a esto vemos un reto a la hora de comunicar a nuestros clientes cómo deberán relacionarse con el nuevo editor de texto de WordPress desde el momento en que no haya una vuelta atrás una vez integrado Gutenberg dentro del core.

En cualquier caso, el proyecto se divide en varias fases:

1. Fase 1: Es la fase en la que nos encontramos ahora mismo, se trata en la creación e implantación del proyecto, implica a todos los desarrolladores de temas, plugins, etc y tiene como hito principal la implatación de Gutenberg por defecto con WordPress 5.0.
2. Fase 2: En esta fase Gutenberg empieza a mirar a los constructores y maquetadores visuales existentes (Divi, Visual Composer, Elementor…), con idea de ofrecer una opción gratuita y estándar para todo el ecosistema WordPress (tanto .org como .com).El objetivo final de esta fase es acercar WordPress al mayor número posible de usuarios, evitando así que éstos se pasen a plataformas como Wix, Medium o Squarespace.

Editor visual vs editor de texto

Como empecé diciendo en este artículo, hasta ahora, hemos trabajado en WordPress con un un editor de texto al uso. No obstante, editores visuales han existido desde hace varios años, todo el mundo conoce Visual Composer o Divi, que tanto peso añaden a las webs en los que son instalados, y que tantos quebraderos de cabeza nos dan a los implementadores WordPress cuando nos piden hacer un traslado de una web o un cambio de plantilla en la que no se utilice ya uno de estos editores visuales.

Por otro lado, con estos editores visuales se recomendaba utilizarlos únicamente en páginas estáticas. No obstante, Gutenberg introduce ahora una diferencia, y es que va a estar disponible tanto en páginas como en entradas. Esto es una novedad, ya que va a permitir aportar una riqueza visual a los artículos que escribamos en nuestro blog (aunque esto en manos de algunos usuarios plantea un riesgo muy alto de atentar contra el buen gusto).

¿Significa esto que van a desaparecer los editores visuales?

En absoluto, se plantean dos opciones:

• por un lado, los editores visuales existentes como Divi, Elementor, Page Builder o Visual Composer se adaptarán a la nueva forma de editar textos en WordPress.
• Por otro, habrá empresas que dedicarán sus esfuerzos en programar nuevos bloques para completar Gutenberg o bien mejorar algunos de los que ya hay.

En cualquier caso, yo pienso que el usuario de base se ve beneficiado porque ya parte de un editor mucho más cómodo a la hora de imaginar el aspecto final del artículo.

Cómo puedo probar Gutenberg en WordPress

En el momento de escribir este artículo, puedes acceder a Gutenberg a través del repositorio de plugins de WordPress e instalarlo. Verás que, cuando vas a editar un nuevo artículo o página, arriba te da la oportunidad de hacerlo con Gutenberg o con el editor clásico. Es importante tener en cuenta que, a pesar de lo avanzado que está ya el proyecto y de su inminente inclusión en el core de WordPress, Gutenberg es todavía un proyecto que está en desarrollo, que tiene fallos críticos y que por tanto no podemos probar en páginas en producción. Pero conviene que lo instalemos en páginas de prueba donde podamos probar sus características.

Bloques

La principal novedad que aporta Gutenberg es el uso de bloques. Uno de los problemas que se planteaban a nivel de código era cómo evitar uno de los principales problemas que plantean los editores visuales más conocidos: el efecto lock-in. Esto es, cuando desinstalamos un editor visual de nuestra web, quedan una serie de códigos extraños mezclados en el texto (en el peor de los casos), que son muy molestos a la hora de limpiar, o bien en el código interno html dejan un montón de etiquetas que no favorecen para nada la legibilidad de la página de cara a buscadores o lectores para invidentes (esto en el mejor de los casos).

Gutenberg ha resuelto esto con una solución bastante ingeniosa basada en comentarios html, que son inocuos, que no se muestran en el código de la página cuando ésta se lanza al navegador, y que WordPres puede interpretar como bloques sin problema cuando los encuentra.

Un ejemplo de estos comentarios que acotan cada bloque es el siguiente para un bloque de texto:

<!– wp:core/text –> <!– /wp:core/text –>

Algunos de los bloques que podemos encontrar en Gutenberg son los de encabezados, párrafos, imágenes, vídeos, galerías, listas, botones, contenido incrustado de terceros, citas, shortcodes, código, tablas…

Como podemos ver, esto nos va a ahorrar algunos plugins que teníamos que utilizar hasta ahora, hace que la edición de texto sea mucho más interesante y probablemente cómoda, aunque eso solo lo dirá el tiempo.

Repaso de la interfaz de Gutenberg

A continuación vamos a hacer un repaso de lo que nos podemos encontrar en Gutenberg, y vamos a empezar a familiarizarnos con su interfaz. Para ello, vamos a empezar por un vídeo en el que vamos a repasar el editor con un ejemplo y vamos a ver qué posibilidades tiene:

A continuación vamos a ver cómo se edita en Gutenberg y algunos de los bloques que incluye a día de hoy (junio de 2018):

Ventajas e inconvenientes de Gutenberg en WordPress

Veamos algunas ventajas e inconvenientes que, a día de hoy le veo al proyecto. Entre las ventajas tenemos:

• La edición con bloques es cómoda.
• Algunos de los bloques que trae son muy chulos y ahorran plugins, tiempo y trabajo.
• La forma de editar es bastante rápida.
• La utilidad que nos permite ver la estructura del contenido me gusta mucho, ya que de un vistazo tenemos de una forma visual muy agradable un esquema de la jerarquía de nuestro documento.
• Los desarrolladores o las empresas pueden sacarle mucho partido y crear infinitos bloques que pueden ser muy interesantes.

Entre los inconvenientes:

• Aunque falta bien poco para su lanzamiento en el core de WordPress, todavía hay muchísimas incompatibilidades entre Gutenberg y los miles de plugins del repositorio.
• Al usuario de a pie, la abstracción de la edición con bloques le puede llegar a suponer una pequeña barrera de entrada.
• No es un verdadero editor visual, pero se le parece bastante y va por muy buen camino.
• Los bloques que hay actualmente están todavía demasiado limitados con respecto a los elementos que podemos encontrar en algunos editores visuales como Elementor.

Conclusiones

Para mi, la conclusión principal es que Gutenberg era necesario. Es hacia donde tiene que ir WordPress, y lo más importante es que espero que esté lo suficientemente abierto como para que lo que no traiga de fábrica se lo puedan añadir los desarrolladores.

Si bien todavía queda mucho WPDrama por delante con el lanzamiento, creo que poco a poco se irá quedando en nada, y los usuarios se irán acostumbrando a utilizar el nuevo editor de WordPress, ya que es muy cómodo. No obstante, no recomiendo pasar todavía a él en blogs serios, que sean básicos para tu negocio, ya que todavía habrá que pasar un periodo de transición en el que se adapten muchísimos plugins a Gutenberg.

Sin embargo, ya podemos decir que el futuro ha llegado, está llamando a la puerta, y hay que dejarle pasar, porque si no, pronto quedaremos como aquellos carcas que se negaban a aceptar el Word 2010 y se quedaron anclados en la versión 2003, y que finalmente tuvieron que claudicar.

También te puede interesar:

Cómo escribir un artículo o entrada en WordPress