Getting started with WordPress Gutenberg: a beginner’s guide

Getting started with WordPress Gutenberg

WordPress Gutenberg is the name of the new Editor and team that has been rolling out since November 2018, with a view to making the experience easier to create content.

Many of you use WordPress for your website and perhaps are wondering if you should make the switch. Here, I aim to cover some of the common questions that arise.

Is WordPress Gutenberg free?

The Gutenberg editor is now part of the core of WordPress when installed. This was introduced in WordPress core 5.0, around November 2018.

Gutenberg also has its own dedicated team, who regularly add new features and fix bugs.

Over 20 teams are headed up by reps and they oversee changes from thousands of volunteer contributors across the globe.

WordPress at its heart is open-source, this free software. So in short, yes Gutenberg is free.

What is Gutenberg editor?

Gutenberg is the name given to the new style of editor that forms part of WordPress, the content management system for websites.

Rather using the Classic editor, which was a bit like using Word, Gutenberg gives more control over design and layout whilst you create your content.

The editor is used for Pages, Posts and Custom Post Types of your Theme supports them.

Is WordPress Gutenberg a page builder?

Gutenberg could be considered a page builder, because you can create simple text-based pages to full layouts.

Using photography, video, colour, typography, and elements such as columns, vertical spaces, tables, dynamic maps and more.

Personally, I refer to it as an editor to currently differentiate it from the typical page builders still currently on the market.

I feel as these builders loose popularity and as Gutenberg strengthens its position (they are rolling out Full Site Editing – read more) I find it’ll be referred to more as a page or site builder.

Why would I use WordPress Gutenberg?

As a long time user of WordPress (since version 2.5) it has been long-awaited the need for more control over content in the editor.

Designers and developers have tried to solve this in various ways, from fixed layouts and form fields to creating vast plugins such as Elementor.

With the hope that they can keep the design whilst allowing editing.

Considering the facts that;

(a) it is free

(b) part of the core and thus regularly updated by so many developers and contributors,

one could argue, why would you pay for another solution?

Two key benefits of using Gutenberg is that it’s is more Accessible to users and the output is accessible. Secondly, it is fast!

Both are key when google ranks your website and makes it a better experience for everyone – website creators and website users.

We’ve been ripping out alternative (older) solutions and replacing with Gutenberg-powered layouts and found drastic changes in how fast the page loads.

Related: Using a page builder such as Elementor, could be costing you customers

How to get Gutenberg?

Gutenberg is already bundled as part of the WordPress.

Whether you’re using the “.com” version or self-hosting using the “.org” version it will be there for you, after install and you login.

If you already have a website on WordPress and you’ve updated to a version later than 5.0 you’ll be ready to go.

By editing any Page or Post you can be prompted to Convert to Blocks, either the entire page if you’ve recent updated, or by a per Block basis.

Below is a screenshot of what you can see depending on your current setup;

How to use WordPress Gutenberg?

If you’ve come from using the Classic editor (where all content was dumped one box box) then Gutenberg will come with a learning curve.

Whereas, if you’ve already used plug-in page builders such as Elementor, then the concepts may seem more familiar.

At its foundation, it uses Blocks – think of it like Lego pieces. Each (HTML) element is rendered a block, so an image, heading, paragraph or list of links are each a block.

With each block comes general settings to move them around the page, dictate their width or colour and also unique attributes you can change.

For example change the text size of a heading, or the output size of an image, how many images in a gallery, etc.

Where things get really interesting is the ability to create sections and full layouts using blocks such as Columns, Media and Text and the option to group blocks and apply colours and spacing.

Gutenberg block websites we’ve created;

How do I switch from Classic to Gutenberg editor?

If your website is currently running Classic it is possible either (a) you’re on an older version of WordPress or (b) Classic has been forced by a plug-in.

If your website setup is (a) then I’d strongly suggest you take a backup of your website, then update WordPress to the latest version.

This will ensure you have the latest security fixes and patches, but also benefit from new features.

Once updated your content will display as a “classic block” which if you click on the name, will prompt you to convert to Gutenberg blocks.

This will happen instantly then you can make any necessary adjustments you wish. You will have to do this on every page or post on your website.

They do aim to keep content displaying as close to the original whether you choose to convert or not, so depending on your theme, and design you …

If you are (b) and Classic editor is being forced but you’re on a new version of WordPress then Gutenberg is already there.

You’d simple disable your plug-in and you’ll be presented with the same options as above – convert your “classic block” to multiple new blocks, or leave it and hope it looks the same.

Summary

I hope this answers a lot of your questions you may have had around using WordPress Gutenberg, and reassure you it is a great Editor to use, once you feel confident to play about with some of the settings.