Gutenberg has come a long way since the official release back in late 2018. And although many argue that the platform isn’t fit for seamless writing, what we do know is that Gutenberg is more than capable of providing versatile page building capabilities.
The number of Gutenberg-friendly themes has skyrocketed, as has the number of plugins which in some way amplify or optimize the Gutenberg experience.
And one of the most popular plugins types is targeting the Gutenberg Blocks ecosystem specifically. You see, with Blocks, you can do pretty much anything. Build pages, customize pages, or use Blocks within your general posts to optimize their appearance and/or readability.
And as more developers start to dig deep inside Gutenberg, it means there’s more availability of plugins which provide Blocks features.
Here are some of the things you can do with Blocks:
- Create blog post layouts that look like landing pages, full of rich-content.
- Design your own homepages both with the help of Blocks and Custom HTML as well.
- Add things like Table of Contents to your blog posts with a single click. The Block will automatically list all headings and subheadings.
- You can apply custom styling to Blocks using the Settings panel or by adding custom CSS. Some plugins provide full-on Block customization capabilities.
- Add performance-optimized galleries that scale accordingly with device screen size.
- Some plugins provide Layouts options. Meaning, you can design a blog or magazine layout using Blocks only.
Of course, there’s a lot more you can do. For example, these WordPress blocks can really save you time with their intuitive and user-friendly design. And while many plugins share similarities, you’ll find that each one differs in design and customization options.
The more developers can embrace React.js and Gutenberg as a whole, the more options there will be for truly streamlined WordPress content building.
Kadence Blocks
Kadence Blocks has a solid 20,000+ users. And it goes to show that there’s massive demand for Gutenberg Layout plugins. The emphasis here is on Layouts. The Kadence plugin focuses on adding Page Builder type of layout options directly to your Gutenberg dashboard.
It works by letting you add custom Rows and Columns to your Gutenberg pages. So, Rows will give you the option to add full-width or wide-with rows for your pages. And Columns will help you align your content within each selected Row. It’s like working with Grid or Flexbox but without the need to scale everything yourself.
Other than this, you’ll also have the option to add custom headings, buttons, tabs, and information boxes. Each option is thoughtfully designed to give you the most flexibility.
Optimizing for accurate margins and padding
So, one of the things that haven’t yet been figured out in full is different types of margins and paddings for different WordPress themes.
Basically, there’s a chance that if you add a Block to your WordPress theme, it isn’t going to align perfectly with your overall content width. This is a fairly common issue whenever you work with different types of themes and designs.
As such, Kadence Blocks is providing custom Margin and Padding options for all of their blocks. The goal is to help you find a ratio that’s going to align seamlessly with your themes’ specified layout settings.
Atomic Blocks
Atomic Blocks was amongst the first plugins to rise to the occasion. Their approach to Blocks design has changed over time, which includes more precise styles and customization options.
What’s more, you can now get your hands on the Atomic Theme — a Gutenberg-based WordPress theme to that works not only with Atomic Blocks but also many other plugins that we are listing in this roundup.
Here are the blocks you’ll get with this plugin:
- Container. Wrap your content within a set container. You can use as many containers as you like. And each one can be modified to reflect different content positioning requirements.
- Post grid. Display your latest or category-specific blog posts using pre-designed grid layouts. The layouts can be modified if you know a little bit of HTML and CSS.
- Dividers and separators. Make sure your content gets seen and understood the right way by using unique dividers. Always wanted to add custom shapes like waves but didn’t know how? Now you can!
- Social Icons. Forget about using resource-heavy plugins to display social sharing buttons. The Atomic Blocks plugin includes three different styles for displaying social icons. You can use these within posts, but also within pages as social proof.
- …and a lot more!
Atomics does work with any theme, however, you’ll find that using the Atomics Theme provides unparalleled integration. Depending on your needs, starting a site from scratch might be a wonderful idea!
CoBlocks
CoBlocks provides a versatile library of blocks which will greatly improve your capability to build websites. Because CoBlocks includes blocks for adding containers and rows, you’re going to experience true page building environment.
And how’s that for using native WordPress? No need to rely on resource-heavy page builders which unintentionally slow down your site. In this regard, Gutenberg definitely has a lot going for itself in terms of designing layouts that are native to the WordPress codebase.
Personally, one of the things that stands out with CoBlocks is the attention to detail. After having used the plugin in some personal projects, the Blocks feel designed for modern needs. And the ability to customize each block is unprecedented. It feels like I can achieve pretty much any modern design element without having to think twice about it.
If you add a 2-column row, you can actually change the width of each column by dragging the columns using a ruler. You can also divide a column in different heights. This helps to position content exactly where you like without losing the design flexibility for mobile users.
ZeGuten
ZeGuten is a Gutenberg related plugin, completely compatible with the latest WordPress 5.4 version. It is a block builder plugin aimed to expand the Gutenberg possibilities with 15 lightweight and stylish blocks. The Section block contains columns, in which you can put any other element, from animated box to pricing tables.
Each element has a bunch of customizing settings, but once you put a block inside section, you become able to set various backgrounds: color, image, gradient, video and custom figure.
As for the post’s settings, you are free to pick one of 5 layouts: grid, listing, masonry, chess, and dynamic carousel. Multiple query settings and the offset option is also on-board.
The key feature of ZeGuten plugin is its responsiveness. You can set the icon, container or box size, margins, paddings, and the number of columns or post items.
Premium Blocks
At first, it might sound like ‘Premium Plugins’ is a paid solution. But, the name is only to imply that Premium Plugins offers premium-quality features. The actual plugin is free to download from WordPress plugin library. And it’s a download worth considering!
Premium Plugins includes 12+ elements, each with multiple styles and customization options. At the moment, the plugin author is focusing on covering the very essentials for building pages with Gutenberg.
It’s a well-known fact that Gutenberg is nowhere near being stable. As a result, any kind of Gutenberg-related plugin development has to be incremental and paced accordingly.
Nevertheless, Premium Plugins includes blocks like banners, buttons, icons, sections, video boxes, counters, and much more!
I do emphasize custom styles here. For example, the Video Box element has 5 unique styles. As such, it’s easy to achieve a design result that meets your website-type needs. Also, it’s convenient to use pre-designed layouts to later add custom styling to them.
Elementor Blocks
I don’t think there has been a plugin in recent WordPress history quite like the Elementor Page Builder. The plugin rose to the top so quickly that in less than two years, the plugin has millions of free users. Of course, some argue that Elementor is nowhere near being ready for mainstream and lacks critical capabilities. But at the same time, the growth is unprecedented and undeniable.
Either way, if you enjoy Elementor and Gutenberg, then having this plugin is a must! Elementor Blocks gives you all the juicy Elementor layouts and features directly within your Gutenberg dashboard. So, to recap, that’s more than 300 blocks and more than 100 page layouts to pick from! There’s also the ability to modify each block separately.
Advanced Gutenberg
JoomUnited has a legendary portfolio of WordPress plugins and themes. And their Advanced Gutenberg plugin is as good as they come. The goal for this plugin is both to give you extra tools, but also to solidify your Gutenberg experience.
One of the things that Advanced Gutenberg does better than most is that it gives you concrete tools for managing and customizing your blocks.
- You can create block profiles, and then assign custom users or user groups to each profile.
- Integrated configuration options provided for each block.
- Apply custom CSS to individual blocks, such as Heading, Paragraph, and List blocks.
- Customize the appearance of the Gutenberg Editor within the admin dashboard.
When it comes to Blocks themselves, JoomUnited have put in a good effort to maximize the accessibility of a diverse collection.
Remember needing separate Slider plugins to add Hero Sliders and other website elements? Now you can do it by using a Gutenberg block. You’ll even get the option to showcase your latest WooCommerce products in a slider.
Likewise, this plugin supports custom contact forms that you can add anywhere on your site. Other blocks we liked include email subscription forms, content summary using your headings as pointers, and advanced image display functionality.
Ultimate Blocks
Ultimate Blocks offers a fresh take on common Gutenberg blocks. And does so in a very eloquent manner. That’s also the beauty of Blocks in general. Each plugin, even though similar to the next, offers different design choices and styles. So, you can experiment with each plugin individually and find a style that matches your overall design scheme.
At the moment, Ultimate Blocks consists of 17 unique choices, but more are being added as soon as they are ready. Here are some of my favorite elements from this plugin specifically:
- Review. A schema-enabled review block so that you can write reviews on products and food, and also have Google index the overall review score.
- Call to action. Add custom CTA banners inside your pages or posts. Great for adding notifications in your long-form content or otherwise.
- Click to tweet. Usually, you needed to get a separate plugin to add tweetable quotes to your content. Now, a single block can do it without hiccups.
You’ll definitely find a lot more choices in this plugin. Especially when it comes to displaying content in creative ways.
One last thing to mention is that Ultimate Blocks provides simple On/Off switches for each of their elements. So, you can save both resources but also your User Interface by enabling only those elements that you truly need.
Advanced Blocks
Want to add unique features and style options to your WordPress blog but don’t like to use multiple plugins? Advanced Gutenberg Blocks has some of the most creative elements we have seen so far.
Namely, this plugin includes blocks for adding code snippets, photos from Unsplash, and GIF animated images from Giphy. You can look up and insert images directly without having to leave the Gutenberg editor.
Other than the said blocks, you can also add Google Maps, Intro paragraphs, Content Cards, and WooCommerce product pages. As such, this would be ideal to use on a content-oriented website where you want to get the most customization options possible.
Full-on editor optimization
AGB might be the only plugin offering full-on customization for the Gutenberg Editor. Here’s what you can expect:
- Customize the editor dimensions, specifically the width of the content writing container.
- Organize palettes to include or remove specific colors.
- Adjust default font sizes and create your own settings.
- Add new layout settings for blocks, include wide-with and full-width options.
- Enable TinyMCE to bring back some of the classic WordPress content editing tools.
Stackable
It’s within reason that Stackable is active on more than 10,000 blogs. Not only is this a plugin I enjoy using within my own blogs and websites, it’s one of the most perfected plugins of this kind.
The blocks are designed with precision in mind, offering unique tools to help you design websites, homepages, landing pages, and content-rich blog posts. Use the Containers block to specify a unique section of your site. Afterward, add blocks like Posts, Icons, and Headers to fully customize your design.
The default settings are plenty to develop unique websites and never run out of creative ideas. Each Stackable block has a variety of pre-designed choices. So, if you wanted to add a customer testimonial, you could do so in a way that complements your design rather than opposing it.
It’s growing really fast and expect new blocks to be added as Gutenberg grows and integrates with the WordPress core more deeply.
Munich Blocks
WP Munich are coming through with their own version of what a Gutenberg Blocks plugin should look like. And it’s a quite refreshing take indeed. Definitely a few unique choices in this one, and the design looks clean as well.
After a quick test run, I’m fairly certain that WP Munich’s plugin excels in grid positioning and providing the tools to create thorough grid layouts. Most of modern web designs rely on Grid for content positioning, and having this feature added to a WordPress editor without needing to write code is exceptional.
Here’s an overview for the type of blocks this plugin provides:
- Events. Working on a specific event? Why not add custom Event notifications across your website and content pages. This block helps you put your upcoming calendar events in the spotlight.
- Background. This block works similarly to a container. You can create custom background layouts using different height and width settings. Perfect for getting peoples’ attention on a specific matter.
- RSS Feed. Directly showcase content from other blogs or websites using the RSS feature. Feeds are not dead yet, and this plugin will show you that!
- Image Filters. CSS allows for custom filters if you know the syntax. But, who needs syntax when you have a specific block that you can use as a wrapper?
Lots and lots more in this one. Be sure to check it out in full!
Editor Blocks
How would you like a Gutenberg blocks plugin that can help you build a professional website in less than a minute? This is quite literally the premise of Editor Blocks. A plugin that is so well designed and pre-configured that you can launch a business website in a matter of minutes.
All layout elements are pre-configured by default, so all you need to do is change the photos, text, and colors to your preferred choice. With 2,000+ active users, the plugin is quickly gaining popularity and momentum amongst WordPress bloggers.
Also, the plugin author offers a unique theme designed specifically to be used with his plugin. The theme loads only the necessities to make sure that all blocks function properly. It’s a great way to start a new site, and maybe even work on some simplified client projects.
Post Layouts Pro
In all fairness, the majority of the plugins we reviewed in this roundup don’t actually offer that many options for displaying content. Meaning, if you wanted to display blog posts in different styles, you would generally need to apply quite a bit of PHP and CSS code.
Post Layouts Pro is a plugin that focuses only on displaying blog posts. So, if you run a magazine and you need many different ways to display blog posts — this is a plugin worth considering. It’s also great that Post Layouts Pro includes numerous styles.
There are several templates in this plugin package, many of which would apply to different types of blogs. But, best of all, I found that it’s super easy to modify the templates yourself. So, if you wanted to remove Category display or change up Author display, you can absolutely do that with ease!
KingBlocks
CreaboxThemes are coming through with KingBlocks. This is a stylistic and thoughtful take on the current trend of Gutenberg blocks. Other than offering new styles on traditional elements, KingBlocks also introduces some new and creative additions. All in the name of making your website designs pop and flash!
Want to highlight individual blog posts with unique styles somewhere on your site? Generally, doing this might mean playing around with PHP queries and CSS design. But, not as long as you’re using KingBlocks. Simply select the block, specify the post, and submit the display anywhere on your site.
Lots of creative options in this one. I’d say it’s more professionally-oriented, so if you’re building websites or landing pages — this one is a must-have!
JetGuten
And to wrap things up, we have JetGuten. A modern, flexible, and easy to use solution for building content on your WordPress site.
JetGuten includes the right amount of elements to help you build sites with nothing but pure visual performance. What’s more, you can take advantage of Animated effects on your blocks. Do you have competitors in your industry? Use the Comparison element to outline why your brand is the best in business!
The documentation is extremely thorough, showcasing how to use JetGuten to its full potential.
Wrapping things up
Gutenberg still has a long way ahead of itself. And it’s certain that Automattic has its own sleeve of plans it’s going to execute over the coming years. But, one thing is for certain, WordPress is going to change drastically in the coming years.
This change will move the platform more in line with modern JavaScript solutions that should both optimize performance, and change the way that WordPress plugins work as well.
As for Blocks, they’re a wonderful addition to your existing WordPress workflow. Building pages and websites in general is going to get a lot easier. And that’s a future work looking forward to.