What Is a UX (User Experience) Design Agency?

A UX (user experience) design agency is a company that specialises in creating positive user experiences for digital products and…

Are you a WordPress developer or enthusiast…?

I'd love to tell you about an awesome site we use at Illustrate for help and support with all things…

pinup What is the Gutenberg Editor in WordPress? : Illustrate Digital

Gutenberg is the simply brilliant editor in WordPress. It promotes freedom over your content, to be able to create and edit more than you’ve ever been able to before.

A bit of history

Gutenberg was released as part of WordPress 5.0 in December 2018. Before this, the default edit screen for creating posts and pages in WordPress was pretty outdated. Agencies and developers across the world came up with new and pretty innovate ways to give website admins a way to update content without using the default edit screen. They used everything from static page sections of pre-designed content (like Advanced Custom Fields) through to drag-and-drop page builder tools (like Beaver Builder).

Despite all of the advancements from individuals and brands across the world, the core version of WordPress, the thing you got when you first installed it, was still pretty poor. For example, without any coding skills it was difficult to even add an image next to a block of text without messing everything up!

So it was time for a change and the great community of developers and designers who maintain the WordPress platform carved out time and tears to create a new editor, an editor known as Gutenberg.

Illustrate Digital’s Global Page Speed Report 2024Read it here!

What is Gutenberg?

You may have already heard about the new editor for WordPress, Gutenberg is the revolutionary new page editor that replaces the classic block of text that was found in every back-end page in the software.

Also known as the post edit screen, Gutenberg is the new content creation and editing experience in the back-end of the WordPress platform. It allows you to add, edit, re-order and remove blocks across different pages and posts on your website.

Originally it was released as a plugin, something that could be added to WordPress to enhance the editing experience. Today you’ll find it as part of a default WordPress installation and has become the platform’s default editor technology.

Most importantly, Gutenberg is flexible content editor. It works on the principle of multiple blocks across multiple pages and puts the choice of what to use and where in the hands of the website owner. Where pages used to be static, Gutenberg brings a new era and level of flexibility.

Why the name ‘Gutenberg’?

Go back to around 1450 and a clever, risky chap called Johannes Gensfleisch zur Laden zum Gutenberg created the world’s first printing press in Germany. He was driven by a passion to distribute the bible to the world, to those who didn’t have access to it. At the time only priests had access to read the bible to their congregations and were interpreting it as they wished, some in a way that manipulated their congregations.

Gutenberg wasn’t standing for this, he believed in something bigger, something accessible and was willing to put his life on the line to make it happen. And so the Gutenberg Bible was born. Whilst it’s not as extreme as putting their lives on the line, the philosophy of WordPress’ Gutenberg editor is similar – to put content creation into the hands of the masses, not reserved for the marketing elite. In other words, to ‘democratise publishing’.

Everything about Gutenberg’s printing press stands for freedom. No longer was the Bible, written for everyone, in the hands of just the priests, open to interpretation to the masses. The masses had access to a printed version that they could finally read for themselves.

This is very much like closing the gap between website platforms such as Sitecore or Adobe Experience Manager and WordPress. For a long while it was the case that getting an easy to use content management system that focused on content – and that put the power in the hands of a marketer – was reserved for those willing to pay a hefty license fee and spend a long time on developing a platform to get there.

We were overdue a version of our favourite, free content management system that stood for free content that didn’t require years of development experience just to update some content.

Much like the printing press, the Gutenberg editor has pulled down the inaccessible power platforms like Sitecore or AEM and has put the power in the hands of the regular user, on a free and open source website platform.

Who is Gutenberg for?

Ultimately Gutenberg is for everyone, but let’s break it down into a few different user groups to explore the benefits for each…

Enterprise

For a while companies like Illustrate Digital have been creating solutions to allow enterprise brands to make the most of WordPress as an open source platform. It makes a lot of sense to choose a platform that’s more commercially sensible, cutting out license fees and allowing brands to spend their budgets on relevant functionality rather than just licensing.

The introduction of Gutenberg has meant that these solutions no longer need developing just to keep up with industry demand, the easy content management that’s so crucial to producing enterprise content is now rolled into the platform. Meaning once again, development time is spent on relevant functionality, budgets can be stretched to more intentional UX design and greater levels of click rate optimisation can be performed.

Reliance on a development team to manage content is no longer, creating a brand’s very own Gutenberg theme means they can have a unique experience that can be rolled out across multiple websites and even multiple brands if needed. And if something gets tired, replace the block, or introduce new blocks, no need to develop the whole thing again.

This gives such a big sense of flexility for an enterprise brand. Many times the word enterprise can denote something rigid, so big that it can’t flex or change, which is exactly where a brand may fall behind in its marketplace over time. This doesn’t have to be the case with Gutenberg and that’s very special and commercially sensible indeed.

Marketers

Every marketer’s dream is to have control of their own website, how they create content and knowing that they don’t have to rely on developers or an external agency’s support in order to produce new things.

One huge benefit of introducing Gutenberg when it comes to marketing professionals and content writers is the speed at which new content can be produced, checked and published.

Relevancy is one of Google’s main ranking factors, one of two umbrella principles behind how it decides what content should appear further up the search results. Google knows that its users appreciate content that’s relevant to their initial search, or at the very least to their interests.

Working with Gutenberg (and WordPress on the whole) allows a marketer to create relevant content right away and publish it when it matters. If there’s something in the news relevant to a brand and it wants to capitalise on it, then it’s a case of create, check and publish.

Small Businesses

For a while now the likes of Squarespace and Wix, other website platforms for small businesses, have dominated when it comes to ease of use for small businesses looking to build a website. It turns out that those platforms aren’t overly usable and a self-starter when it comes to producing websites on those platforms will still need to put in a lot of effort to create something worth being proud of as a business owner.

With a huge amount of WordPress themes available across multiple online marketplaces there’s an incredible amount of choice to allow a business owner, or someone working in a small business, to download a version of WordPress.org and install their own theme to suit their brand.

Over the last few years the experience of building a website using one of these themes hasn’t exactly been easy. The end results can be great on a Google-friendly platform like WordPress, but something needed to come along that would make this creation process easier – certainly easier to understand at the very least.

Gutenberg is serving this need, making the website creation process much easier with a flexible way to layout pages, posts and other content types using the editor’s block functionality.

End Users

Ultimately it’s the end users who matter when it comes to website design or development. If it serves the needs of the end user and makes their interaction pleasant and simple, then you’re onto a winner.

The introduction of Gutenberg has cultivated a different way to build website pages, this has meant that better, more relevant content is available. Alongside this is a better user experience, especially since some blocks allow some great dynamic content to help users flow from one page to the next.

A good example of this is when a service page contains relevant blog posts to that service, or when a team member profile can link to other content that’s relevant to their job role such as case studies or news articles. Since these types of blocks can be placed anywhere, in theory there’s always opportunity for a user to find what’s relevant and ultimately what they’re looking for.

How does Gutenberg work?

As with most things, there’s both a long and short answer to this question; we’re going to tackle the short answer here, since we’ve still got your attention!

Gutenberg all works around the idea of ‘blocks’. Once you understand blocks, you pretty much understand Gutenberg, at least at a surface level.

Previously in WordPress a back-end user responsible for adding content to a website was given a horribly complicated text editor to use, one that wouldn’t even allow you to place images correctly without needing to break out into code. The new editor gets rid of this and puts the concentration on easily creating content that looks great on the front-end once published.

‘Blocks’ are first designed and developed for different content types, of which there are almost an endless number of possibilities. Simple blocks may be image left, text right, with a button to flip this around. More dynamic blocks may allow you to choose three blog posts to share.

For enterprise users and marketing experts, blocks may even be a section of content personalised, served based on the audience.

Blocks are a dream in WordPress and allow someone to easily and visually create a page or post with a sense of how that’ll look on the front-end of the website when published.

When you land on a Gutenberg page editor, you’re given the choice to add a new block, allowing you to choose from a number of blocks that’ve been built into the website’s WordPress theme.

Once you’ve chosen a block you can then edit/add the contents, add text, upload imagery or insert links. And once this is done you can choose where the block sits – you may like it to be further up or lower down the page, the choice is yours.

Blocks are mobile compatible.

A big part of Gutenberg’s purpose was to provide a technology that considered mobile from day one. Gutenberg and the principle of using blocks do a great job of this, producing content that’s ready to adopt to different device sizes.

If you’d ever used it, this is a far cry from the likes of WP Bakery and other similar page editors. A lot of time would be spent second guessing yourself and trying hard to figure out how something will look on a mobile once you’d finished faffing with it on a desktop.

Gutenberg cuts out this frustration and provides an opportunity for designers and developers to create seamless front-end experiences, then allowing content managers to focus completely on the content without needing to worry how it will look when the screen size changes between users.

In building Gutenberg, the team at WordPress have first thought about small, then they’ve thought about big. Working to the lowest common denominator, the smallest device, has allowed them to create something that’ll work anywhere at any size and avoids giving a content manager or marketing manager too much freedom to create “jazzy” pages.

This shouldn’t be seen as a negative thing though, part of Gutenberg’s core reasoning on top of mobile friendliness is consistency. The two together are a recipe for an incredible user experience both for the content creator and the actual end-user viewing or using the page.

How will Gutenberg change things?

The playing field was levelled by the introduction of Gutenberg, but it’s a technology ready to be built upon. WordPress as an open source platform has always provided considerable potential for the community that surrounds and supports it to create new ways to get the best from the editor.

This looks like new blocks, themes and new core functionality for the way the editor works to allow content managers and website owners to do more in a shorter space of time when building their pages.

The idea of using repeatable blocks already saves a heap of time developing the same thing across multiple pages; there’s a lot more to come in future versions that (for the content geeks amongst us) is worth getting excited about.

How do I get Gutenberg?

In honesty it doesn’t take much. But let’s break access to Gutenberg into two different categories for those who currently use WordPress and those who don’t…

If you’re not using WordPress

Head on over to WordPress.org to get hold your copy of the open source WordPress software. You can download a copy directly from the website and straight out of the box Gutenberg is available. In order to install WordPress you’ll need some kind of hosting or a local development environment to get set up.

Once you’ve installed WordPress there’s nothing to do to get Gutenberg working and the platform will use the default WordPress theme if nothing else is installed or developed.

For more information on theme development you can head over to mmspei.com/wordpress-development to find out more.

If you’re already using WordPress

A quick word of caution, please be careful! If your website is built, maintained, hosted by someone else you’ll want to speak to them about it first as following these steps can cause issues if the website isn’t built in a way that’ll allow you to use Gutenberg.

If you’re currently using WordPress but don’t have Gutenberg, it may be one of two things: it may have been intentionally disabled or you may be running a considerably out of date version of the WordPress software.

Some agencies, freelancers and developers may have made the choice to disable Gutenberg and there are certain sensibilities to this, either because they’re not yet ready to introduce it, don’t know how to introduce it or possibly even that they don’t like it. As mentioned it’s best to speak to the person who looks after your website if that’s not you, and if it is you then it’s worth knowing that it may not be compatible out of the box, so we’d suggest creating a test version of your website somewhere first. However if you’d like to activate Gutenberg you can simply deactivate the Classic Editor plugin, which will be found in the back-end of WordPress on the left sidebar under ‘Plugins’.
Gutenberg was released as a part of WordPress 5.0 in December 2018. Best practice for WordPress, like any software, is to keep up-to-date with the latest versions and we’re a considerable number of versions away from anything that began with the number 4. If you don’t have Gutenberg due to your version of WordPress then we would seriously recommend creating a test version of your website somewhere, updating to the latest version and testing that everything still works smoothly. When updating to version 5 onwards you should have the option to turn Gutenberg on/off at this point. Follow number 1 above for more information on how best to do this.