Header background

WordPress 5.7, Gutenberg And Table of Contents Block

This article is all about WordPress 5.7, Gutenberg, and Table of Contents block! And if you get lost while searching for exceptional WordPress hosting, just click the link, and we’ll get you back on track!

We welcomed the first big WordPress release of 2021 a few weeks ago, just a day after sending our heartfelt congratulations to all the powerful women and girls around the world. And, just as a special treat for March 8, this edition happily surprised us with a range of new features. In the following section, we’ll go through all of the significant improvements that this new release gives us. After that, we’ll turn our attention to Gutenberg and its ToC.

WordPress 5.7 “Esperanza”

As I said, It’s the first major WP release for 2021. This WordPress edition was named after the legendary musician artist Esperanza Emily Spalding. JFYI, she has created a whole album in just 77 hours straight! How amazing is that? So, I encourage you to play her album “EXPOSURE” while reading this article! 🎶

WordPress 5.7 editor is designed to be user-friendly in any way. You can now edit various areas without getting into the code. If you love this idea, keep reading and discover some great new opportunities. 🆕

Drag & Drop on WordPress 5.7

➡️ The best part in my opinion is that you can now use Drag & Drop. Simply click the + button to add any block element to your page, then drag and drop it wherever you want. It’s easy peasy lemon squeezy! You can see how to do this in the video above.

➡️ Font Sizing can be adjusted for a broader range of places. You can now easily change the font-size of your Lists and Code Blocks 🔠 🔡

➡️ Enhanced Reusable Blocks. Just created a new block that excites you and would like to use it again in another post? Don’t worry (as you may already know) you can save and re-use blocks or groups of blocks with WordPress. But now they are more stable, improved and easier to use.

➡️ Full-height Cover Block. You can make a block covering the entire window! And regardless if it’s a background image, color, or gradient, you can add any text on top of it. 

➡️ Editable Button Blocks. You can now choose between two layouts for your buttons 🚥 Horizontal or 🚦Vertical. Plus, you can additionally set the width of your buttons to a percentage.

➡️ Customizable Social Icons Block. If you use Facebook, Twitter, or another social media platform for your company, you may want to include a social icon block in your pages. Furthermore, with WordPress 5.7 you can easily adjust the size of your icons.

➡️ A simpler Color Palette. But let’s be clear, simpler does not mean worse. All of the WordPress source code colors have been reduced to seven core colors, each with a variety of 56 shades. Also, this version offers a wider selection of lighter and darker color schemes. 🎨

WordPress 5.7 Color Palette
WordPress 5.7 Color Palette

➡️ HTTP ⏭️ HTTPS. It has never been easier to switch from HTTP to HTTPS; all it takes is a single click of a button. Which you have to click. Now! You no longer have any excuses.

➡️ New Robots API. You can now control the robot meta tag on your web pages. Furthermore, search engines can boost your traffic by showing larger image previews.

➡️ Lazy-loading iFrames. You should think about speeding up your website. Thus, WordPress 5.7 allows you to use lazy-loading for your iFrames to boost your site’s performance.

➡️ jQuery 3.5.1. jQuery makes it easier to use JavaScript on a website. So, with the latest version of WordPress comes the latest version of jQuery and brings many improvements.
Meanwhile, if you want to discover more about the other features that “Esperanza” brings, please check this WordPress 5.7 Field Guide.

And now, let’s dive into Gutenberg! 🤿

Gutenberg Table of Contents

I’m sure you’ve all heard of Gutenberg, the well-known WordPress block editor. It has over 21M total downloads and over 300K active installations. But if you want to download and use it, your WP version should be 5.3 or higher, and your PHP version should not be less than 5.6. And I have some great news; you can use Gutenberg if you’re using Esperanza.

This editor recently added a table of contents (ToC) block. This is something that you should use in your posts, especially if you have long-content posts. It’s user-friendly and can help visitors find and go to what they’re searching for in a click. Also, it gives an overview of the content.

You can include a ToC anywhere in your article, but the best place to put it is at the top of the page. Based on the headings on your post, the block will generate a Table of Contents itself. However, if you don’t have any content in your post and add a ToC block, it will be empty (as shown in the picture below). Therefore, only after you start adding Heading blocks to your content, only then they’ll be linked to your Table of Contents block.

Gutenberg Table of Contents - Without Heading Blocks
Gutenberg Table of Contents Block

By default, this block’s title is “Table of Contents” but you can change it to whatever you want. Moreover, you can choose which heading levels you want to show or hide from your ToC (from H1 to H6), and you can customize the list styling. Your headings and subheadings will be adequately nested and presented in a hierarchical order based on your content.

And that’s it! You now know how to add a Table of Contents to your posts. 😉

ℹ️ p.s. Don’t forget to update your WordPress to 5.7!