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.
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.
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.
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.
It’s used to insert quotes into your content. It comes with two simple fields, author and quote field.
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.
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.
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!
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 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.
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.
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.
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.
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.