Become a Gutenberg master – part 2

In the previous blog post, we went through the basics of Gutenberg. We learned how to manipulate blocks and how to use the most common blocks. However, Gutenberg has much more to offer.

In this second part, we will go through the more advanced blocks. Once you get hold of this knowledge, you will be able to build your pages and posts without using any advanced page builders or coding skills.

Become a Gutenberg master - part 2

Formatting blocks

Table block

This block is used to insert tables into your content. In the block toolbar, you will see the common table options, such as text alignment within cells, delete or add rows and columns. You can also change styles and colors for the table.

Code block

It is used for adding snippets of code. It’s important to know that the code you enter here is not going to be executed. It’s just for demonstration purposes. It comes handy when you want to show how to do something with code to your readers.

WordPress Gutenberg Code Block
WordPress Gutenberg code block. How it looks in the admin area – on the left – and in the front end of the page – on the right

Custom HTML block

If you need to build your own block and you feel comfortable with HTML, Custom HTML block is your best friend. It comes with a preview tab so you can get a feel of how your code will display on your page as you’re working on it.

Important note! As with any other block, the appearance in the admin area might be different than the actual look on the page, as it does not take into account the styles of the front-end – what visitors see – of your theme.

Pullquote block

It’s used to insert quotes into your content. It comes with two simple fields, author and quote field.

Classic block

This is a classic WordPress editor block. If you are used to the old editor, and you need a little bit more time to get used to the new blocks, using it will make the transition easier. It’s got most of the old editor functionalities.

Layout elements

These type of blocks are used to layout content on the page. Some of them offer classic functionalities, such as page break and read more line, which we’re familiar with already. We are not going to cover these here, as I would rather like to focus on the new awesome features.

Button

In my opinion, this is one of the best Gutenberg features. It lets you add a call to action button to your content easily. You can customize it to make it look the way you want it, by changing its type and shape (outlined, round or square), edit the text or add a link to it. In the block settings view, you can also change the color of the background and text. You can also align the button to the left, right or center. As you can see, adding your own buttons is now super easy!

WordPress Gutenberg Button Block
WordPress Gutenberg button block. How it looks in the admin area – on the left – and in the front end of the page – on the right

Spacer and separator

These are used to split your content into sections. This way it will be easier to read and more visually appealing. The spacer block adds white space between two blocks, whereas the separator adds a line between two blocks.

Columns

Columns are one of the most exciting things about Gutenberg. By using them, you will be able to split your content into columns and build complex layouts.

Widgets

Shortcodes

Yes, you can now add your shortcodes to a block. So if you are using any plugins that use shortcodes, now you can easily place this code anywhere on the content page.

Archives, latest posts, categories and latest comments

We are all familiar with the good old widgets. They have the same options and functionalities as before, but they can now be placed within page/post content, not just sidebars.

Embed blocks

That’s another cool feature of Gutenberg. These blocks help you embed posts and media from all popular social media platforms. It’s really easy. All you need to do is add the relevant embed block, paste the embed link into the URL field and that’s it! And there’s a large variety of embed blocks to pick from, such as Youtube, Facebook, Twitter, Instagram, Reddit, Dailymotion, Meetup and much more.

WordPress Gutenberg How to Embed a Tweet
WordPress Gutenberg embed block. How it looks in the admin area – on the left – and in the front end of the page – on the right

How to extend block functionalities

The fun of Gutenberg doesn’t end here. The main idea behind improving Gutenberg is to expand the variety of blocks and improve their functionalities. Gutenberg is a page builder included in the WordPress core, and improving its functionalities means that there will be more options at your fingertips to make your pages and posts look really awesome.

Plugins like Advanced Gutenberg Blocks and Advanced Gutenberg already let you do that. They will extend the range of blocks at your disposal, so you can display WooCommerce products or “Add to Cart” buttons, ad banners, testimonials, google maps, accordions, tabs, etc.

Or even better … make your own blocks

As I have mentioned in one of the previous posts, you can make your own blocks and save them for later use. If you keep on using the same content over and over again, this can be a huge time saver.

Conclusion

Give yourself a tap on the shoulder. You should know everything you need to be comfortable with Gutenberg. But to truly become a Gutenberg master, you will need practice. Just play around with blocks to discover all of the awesome features of Gutenberg. I am sure you’ll grow to love it, just as I did!

Do you feel comfortable with the new Gutenberg editor? What did you find hardest to learn or get used to? Drop us a line below.

Comments (1)

  1. Julie says:

    Very helpful as usual! I need to update and learn Gutenberg asap.

Leave a Reply

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