Add new blocks and features to Gutenberg WordPress editor

Add the features you need to Gutenberg WordPress editor

Build a better website with WordPress Gutenberg editor blocks extensions

Whether you love or hate Gutenberg editor in WordPress, there is no escaping it. You may as well get used it. Add blocks and new features to extend it and make it a more useful post editor.

Although it is still possible to use the Classic post editor in WordPress using a plugin called Classic Editor, this will not be supported forever and it is only guaranteed to be supported until 2022.

Sooner or later you will probably be forced to switch to Gutenberg, so why put off the inevitable? It might be easier to make the switch now than later.

For straightforward WordPress posts, the old Classic Editor is fast and easy to use. However, Gutenberg editor has more features and some of them are very useful. It makes it easy to do some things that are impossible in Classic Editor without resorting to editing the HTML code.

One of the nice things about Gutenberg and probably the one feature that makes it worth switching if you have not already done so, despite the irritations it sometimes causes, is the ease with which it can be extended. By installing a blocks plugin for WordPress you can add a dozen or more new features to the Gutenberg post editor.

There are many blocks plugins for WordPress and some are general, while others are specific to a theme or page builder. Three caught my attention and are well worth checking out:

There is a lot of overlap of features between these three plugins and some features are in all of them. This does not mean that they are the same and each has a Call To Action (CTA) block, but the layout, style and color of each one is different. You may prefer the style of one CTA to another, which will affect your choice of plugin.

There are also features that are unique to each plugin, such as the Countdown in Ultimate Bocks. This shows the weeks, days, hours, minutes and seconds remaining until some specified time. It could be used to count down to the launch of a product, services, course, sale or special offer, and so on.

Content Timeline is a feature unique to Gutenberg Blocks and it enables you to create beautiful timelines which run vertically down the page with events appearing at certain points. It can show the development or history of something and it looks great.

Author Profile is a lovely block for anyone that has multiple authors on their website and it enables you to add a customisable and attractive author block at the end of a post. It contains a thumbnail image of the author, a brief bio and links to their social media accounts. It’s very nice.

There are so many great features in these Gutenberg block extensions that it is tempting to add them all. You could, but generally it is a good idea to keep plugins to a minimum for speed and security. Don’t get carried away and install dozens of them. You should compare the features of each one and see which has the most that you need, then install that.

Here I take a closer look at one of these Gutenberg post editor block extensions, Ultimate Blocks, and see how they work. I also looked at Ultimate Blocks Table of Contents Block in this article.

Find and install Gutenberg extensions

Add a WordPress plugin to add new features to Gutenberg editor
Search for ‘blocks’ for Gutenberg add-ons or extensions

Find extensions or add-ons for Gutenberg editor is straightforward. Select Plugins in the WordPress sidebar and click the Add New button at the top of the page. Type ‘blocks’ into the keyword box and many plugins are displayed. Click the Install Now button next to the one you want, I chose Ultimate Blocks, and then click Activate afterwards.

Where are the extensions? Open an existing post or create a new one. Click the plus button to insert a block. Find the Ultimate Blocks section and expand it by clicking the button on the top right corner.

Ultimate Blocks Gutenberg extensions for WordPress post editor
Insert Ultimate Blocks extensions in the usual way

To use a block, just click it. The block appears on the page in its default configuration. Select the block to edit it and use the sidebar on the right of the post editor to customise it. Most of the options are in the sidebar.

Show content on tabs

Ultimate Blocks tabbed content block for WordPress Gutenberg editor
Create content on tabs on the web page with this block

The Tabbed Content block enables you to show different information on tabs. The visitor clicks the tabs to select the content they want to see. There are many uses for tabs and it can be useful when you want to show multiple items without filling the page and making readers scroll up and down unnecessarily.

It could be used for product selection, highlighting different features, showing different views or information, top five lists, and so on.

The block is inserted from the blocks menu and it contains a tab. More tabs can be added by clicking the plus button. You simply add content like text and images to each tab in the usual way – add a heading block, paragraph block, an image block and so on.

When the block is selected, the usual text options are available, like font size, background and foreground colors.

Count down to launch

Ultimate Blocks countdown timer for WordPress Gutenberg editor
Create a countdown timer with this Gutenberg block

When you want to launch a product, service, special offer, or anything else, a Countdown Block is a great idea. It would be difficult to create yourself, but insert Countdown Block from the Blocks menu and you have a choice of three different styles in the block toolbar: Regular, circular and odometer.

When the Countdown Block is selected, the date and time can be set in the right-hand sidebar. There is nothing to it, but it is so useful.

Get more social shares

Ultimate Blocks Click to Tweet block for WordPress Gutenberg editor
Customise blocks using the settings in the sidebar

Inserting a Click to Tweet block in a post encourages readers to share the article on Twitter and social shares are a great way to reach a wider audience and promote your content.

Insert Click to Tweet and enter the text of the tweet. Bear in mind the limit Twitter places on tweets, so keep it short. In the sidebar on the right is a box to enter your Twitter username, a font size selector, and color scheme. It is simple, but effective.

There is also a Social Share Block with all the most common social shares buttons like Facebook, Pinterest, LinkedIn, Twitter, and others. You can choose from three sizes of share buttons, round or square shape, and which ones you want to show.

Show your progress

Ultimate Blocks progress indicator for WordPress Gutenberg editor
Show the reader’s progress through posts, courses, galleries and so on

You might want to show readers their progress through a slide show, a course, a multi-page article, and so on. The Progress Bar block shows either a line or circle with the percentage complete on it. The color, thickness and progress can be customised. It is up to you to work out what the progress should be, but it is a trivial calulation – 25%, 50%, 75%, 100% for a four-part course for example. It is simple, but effective.

There are many more blocks and there is a clever Ultimate Blocks demo at demo.ultimateblocks.com that shows what you see in WordPress. Other Gutenberg blocks add-ons have demos too.


Comment in the Forums Right pointing red arrow