Supercharge the WordPress Gutenberg Editor with Custom Blocks

In a default installation, the WordPress Gutenberg editor contains a number of useful blocks. All of your basic text and image formatting, along with multicolumn layouts are included. But that’s only the start of what this new content creation tool can do.

One of the most powerful features of Gutenberg is the ability for developers to create their own block types. This allows for a wide range of functionality to be added to a website. It could be something universal or incredibly niche. The result is that we can really customize the editor to match our needs.

While it’s still very early on in Gutenberg’s existence, developers are already releasing some exciting custom blocks. Let’s take a look at a selection of the more interesting options out there.

Maps Block for Gutenberg powered by Google Maps

Maps are certainly one of those items that are universally appealing. Maps Block for Gutenberg adds a “Map” block type that allows you to place a custom map anywhere within your content. Options include the ability to set the map height and zoom level. Just note that a Google Maps API key is required to make this work.

Advanced Gutenberg Blocks

Advanced Gutenberg Blocks is a collection of custom block types that perform various functions. Highlights include quick access to adding WooCommerce products or add-to-cart links, custom notices, ads and testimonials. It’s a hodge-podge for sure, but you can deactivate block types that you don’t plan on using.

CoBlocks – Gutenberg Blocks for Content Marketers

CoBlocks offers up an interesting mix of blocks that cater to rich content creation. Users can add helpful items such as accordions, social sharing, click-to-tweet links and pricing tables. Also of interest is a GitHub Gist block, which is great for sharing code snippets.

Atomic Blocks – Gutenberg Blocks Collection

If you’re getting the sense that many custom blocks are part of a collection – you’re right. Atomic Blocks fits neatly into this category with a number of useful items. One of the most exciting has to be the Container block. It enables you to add multiple blocks into a common section or container. This functionality is sorely missing in Gutenberg at the moment. Also included are author profiles, inline notices and post grids.

WooCommerce Gutenberg Products Block

An “official” plugin, WooCommerce Gutenberg Products Block enables you to add products to your content in various ways. Choose from individual products, product categories, a filtered list or display all of your products in a single locale. This could be quite useful for adding curated product lists to a blog post or other related content.

Gutenberg Custom Fields

Custom fields are an area that can really allow for the personalization of Gutenberg. Gutenberg Custom Fields is a tool for creating custom field templates that you can attach to specific post types. There are a number of field types available (text, image, number and email among them). Data from custom fields can then be displayed on the front end via some simple PHP code.

Looking for a Specific Block?

As we previously mentioned, many custom Gutenberg blocks are being released as part of larger collections. While that may make sense from a marketing perspective, it does make finding specific functionality a little more difficult.

With that in mind, the Gutenberg Block Library offers a handy listing of individual blocks submitted by users. It’s definitely worth checking out if you can’t find what you’re looking for elsewhere.

The Best Is Yet to Come

We’re just in the beginning stages when it comes to the development of custom blocks. As Gutenberg usage rises, so too will more creative solutions from the WordPress community. To that end, we’ll periodically check in with new collections as they hit the market.