Gutenberg: Convert a Post into “Blocks” & more…

I know that I’m long overdue to help y’all learn Gutenberg. The entire idea is rather daunting. What do you want to learn? What do you already know? How long do you want to spend learning? Long tutorials covering large topics? Or short 5 minute bits that are easily referenced? 

If you have any insight or preference on how to break down the teaching of this, I’m all ears! To start I’m walking through the first thing you’ll see as soon as WordPress 5.0 is launched.

Once you upgrade to WordPress 5.0, all your content will be semi-converted (my term). In this tutorial, we walk through what that looks like, and how to convert it to the infamous ‘blocks’. And a few tips for working with the basic blocks: paragraphs and headers.

To summarize, the following screencast covers:

• converting a post into ‘blocks’ for the first time
• using paragraphs (+ a paragraph hack)
• using Headers
• adding new blocks

Transcript: Converting Posts into Blocks in Gutenberg

Transcript

Welcome to another Guttenberg tutorial!

So we have some sample posts on this Guttenberg theme and what we’re gonna do is show you what to expect when you first switch.

The first thing you’ll do is go to your post setup and click on any of the posts that you have listed. You can select if you have the classic editor installed to use that. We’re gonna click Edit and see what Guttenberg looks like.

So this is our new display. In here you’ll find the document settings the block settings. I’ve already gone over some of this in an intro post. What we’re gonna start with here is what happens when you first turn it on.

You’ll go into a post – it’ll look like this. Basically they’ve just taken all the content from your post and put it inside what’s called a classic block.

It’s right here.  This is the classic WordPress editor now I want to change this to Guttenberg so I can put some fun styles in it.

Using the three dots you can convert to blocks so I’m gonna click that.

Now I have a bunch of different blocks this is more the usual Guttenberg.

When you hover you can see what kind of block you’re looking at. There’s a little blue thing right there.  When I put my cursor inside one of the blocks I this menu here will switch and I can see all the fun things I can do. Now let’s say we wanted to put a subtitle in here. Let’s say we wanted this to be our subtitle.

So if I switch this to a heading the entire block is gonna be a heading so I don’t want to do that, instead I’m just gonna copy this bit that I want as my subheading. control C. I’m gonna delete it from here so it doesn’t look silly. I’m gonna go here. Now this is a little – it’s one of those things that makes you realize this is not as refined as it could be. You go in here and it’s a little bit hard to find out how do i how do I put one up here right in between these two. You stopped long enough and you know where to look hover around the middle – you’ll get this little add block button.

Click the button; insert a heading. There is my heading. Now I can change all of these different things. Now this is what it is right now – a heading with a big T for heading I guess.

Here I can now switch these change the alignment and even add a class. So now that is how to transfer some text.

Let’s do it one more time.

Let’s say I want to put a subheading right here and I’m gonna type my own subheading so… Remember here’s a paragraph. If I just do this I’m not gonna see where to add a new paragraph. If I do this I can add. Alright add any of these blocks for now we’re just gonna use a heading. 

I’m gonna type in my special heading. I’m gonna change it to be an h3 – it’s further down the page, let’s pretend. And here’s the Settings for the block.

Now let’s say I want to make it right in the middle. I’ll show you a little trick: press enter and it automatically gives you another block and it’s always a paragraph. Just like that – click enter and there’s a paragraph.  Enter: paragraph.

Let’s same at the very end of the article: enter – paragraph.

Playing around is a little bit dangerous so undo undo undo. That’s all you need to know: the undo button.

Oh and just like enter you can also use backspace and it goes back up so your paragraphs should be super easy. You can just type away in little paragraphs.

And now you know how to add a header.

Let’s go over that one more time. I’m gonna put a header right here. I’m gonna use a heading block and it’s gonna be called “This amazing header” and I type too fast – that’s bad.

Okay so here I am editing away now I want to put something in. I can’t it’s not letting me do it. I’m playing so to play around with it click out – now let’s see. Now I can do it.

What I would recommend is putting some test content like this on a page and just goofing around with it a little bit. As long as you don’t publish it and there’s no harm no foul.

So good luck let me know what tutorial you’d like to see next.

Other Gutenberg Tutorials on WPBarista

Gutenberg Notice & Classic Editor Plugin

Gutenberg is coming! If there was any doubt, it has been dispelled with the recent WordPress update to 4.9.8. Once updated, you should see the Gutenberg announcement like this: What is Gutenberg Editor? It is the new editor for WordPress. All WordPress installations from WordPress 5.0 and forward will feature this editor. And it is […]

Gutenberg Introduction

Gutenberg Editor is the new editor that will be released in WordPress 5.0. It is a huge improvement over the classic editor. However any new interface requires a bit of a learning curve. And any change at all produces feelings of anxiety for some of us (me included). VIPs you have a test site already […]