1. Web Design
  2. WordPress Gutenberg

WordPress Gutenberg Editor: Quick Start Tutorial

Scroll to top
Read Time: 6 min

In this Gutenberg tutorial I’ll give you a quick start for working with WordPress’ very own visual editor.

WordPress Gutenberg Tutorial Quick Start

Let’s run through the points made in the video:

1. First Step: Update Everything!

Before you even look at the Gutenberg editor, before you do anything else, you’ll want to make sure you have a backup, then update everything on your WordPress website. Update whichever theme you’re using, and update all of your plugins. 

Many theme and plugin developers have made changes to their software to make sure it’s all compatible with Gutenberg. In some cases they’ve even added new features which take advantage of what Gutenberg offers. 

Take a look at the Gutenberg optimized themes on Themeforest to see what’s available.

Gutenberg optimized themes on ThemeforestGutenberg optimized themes on ThemeforestGutenberg optimized themes on Themeforest
Gutenberg optimized themes on Themeforest

2. Introducing the Blocks Editor

The core of how Gutenberg works is in something called “blocks”, and you can break down how we work with blocks into three essential concepts:

  • Insert your blocks
  • Configure your blocks
  • Sort your blocks

Let’s take a closer look at each of these concepts.

Insert Your Blocks

After you’ve created a new post or page and you’ve added your title (by the way, that title is separate to the blocks you’ll be adding) you’re ready to start inserting blocks into your content. Gutenberg offers a few ways to add blocks.

There’ll be a block at the top of the post by default, into which you can add text. Hitting Enter then creates a new block:

new gutenberg blocknew gutenberg blocknew gutenberg block

You can also hit the + sign to the top left of the page, in order to insert a block of a different kind:

Different new blockDifferent new blockDifferent new block

Additionally, you can hover over an existing block and hit the + sign in the middle of the border to add another block:

another new blockanother new blockanother new block

And lastly, you can hit the context menu in the block editor to reveal a set of options, amongst which are the Insert Block options (note the keyboard short cuts too):

insert block before or afterinsert block before or afterinsert block before or after

Now let’s talk about configuration.

Configure Your Blocks

The most important part of block configuration is in deciding which type of block you want to use. Blocks are designed to be sort of like Lego, where you have different types of block for each purpose, then you assemble them at the end to create what you’re looking for. 

You have available all kinds of blocks (seen in the previous screenshots); paragraph blocks for content, heading blocks, lists, images, layout controls, buttons, the list goes on. The most commonly used blocks are made available as quick change buttons on the block editor itself, just in case you want to switch to another block type:

quick block type changequick block type changequick block type change

It’s even possible to change the block type once you’ve added content, though it won’t be possible to switch between all types. Not all blocks are interchangeable; you can’t change an image into a heading, for example.

Tip: start a new block and then hit /. This will give you a quick popup of all the different block types you can change to.

Block-Specific Settings

Every block has settings in two places. Each one has its own toolbar, the options on which differ depending on the block type, and it’s possible to display this toolbar in a different place by altering the settings found under the top-right button on your screen:


Choosing Top Toolbar here will make sure that the toolbar is always present at the top of the screen.

Sort Your Blocks

Let’s now look at the third crucial aspect of working with Gutenberg: sorting blocks. As we’ve covered, blocks are stacked up to assemble an overall layout. If you want to move any of your blocks, you can do so in a couple of ways. To begin with, by hovering over a block you’ll see Move up and Move down buttons to the left:

move blockmove blockmove block

The button between the up and down buttons can be grabbed and dragged.

Clicking within a block and dragging will allow you to select multiple blocks. Select as many as you need, then use the Move up and Move down buttons just as before.

In some circumstances it might be difficult to select the precise block you’re looking to move (multi-column blocks are an example of this). In cases like these the Block Navigator comes into play. Click this menu icon:

block navigatorblock navigatorblock navigator

..and you’ll be able to select the exact block you need to move.

3. Common Gutenberg Problems

You should now have a solid idea of the basic concepts for using Gutenberg. But this wouldn’t be a decent WordPress Gutenberg tutorial without exploring some of the common problems people run into.

“The Editing Space is Too Narrow”

A lot of people find the editing space made available by Gutenberg too narrow. You can solve this problem by installing the Editor Full Width Gutenberg plugin. Once activated, it will remove all width constraints from the editor.

“I Can’t Make Text Wrap Around Images”

If you have an image block, and a paragraph block, it’s possible to make the text wrap around the image. Firstly, select the image, then set it to Align Left or Align Right. The paragraph block which was below the image will then move to fill up the available space. You can also drag the image, using the available handles, to alter its width.

“How Can I Justify Text?”

Another common complaint that I’ve seen is the lack of text justify in Gutenberg. Unfortunately that is the case (at the moment) for paragraph blocks, however if you choose a classic block, it is possible. The classic block gives you a mini version of the old editor inside your post:

classic blockclassic blockclassic block

Whilst the classic editor doesn’t have a justify button as such, the shortcut Shift + Alt + J will work just fine.

“How do I Get Multiple Paragraphs Inside a Single Block?”

The classic editor also helps out with another issue, and that is containing multiple paragraphs within a single block. In the classic block, when you hit Enter you don’t create a new block, you create a new paragraph within the same block.

“How do I Insert HTML Into a Gutenberg Block?”

It’s possible to edit the whole post as raw HTML, but many people prefer the ability to add HTML to select blocks within the layout. Do this by clicking into the block in question, hitting the context menu to the right of the toolbar, and selecting Edit as HTML. Simple as that! 

Bear in mind that Gutenberg runs validation for its blocks, so anything which you insert as raw HTML which WordPress doesn’t consider a valid part of that block will be stripped.

Take WordPress Gutenberg to the Next Level

That just about wraps up our quick introductory tutorial for the Gutenberg editor in WordPress. Thank you for watching, read on for more Gutenberg tutorials and resources, and I’ll see you in the next one!

Learn WordPress in More Depth

If you want to learn more about WordPress, check out our comprehensive, two-hour WordPress tutorial with Adi Purdila. Learn to create pages and posts with WordPress Gutenberg, work with themes and plugins, and much more.

This free course is a perfect way for WordPress beginners to learn everything they need to know to create well-designed, fully functional websites in no time. Watch the quick video intro to discover what it's about.

More Gutenberg Tutorials and Resources on Tuts+

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.