Moving Planet 4 to Gutenberg

Why, how and when P4 will transition to the new Wordpress user interface

Luca Tiralongo
Planet 4
4 min readAug 20, 2019

--

With Gutenberg, Wordpress’ new user interface (UI), P4 editors will switch from the classic editor to a clean whiteboard with “Lego-style” blocks to stack together, while building beautiful posts or pages.

Just like the Medium one, Gutenberg, named after Johannes Gutenberg, it’s a modular point & click interface, making content generation more intuitive and allowing instant visualisation while creating.

Image credits — Felix Arntz

As the Wordpress 5.0 default content editor, Gutenberg is now live and stable since January 2019. This means that all future versions of Wordpress will be built around and primarily tested with Gutenberg, while the classic editor will be progressively decommissioned and remain available as a plugin.

This transition will have zero impact on the website front end / user experience. Also, P4 won’t be able to turn it off anyway (it’s core WP 5.0).

Why now

With the P4 rollout plan almost completed, a Gutenberg transition right now fits well with the “satellite” projects introduced in the "v2" Roadmap, such as the prototype testing, the greenpeace.org landing page, the P3 archival and integration in ElasticSearch, and the Campaign Generator pilot.

All these initiatives are not specifically related to the P4 core development, but will affect its progress and require resources from the P4 team.

Since this will have to be done anyway, a transition over the next few months, while P4 still has a limited number of engagement features, is certainly smoother than one in the years to come.

Why P4 needs it

For the current product — We have long reached the limits of the chosen technologies (shortcake + shortcodes), neither of which are being updated any longer. The more things we develop on these technologies, the bigger technical debt we will have in the future.

Now that the Planet 4 development team is stable and ready to grow, so should be the tech.

For the future product — whichever way the tests on the clickable prototypes will guide us, any new, mind-blowing engagement feature we will develop in P4 must be supported by a latest state-of-the-art User Interface.

By the time "Planet 4 v2" will be shipped, Gutenberg will be more and more powerful, resilient and easy to merge with new upgrades.

Real-time preview in Gutenberg — image by Kinsta

How this will happen

Tech upgrade — the most complicated piece of this work is the migration and integration of the Planet 4 Blocks into Gutenberg.

The P4 dev. team has already selected a swift approach* to convert the existing 15 blocks into the new UI and is planning to complete this piece of work in 4 (one-week) sprints, with an average of 2 workdays for each block migration.

Change management and feedback — While upgrading the tech, the P4 team will have to make sure the community is aware of the upgrade, that bugs are addressed before go-live, that the Handbook is updated and train-the-trainer sessions are scheduled (and recorded).

Starting with the activation of Gutenberg on local development sites at the end of August, colleagues around the world will be able to play with it, get and receive training (and hopefully submit bugs!). The idea is to have all sites migrated to Gutenberg by the first weeks of October.

>> Report Planet 4 bugs 🐛

11 weeks of magic for our UI transition — image by Luca

This timeline represents the perfect scenario, eventual urgencies for other priorities (e.g. for the P4 Campaign Generator pilot) may very well affect the plan.

Become a Gutenberg champion!

With a month of September heavily dedicated to testing (on the dev sites) and giving feedback on bugs, there's plenty of chance to become a Gutenberg guru, train colleagues and make P4 a better product.

Don't hesitate, send the team an email, comment below or tweet at #GPP4 to get involved!

Comparing Gutenberg vs Classic Editor — image by Kinsta

*Documentation for the P4 blocks > Gutenberg migration script soon available in the P4 Handbook.

--

--

Luca Tiralongo
Planet 4

Grey-haired since 14. Bike rider. Sea diver. Peperonata maker. Greenpeacer.