Old printing press template with removable letters

Using Gutenberg to Elevate the WordPress Editing Experience

Faye
Faye Polson

“Gutenberg” is the name given to the movable block editor adopted by WordPress back in 2018, harkening back to Johannes Gutenberg who invented one of the early European movable-type printing presses. Reusable individual letters that could be moved, and reused, eventually lead to typography and fonts as we know them.

Of course, nowadays we have printing technology that Johannes could not have even imagined, let alone believe that an entire online editing experience would be named after him. 

But what exactly is Gutenberg?

Most of us are familiar with editing experiences, such as typing in an email, Microsoft Word, or Google Docs. These experiences are mostly similar; you have a blank space to type and buttons for alignment, styles, fonts, sizes, etc. This has been a common website editing interface for decades, but it is both creatively and logistically restricting. 

If you wanted to move a section from one location to another, you’d have to copy and paste it, then delete the original. Trying to completely rearrange your content would be frustrating and time consuming. Or if you wanted some snappy responsive columns, you would have to switch to view the document code and write HTML and CSS. 

Gutenberg is WordPress’s native “drag and drop” site builder. It solves those problems by allowing you to create your content in blocks designed for the specific content you’re using. There are over 90 blocks to choose from. You can play around with all of these options on the Gutenberg demo.

This flexibility allows content editors to populate their website with more complex content, and then shuffle it around within the layout. In fact, there are many themes that lean so heavily on Gutenberg that you wouldn’t need a developer at all. With the introduction of Full Site Editing, nearly anyone could put together a working website that’s beautiful too.

Why use a web developer at all?

While there are many themes that do leverage everything Gutenberg has to offer (those 90+ blocks), that’s not the case for most of them. And for existing sites with legacy themes, there is little chance that they are able to take advantage of this newer technology. Out-of-the-box websites are useful and serve a purpose but when you need custom design, structure, and functionality, you need to call in professionals.

Another struggle with drag-and-drop sites is the global element. If you have 30 headings on your website and decide you want to change them all from green to blue, you’d need to go through and edit the color settings on all 30 headings one by one. While there are some global elements, the vast majority of your page content will require manual editing. This can be incredibly time-consuming.

Native Gutenberg blocks can be unexpectedly limiting. For example, if you desire rounded borders on all media but the block you’re using doesn’t have support for a border-radius, you’d need a developer to create and apply custom classes. Keep going down that path and suddenly you can have a site full of custom classes and blocks that never look the same from one to another. This can be an editing nightmare and require excess documentation to keep it all straight. Suddenly that easy drag-and-drop editing experience requires a higher level of skill.

There’s a better way to customize.

Kanopi approaches Gutenberg blocks from the perspective of creating consistent and branded content. One of the big advantages of Gutenberg is that we can create new blocks and apply our own styles and structure. This allows us to create blocks that can hold and display any type of content within a defined set of rules. Instead of pouring budget into styling 90+ blocks (and their hundreds of combinations) that may never be needed, our team focuses on creating custom content solutions for our clients.

This “best of both worlds” approach lets site editors continue to use the ease of Gutenberg’s drag-and-drop experience, while also creating consistent, branded content. As a website moves from its initial build into support, these blocks can be expanded upon and updated globally (and thoughtfully). Even older sites without any Gutenberg usage can be configured to allow for this type of block expansion without disrupting the existing content.

Gutenberg is here to stay.

It’s clear that WordPress is leaning in on the use of Gutenberg and the Full Site Editing implemented in the past year. Meanwhile, Advanced Custom Fields Pro (the preferred and recommended plugin for enhancing WordPress’s content management) is keeping pace to ensure custom block creation works seamlessly with every stride made. Whether using an out of the box theme, or having an agency custom building according to your organization’s needs, Gutenberg is a phenomenal solution with room to grow in many directions.

Contact us to discuss how Gutenberg can work for you