A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and get your free copy of WordPress blogging checklist 2019

WordPress Gutenberg Blocks

All About WordPress Gutenberg Blocks

As you may or may not have noticed, the new Gutenberg WordPress Editor is based on the concept of blocks, and that’s the single biggest innovation that came with the new WordPress version 5.0.

A lot of people are worried that this new, block-based concept of writing, editing and publishing posts and pages is going to make their WordPress comings and goings way more complicated.

Having dabbled around the new editor for a while, we have decided to show you that these WordPress Gutenberg blocks are nothing to be worried about. They are actually quite simple and fun to use, as you will soon find out for yourself.

Adding the Blocks

Since the new WordPress Gutenberg blocks are the building material for your pages and posts, naturally the first thing you want to learn is how to add them.

There are in fact, several ways to add a block:

Method 1:

You can use the little plus sign (+) in the toolbar at the upper left portion of the editor. Upon clicking on this sign, a choice of block categories will appear, starting from the most commonly used ones. There will also be a search bar available.

Introduction to Gutenberg

Method 2:

As you enter your post content in the workspace, you’ll notice that the plus sign will appear below, at the next available slot where you can add a new block. A dropdown menu with block types will appear, and there will be three common types of blocks to the right. Pick the block type you want to use and enter your content. Repeat this until your post is good to go.

basic wordpress

Method 3:

The third method is ideal for those of you who are keen on shortcuts. Each of you probably has certain block types that you use on the regular basis. Now, instead of searching for a specific block each type you want to use it, you can simply start typing the name of the block with the forward slash, for instance /image, /paragraph, /heading, and so on, and the suggested block type will appear.

In addition, the editor will not only offer the exact block type you’re looking for, but similar blocks as well, meaning you don’t even have to memorize all block names.

After a while, you’ll notice that this is actually the quickest and the easiest way of adding blocks in Gutenberg.

basic wordpress gutenberg

Block Options

As things have changed a bit around the editor, you’re probably wondering where to find your block options. It’s actually very easy – you will get your choice of options simply by clicking on the block you want to modify. The options appear both in the Tool Bar and in the Block Tab.

Unlike the Classic Editor, Gutenberg offers a much wider choice of options.

wordpress gutenberg

Also, don’t worry if you run your Gutenberg editor and notice that the block options aren’t located in the Toolbar but within the block itself. That’s perfectly fine, as Gutenberg has different options for different needs.

wordpress gutenberg block

Viewing Options

You can access all options regarding the block view and the workspace in general by clicking on the three vertical dots, under Show More Tools and Options.

If none of the options are checked, the view will be like in our image above – the options will be located within the block itself.

If the Top Toolbar is checked, the block options will be located, well, in the Toolbar.

By ticking the Spotlight Mode, you get to focus on just one block at a time. This is particularly convenient when you want to distinguish what exactly makes part of a particular block.

If you want a larger workspace, you can click on Fullscreen Mode to expand the workspace to the entire screen.

wordpress blocks

Reusable Blocks

Another super-useful feature of the Gutenberg editor is the Reusable Blocks option. If there are certain blocks that you use all the time, you definitely want to avoid setting the same values or looking for the code to copy each time you add a block.

With the new option Add to Reusable Blocks, you can save a block and simply pull it up when you want to use it again.

To set a reusable block, click on More Options>Add to Reusable Blocks.

gutenberg basic

Pick the name for your block:

gutenberg tutorials

The next time you need this exact block, either search for it by name or look for it in one of the dropdown menus, under Reusable Blocks.

Adding the blocks gutenberg

Reusable blocks are easily distinguished by a recycling icon next to them, as shown in the picture below.

wordpress blocks

Reusable blocks can be managed under Show more tools & options > Manage All Reusable Blocks.

wordpress gutenberg

This opens an overview of all reusable blocks created so far. We can also edit the blocks, but bear in mind that when you edit a reusable block, the content in all posts in which we have used it will change as well.

wordpress gutenberg block

Rearranging the Blocks on a Page

Rearranging the blocks and changing their sequence on a page or in a post is extremely simple. You can move any of the blocks using the drag and drop navigation, or it can change places with the block below or above it.

gutenberg block

Conclusion

We hope this article helped you understand the WordPress Gutenberg blocks a bit better. As you can see, the new concept of blocks allows for much easier customization of your posts, as well as some additional options that we didn’t have before.

With the brand new WordPress Gutenberg blocks, you’ll likely be much quicker in posting and editing your posts than before. This is precisely the kind of improvement that the developers of Gutenberg have hoped to achieve.

We hope that you found this article to be helpful. If you liked it, please feel free to check out some of these articles as well!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Leave a Reply