In this post, I’ll introduce you to what the Gutenberg editor is, give you a brief look at explaining how it works. I will also tell you when you can expect to see the new editor, and share a few other minor relevant details.
The way that you write your blog posts in WordPress will drastically change (though you will be able to install a plugin to keep using the current editor, if desired).
It is to help you get ready for the change that I have penned down this post on How To Use The WordPress Gutenberg Editor.
It’s a complete redesigned editing experience.
I’ll show you exactly how you can use the new editor to write a blog post so that you are ready for the transition to WordPress Gutenberg.
What Is The WordPress Gutenberg Editor?
Gutenberg is a completely redesigned editor aimed at replacing the current TinyMCE editor that WordPress has used for, well, pretty much forever.
Gutenberg’s goal is to make it easier and more accessible for casual users to create unique content structures by using blocks (I’ll explain this in a second).
Or, in the words of Matt Mullenweg, co-founder of WordPress:
The editor will endeavour to create a new page and post building experience that makes writing rich posts effortless, and has “blocks” to make it easy what today might take shortcodes, custom HTML, or “mystery meat” embed discovery.
In case you’re not familiar with what I’m talking about when I say TinyMCE editor, this is what the current WordPress TinyMCE editor looks like:
In contrast, here’s what the new WordPress Gutenberg editor looks like:
But apart from the new interface styling, the real change that Gutenberg will bring is in that block-based editing approach.
How Does The WordPress Gutenberg Editor Work?
If you’re using WordPress, I’m sure you’re familiar with how the current editor works – you have a single box where you write your text, add your images, embed videos, etc.
Gutenberg changes that by letting you write your posts using multiple “blocks”.
A “block” can be pretty much anything. For example, these count as a block:
- A paragraph of text
- An image
- An embedded video
- A quote
- A button
Here’s an example of how the different blocks work. In the GIF below, you can see that I have added four different blocks:
- Two paragraph text blocks
- One image block
- One video block
And because each block is a separate entity, you can also easily apply a color background to just a single block:
But here’s the really cool part about blocks:
Developers will be able to write their own blocks as well, which paves way for the elimination of things like shortcodes and embed codes.
For example, rather than needing to insert a shortcode to add a gallery to your post, you’ll eventually just be able to use a “gallery block” to insert your gallery and see a live preview in the editor itself.
In a nutshell, the new WordPress Gutenberg editor sits somewhere in between the current TinyMCE editor and more powerful page builders.
With it, you’ll be able to build more attractive pages without needing to know any code. And that should unlock a ton of helpful new functionalities for your blog!
An Introduction To The WordPress Gutenberg Editor Interface
When you first go to create a new post or page with Gutenberg, here’s what you’ll see:
It is somewhat similar to the current WordPress TinyMCE editor, but the biggest difference to you would be the absence of the single text box for you which you currently use to write and format all your content.
Instead, you will have one big white area that starts with ‘Write your story’. If you read my post on what the WordPress Gutenberg editor is, you’ll know that is because Gutenberg uses “blocks” to help you create your content, rather than a single text input area.
For more information on what blocks are, I recommend that you read my post above. But as a quick refresher, a block can basically be anything. It can be:
- A regular paragraph of text
- An image
- A CTA button
- An embedded video
Third-party developers will also be able to code their own blocks to add more functionality. You can already see an example of this with the BlocksWP Social Share Block.
How To Use The Gutenberg Editor Interface
Here are what the various areas of the Gutenberg interface let you do:
- Click this button to add a new block.
- Undo/redo buttons let you move forward or backward to edit easily, just like Microsoft Word.
- This settings area includes many of the same options as the current WordPress editor sidebar. It is where you add categories/tags, set the featured image, choose the publishing date etc.
- When you select an individual block, this settings area includes settings that are specific to that block. It is where you can choose colors, styles, and other important block-specific details.
- These two buttons let you preview or publish your post.
If you click on the +Plus button to insert a block, it will open a window that lets you browse all available blocks that you can use in your content:
The Recent and Saved tabs allow you to access blocks that you frequently use, while the Blocks and Embeds tabs let you browse all available blocks.
You can also use the search box to quickly find a specific block by typing in the block’s name.
How To Write A Blog Post Using The Gutenberg Editor
Now that you know how the interface works, well, to an extent, I’ll show you how you can actually use Gutenberg to write a blog post for your site.
For example, let’s say that you want to write a blog post that includes:
Previously, you might’ve needed some separate plugins or custom CSS to handle creating a table and CTA button – but now you can do everything with Gutenberg.
Step 1: Write your text using paragraph blocks
To write the text of your blog post, Gutenberg doesn’t require you to actually add a new block. Instead, you can just click on the page and start writing like this:
Pretty easy so far, right?
All you do is type. And whenever you hit enter to start a new paragraph, Gutenberg will automatically create a new block.
If you want to add a link, change alignment, or format the text with bold or italics, you can just click on the text block and use the floating menu bar:
Step 2: Add an image block
To add an image anywhere in your blog post, all you need to do is hover over the spot where you want to insert your image.
When you do that, you will see the +Plus icon appear. Clicking on it will open the block list, which will help you choose the Image block.
When you do that, you’ll be able to upload a new image or select an image from your Media Library, just like you do with the current WordPress editor:
Once you insert the image block, you’ll see the actual image right there in the editor.
Step 3: Add a YouTube embed block
To embed a YouTube video, you follow an almost identical process:
- Hover over where you want to embed your YouTube video
- Click the +Plus icon
- Go to the Embeds tab
- Choose YouTube
Then, all you need to do is paste in the URL to the video, click Embed, and you’ll see the embedded video right there in your post:
Step 3: Add a table block
The table block lets you insert and manipulate a table anywhere in your content with ease.
To do so, you will need to follow the same process as above. And once you add it, you can add or remove rows and columns by using the floating menu bar:
Step 4: Add and style button block
The button block is one of my favorite additions to the Gutenberg editor because buttons are something that were previously difficult to add without knowing the usage of custom CSS. But with Gutenberg, using buttons is simple.
First, you can insert a button by following the same process similar to other blocks. To edit the button’s text, all you need to do is click and type:
You can also go to the Block tab to change the colors of your button:
And that’s it! You just wrote an entire blog post using the new WordPress Gutenberg editor. It is that simple.
Some Other Helpful Things That You Can Do With The WordPress Gutenberg Editor
Apart from what I demonstrated above, there are also some other helpful things that you can do with Gutenberg.
One feature that’s helpful is the ability to add a unique background color to any paragraph block in your post:
You can also use the up and down buttons next to each block to quickly change the positioning of the block i.e. without the old copy and paste method:
And finally, if you want to save some time while inserting new blocks, I like the quick-insert autosuggest feature. Rather than needing to use the +Plus icon every time you want to insert a new block, you can just start typing and use this format /block-name.
As you type, Gutenberg will automatically suggest blocks that match:
With this feature, you can add blocks just by using your keyboard, which helps keep you in your flow.
Gutenberg Might Have Growing Pains, But It Should Be Good In The Long Run
WordPress has been using pretty much the same TinyMCE editor for as long as most people can remember, so I think it’s fairly unavoidable that there are going to be growing pains when WordPress 5.0 comes.
You will need to learn a completely new interface, which is obviously going to take some adjustment.
But in the long run, that new interface should give you more power to create awesome content.
Now I want to hear from you. What do you think about the Gutenberg editor so far? Do you like it? Or do you still prefer the current WordPress editor? Let me know in the comments!