In the previous blog post, we went through the basics of Gutenberg. We learned how to use the most common blocks and how to manipulate them. In this second part, we will take it a step further and learn the more advanced ones. 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.
Formatting blocks
Table block
As the name suggests, we use this block to create tables in Gutenberg. In the block toolbar, you will find the common table settings, such as text alignment within cells, delete or add rows/columns. In the block sidebar, you’ll find additional styling settings for changing the background color of the rows/columns/cells and showing the header and footer of the table. With little effort, you can create a beautiful table.
Code block
The code block becomes very useful when you need to add snippets of code to show to your readers. It’s important to understand that the code you write here won’t execute. It’s for demonstration purposes only.
Custom HTML block
If you need to build your own custom block and you feel comfortable with HTML, the Custom HTML block is your best friend. It comes with a preview tab so you can get a feel of how your code will show on your page as you’re working on it.
Important note! As with any other block, the appearance in the admin area might be slightly 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.
Quote block
The simplest way to add a quote in Gutenberg is by using the Quote block. It comes with two separate fields for quote and citation. There are two default styling options to choose from, but it may vary depending on the theme you’re using.
Classic block
If you are used to the old editor, and you need a little longer to get used to the new blocks, the Classic block should make the transition easier. It’s got most of the old editor functionalities and a user interface reminding of the old one.
Layout elements
This group of blocks is used to layout content on the page. Some of these layout functionalities, such as page break and read more line, should already be familiar to you. We are not going to cover these here, as I would rather focus on the new and exciting features.
Button
In my opinion, this is one of the best Gutenberg features. It lets you add a simple call to action button to your content easier than ever before. You can customize the button to make it look the way you want it, by changing its type (outline or fill), making it round by controlling the border-radius, editing the text, or adding a link to it. In the block settings sidebar, you can change the color of the background and text. You can also change the alignment of the button to the left, right, or center.
Spacer and separator
You can use these blocks to split your content into sections to make it easier to read and more pleasant to the eye. The spacer block will let you add white space between two content blocks, whereas the separator block creates separation by using visual elements, such as lines or dots.
Columns
Another great feature brought by Gutenberg is the Columns block. This block lets you easily split your content into columns to build complex layouts. Best of all, the columns are already responsive for mobile, so you won’t need to stress about that.
To add a column block, choose from one of the suggested layout options first. Next, you can fine-tune the width of the columns to meet your exact requirements. Finally, you can add any blocks to each column and fill them with content.
Widgets
Shortcodes
When you need to place a shortcode generated by a plugin or theme to your post content, this is the block you’ll want to use. All you need to do is to add the block first and then paste the shortcode into the field and hit update.
Archives, latest posts, categories and latest comments
We are all familiar with the good old widgets. As with anything else in Gutenberg, they are now available as blocks too. They offer the same features as before, but can now be placed anywhere in the page/post content, not just in sidebars.
Embed blocks
Embedding content to your website is incredibly simple with the new editor. Gutenberg comes with a variety of blocks designed to help you embed any kind of posts or media from all popular social media platforms, such as Youtube, Facebook, Twitter, Instagram, Reddit, Dailymotion, Meetup, and much more.
To embed content from social media, just choose from one of the relevant embed blocks, add it to your post/page, paste the embed link into the URL field, hit the embed button, and that’s it!
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 truly amazing.
Plugins like 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 our previous posts, you can create your own custom 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 lots of practice. Just play around with blocks to discover all the features and unlock the full power of Gutenberg. I am sure you’ll grow to love it, just as I did!
Do you already feel comfortable with the new Gutenberg editor? What did you find the hardest to get your head around? Drop us a line below.
