Legacy to Block: An In-Depth Look at Migrating a Legacy Website to Gutenberg

When I first heard that the beautiful city of Turin, Italy, would play host to WordCamp Europe, the largest WordPress event in the world, I was deep into one of

We would like to show you content from WordPress.tv. To access the actual content, click the button below. Please note that doing so will share data with third-party providers.

More Information
Erika Gili’s and Luis Rosales’ talk at WordCamp Europe 2024.

When I first heard that the beautiful city of Turin, Italy, would play host to WordCamp Europe, the largest WordPress event in the world, I was deep into one of the most challenging projects of my career: migrating a legacy CMS to WordPress.

A few months later, while Luis Rosales and I were preparing a presentation to share our insights within our company, it struck me that our experiences could benefit the entire WordPress community. I turned to Luis (virtually) and asked, “Why not present this at the next WordCamp Europe?”. He agreed without hesitation.

I’m happy to share the key points from our presentation, which received overwhelmingly positive feedback from the community.

The context

First off, it’s important to start with the context. Migrating a complex website with numerous integrations and features is akin to tailoring a suit. Like skilled tailors, we needed to meticulously consider every small detail to create a perfect fit. Our customer, the University of Luxembourg, didn’t “just” want a migration. While some content was ready to be transferred from the old website, other content was completely new, provided by multiple stakeholders with different data sources or through APIs. Our task was to display everything using custom Gutenberg blocks.

After thorough investigations, we identified four different content types that needed to be migrated:

– “As iscontent: taken from the old website without modification.

Spreadsheet files: content provided as spreadsheet files.

CSV files: with content that needed to be integrated with data from APIs.

Old website content: content from the old website that needed to be integrated with data from APIs.

The roadmap

Finding the right combination of tools to streamline our work took time. We initially created a Gantt chart using ProjectLibre for high-level estimations and iterated on the tools required to manage the development of custom blocks. At first, we used a Confluence page, which worked well but eventually became unwieldy and difficult to load. We then switched to a Google Sheet, collaborating closely with the designers of the new design system.

Starting the journey

After assessing our scope, dependencies, and priorities, we overcame inertia by working on three parallel tracks:

  • Custom blocks
  • Business logic for the prioritized post types
  • Developing scripts for automated migrations

Working in parallel with eight developers on the team and a strict deadline ensured that every aspect of the project was properly developed.

Building on momentum

Once the groundwork was laid out, it was time to start coding. The project began to take shape as we developed numerous custom plugins, orchestrated with Composer, and utilized dependency injection and services. We created a generator that reduced human errors and sped up the time-to-market for each block to ensure consistency in developing Gutenberg blocks.

We developed custom business logic to retrieve and transform data into WordPress content for three initial migration types. We managed custom data structures using a repository pattern for some post types. We rendered the data within custom Gutenberg blocks alongside editor-provided content. The migration for other post types was more complex, requiring us to strip the original data of its markup. As for the fourth migration, we worked closely with our migration team, who manually created pages and content from detailed spreadsheets.

The outcome

We did it! The results aligned perfectly with what you’d expect from a team of skilled engineers focused on customer satisfaction and high-quality deliverables. We completed a full redesign of a complex website, delivering over 100 custom Gutenberg blocks in a What You See Is What You Get (WYSIWYG) format, all fully integrated with the migration service. I’m extremely proud to be part of this team and to have shared our insights on the prestigious stage of WordCamp Europe 2024.

Syde team at WordCamp Europe 2024 – thanks for the fantastic support!

Considering a switch to WordPress?

Leave a reply

Your email address will not be published. Required fields are marked *