Many labels describe compatibility with Gutenberg, such as “works with Gutenberg” or “Gutenberg ready”. However, they often mean that the product can function with Gutenberg. It’s vital to embrace Gutenberg and utilise its features fully, as this can significantly enhance the quality of what you create in terms of interface and workflow.

What does it mean to embrace Gutenberg as a product? Specifically, how can you take advantage of it now and in the future? I’ve been thinking about this, and here are ten steps I want to share.

Step one: Recognise Gutenberg is WordPress

One of the biggest questions would be ‘What is Gutenberg’. I tend to push back around that and say it’s WordPress. The system, the mindset and the approach have been around for so long now and have been a part of the core development – after all, we are through phase two and starting phase three, Collaboration. So, this is step one to embracing Gutenberg as a product; see it as nothing different to WordPress.

Step two: Understand the foundations

If you want to create your product quickly, consider using existing tools and building upon them. Familiarize yourself with design approaches, patterns, and systems to extend their use. Make sure you understand the foundations. Pay attention to components and learn how styling works. Create independent components that can be easily modified for different branding variations or modes. Also, take the time to understand the toolset used in the project before forming any opinions about it. 

Step three: Use as a starting point

Once you have a solid grasp of the basics, you can explore exciting new possibilities. Use the established guidelines and regulations as a foundation to experiment with fresh ideas and broaden your horizons. Incorporate various components, systems, or processes to create your product, with Gutenberg as a great starting point to enhance your creation. Remember, once you understand the rules, you can venture beyond them without feeling restricted.

Step four: Offer enough choice, set the default

Gutenberg offers various options for editing, but it chooses a default setting that aims to provide the best possible experience, such as full screen mode. While some users may prefer a spotlight feature, personal preferences vary. It is incorrect to assume that people do not want options, as everyone is unique and may require slight adjustments to customize their visual experience for the perfect fit.

Step four: Everything isn’t blocks

It is a block-based editor, but there is an opportunity to create and extend beyond just the blocks. Think about the editor itself, the act of creating. Think about WordPress and the interfaces. Gutenberg has changed and brought in so many different things you can bring into your product, you have to shift out of thinking it’s just about blocks.

Step five: Gutenberg can be reduced

When developing a solution for WordPress, it’s important to consider that less may be more. Instead of adding on to the platform, think about what could be removed to improve the customer experience. Are there any unnecessary features or elements that could be tailored or refined for a more personalized experience? Keep in mind that Gutenberg needs to satisfy a variety of use cases, but that doesn’t mean your product has to include everything.

Step six: Look outside WordPress

Gutenberg was created by looking outside WordPress. It was created through being inspired by editorial pieces that couldn’t be done within WordPress at the time, challenging the notion of what could be. It draws on interfaces and products that are diverse. You need to also take that mindset with what you create. WordPress is incredible, but it’s one space, and by looking beyond, you can take the lessons from the new editor and how it was created into your product creation.

Step seven: Release timely and regularly

Before its integration into WordPress, Gutenberg was released as a plugin and underwent extensive testing. You can learn from this by releasing your own work in a timely manner, without sacrificing thoughtfulness. It’s important to release when it won’t cause harm, even if it feels slightly uncomfortable – being uncomfortable is perfectly fine. Regular releases also keep products fresh and iterative.

Step eight: Know the phases

Stay ahead by reviewing upcoming phases and aligning your product roadmap accordingly. Consider how your product fits in and where you can market it for maximum benefit. For example, consider aligning your next opportunity with collaboration or multilingual.

Step nine: Remove as much as you add

Think about how you can simplify the interface. Gutenberg has effectively reduced visual clutter through features like side panels, leading to a more streamlined experience. Consider prioritizing actions while someone writes or interacts, and moving optional elements to secondary spaces. By providing clear, uncluttered spaces and obvious actions, you can help customers stay focused and increase their chances of success.

Step ten: Iterate and experiment

The Gutenberg of today isn’t the Gutenberg that was released at the start in both form and function. This is a good thing. Taking this mindset into what you create is vital. Being ok to experiment, try and then even pivot out – that’s genuinely embracing some of the product ethos of Gutenberg.

The time is now

To fully utilize Gutenberg, it’s important to understand its principles and select which features to use. Embrace it as a product and explore its potential beyond just using blocks. Opportunities await.