WordPress Gutenberg: A Step-by-Step Tutorial (for Bloggers)​

The new WordPress Gutenberg Editor might just surprise you…

Yes, this will change how you create blog posts.

Yes, you’ll have to LEARN something–again.

The good news?

This post will show you everything you need to know to dig in and NOT get frustrated. You’ll be able to hit the ground blogging 😉

Table of Contents

Click the titles to navigate!

  • General Overview
  • Can I opt-out?
  • Will Gutenberg work with...
  • What are they?
  • A big list of blocks
  • The writing experience
  • Editing titles, permalinks, and text
  • Adding images & videos
  • Custom Reusable blocks!
  • Shortcuts for blocks
  • Just write as usual
  • The "classic" block

What is WordPress Gutenberg?

“Gutenberg” is the name of the new editor in WordPress update 5.0 (released December 6, 2018).

The new editor has gotten a major overhaul!

This will HEAVILY affect how you write and edit blog posts (and pages).

Old WordPress Editor
Old WordPress Editor
new Gutenberg editor
new Gutenberg editor

That doesn’t look so different, does it?

The truth is, while there are a lot of little changes, the overall blogging experience will be very similar to what you’re used to!

You have nothing to fear. The editor changes will be a good thing in time.

FAQ: Can I Opt-out of Gutenberg? Can I Just Keep Using the Old Editor?

With the WordPress 5.0 update–the Gutenberg editor will be the DEFAULT editor!

But good news, you CAN continue to use the old editor!

It will be available via a WordPress plugin aptly named “Classic Editor.” 

wordpress classic editor plugin

Do I think you should do this? 

Yes and no–see the last chapter of this post 😉

When is the Release Date for WordPress 5.0 (and Gutenberg?)

Gutenberg is HERE.

WordPress 5.0 ‘Bebo’ was released on December 6, 2018!

It is now the default editor.

 

Will Gutenberg Work With (or Break) My Current Theme?

Short version = WordPress Gutenberg is designed to work across all themes and with all plugins!

December 2018 Update = While Gutenberg definitely “works” with every theme, some fair better than others!

My old theme, for example, was having issues displaying column blocks. This is due to some CSS battles.

Takeaway = Installing Gutenberg now will NOT break your current theme, but there could be a few advanced blocks that could act funky.

Luckily, more and more theme creators are updating their themes to not only be compatible, but OPTIMIZED for Gutenberg blocks.

Bottom line: It depends on your theme.

Will the Gutenberg Update Change My OLD Published Content?

Nope!

Unless…

You go back to old posts and “convert” them to blocks!

When you update to WordPress 5.0, all of your old content will exist in a “Classic Editor” block, meaning it’ll be exactly the same as it was.

However, you can go back into old blog posts and “convert to blocks.”

converting old content to gutenberg

If you have more complicated content (i.e. more than just text, images, embeds, shortcodes, etc)–you might get a few odd things happen when you convert old content!

But the big takeaway is NO. 

Activating Gutenberg won’t directly screw up existing content you might have.

A Broad Overview of Gutenberg "Blocks"

Think of blocks like Legos.

You’ll combine a lot of little blocks–of all different shapes and sizes–to make a big structure.

In WP Gutenberg, a single blog post will be made up of several small blocks!

More specifically, every single part of your post content is a separate block.

Enjoying the heck out of this post? Other people will too, and sharing is fun!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Here's a List of All the Gutenberg Blocks You Can Use in a Blog Post:

Note: For the average blogger, there are only 4-5 blocks you need to know about, and they’re all incredibly simple.

> Paragraph blocks
> Headline blocks
> Image blocks
> Embed blocks (YouTube videos, etc)
> Quote blocks

3 basic gutenberg blocks
These are easy, I promise!

Below is a complete list, and we’ll describe each of these in more detail after that!

Text blocks:

  • Paragraphs
  • Lists
  • Headings
  • Subheads
  • Quotes
  • Pullquotes
  • Verses

Media blocks:

  • Images
  • Cover Images
  • Image Galleries
  • Audio
  • Videos
  • Embeds (all sorts!)

Code blocks:

  • Custom HTML
  • Code (for displaying code)
  • Preformatted
  • Shortcodes

Layout blocks:

  • Columns
  • Page Breaks
  • Separators
  • Spacers
  • Read More

Really cool other blocks:

  • Buttons
  • "Classic" text
  • Files
  • Tables
  • Recent Posts
  • Archives
  • Categories

Before we do a walk-through of the new editor, there’s something you need to know…

What Is the Writing Experience Like in Gutenberg?

Repeat after me: “I do NOT have to manually add blocks each time I want a new paragraph, image, heading, etc!”

 

gutenberg writing experience
ya just write like always

The writing experience is very natural.

> Drag-n-drop images as normal
> Hit enter for new paragraphs
> Paste in YouTube URLs and it’ll embed them

WordPress Gutenberg does the majority of work when it comes to making things blocks! Just start writing and blogging as usual.

 

A Step-by-Step WalkThrough of the New Editor

First, I made a complete video series covering all this stuff!

That said, here’s what we’re going to walk through:

> Editing the title and permalink
> The 3 places you can find your post and block SETTINGS
> The 4 ways to add blocks
> A look at the new paragraph and text options
> How images and videos work now
> Advanced blocks
> How to create custom REUSABLE blocks (woot!)

How to edit your Titles and Permalinks in Gutenberg:

The title is straight-forward, but permalinks are not!

August 2018 Update: At this time, you cannot individually edit a permalink!

Per the WP developer team, there WILL be an “edit” button, but it’s coming soon.

For now, you can move your mouse just above the title block, and (eventually) the permalink options will appear, allowing you to see and copy the link! It’s a big buggy still as of Fall 2018.

Where are all the blog post (and block) settings now?

> Publishing options
> Choosing a category
> Setting a featured image

Most of these settings are still on the sidebar, though there’s a “tab” now, which will take you back and forth between the post and block settings.

wp gutenberg post and block settings

The new “menu” there functions exactly like a menu.

Clicking the gear will hide the settings sidebar…

Clicking that little Yoast icon (requires the Yoast plugin) will bring up Yoast SEO settings in the sidebar.

Wait, what?

That’s right. The post, block, and (some) plug-in settings will now be in the same sidebar.

To clarify, I have no clue which plugins will do this. It’ll be up to the plugin developers. However, I personally think it is REALLY cool to have Yoast SEO settings right there at the top–which can be toggled and hidden at will by clicking the “menu” button.

Additionally, the new 3-dot button brings up some additional Gutenberg settings, allowing you to view the code editor (which is NOT just an HTML of your entire post! Important point. There’s new Gutenberg PHP code there).

I have a sneaking suspicion that more and more plugins will opt to show their post settings here, which will likely show up next to Yoast in the picture above.

Cool!

gutenberg heading breakdown

One more cool trick in WordPress Gutenberg…

A document outline!

Accessed by clicking the little “i” circle, you can get a glimpse at your word counts, blocks, and even cooler–a heading breakdown! I love this 🙂

The 4 Ways to Add Blocks

By hitting enter, you automatically create a new paragraph block (which can be changed)

Image 2018-08-16 at 11.29.56 AM

Hovering your mouse at the middle-top of any block brings up an “insert block” button. (THIS IS BUGGY as of August 2018)

add block button

Clicking the upper-left “plus” button adds a block below your currently selected block.

Image 2018-08-16 at 11.32.03 AM

After you’ve hit enter to add a new block–you can then select a few commonly-used block options (located on the lower-right of the block)

Image 2018-08-16 at 11.37.28 AM

Check out the New Paragraph and Text Block Settings:

Paragraph Block

gutenberg block settings

Gutenberg makes it incredibly easy to change text size, color, and background color.

So fun!

Side note: You can also save these settings and create a custom reusable block. We’ll see how to do that below.

Lists Block

Important note about lists:

You can either insert a list block–OR just start typing using the same-old shortcuts you used to use.

I.e. hit “1” then “.” and Gutenberg will start an ordered list.

We interrupt this normal post to bring you an incredible Gutenberg HACK:

To quickly access and insert blocks, simply hit “/” on your keyboard, and a list of blocks will pop up.

Even better, hit “/” and start typing the name of the block to quickly select what you’re looking for!

Headline Block

Either add a separate headline block, or type out text and change it to a headline by clicking the paragraph icon. Easy.

Quotes, Pullquotes, and Verses

You now have 3 styles of quotes to choose from!

2 are “nested” under the normal “quotes” block (you can change between the 2 styles by pressing the top-left button).

The other is the new “pullquote,” which is just fancier looking!

gutenberg block preview
how my theme shows a verse and pullquote block

It’s important to note that YOUR theme will make these look slightly different!

How to Insert Videos and Other Embeds in WordPress Gutenberg

First, you can copy and paste URLs into the new editor (just like the old editor)–and Gutenberg will automatically convert it to an embed block!

Woot!

gutenberg embed blocks

There are dozens and dozens of different embed blocks to choose from, including…
> Tweets
> FB posts
> YouTube, Vimeo
> Slideshare
> Reddit
> Literally 30+ more

But really, you can just copy and paste URLs to videos, etc and Gutenberg converts automatically.

What About Editing HTML?

Good news and bad news:

The Good: You can easily edit the HTML of almost ANY block, accessed from the 2nd block settings area!

Bad news as of August 2018: You CAN’T edit the HTML of multiple blocks.

In fact, you can’t edit ANY settings for multiple blocks.

"coming soon" says WordPress

That said, you CAN dive into the Gutenberg code for the full page, but it requires an in-depth knowledge of NEW code (as in, you can’t just start adding HTML in here. It won’t work.)

new gutenberg code
Don't go touching this unless you KNOW what you're doing

There Are Also Custom Code and Shortcode Blocks!

If you’re looking to either…

> Drop in a shortcode (ConvertKit maybe)
> Insert a line of javascript (button or form or something)
> Add more custom HTML

You’re in luck! There are blocks for those:

shortcode and html blocks gutenberg

You can also use a custom HTML block to insert a line of javascript, etc.

Last but not least, you can always revert to a “classic” block:

It’s the old editor in block form!

Important Note: If you add sub-headers in here (H2, H3, etc), they will NOT show up in the new Gutenberg document outline (accessed from that little circle “i” button in the top-left).

How to Create Custom, Reusable Blocks in Gutenberg

Remember that green-background and large font-size paragraph we created earlier?

What if you could save that styled paragraph, and quickly use it in other posts? Over and over again?

You can.

creating a reusable block in gutenberg

Simply click the 3-dot menu icon, then select “add to reusable blocks,”

A box will pop up allowing you to name it whatever you like.

You can then access and insert your reusable block like you would any other block.

And not just paragraph blocks.

You can make any block a reusable block. Custom HTML, a particular image style, etc.

5 AWESOME New Tricks in Gutenberg

We’ve already mentioned a few of these, but I want to highlight them again.

1 – Shortcuts

On a new line, type a backslash “/” and start typing a name of a block. This is by far the quickest way to add more advanced blocks.

2 – Just pretend you’re using the old editor

Yes, I’m counting this as a huge win for WordPress Gutenberg.

You can really just dive into the new editor and start writing your blog post, dragging in images, and pasting in embed and shortcode links as normal. 

Gutenberg is great at converting this stuff into blocks automatically.

3 – Moving multiple blocks at the same time.

As of August 2018–we CAN’T drag around blocks yet. It’s supposedly coming in the future.

However, you can move individual blocks, and groups of blocks, with the up and down arrows to the left of the blocks.

moving multiple blocks in gutenberg

4 – Accessing HTML on a per-block basis.

It used to be a tad overwhelming to open the old HTML editor, and be staring at TONS of HTML.

Now you can access just the blocks you need. On and off again. I like this.

5 – Full-Width and Cover Images!

August 2018 Update – Full-width images are NOT supported by all themes! I hope this will change, as they’re pretty cool.

gutenberg full width image

Cover images, however, are totally supported, and awesome!

It really just allows you to words over an image.

gutenberg cover image

Should You Use the New Gutenberg Editor, or Stick With the Old Editor?

Ready for my opinion?

>> I believe you SHOULD update to WordPress 5.0, but install the “Classic Editor” plugin for now. <<

Why?

The Classic Editor plugin gives you the ability to TOGGLE between which editor you prefer to use, on a per-post basis!

This means that you can create new content using blocks, OR just continue to use the classic editor if you’d like.

That’s fantastic.

So why not JUST use Gutenberg and blocks?

Personal preference 🙂

I, Pete McPherson, am going to use the blocks editor! However, I fully appreciate people’s hesitancy–and think that the Classic Editor plugin is the right way to go for most bloggers.

Trust the WordPress developer team! Over the long-run, the Gutenberg editor will surely get even better.

Enjoy this post?

You should share it and/or opt-in to my blogging email list!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

“What the HAY Pete, where’s my free PDF checklist? My freebie?”

Well, there isn’t one attached to this post. Sorry, but I’m tired from working on this post for weeks.

However, I do really fun and usefull things for bloggers via the email list, and you should join.

Only if you want to grow your blog, that is. #lol

-Pete McPherson

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *