We have just launched the website of the State Federation of Services, Mobility, and Consumption of UGT, FeSMC-UGT, using Gutenberg, the WordPress block editor, and Full Site Editing (FSE), which, in our opinion, is finally ready for production projects. Let us share our experience with you.

Although the Gutenberg project was launched over 5 years ago (in late 2018) with WordPress 5.0 and introduced the promise of full site editing or completely visual editing in 2022 with WordPress 5.9, it is only recently that we have felt the technology mature enough to embark on developing a complete site using FSE. And we have done so in a big way, with the new website for the most important federation of UGT, a Spanish trade union, which represents more than 8 million workers.

In recent projects and for many years now, we have used WordPress in headless mode, as a development framework and independent content manager, which we then connected to the front end through an API. The front end could be anything: a mobile app or a PWA, usually developed in Angular because it is a technology we are comfortable with and allows us to develop large-scale projects relatively quickly.

But we were eager to see if the FSE mode of WordPress, which promised completely visual editing in the backend thanks to Gutenberg blocks, was ready to be used in production. And the truth is that we can say the results have surprised us quite a bit.

The fesmcugt.org project

The federation website we developed is a mega-project that replaces 19 territorial websites and 11 sectoral websites, in addition to numerous thematic websites, each previously served from its own domain. It has been a complex project in terms of information architecture, where we have done significant work in unifying and simplifying the infrastructure by serving all the websites from a single domain and WordPress instance, with multiple territorial and sectoral editors and different roles and levels of access.

In terms of design, it has also been a challenge, as the previous website was completely outdated. We proposed a complete redesign that, in addition to maintaining the informative nature, focused on the user and the catalog of services offered by the federation, presenting them in a visual and self-explanatory way.

In this way, with the clear intention of compartmentalizing the areas of knowledge and making the user's location (territory, sector, or topic) understandable at all times, we have created a distinctive interface based on illustrated headers, iconography, and color codes. These elements also serve as independent landing pages for each of the categories and work really well as a whole.

And finally, we also had to import the content from the old websites, with thousands of news articles and more than 3,000 documents, consolidating and categorizing them within the new sections and taxonomies we had defined. This enormous task was resolved with the support of programming and artificial intelligence. Indeed, we can no longer live without it, as it greatly aids us in planning and executing many tasks, especially the most tedious ones.

The development process

Initially, we presented the wireframes and then the final mockups in Figma, without fully understanding how the front-end layout process would unfold. Once the mockups were approved, it was time to transfer the designs to WordPress using the visual block interface offered by Gutenberg. Despite initial doubts and hesitations, and a few minor obstacles that we overcame thanks to our advanced knowledge of CSS and programming (let's be honest, it doesn't work magic yet), the experience was quite straightforward and satisfying.

We managed to replicate the Figma mockups perfectly without the need for any additional frameworks, using only blocks and some custom CSS for the areas where the visual editor falls short due to design peculiarities. Our initial idea was to use Tailwind to streamline the development of components, but it was never necessary. In fact, with our current experience, we don't believe integrating it makes much sense given the way Gutenberg works, abstracting you almost entirely from the generated HTML and, to a lesser extent, the CSS styles.

We also handled the responsive part in a satisfactory and relatively simple way. The trick was to extend the Twenty Twenty-Four theme to develop our specific theme, starting from a minimal barebone that already considers certain interface cases, breakpoints, color palettes, etc., and which we configured and rewrote very easily through a single file, the theme.json.

Moreover, the learning curve for building new components of the website was minimal since Gutenberg has "borrowed" heavily from the UI of Figma and similar design tools. We were quickly creating patterns, templates, or synchronized patterns (equivalent to symbols in Figma) without much effort.

In short, despite this being our first time using FSE and Gutenberg for a corporate website of this scale and complexity, with a custom-made WordPress theme and numerous additional functionalities, the experience has been very positive.

Both we and the client are fully satisfied with the results. Additionally, we managed to stay within the 3-month timeframe planned for the project, which, in a simplified manner, consisted of the following phases: Proposal Presentation → Wireframes → Figma Design → WordPress Design and Development → Content Import → Production.

If you are interested in implementing a similar project and incorporating visual content editing into your business website using WordPress, do not hesitate to contact us. We will be happy to help you.