Acabamos de lanzar la web de la Federación estatal de Servicios, Movilidad y Consumo de la UGT, FeSMC-UGT, haciendo uso de Gutenberg, el editor de bloques de WordPress y Full Site Editing (FSE) que, bajo nuestra opinión, por fin está listo para proyectos en producción. Te contamos nuestra experiencia.

Aunque el proyecto Gutenberg se lanzó hace más de 5 años (a finales de 2018) con WordPress 5.0, e introdujo la promesa en 2022 del full site editing o edición completamente visual con WordPress 5.9, no ha sido hasta hace muy poco que hemos sentido la tecnología lo suficientemente madura como para embarcarnos en el desarrollo de un site completo usando FSE. Y lo hemos hecho a lo grande, con la nueva web de la federación más importante de la UGT, que representa a más de 8 millones de trabajadores en España.

En los últimos proyectos y durante muchos años ya, hemos usado WordPress en modo headlesss, como framework de desarrollo y gestor de contenidos independiente, que luego conectábamos con el front a través de un API. El front podía ser cualquier cosa: una app móvil o una PWA, normalmente desarrollada en Angular porque es una tecnología con la que nos sentimos cómodos y podemos desarrollar proyectos de envergadura de manera relativamente ágil.

Pero teníamos ya ganas de comprobar si el modo FSE de WordPress, que prometía una edición completamente visual en el backend gracias a los bloques de Gutenberg, estaba ya listo para ser usado en producción. Y la verdad es que podemos afirmar que los resultados nos han sorprendido bastante.

El proyecto fesmcugt.org

La web de la federación que hemos desarrollado es un mega-proyecto que venía a sustituir las 19 webs territoriales y las 11 sectoriales, además de otras tantas webs temáticas y servidas cada una desde su propio dominio. Ha sido un proyecto complejo en cuanto a arquitectura de la información, en el que hemos hecho un trabajo importante de unificación y simplificación de infraestructura, al pasar a servir todas las webs desde un único dominio e instancia de WordPress, con múltiples editores territoriales y sectoriales y distintos niveles de acceso.

En cuanto al diseño también ha supuesto un reto, ya que la web anterior estaba completamente desfasada y hemos planteado un rediseño completo, que además de mantener el carácter informativo, estuviera orientado al usuario y al catálogo de servicios que ofrece la federación y que lo hiciera de una forma visual y autoexplicativa.

De este modo, y con la clara intención de compartimentar las áreas de conocimiento y hacer comprensible en todo momento para el usuario su ubicación (territorio, sector o tema), hemos creado una interfaz distintiva basada en cabeceras ilustradas, iconografía y códigos de color que hacen además las veces de landings independientes para cada una de las categorías y que funciona realmente bien en su conjunto.

Y por último, debíamos además importar los contenidos de las antiguas webs, con miles de noticias y más de 3.000 documentos, consolidarlos y categorizarlos dentro de las nuevas secciones y taxonomías que habíamos definido. Una labor ingente que resolvimos apoyados en programación e inteligencia artificial. Porque, efectivamente, ya no podemos vivir sin ella y nos facilita enormemente en la planificación y ejecución de muchas tareas, sobre todo las más tediosas.

El proceso de desarrollo

Inicialmente presentamos los wireframes y posteriormente las maquetas definitivas en Figma, sin saber muy bien cómo sería el proceso de maquetación del front. Una vez aprobadas las maquetas llegaba el momento de la verdad: trasladar los diseños a WordPress a través del interfaz visual de bloques ofrecido por Gutenberg. A pesar de las dudas y reticencias iniciales, y algún que otro pequeño escollo que salvamos gracias a nuestros conocimientos avanzados de CSS y de programación (tampoco vamos a mentir, magia todavía no hace), la experiencia ha sido bastante directa y satisfactoria.

Hemos conseguido replicar las maquetas de Figma a la perfección sin necesidad de ningún otro framework adicional, haciendo uso únicamente de bloques y algo de CSS personalizado para las partes donde el editor visual no llega por las particularidades del diseño. Nuestra idea inicial era usar Tailwind para agilizar el desarrollo de componentes, pero no ha sido necesario en ningún momento. De hecho, con la experiencia actual, no creemos que tenga mucho sentido su integración por la forma en la que funciona Gutenberg, abstrayéndote casi por completo del HTML generado y, en menor medida, de los estilos CSS.

La parte responsive también la hemos solucionado de manera satisfactoria y de forma bastante sencilla. El truco para hacerlo ha sido extender el tema Twenty Twenty-Four para desarrollar nuestro tema específico, de modo que partimos de un barebone mínimo en el que se contemplan ya determinadas casuísticas en el interfaz, breakpoints, paletas de color, etc. y que configuramos y reescribimos de forma muy sencilla a través de un único fichero, el theme.json.

Además, la curva de aprendizaje a la hora de construir los nuevos componentes de la web, dado que en Gutenberg se han "inspirado" fuertemente en la UI de Figma y herramientas de diseño similares, ha sido mínima, y en seguida estábamos creando patrones, plantillas o patrones sincronizados (equivalentes a los símbolos en Figma) sin mayor esfuerzo.

En definitiva, y a pesar de que era la primera vez que usábamos FSE y Gutenberg en una web corporativa de estas características, extensa y compleja, y con un theme WordPress hecho a medida y multitud de funcionalidad adicional, la experiencia ha sido muy positiva.

Tanto nosotros como el cliente hemos quedado plenamente satisfechos con los resultados. Además, hemos conseguido ajustarnos a los 3 meses planificados para el proyecto que, de manera simplificada, ha constado de las siguientes fases: Presentación Propuesta → Wireframes → Diseño Figma → Diseño y desarrollo WordPress → Importación de contenidos → Producción.

Si estás interesado en implementar un proyecto similar e incorporar la edición visual de contenidos en la web de tu negocio y usando WordPress, no dudes en contactar con nosotros. Estaremos encantados de ayudarte.