Best WordPress’ Gutenberg Tutorial and Tips
WordPress’ Gutenberg editor is waaay better than the Classic editor, or at least it is in my humble opinion.
It’s kind of like Apple vs PC products to me where Gutenberg is Apple and Classic is a PC.
Gutenberg like Apple products is so much more intuitive and easier to use once you learn all the features.
Let’s get you comfortable with this new editor through my WordPress Gutenberg tutorial below.
Let’s nerd out… right… about… NOW!
Please note that this is a reader-supported site.
Purchases made through genuinely recommended links may earn a commission at no extra cost to you. Learn more.
What You Need for This Gutenberg Tutorial/Review
Before you jump into this Gutenberg editor tutorial and review, it’s best to open up a new post in WordPress so you can follow along.
If you don’t have a WordPress blog yet, then you can grab our free 5-day blogging challenge, which will teach you what you need to do before signing up for a blog to how to make money from blogging!
A Brief Overview of the Gutenberg WordPress Editor
On the old WordPress editor, you would write your blog post in one long block, kind of like a Word document. You could switch between the Visual or HTML editor but it’d be in one long page without a break.
On the new WordPress Gutenberg editor, you write your blog post in blocks meaning each paragraph, gallery, heading, image, etc. has its own blocks.
It reminds me a teeny tiny bit of writing on Medium, but it’s even better considering WordPress has so many elements within a post whereas Medium is more or less words, quotes, images and links.
Anyways, the purpose of being able to write your post in blocks is so that you don’t need as many plugins!
You can build your own pages jam-packed with modern, multimedia-heavy layouts without the skills of a developer. What you see while editing in the back-end is what your readers will see!
What I find really cool about blocks is that each block can save as its own element without having to save whole entire blog post so you won’t lose an entire page of writing.
The Most Basic WordPress Gutenberg Tips You Need to Know
Here are the basics on how to use the Gutenberg editor from writing the title to publishing it.
Editing the Title and Permalink in WordPress
The first thing that you’ll want to do is write the title because it’s right there on the top when you click on New Post.
Right after writing the title, I click Save Draft in the top right corner, then click back on the Title to change the Permalink.
Creating a New Block
Creating a new block is easy! There are a few ways to go about it.
Press Enter after a block. For example, after writing the Title, you can press Enter on your keyboard and it’ll automatically start a new block that you can start writing text in.
Actually anytime you press Enter, you will get a new block meaning all your paragraphs (whether you like it or not although you will like it) will be separated out into blocks.
By default, pressing Enter will give you a text block, but then you can easily convert it to any type of block you want. I go more into that below.
Hover around any existing block. If you hover above or below an existing block, a Plus Sign in a Circle will show up. You’ll have a ton of options of what type of block to put in such as an image, gallery, separator, and even my favorite, reusable blocks.
DO NOT skip out on the section about reusable blocks below (if you’re like me and have some content that repeats from post to post).
Click on the Plus Sign in a Circle in the top left corner of your editor. It’ll give you the same options as if you hovered on the page of what type of block you want to insert.
What’s cool about the Gutenberg blocks is that WordPress will learn which block types you use the most and will present that to you above in the Most Used section.
Converting a Block
When you click Enter, you will automatically get a paragraph block, but if you hover over the block, then click on the Paragraph symbol, you can quickly change it into a Heading, List, Verse, etc.
You can convert other types of WordPress Gutenberg blocks within the same category too. For example, you can change an Image block to a Gallery block. So easy!
Publishing, Choosing Categories, Setting the Feature Image and More
Publishing your post, choosing categories, setting the feature image and more hasn’t moved.
It’s still on the right side panel of the editor. It’s all underneath the section Document.
Everything under Document applies to the whole post whereas anything under Block is specific to the Block you are in at the moment.
The ability to edit a block on its own is my #2 Favorite Gutenberg Feature!
My Favorite WordPress Gutenberg Editor Tips
As you might tell, this tutorial is quickly turning into a WordPress Gutenberg review. Here’s the three features that bumps this review up to five-stars!
#1 Favorite Gutenberg Feature: Reusable Blocks
I have content or wording that I like to use in every single post such as saying goodbye to my readers at the end of the post or directing them to another post they might like in the middle of my post.
With the old WordPress editor, I used to have a separate Google Doc with my coding and wording that I’d copy and paste into my blog post where needed. With reusable blocks, I no longer have to.
Reusable blocks now contain wording or coding that I use time and time again. I can find them in the Reusable Blocks section of the Add Block function, which you can access in the top left corner of your editor or pops up as a Plus button in between blocks.
How to Create Reusable Blocks
- Either press the + button in the top left corner of your editor or after a block. This will create the block wherever you want it.
- Choose what type of block you want it to be. You can make any type of reusable block whether it’s text, an image, a heading, gallery format, etc.
- Hover over the block you’re in, tap on the Three Dots, and click ‘Add to Reusable Blocks’. This will add the block that you created to the Reusable Blocks.
- Name your reusable block and save. Make sure to name your reusable block to something that is straightforward and descriptive so it’s easy to know which block you’re using.
How to Use a Reusable Block Properly
Step 3 is really important!
- In a blog post, simply press the + button in top left corner of your editor or after/before a block and scroll down to the Reusable Blocks section.
- Click on the Reusable Block you want to use to add it. If you’re going to use the block exactly as is, then you’re done. If you want to change it, step #3 is extremely important (which I found out after tedious trial-and-error).
- UPDATED MARCH 2021 – See screenshot above. Hover over the Reusable Block, click on the Double Square button to convert to regular blocks. This is super important if you plan on editing that block at all.
- If you edit the block WITHOUT converting it to a regular block, if you have the block in other posts, it will edit it in every single one of your posts that has that Reusable Block.*
- If you convert it to a Regular Block, then you can use it as a regular block specific to the post you are writing about
*I just realized now that the benefit of having a reusable block that changes among all posts is that if you decide to update wording such as affiliate wording in the beginning of the post, you do not have to tediously go back to all your old posts to change it.
It will change that reusable block in whichever post it is being used in.
Another reason to use reusable blocks! Instead of going back to update a section in all posts, you can just update the block.
#2 Favorite Gutenberg Feature: Editing a Block Within Its Own Block
Writing in blocks has made editing in WordPress so much easier for HTML purposes. WordPress was completely right about not needing extra plugins and making it simpler.
Converting One Singular Block to HTML
Long gone are the days when you needed to update some HTML on the back-end editor and would have to sift through the HTML of the ENTIRE POST to edit the part that you needed. WordPress has learned that no one’s got time for that!
Now you can convert one singular block to HTML so you only have to sort through the HTML of the exact part you need to edit. Overall, your WordPress editor would then have a mix of front-end looking blocks and HTML.
Changing the Font Size and Color Settings in One Block
If you go to the right side of your editor, you will see Document and Block. Under Block, you can change the Font Size and Color of that block and that block alone.
You no longer have to edit the HTML and fiddle around with code to make the font smaller or a different color! It’s all easily done to one block in the side panel.
#3 Favorite Gutenberg Tip: Drag and Drop in Photos
With Gutenberg, you can drag and drop your photos right from your computer. You no longer need to upload it into Media and then put it into your post! It’s so fast!
You can drag and drop in photos from your Download bar at the bottom of your browser, your Downloads folder, your Desktop or really, anywhere from your computer.
Converting Old Blog Posts to the New WP Editor
If you’re updating old posts, you can edit them as is or convert them to WordPress Gutenberg blocks.
Why not convert them to blocks when it’s so easy to do?
It’s really simple to convert an old post into blocks. All you have to do is click the Three Dots in the top right corner under the Title, and click Convert to Blocks. Your existing paragraphs, images, galleries, etc. will be separated into its own block.
Voila- now you can edit your old blog posts just as intuitively as your new posts!
The Best Way to Learn How to Use Gutenberg WordPress Editor
By far the best way to learn how to use Gutenberg WordPress editor is to jump right in.
You will easily get a hang of it within a day or two, especially since you know the basic tips and how-to’s with how I use it.
You can do it!
Thanks for making it all the way down here. If you found this Gutenberg tutorial to be helpful, please consider Pinning it, or if you need personal help with blogging, join my free Facebook community!
xo, Sarah
related blogging posts
If you liked this WordPress Gutenberg review, you may like the latest posts we’ve written about blogging!
- Walmart Creator Program (What, Why, How + 3 Tips for Success)
- Ezoic vs. AdSense (Is Ezoic better than AdSense?)
- The Best Influencer Contract Template (Written by a Lawyer) + Tips to Protect Yourself
- How to Make a Website ADA Compliant (An Easy Guide for Bloggers)
- (Best Money Saving Way) How to Start a WordPress Blog on Bluehost in 2022
- How Do Bloggers Make Money (6 Best Ways)
- 8 Best Benefits of SEO for Small Businesses
PIN THIS WORDPRESS GUTENBERG TUTORIAL FOR LATER
