Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. WordPress Gutenberg
Webdesign

WordPress Gutenberg Editor: Quick Start Tutorial

by
Difficulty:BeginnerLength:ShortLanguages:

In this tutorial I’m going to give you a quick start for working with the WordPress Gutenberg editor.

WordPress Gutenberg 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 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 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 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 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 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 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:

settings

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 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 navigator

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

3. Common Gutenberg Problems

Now that we have a solid idea of the basic concepts for using Gutenberg, let’s now explore 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 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.

Conclusion

That just about wraps up our quick introduction to the Gutenberg editor in WordPress, thank you for watching and I’ll see you in the next one!

More Gutenberg on Tuts+

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.