Become a Gutenberg master – part 1

The WordPress 5.0 release is out, so now’s the time to conquer the Gutenberg editor. The goal of this article is to give you a solid foundation on how to take advantage of the power of Gutenberg and take the first step to become a Gutenberg master.

This is the first part of a two-part Gutenberg series. It will teach you the nuts and bolts of the Gutenberg editor, how to configure it, how to manipulate blocks and when to use them. So let’s dive right into it.

Become a Gutenberg master - part 1

If you are not familiar with the core concepts behind the Gutenberg editor, please read our previous blog post first.

Gutenberg workspace configuration

Gutenberg offers a clean, minimal, distraction-free content editor that can be modified to help you make writing content easier.

Guttenberg editor has the block and document settings open in the right sidebar by default. It’s handy to have these settings open, but sometimes you might need a little bit of extra space and a wider workspace. You can easily achieve that by clicking the gear icon in the top right corner. You can toggle it back by clicking the gear icon again. An even better way to get a distraction-free and wider workspace is to click on “Show more tools & options” icon – three vertical dots – in the top right corner of the editor view and check the fullscreen mode.

Configure your WordPress Gutenberg editor 1.
Configure your WordPress Gutenberg editor. Hide the sidebar to extend your workspace.

If you need to switch from the visual to the code editor, you can still do it. Click on the more tools icon in the top right corner of the editor view and select the “Code Editor” option from the menu.

Configure your WordPress Gutenberg editor 2.
Switch to the code editor.

Another useful setting in this menu is the “Top Toolbar” option that allows you to position the block’s options toolbar to the top of the content editor view instead of the top of the block. It’s not my favorite choice, but it may work for some people. I also recommend you to take a look at the whole list of the keyboards shortcuts that will help you speed up the process of writing content.

Block manipulation 101

If you’ve been using WordPress for some time, you surely know how difficult it is to adjust the layout of your content within the current editor. Well, not anymore. Gutenberg breaks down pages and posts into smaller, more manageable blocks of content that make formatting and adjusting layouts much easier and much more intuitive.

How to add new blocks

Adding blocks in Gutenberg can be done in many ways. The straightforward is by hitting the plus icon in the top left corner of the editor view and selecting one of the blocks. This way a new block will be added to the bottom of your content. Once you select a certain block, you will see the more options icon appear on the right of the block toolbar. Click on the button and you will see a menu appear with the insert after and insert before commands.

When you hover over the top edge of the block, you will again see the plus icon, which will this time add a block before the current one. You can also do it with your keyboard. Just hit enter and a new block will be added below the current block. However, you will still need to click on the plus icon to select a specific block.

How to add new blocks in WordPress Gutenberg
Add a new block before or after the current one.

How to remove and duplicate blocks

You can remove blocks by selecting the “Remove Block” option from the more options menu. You can also use the keyboard shortcut is Shift + Alt + Z. To duplicate a block, first select the block you want duplicated, go to the more options menu and click on duplicate. Or you can simply use the keyboard shortcut Ctrl + Shift + D.

How to change the order of blocks

Moving blocks up and down is a piece of cake in Gutenberg. When you hover over the block you want to move, you will see up and down arrows appear in the top left side of the block view. By clicking the up arrow, you will move the current block up, above the previous block, by clicking the down arrow you will do just the opposite.

Change the order of blocks in the WordPress Gutenberg editor.
Change the order of blocks by using up and down arrows.

Most common blocks

Paragraph block

Paragraph block is a simple text block where you can add all your paragraph text. You can change the text font size, color, and background in the block settings view. You can also align text, make it bold or italic, just as you would in the previous WP editor.

Heading block

This one is pretty self-explanatory. It’s used to place headings on your page. In the block settings, you can change the text alignment and heading level.

List block

This block is used for writing lists, either numbered or bulleted.

Image block

It’s a basic image block where you can add an uploaded image or one from the media library. You will only be able to add one image per line. In the block settings view, you will be able to edit the alt title, change the size or add links. And you don’t need to open any additional windows to change these settings anymore! They are now available right here in the content editor.

Add an image block in WordPress Gutenberg
Add an image block in Gutenberg.

Media & Text block

This block allows you to place an image on the left or right side of the text.

Gallery block

A block with which you add a WordPress gallery. Once you insert your images, you will be able to change the number of columns in the block settings.

Cover image block

This is probably the most exciting novelty of the image blocks. They are used to place cover images – images that take full width of the page – with text in your content. The cool thing about them is you can change their overlay color and background opacity to make the text stand out more. The background can also be fixed, to achieve a simple parallax effect.

Video, audio and file blocks

These blocks make it super easy to upload videos, audio or any files available for users to download. You can add these files from the media library, upload or drag them from your computer, or enter a URL of the location where the file is stored.

Important note! If you want to embed youtube videos or any other social media content, it’s better to use embed blocks. You can find out more about them in the second part of this WordPress Gutenberg series.

Conclusion

So now we’ve taken the first step towards becoming a Gutenberg master. We should now be able to navigate the WordPress Gutenberg editor with ease and be familiar with the commonly used blocks. On our further journey, we will take a look at the more advanced blocks. Be sure to follow our blog in the next weeks, so you don’t miss it!

Are you just as excited as we are about Gutenberg? What blocks did you find the most useful? Let us know by leaving a comment below.

Leave a Reply

Your email address will not be published. Required fields are marked *