Last Updated on July 14, 2021
Are you new to WordPress? Maybe, you’re already familiar with the classic WordPress editor or other Page Builders?
At any rate, if you’re not comfortable with Gutenberg yet, now is a great time to warm up.
As you might know, Gutenberg is the new editor that’s a native part of the WordPress platform. The editor allows you to manage content blocks intuitively so you can design great-looking pages (including blog posts!) for your site.
Not sure where or how to start? Don’t worry; we’ll walk you through some of the first things you have to do in order to get up to speed.
Activating Gutenberg
First, let’s make sure that the Gutenberg Editor is up and running.
If you’re on the latest (or a recent) version of WordPress, it’s likely that you already have Gutenberg and it’s activated.
To verify this, you can check your WordPress version.
Now, it’s not enough that you have Gutenberg installed. There’s a chance you might have disabled Gutenberg by enabling the Classic Editor plugin. If so, make sure to deactivate that one.
If you’ve been using the Classic Editor for quite some time, you may have opted to disable Gutenberg to avoid disrupting your current workflow.
Now’s a good time to jump in and try switching to the Gutenberg Editor.
You’d be surprised how this will improve how you build your website.
Anxious? Okay, let’s start with these simple exercises to get you familiar with it.
Trying Gutenberg With a Simple Blog Post
Now that you have Gutenberg all set, we suggest starting with a low-pressure project by working on a blog post.
It’s likely that you publish new blog articles much more often than landing pages. A typical blog post is mostly composed of body text, headings, images, and lists. You can easily maneuver and test out the blocks without worrying about messing up the page.
To simplify your first Gutenberg experience, attempt to produce a typical blog post design.
You know how a blog post should look like. Try to design a post like that but using Gutenberg this time.
Take note of any changes to your workflow.
As we go through this guide, keep working on adding and modifying existing content blocks until you get the hang of it.
Getting Familiar With Blocks
What are ‘blocks’ anyway?
To simplify, every element on a Gutenberg page is a block. Words, pictures, and everything in between.
Gutenberg blocks are pieces that will allow you to easily modify styles with the latest WordPress version.
This editor offers a wide variety of blocks, which you can see by clicking on the ‘plus’ icon in the top-left corner of the page.
This includes your regular Paragraph Text, Headings, Lists, Quotes, Tables, and much more.
With these, you can replicate what you’d normally design using the Classic Editor.
Don’t currently have access to a WordPress site with Gutenberg? Check out this Live Demo.
After adding some content, things are just going to get better with Gutenberg.
Each block will be easy to rearrange and customize, making it easy for you to sort them into your preferred layout for a better-looking page.
As you go through this guide, you’ll learn more about customizing these blocks.
Adding the Most Basic Blocks
Once you have familiarized yourself with the kinds of blocks you can use, let’s go back to our exercise of creating a blog post.
By default, if you start typing, you’ll be adding Paragraph Text.
To make one tiny step further, try to add a heading.
After that, you may test what it’s like to add images.
Modifying Paragraphs (or Any Other Block)
After adding a few blocks, you may want to make some layout changes and finishing touches.
For instance, you’d edit a blog post to rearrange the sequence of ideas. Maybe, you’d later design landing pages that need some layout adjustments.
Since the Gutenberg editor is flexible, you can easily modify your page’s layout with just a few clicks.
After selecting a block, you will see a variety of options.
To keep it simple, let’s focus on the up and down arrows. Unsurprisingly, they allow you to move your block up and down.
Try playing with the menu of options. As you can see, you can change the content’s formatting settings like alignment, italicizing your text, and more.
The three dots on the far right will show more options including deleting the block.
Getting More Blocks
Are you tempted to do more with Gutenberg?
If you aren’t familiar yet, there’s a massive library of plugins for the block-based editor.
Let’s say that you’d like to get more blocks. You can install the free Stackable plugin.
After doing so, you will have a longer list of blocks.
Stackable blocks are the more colorful ones in the list. You can identify the native blocks through their plain black icon appearance.
The purpose of getting third-party blocks is to get more designs and advanced customization options.
For instance, with Stackable’s Advanced Heading block, you’ll get far more customization settings. You’ll be able to add subtitles, advanced text decorations, flexible color settings, and more.
As you dig deeper, you’ll quickly discover that you can do much more with such block-enabled plugins.
Getting Comfortable With the “/” Command
Once you get a little comfortable with blocks, you can be more efficient in adding them in the Gutenberg editor, with the simple use of the “/” command.
The trick here is to remember the names of your frequently used blocks.
For instance, you can type “/im”, which will automatically suggest the Image block. So, you can simply hit the Enter key to start adding an image.
To warm up, list and remember the names of three to five go-to blocks that you’ll regularly use. Get accustomed to adding them using this command.
As you get used to “/” shortcut, you’ll find yourself using the mouse a little less frequently.
If you want to continue getting to know Gutenberg, you may want to check out our Gutenberg WordPress Editor Tips and Tricks article.
Over to You
For you to appreciate Gutenberg, we suggest to continually play around with the blocks and feel how it all works. Habitually do this for your blog posts.
Later, attempt to design more advanced landing pages. You’d be surprised to see what Gutenberg can do.
Hopefully, you now have access to the block-based editor. If not, see this live demo so you can play with it without signing in.
Looking to learn more about Gutenberg? Join our community here!
Thanks! This is great. I will put it in the on-boarding resources for my team.
That sounds awesome! Hope your team finds this useful as well ☺️