Learn to use WordPress Gutenberg for absolute beginners.

Gutenberg is the new default editor for WordPress.

It saw the WordPress editor switch from meta boxes to reusable blocks.

And it’s safe to say that Gutenberg has truly rocked the WordPress community.

Whether you love the new editor or hate it, it’s here to stay.

Gutenberg editor gif

If you really do hate Gutenberg…

You should learn to love it.

The new Gutenberg editor gives you, as a WordPress  user – not a developer – a simple way to add varied content to your blog posts and webpages.

For example, if you wanted to use a table in your content, using the old WordPress editor; you would need to install then activate a standalone table builder plugin.

When using Gutenberg, all you need to do is add a table block, select the number of columns and rows, then begin filling out its content.

… However…

Maybe just want to get rid of the new editor.

We all have busy lives and maybe you don’t have time right now to learn Gutenberg properly.

There is a “Classic” block, which is almost the same as the old editor, except in block form. Maybe you could try using this while you learn the ropes? 

However, if your goal is to totally revert back to the classic WordPress editor, we recommend that you use the Class Editor plugin for WordPress.

You can find the Classic Editor plugin on the official wordpress.org website.

classic editor plugin for WordPress

This is a strategy we have used on client websites, if we have no agreements to maintain the custom WordPress themes we developed for them.

This limits breaking changes and means clients’ teams won’t be confused.

However, if they wish to switch to the Gutenberg editor, we’re more than happy to help!

Using the Gutenberg editor for the first time

If it’s your first time using Gutenberg, and you’ve finally updated your version of WordPress, try opening up one of your posts.

If your website has no posts (it should) then add a new post.

You should see something like this:

Gutenberg WordPress editor edit post screen

Notice the document sidebar.

If you don’t see the expanded document sidebar, make sure you select the settings cog, next to the Publish… button.

It’s very similar to what we had previously in the traditional editor.

You can use just the document sidebar to edit post privacy, schedule posts like before, delete the post, count revisions, update its permalink, assign categories and tags, set a featured images, change the post excerpt, and allow or disallow comments, pingbacks, and trackbacks.

You’ll also see that a more traditional looking tinyMCE-esque window is still at hand.

However, this is where it gets confusing for a lot of WordPress users when they first move to Gutenberg:

how to add blocks to wordpress post gutenberg

Add.. Block?

What the block?

Blocks are content elements that WordPress users may combine to create unique layouts.

You can change tabs to browse the different block types, or enter a keyword to find the block you’d like.

Gutenberg block editor code block

 

If you need to add custom JavaScript, or an Amazon Affiliate widget, or even some form of tracking code, you just put a code block in.

P.S. this is a great way to use custom JSON-LD to add Schema.org data to your WordPress website’s pages and posts.

And the best bit is that WordPress plugins are already developing amazing features that will help you improve your website with Gutenberg blocks.

Yoast SEO Gutenberg block

Why don’t we do the some of this post using Yoast SEO’s How-to Gutenberg block?

Can I make my own Gutenberg blocks?

Yes, yes, yes! We are actually working on a new blog post on how to do exactly that. Why not join our mailing list and be notified as soon as we share how?

How to save and reuse Gutenberg blocks?

All you need to do is click the menu button located on the far right corner of the block’s bottom toolbar. Select the ‘Add to reusable blocks’ option. This is super helpful if you’re blogging every day, and makes life much easier for you. You’ll be able to access reusable blocks each time you add a new block, in the reusable tab. Any time you ever update an instance of a block, it will be updated across each block on your website.

Can WordPress theme developers style blocks?

Yes. Blocks are permitted to provide their own custom styles. A theme developer can write code that ensures your theme can add to or override any existing styles, or they can provide no styles at all and rely fully on theme styles.

How does Gutenberg affect text that is copy and pasted from external sources?

Based on our tests to date, Gutenberg places all copy and pasted text into a single block. You may then use Gutenberg editor to change the content however you see fit.

Are there keyboard shortcuts for Gutenberg?

Yes. You can see all the available keyword shortcuts by going to the top right menu. Click “Keyboard Shortcuts”.

Does Gutenberg have columns?

Yes, Gutenberg offers a columns block.

Is Gutenberg drag and drop?

Yes, to some extent. Gutenberg editor allows publishers to drag and drop blogs to reorganise order.

Should I start using Gutenberg now?

Blocks are now the most common way users interact with content. Users and developers alike are going to be uncovering new functionality with the editor, and creating new and exciting layouts with Gutenberg blocks.

Conclusion

Hopefully you learned something new about WordPress and its new editor, Gutenberg.

These are exciting times to be a WordPress user, and for us, it’s an exciting time to be WordPress developers.

My last bit of advice is don’t be fearful of Gutenberg.

Set up a dummy WordPress website on a subdomain, or even better, use a localhost.

Get your hands dirty, and play around with Gutenberg.

And as always, feel free to discuss your thoughts on Gutenberg with Be. web on Twitter @bedotweb.

Carl Evans

A custom WordPress theme developer, passionate about SEO. Trello addict. I develop websites here for our clients. I enjoy running, blogging, and Liverpool FC. My goal is to help 1,000 businesses.