The Gutenberg Block Editor: It's Time You Learn How To Use It

The Gutenberg Block Editor: It's Time You Learn How To Use It

In this tutorial, we are going to take a closer look at the all-new Gutenberg block editor introduced in the WordPress 5.0 release. Like we discussed in the introduction to the Gutenberg editor you can create just about any layout you can imagine with the Gutenberg block editor.

The entire creative experience has been upgraded and rebuilt to allow for a much more enjoyable editing experience. 

Gutenburg Posts

Let’s create a new post and take get our hands on these new tools. First, navigate to the posts page, and click add a new post.

Inside the Gutenberg block editor add a title for your post, the page should have a section at the very top of the page that says add title (see image above).

Next, you can either start typing some text in the empty block right underneath your title to create a new paragraph or use the add block buttons to add the block you need.

These buttons are conveniently in three locations. The first is in the upper left of the page, represented by an icon.

You can also find this icon directly left of the block (this is when you hit the enter button after a paragraph). And finally, in-between currently created blocks. This location allows you to simply add content before or after a block of your choice.

add  block section
Add block upper left
add block sections
Add block in-between content

Pro Tip: Depending on your version of WordPress, when you add a block in-between content, you can have an add block icon on the left or the right side of the block.

Finding the block you want

You can also just type a backslash ( / ) inside a block. This will allow you to view a list of common blocks.  

If you know the block you want to add, you can search for it here in the block (you must have the backslash present to search there).

The next location to search is at the top of the page. Once you press the add block button, you can search for the block you want to add here.

Pro Tip: In this searching area you can hover over the blocks and get a brief description of what they do.

Hover over a block to learn more about it

Most used blocks

Below the search field is a list of the most used blocks. This changes depending on how you use the editor, it will be different for everyone. 

You can collapse this section to reveal all the other blocks inside the Gutenberg block editor. They are categorized into individual sections. This makes it easy to find what you’re looking for based on the functionality of the block.

You have your common blocks section, which includes paragraphs, images, quotes and more. This offers you the most commonly used blocks for creating pages and posts.  And is a great place to visit when your not sure what blocks to start with. 

Block type sections
most common blocks
Where to view most common blocks

Formatting blocks

The next section is the formatting blocks, these include custom HTML, pull-quotes, tables verses. Later in another tutorial, we will go in-depth on how to use each of these formatting blocks. 

Another section is for layout elements, what is a layout element? These are blocks that will allow you to customize how your page or post looks. How many columns should this section have? Do you want an image with some text directly next to it? You have the freedom to decide with ease. Creating a navigation bar has never been so easy. No code needed. 

layout blocks
Layout blocks

Add Widgets directly to your post or page. Use the embed blocks to add content from a large number of sources. Youtube, Facebook, Instagram and so much more.

We are just scratching the surface here 

Cutting and pasting content

The new Gutenberg block editor allows you to cut and paste the text content into the editor. You will notice that it automatically separates the post into separate paragraphs. You can tell by the indicator when you hover over each paragraph. 

Cut and paste text content will reveal the paragraph tag

The same goes for any other content you copy paste, it works on images too.

camera with image tag

Clicking on a block reveals buttons on the left-hand side that allows you to move the block up or down the page. Also, you have the option to drag and drop the blocks into a different order.

Now notice the toolbar at the top of the block, this block will change depending on the type of block we are editing. In the paragraph, it reveals the usual formatting options you’re used too when writing a paragraph or a sentence.

Block Toolbar and positioning button

At the very left of the toolbar, you have the change block type or style button. Here you can change one block into another block. An example would be turning a paragraph into a quote instead. 

more options block button

The Blocks Settings Tray 

Just down on the other side of the toolbar, you have the more options button (see image above). This button is identified by the 3 vertical dots it presents. 

This area is what becomes available by pushing the more options button on a blocks toolbar. The options available in the block settings tray will change depending on the block we are editing. 

More Options

In the more options tab, you can hide or show the block settings.  Insert a block before or after another block. Duplicate a block, edit as HTML or if you customized a block you may want to add it to a list of reusable blocks. Lastly, you can delete the block. 

Pro tip: There are keyboard functions inside the more options button that will allow you to work even more quickly with a little bit of practice

more options shortcut keys of toolbar from the gutenberg block editor
More options button and shortcut hot keys
preview and publish buttons of gutenberg block editor

The settings button on the upper right of the screen represented by the cogwheel will also hide and show the block options. This shows options for the document and the block your editing.

Settings For The Gutenberg block Editor 

Click on the button in the upper right-hand corner of the screen represented by 3 dots (the button next to the cog settings icon). This button will reveal some of the most important settings for the Gutenberg editor. 

The first option (top toolbar) in this settings section allows you to access all of the block and document tools in a single place. Selecting this option will remove the block toolbar from the top of the block and put it at the very top of the page and keep it there. 

editor settings for the gutenberg block editor
Editor toolbar

Next is spotlight mode. This highlights the block your working on. Makes all the other block grayed out allowing you to focus clearly on the one block you are customizing. 

Full-screen mode hides the toolbar at the top of the page and the main admin navigation. So you are less distracted and can focus on just your content. 

Editor settings allow you to switch between the visual editor or the code editor. If you need to see the raw code that WordPress is using to create and identify these blocks this is how you’d do it. 

The Tools section allows you to manage any of the reusable blocks you created. You can view a very helpful list of keyboard shortcuts. Take look at the Gutenberg welcome guide.

Something really cool in the Gutenberg block editor is the ability to copy all of the content from the page you made. This is can be extremely helpful, especially if you create a complex layout. 

Options within Options

tools options pop up of the gutenberg block editor
Tools option categories

Last but not least, you have the selection of an option under tools. Very importantly this allows you to set up an automated test that checks for errors before you publish your content.  You can also enable tips that offer helpful hints around the Gutenberg editor. 

You can also hide any document settings panels that you might not need or plan to use very often. And you can make use of advanced panels like custom fields if your site makes use of them. 

Gutenburg Navigation Toolbar

Block Navigation Button

Sometimes you might create a long page or post. And it can have lots of different types of blocks and can become difficult to find a specific block you want to edit.

block navigation button of gutenberg block editor

Fortunately, there is a block navigation button that helps with that. It is at the top of your page, and it will show you an outline view of all the blocks used on your page. 

This allows you to jump right to a particular block and make changes efficiently. 

Tools

Options for this are self-explanatory, so this will be brief, one option is to have the block in edit mode, and the other is a select tool which defines for you the block you selected.

Content Structure Button

This button is directly to the left of the block navigation button. This feature shows you how many words, headings, paragraphs, and blocks currently being used on your page or post.

gutenberg block editor content structure button

Redo and Undo

These are your typical undo and redo buttons, that allow you to remove something that you did earlier, or consequently re-add if you decide you wanted to keep a change you removed. 

Saving your content

Once your done creating your content, you can save it as a draft or preview what it will look like to your visitors on your website. Finally, when you are happy with your content you can click on the publish button. Sending it out for the world to enjoy.

save as draft button for gutenberg block editor

Finishing up

Now, you’re probably itching to begin to create some new content now that you are familiar with the new editor. That’s how we felt too! strike while this information is still fresh.

The best thing to do is to dive in and start creating. In future tutorials, we will show you how to build custom layouts and even more compelling content. Be prepared to harness the power of this excellent block editor

We hope this tutorial helped you understand the Gutenberg block editor. If you have any questions please comment below, and if you’re thirsty for more beginner content, head over to our YouTube channel. There we offer exclusive in-depth WordPress tutorials for beginners.

Until next time,

WP {with} Me

Share me with friends

Rockey Simmons

Writing about software and technology is my passion. When I am not writing, I am building responsive webpages, learning about marketing, or reading about business. As a Saas and technology copywriter, my obsession is to continue learning my craft and offering unique and useful content to businesses, entrepreneurs, and WordPress beginners.

Back to top