WordPress Blocks: The Ultimate Guide to Gutenberg Blocks

WordPress blocks are the biggest new feature of WordPress. With WordPress blocks, also known as Gutenberg blocks, users get to experience an easier way to create rich content in posts and pages in a truly visual manner. In this article, we'll take a deep dive into the WordPress blocks, covering the history of the new WordPress block editor first introduced in WordPress 5.

Avatar photo
SolidWP Editorial Team

WordPress blocks are the biggest new feature of WordPress. With WordPress blocks, also known as Gutenberg blocks, users get to experience an easier way to create rich content in posts and pages in a truly visual manner.

WordPress blocks

In this article, we’ll take a deep dive into the WordPress blocks, covering the history of the new WordPress block editor first introduced in WordPress 5.0. We’ll also take a look at how WordPress blocks impact the way you compose and edit posts and pages on your WordPress website. Finally, we’ll cover a growing number of WordPress block collection plugins that may dramatically change how you design and work with content. 

Let’s get started.

In this guide

    The History of WordPress Blocks

    The project name for the new default editor inside WordPress is called Gutenberg. The Gutenberg editor introduced what’s now commonly called the WordPress block editor.

    As the most anticipated and hotly-debated releases in WordPress history ever, the Gutenberg editor represented a dramatic departure from the previous classic editor that has been around since the inception of WordPress.

    wordpress block editor

    Gutenberg’s primary goal was to create a better, rich content editing experience related to how posts and pages are composed and edited inside WordPress. Beyond that, the vision of Gutenberg extends beyond the post/page editor into widgets and sidebars and even the header and the footer of a website.

    Essentially, Gutenberg allows you to take a post or page, and break up the content into various “blocks.” For example, WordPress blocks include an image block, paragraph block, quote block, headline block, even a button block.

    The Heated Debate Around Gutenberg

    First introduced in WordPress 5.0, WordPress Gutenberg was controversial within the WordPress community. However, a lot has changed with the block editor, and as we continue to see the WordPress editor improved, we get to see just how fast additional features are being added. Many of the fears discussed when it was first released are quickly going away, as we see a steady release of bug fixes and feature updates.

    If you take a look at the timeline when Gutenberg was added to WordPress core, you would have seen that many people were quite angry and upset that the new block editor was going to be included in WordPress core. Lots of people expressed displeasure that Gutenberg should never have happened or at least never been integrated into WordPress core as its default editor experience.

    Unfortunately, some people thought that their livelihoods would be jeopardized by the new WordPress bloc editor, that it would require multiple updates to existing sites and that it would also contribute to the extinction of page builders, which for the last several years have been on a climb and usage.

    However, if we look at Guttenberg now, we can no longer hold the anger that we might have felt. We also can’t continue to dismiss Gutenberg. It’s in WordPress core. Which means when you install WordPress to start your new site, you’ll get the Gutenberg block editor by default.

    Developers need to start to look at how we can use the block editor totheir advantage. Thankfully, the WordPress community is large enough that a number of developers that have committed to learning how to integrate and adapt their own plugins to work within the block editor as WordPress blocks. 

    Gutenberg’s New Name: The WordPress Block Editor

    When the Gutenberg editor was first added to WordPress core in WordPress 5.0, some confusion existed over what to call it. When Gutenberg was rolled into WordPress core, the project name was dropped. While still referred to as Gutenberg, the new default WordPress editor is called the block editor.

    The WordPress block editor is radically different from the WordPress classic editor, the old way of editing posts and pages in WordPress. With the WordPress block editor, users get to experience an easier way to create rich content in posts and pages in a truly visual manner.

    add wordpress blocks

    The block editor lets you focus on content, which is arguably your website’s most valuable asset. The new WordPress editor also allows for developers or agencies to create custom templates that allow their clients an easy way of creating new content.

    The block editor looks at the most basic level of your page, breaking everything down into rows. Even more, you can use columns in each row to divide up your content for better control of the location of each element you are adding.

    The block-based editing system in WordPress really is remarkable and may be familiar if you’ve ever used a WordPress page builder plugin. The result is that the WordPress content building experience becomes a lot more visual.

    The Gutenberg Plugin

    While Gutenberg is now fully embedded into WordPress as the new block editor, it’s still actively developed as the Gutenberg plugin available for free on the WordPress plugin directory.

    With the Gutenberg plugin, you can take advantage of getting the latest features added to the block editor before they are added into WordPress core. Installing and using the Gutenberg plugin on a development site is a great way to know beforehand what changes to the block editor are coming in the next major WordPress version release.

    For example, WordPress 5.5 rolled the last 10 versions of the Gutenberg plugin’s feature into WordPress core.

    What are WordPress Blocks?

    To get the most out of the WordPress block editor, you’re going to want to get acquainted with all of the default elements it includes, also known as WordPress blocks. You have plenty of familiar options here, including list, paragraphs, quotes and more.

    what are wordpress blocks?

    The block editor works in the basic form that each piece of content is a block. That means that your posts, your pages, any custom post types you have, are all collections of WordPress blocks. A collection of blocks could be something like a combination of heading blocks, paragraph blocks, image blocks, video blocks and more.

    Table of Available WordPress Blocks

    This table includes some of the default WordPress blocks included with WordPress in the new block editor.

    WordPress blockDescription
    AudioEmbed a simple audio player.
    ButtonsDrive conversions with beautiful buttons.
    CategoriesDisplay a list of all categories.
    ClassicUse the classic WordPress editor
    CodeDisplay code snippets that respect your spacing and tabs.
    ColumnsAdd a block that displays content in multiple columns, then add whatever content blocks you’d like.
    CoverAdd an image or video with a text overlay – great for headers.
    EmbedEmbed videos, images, tweets, audio, and other content from external sources.
    FileAdd a link to a downloadable file.
    GalleryDisplay multiple images in a rich gallery.
    HeadingIntroduce new sections and organize content to help visitors (and search engines) understand the structure of your content.
    ImageInsert an image to make a visual statement.
    Latest postDisplay a list of your most recent posts.
    ListCreate a bulleted or numbered list.
    ParagraphThe building block of all narrative.
    Pull quoteGive special visual interest to a quote from your text.
    QuoteGive quoted text visual emphasis.
    MoreAdds a “Read more” element
    SeparatorCreate a break between ideas or sections with a horizontal separator.
    ShortcodeInsert additional custom elements with WordPress shortcodes.
    SpacerAdd white space between blocks and customize height.

    Why Use the Block Editor and WordPress Blocks?

    The jump to block-based editing in WordPress is a big one. If you’ve used the classic editor for a long time, the change will be disorienting at first. In our experience, the learning curve is steep, but one you get the hang of how to use WordPress blocks, you may even speed up the way you compose a post.

    If you’re a freelance developer or an agency or even somebody that just builds websites with WordPress, you want to be using the block editor because this is where all of the innovation is happening inside of WordPress. 

    As we’ve seen with subsequent versions of WordPress, Gutenberg is continually making strides to improve the interface as well as the feature set of the new block editor. In fact, the Gutenberg project is shaping the future of WordPress themes. This means that as we look at continuing to build sites and WordPress, we need to be aware of all of the changes that Gutenberg is set out to address, including taking a look at its road map.

    The ultimate goal of the Gutenberg project is really all about making WordPress easier to use. And it’s already starting to do that. Think of it this way when we finally have site-wide editing, we won’t need to teach people how to use widgets anymore. The entire idea of widgets will be gone.

    Aside from all these great developments, you really should be thinking about building your next project with the block editor. And if you continue reading this post, our goal is that you’ll be excited to build a site with the block editor.

    The Block Editor and You: Editing Content in WordPress

    As you start to think about upgrading sites that have existing content, one of the biggest concerns may be how does the new editor affect your existing content. The last thing you want to do is start using a core feature like this and have thousands of posts (from having a site up for 10+ years) all of a sudden lose styling, or worse, the content itself.

    Thankfully, the developers on the Gutenberg project considered this exact situation. Your existing content will be preserved and will continue to display as it did before. If you happen to use a page builder or some other form of content and layout editor, it too will continue to be displayed correctly. 

    Basically, nothing will happen to your existing content if you upgrade to the block editor.

    Why? WordPress ships with dozens of blocks, including a classic block. This way, your existing content will be contained within a single classic block until you manually convert it over to individual blocks.

    classic editor

    The process of how to convert existing WordPress posts to Gutenberg blocks looks something like this: individual blocks will go through the content and try to figure out the best block for all the content inside of the classic block. You can convert your classic block into individual separate blocks by choosing the option from the classic block menu.

    How to Revert to the Classic Editor

    There may be times in which you find out that the new block editor isn’t exactly compatible with your existing theme or plugins running your site. If this is the case, you can disable the new block editor by installing the Classic Editor plugin.

    The Classic Editor plugin was created by the WordPress development team to help get around compatibility issues with the new editor. It also exists for those who need to upgrade their version of WordPress core but weren’t ready to change content over to the new block editor. The Classic Editor plugin disables the block editor for all post types. It’s very much an all or nothing setting.

    However, if you really want to give the block editor a try, you could install a plugin called Gutenberg Manager. Gutenberg Manager is a super handy plugin that allows you to disable the block editor from specific post types. This way, if you are using a page builder or have custom post types that you don’t want to use the block editor yet, you can disable it for those content types. It will allow you to continue to use the block editor on post types that you choose.

    To install this plugin, just go to the plugins directory from your wp-admin put on install or add new when do a search for Guttenberg Manager. 

    https://wordpress.org/plugins/manager-for-gutenberg/

    Getting to Know the Block Editor and WordPress Blocks

    If you’re like me and you get frustrated pretty easily while you’re trying to update an existing site, chances are you’re going to want to throw in the towel. However, let’s consider several options before we just install the classic editor and forget about using the block editor.

    Update and Upgrade Plugins and Themes

    The first tip is to make sure that you update or upgrade all of your plugins and of course your theme. The new block editor has only been in development for the last 2 years, so there’s a good chance that any of the plugins you’re using have recently been updated and are fixed to work with the WordPress blocks. The same goes for themes.

    You may also notice that I also indicated the potential need to upgrade your plugins and your theme. I can’t tell you how many times I come across a client site that for one reason or another they decided to not continue to pay their yearly membership or yearly renewal fee to their plugins or themes. This means that they are likely running an older version of that plugin or seen and so you really kind of have to pay to get the updates again.

    Keyboard Shortcuts

    One interesting way that the new block editor improves typing ability in your content is by using keyboard shortcuts. This reduces the amount of context switching between the keyboard and mouse while you are writing content. 

    If you’re typing on your laptop chances are you might not even notice moving your thumb from the spacebar down to the trackpad moving the mouse around and then back.

    One keyboard shortcut that is going to be the most helpful to you is when you need to bring up the block inserter. I’ve included a screenshot of what the block inserter looks like. if you’re typing / on a new line it will bring up the block shortcut.

    The Classic Block

    The classic block is there to help you bridge the gap of your old workflow in the new workflow with the new editor. If for some reason there’s something you don’t feel you can do within the new block editor all you have to do is add a classic block to the page. You can access the old toolbar and all those short codes that used to be available to you in previous versions of WordPress. 

    Saving and Reusing Blocks in Gutenberg

    One of my favorite core features of the new block editor is the ability to save and reuse blocks for use on other pieces of content, also known as reusable blocks.

    Reusable blocks are particularly helpful for bloggers or site owners who frequently need to add specific content snippets to their articles or even multiple pages on their site.

    To save your block as a reusable block, simply click on the menu button located at the right corner of the blocks toolbar. Then from the menu Select Quote add two reusable blocks and quote options. 

    You will be asked to provide a name for the block. Give a name for your block then click the save button. The block editor now saves the block of the reusable block.

    To use that saved block in other posts or pages on your site, all you need to do is bring up the block shortcut scroll down to where it says reusable and then find your saved block.

    If you would like to manage all of your reusable blocks in the same window you can click on the link ‘manage all reusable blocks’. This is going to bring you to the block manager page. Here, you can edit or delete any of your reusable blocks. You can also export reusable blocks and use them on any other WordPress sites you want.

    Bonus Tips For Using WordPress Blocks Like a Pro

    Are you getting more and more comfortable using the new black editor, you may be wondering whether you’ll be spending more time adding and adjusting blocks then creating actual content.

    The good news is the block editor is incredibly fast. Even of the most basic usage, within a few minutes you will instantly add WordPress blocks without even thinking about it.

    Soon you’ll realize just how fast your workflow has become with his new approach. And if you’re a power user, let’s talk about a few bonus tips to help you work even faster with the new editor.

    1. Move the Block Toolbar to the Top

    Currently, there’s a toolbar that appears on the top of every WordPress block. You can move this Toolbar to the top of the other. All you have to do is click on the button in the top-right corner of the screen and then select the top toolbar option. 

    2. Drag-and-Drop Media to Automatically Create Media Blocks

    This is a really handy feature and if you’re going to create a post that you’re going to highlight multiple images as a gallery. You can easily drag them from your finder window if you’re on a Mac right into the block editor. This will automatically create a gallery block for you.

    You can do the same thing with a single image or a video file, and the WordPress editor will create the block for you. 

    How to add YouTube, Twitter, Facebook, Vimeo, other Embeds

    Gutenberg introduced new embed blocks into the block editor. There’s a WordPress block for all the supported embed types including YouTube, Twitter, Facebook, Vimeo, Instagram oh, and more.

    However, all you need to do is just copy and paste the embed URL at any point in the block editor and it will automatically create a brand new block for you. For example, if you were to add a Vimeo URL, it would automatically create a Vimeo embed block and display the video.

    WordPress Block Plugins Worth a Look

    In the next part of this guide, we’ll explore the wide variety of WordPress block plugins. It should be mentioned that the terms block plugins and block collection plugins are used interchangeably in this post. That is because many of the plugins listed here contain a number of blocks that you can use within the block editor.

    As more and more people begin to use the WordPress block editor, these block collection plugins provide a more WYSIWYG type feel to the block editor, allowing you to build beautiful looking websites with just a few clicks. They are designed to allow you to make changes to settings, add/remove blocks, and upload your own content, to give your page a more personal feel.

    What’s amazing about this community is the number of developers that quickly saw a way to get in on the ground floor of building block plugins. We’re going to take a look at what some of those block plugins are and what some of the advantages are to using these block plugins instead of just the default blocks that ship with WordPress. 

    Stackable Blocks

    If you are looking for a new platform to enhance the WordPress block editor, you need to check out Stackable. Stackable is one of the best block collection plugins I have found for WordPress. It features 24 blocks, ranging from simple elements to the complex features like headers and pricing boxes.

    Stackable Blocks

    All of the plugin blocks are designed to be fully responsive in the plugin comes in both a free and premium package. If you’re looking for a comprehensive block plugin that is going to give you a strong all-purpose tool and provide you with functionality that’s not only useful for bloggers, e-commerce site owners, and small businesses you need to be taking a look at stackable.

    Check out the full review: A Review of Stackable – Gutenberg Blocks: Extending WordPress with Blocks.

    CoBlocks

    A powerful but lightweight plugin, CoBlocks gives you additional functionality to the WordPress blog editor without bloat. CoBlocks gives you additional blocks in true row and column building, bringing you a true page builder experience for Guttenberg. Due to its innovative block system it allows you to create stunning web pages, and even entire websites, with the new WordPress editor.

    CoBlocks

    At the heart of it is the exceptional row and column blocks to help dynamically generate content areas with specific responsive margin and padding settings the only CoBlocks provides.

    Each of the WordPress blocks within Coblocks has been precisely fine-tuned to offer a familiar yet powerful customization experience. Taylor each block to your taste using our custom controls and settings. Change fonts, set padding and margin, fit colors and more.

    CoBlocks gives you a ton of specialty blocks. For example, from social blocks to restaurant or Services menus, CoBlocks are created by some really intuitive blocks that provide an easy-to-use interface with the row blocks.

    The block I primarily like is the pricing table block which facilitates quick creation of simple, yet responsive pricing tables that are well suited for a services company. These specialty blocks even compliment mobile responsive themes and help with the creation of layout objects that appear to have been built mobile first.

    Check out the full review: A Review of CoBlocks: Extending WordPress Blocks.

    Atomic Blocks

    Atomic Blocks was originally developed by Mike McAllister, but has since been acquired by Studio Press and WP Engine. WordPress developers Marcos Schratzenstaller and John Parris have also joined and started contributing to the plugin. It is available from the wordpress.org plugin directory and can be installed directly within your WordPress admin. 

    Atomic Blocks

    What are the first players to the market, Atomic Blocks offered a collection of WordPress blocks for the new WordPress blog editor. they saw a need to quickly build more blocks to enhance your content look and feel and provide you with more ability to use interactive content. 

    Check out the full review: A Review of Atomic Blocks: Gutenberg WordPress Block Collection Plugin.

    Bonus: Atomic Block Theme 

    The Atomic Blocks Theme is designed to help you get started with the Atomic Blocks plugin and the new WordPress block editor. They integrate seamlessly together so you’ll know a combination of theme options and block options that really mesh well together.

    It has elegant styles for all of the default editor blocks such as photos, galleries, quotes, columns and more. The theme supports the new editor’s wide alignment styles for content that spans the full width of your page.

    Obviously it goes without saying that the Atomic Blocks theme also easily integrates with the Atomic Blocks plugin which adds page building blocks for the new WordPress editor. Atomic Blocks also adds customizable content block such as testimonial, notice, profile, customizable button, accordion, and more It also has several handy theme options like content width, font selection, font sizes, logo upload and more, to help tweak your site to your liking.

    KadenceWP Blocks

    If you’ve ever spent any time in the block editor, you’ll understand how limiting it can be when it comes to designing layouts. Especially when you come from building sites where you used page builders. This is one of the things I really love about the Kadence WP. Kadence blocks offer a number of additional elements that allow you to expand your options for building dynamic and flexible pages.

    Kadence WP

    The free version is already powerful it gives you the ability to create pages with complex layouts, gives you control over columns, Rose, spacing, and more. However Cadence also has a pro version of their block plugin. And the pro version is really the one that you’re going to want to get. Cadence WP gives you a number of pre-designed layouts but not only look good with some of the best design practices in mind, but they also allow you to edit just about every single thing of each of those pre-designed layouts. 

    The power of cadence is in their row layout block. The row layout block gives you better control of columns for different screen sizes plus it gives you full row editing tools like padding, backgrounds, overlays upgrade ingredients, vertical align and much more 

    As I’ve been building sites with Gutenberg, Kadence WP is probably one of a small number of block plugins I install and every single site. The pro blocks in Kadence WP are the image overlay block, the post grid/carousel block, split content block, product carousel block, modal block, video pop-up block, and the on scroll animation.

    Check out the full review: A Review of KadenceWP Blocks: Extending WordPress Blocks.

    Otter Blocks

    The folks over at Theme Isle have created Otter Blocks, which aims to be one of the lightest block plugins out there. It provides you with 12 blocks that you can play with and customize while keeping a minimal impact on your site performance.

    Otter Blocks

    If you are a blogger this pack is really for you. However if you’re a business owner that needs a lightweight feature set of say pricing and service blocks you could also use this plugin. Currently there’s no pro version of OtterBox.

    When I tried to create a simple page with Otter Blocks, I found it to take me a few extra steps than some of the other block collection plugins we’ve reviewed. That said, I found it to be more similar to what I would experience with page builders like Beaver Builder. You first add your columns and then add the blocks that you want in them. 

    In other block collection plugins you had settings around how many columns/features/services were there. You then have some settings within each of the blocks. Some of the block collection plugins try to help save time, but this often has led me to frustration as I couldn’t get the design I wanted it to.

    Check out the full review: WordPress Gutenberg Block Plugins: Comparing Stackable, Atomic Blocks and Otter Blocks.

    Advanced Gutenberg

    Advanced Gutenberg has 16 blocks and is one of the best block plugins for WordPress because it improves the way the block editor functions.

    Advanced Gutenberg

    Advanced Gutenberg allows you to filter available blocks based on user role, and includes new customization options for some of the existing WordPress blocks. That means you’re not having to install a bunch of new blocks and not use the existing blocks.

    This plugin really begins to push the boundaries of content design. It provides advanced versions of several of the more fundamental WordPress blocks, offering you additional configuration and style options. Plus, it adds new settings to some of the block editors existing functionality.

    The best thing I like about this is that they have their own settings page that allows you to deactivate (turn off) blocks that you don’t want to use. On the same settings pages you also have the ability to modify the default settings of each block. This is incredibly useful for site builders and freelancers that are building sites for clients.

    Qubely

    Qubely toutes themselves as not just a regular Gutenberg block plugin. Instead, it talks about really taking over the control of the WordPress Gutenberg editor and being able to enjoy tons of top-notch styling options.

    Quebely

    It features a layout builder along with typography and styling and even a responsive controls that really makes the Gutenberg block editor a breeze.

    Quebly offers lots of customizable ready-made sections that you can import and use with the Gutenberg block editor. This allows you to save time while developing your beautiful and conversion-friendly websites. It really gives you the idea that the Gutenberg block editor is really just a page builder.

    In addition, there are a number of exclusive blocks that enhance the Gutenberg editor’s ability. With their huge collection of exclusive blocks that are easy to customize and use as beginners, it’s no wonder that one of the fastest growing block plugins is Quebly.

    Quickly comes with 32 powerful custom Gutenberg blocks that allow you to design any page from something as simple as a landing page landing page with a few images and some text maybe a button or two to something more complex like a full-on restaurant menu or product page.

    Ultimate Add-ons for Gutenberg

    If you are coming from a page builder, especially Elementor or Beaver Builder, a name you will likely be familiar with is Brain Force or Astra. Ultimate Add-ons for Gutenberg gives you the ultimate add-ons Library available for blocks.

    Ultimate Add-ons for Gutenberg

    There are currently 20 of the ultimate add-ons that have been converted over to WordPress blocks and they are currently free where they don’t require you to pay for them so it makes it incredibly handy to use some of their blocks as your building out your site.

    If you use Astra as your WordPress theme, which is one of my favorite teams and one that we’ve talked about on iThemes Training, you will have some familiarity with ultimate add-ons for Guttenberg.

    As a longtime Gravity Forms user, one of my favorite ultimate add-ons gives you is the ability to style your gravity form forms. So ultimate add-ons gives you a Gravity Forms style or block. It allows you to style fields, other color options, even includes a button layout and styling, and finally the message handling. If you’re not a Gravity Forms user but maybe a Contact Forms 7 user, you can also have the ability to use Contact Form 7 with the Ultimate Add-on block.

    Check out the full review: A Review of Ghost Kit & Ultimate Addons for Gutenberg: Extending WordPress with Blocks.

    GhostKit

    GhostKit is a collection and extension of Gutenberg blocks. There are currently 21 blocks available to you with this plugin. For the most part, you will see very similar WordPress blocks to ones that you will find in other plugins.

    Ghost Kit

    However, GhostKit is taking an approach of adding what they are calling block extensions. Block extensions are essentially additional functionality made available to Gutenberg blocks that are registered with the block editor. In many cases, this is true for the Gost Kit blocks and the core blocks. You may run into issues when trying to see if these extensions are available with other block plugins. 

    Check out the full review: A Review of Ghost Kit & Ultimate Addons for Gutenberg: Extending WordPress with Blocks.

    Ultimate Blocks – Gutenberg Blocks Plugin

    Touted as the Gutenberg blocks plugin for bloggers and marketers, the Ultimate Blocks – Gutenberg Blocks plugin has a goal of making it insanely easy for you to create better and more engaging content with Gutenberg.

    Ultimate Blocks

    Ultimate Blocks currently has 19 blocks in their collection. One of my favorite blocks out of this collection is the content filter block. It allows users to filter content based on a number of selections. They are still pretty new, being only at a 2.x version.

    Page Builder Gutenberg Blocks – Kioken Blocks

    With Kioken Blocks for Gutenberg, your page building experience with the new editor is maximized. Kioken Blocks has unique and creative blocks that will help you build and design pages and posts quickly, beautifully, like a pro.

    Kioken Blocks
    https://wordpress.org/plugins/kioken-blocks/

    Gutenberg Blocks Collection – qodeblock

    Qodeblocks is a collection of page-building blocks for the new Gutenberg block editor. The current version comes to the set of 14 blocks with a different degree of styling options per block. These blocks are beautiful.

    Gutenberg Blocks Collection - Qodeblock

    Qodeblocks is still being developed as they’ve only recently published a 1.0 version. I’m excited to see what they have in store and will be checking them out as they continue to develop. 

    Easy Blocks – Gutenberg Blocks Page Builder

    Easy Blocks

    No matter which type of website or landing page you were wanting to create, Easy Blocks is the perfect solution. Their WordPress blocks for marketing such as call the action, buttons, testimonial, counter up, logos. Their blocks for services like a feature box, feature grid, pricing table or social like social share, Instagram grid. There’s even a customizable header, a content layout and more.

    It also features the ability to have multiple columns with multiple styles to help you design any kind of landing page or product or service page from scratch. Easy Blocks comes with 20 blocks that will enhance your Gutenberg editor experience. There are a number of additional blocks they are developing and will be released in time. 

    Blocks Kit – Gutenberg Blocks for Freelancers

    Blocks Kit is another set of Gutenberg blocks with the idea that they’re aimed at editors content writers and Freelancers. It currently has 10 blocks available but they’re looking at continuing to add more as they continue to develop the plugin.

    Blocks Kit

    One thing I found interesting about this set of plugins is that they did a ton of research to determine what type of blocks would actually be needed for any type of website development. It then created a list of options based on those selected blocks that they were thinking about to design and provide for free to anyone that wanted to use the plugin. This made it possible for any beginner to a freelancer to really use this plugin.

    While Blocks Kit is simple in nature, I found that it was easy to use all of their blocks and it didn’t seem to put a lot of additional page weight or have any performance issues on my test site. A paragraph if you’re looking for a small set of additional blocks that you want to have available to you on your site you should definitely check this one out. 

    Final Thoughts on Block Plugins

    There’s a number of unknowns we’re seeing in the WordPress theme space as we enter the world of the new WordPress editor. When we think about the changes that will likely come through in the coming months, it’s hard to know where to spend your time as a block developer.

    If you are still wanting to play it safe with your site, I think Otter Blocks is a good choice for those that want to live in the CSS world. 

    WordPress Block Extras

    There are a number of additional WordPress block plugins that work to provide you with overall functionality changes to the block editor, so it’s fitting to include them in this section. It’s all about adding value to everything Gutenberg or block editor.

    Gutenberg (The Project) Plugin

    As mentioned earlier in the post, the Gutenberg plugin is still a very active project and thus still has a separate plugin that you can install to take advantage of releases prior to them being included in WordPress core. If you’d like to check out some of those new features ahead of WordPress being updated to include the newest version of Gutenberg, you can install this plugin and have those features be available to you immediately.

    Blocks Animation: CSS Animations for Gutenberg Blocks

    This blocks animation plugin adds an animation setting to each block but is registered with the block editor. This means that you can add any type of CSS animation that’s available to you to any block inside of Guttenberg. there are three settings  to get added to the block settings window. The first of the animation the second is delay and the third is speed. Each one has a drop down with a few different options that you can select. 

    Extra Block Design, Style, CSS for ANY Gutenberg Blocks

    https://wordpress.org/plugins/stylist/

    This plugin allows you to customize any element created in the Gutenberg block editor with 60 + options. It works with all Gutenberg blocks so that means if you have a plugin that has a block or you have a plugin that has multiple blocks registered with the block editor, these will all be editable with this plugin.

    This way, you can extend your essential Gutenberg blocks with more design options without touching any line of code. They even added a CSS Editor that allows users who wish to style their Gutenberg blocks using CSS code.

    As an added bonus, Stylist will work with certain page builders:

    • Elementor
    • Beaver Builder
    • Visual Composer
    • Live Composer
    • KingComposer
    • Fusion Page Builder
    • Page Builder Sandwich
    • BoldGrid

    You can also use this plugin to customize the styles of forms that are created with the following form plugins:

    • Ninja Forms
    • Contact Form 7
    • Contact Form by WPForms
    • Caldera Forms
    • Easy Forms for Mailchimp
    • Formidable Forms

    Disable Gutenberg Blocks – Block Manager

    We’ve reviewed a number of Gutenberg block plugins, and you’ve likely installed several at this point. The problem is that if you add a couple of block collections plugins, the block editor can quickly become cluttered.

    Because of this, the Disable Gutenberg Blocks plugin was created. This plugin allows you to disable the blocks you or your clients don’t need. This can come in incredibly handy if you say you like a pricing block from one collection and other collections also include a pricing box oh, you can remove the other ones.

    To use this plugin, all you need to do is go to wp-admin then go to settings and then disable blocks there it’ll give you a list of blocks that are registered and you can begin to disable the ones that you no longer want to show up inside of the Gutenberg block inserter.

    It probably goes without saying but I will say it anyways, if you’re finding yourself removing all blocks from a specific collection, you should probably just get rid of that entire plugin. 

    Creating Custom WordPress Blocks

    Prior to WordPress blocks, if you are a developer who wanted to add some code into the content editor, you would typically have to insert it right into the classic editor. Or you would need to go the WordPress shortcodes route. A short code is something that you could easily add into your content. It opened with a square bracket and closed with a square bracket.

    However, with the new block editor, using shortcodes will probably become a thing of the past. If you’re using an existing plugin that has a shortcode for embedding that piece of content or that thing into your post, you need to have a visual solution so you can see what it looks like on the page.

    When you look at what WordPress blocks are in the editor, you really see that it’s just a bunch of custom fields. They’re now saved in a different place in the database then what they were before. This means that there are several plugins that can build added functionality to allow you to create blocks very easily with many of the same features using custom fields.

    If you want more control over a block or you want to build functionality from your plugin into a WordPress block, the next two tools will help get you started.

    Block Lab

    Let’s think about this for a minute. Ff you think about WordPress blocks at the most rudimentary level, all blocks are custom fields. The difference however is what the fields and types of values are that you use for each block. With Block Lab, you can add new blocks to the editor and assign a category to them.

    Block Lab

    For each block, you can add almost as many custom fields as you want choosing from a broad range of presets. However, you’ll still need to know how to put together simple HTML templates to customize each block layout. Here they can help you outline the process, so you have an idea of what to expect.

    Advanced Custom Fields

    Advanced Custom Fields is probably the most used plugin for anybody doing work with custom fields. It’s built quite a following over many years of being in business, so it’s no wonder that they would also build in functionality for you to build and register WordPress blocks with the new editor. 

    ACF

    ACF allows you to create custom blocks in minutes instead of hours. Best of all, if you already know how to write simple PHP and HTML, you can do that and let ACF Pro do all the heavy lifting to create in your block.

    ACF pro has simplified the process down to just three steps. 

    1. Register a Block

    If you’re familiar with registering a post type in WP, you’ll be able to register a block with ACF Pro. The function uses a very similar format to registering a post type, but in this case we end up registering a block. 

    2. Create a Field Group

    Once you’ve registered your block The Next Step that you need to do is to create a field Group.  one thing we should know here is that any and all ACF Fields can be used within your block so you have no limitations of what you’re blocked can or can’t do.

    Once you’ve created your field Group you need to set up the location. use the block rule to select your newly registered block type.

    3. Render the Block

    Finally, the last step in the process is that you need to tell ACF how to render your block. This is essentially the same process you’ve used for displaying custom fields, however, your HTML and PHP will be wrapped in a function.

    In the PHP function from earlier, we mentioned a render call back setting.  This is the PHP function that will render out your blocks HTML. It is where you’ll write all the custom code for your blocks.

    That’s really all there is to it. You can create a block these few steps using ACF Pro.

    Scope of ACF Blocks

    When you’re using a block written with ACF, it will save data within the post underscore content value instead of the wp_postmeta table like meta boxes do when you’re using the classic editor.

    This is a minor change in your thinking when you’ve used the ACF Pro plugin for where your data will be saved in the database. Whether you love it or hate it, the way that Gutenberg stores its data allows for a lot of flexibility. ACF blocks can be inserted multiple times within the same post, they can be reordered, edited and deleted without any bloat to the post meta table. 

    Want to learn step-by-step how to build custom Gutenberg blocks? Check out this training course to learn how to use Advanced Custom Fields to build WordPress blocks: How to Build Custom Gutenberg Blocks using Advanced Custom Fields.

    A Better Way to Build WordPress Blocks

    While I gave you two ways in which you could use plugins to build blocks oh, this isn’t the official way the blocks are built. The block editor introduces a much heavier reliance for a developer to know and understand how to write JavaScript.

    Historically, WordPress was built primarily using PHP, which many developers over the years have learned.  This means that there could be a learning curve for developers that have not taken the time to learn JavaScript.

    Gutenberg blocks are primarily created using the JavaScript framework REACT. If you’re wanting to take a more native approach to building WordPress blocks, you should check out a blog post by Ahmad Awais, Create Guten Block Toolkit: Launch, Introduction, Philosophy, & More! as he’s created a start a Create Guten Block Github project to help you create Gutenberg blocks a little easier.

    There are many other tutorials out there to learn how to create a WordPress block using react and JavaScript. If this is something that interests you and it’s something that you want to learn how to do, I would encourage you to do some research and find those tutorials and even a class or course to help you get started with REACT and building blocks.

    Wrapping Up: WordPress Blocks & the Future of WordPress

    As you can see, WordPress blocks are changing the course of WordPress. This is an incredible time to be in the WordPress community as a developer, site builder or site creator. WordPress blocks continue to change the current trajectory of where WordPress is going. We now having the tools built-in natively to compete with website hosted Solutions like Squarespace, Wix, and more.

    We have seen how already in such a short time developers have popped up to build and create really powerful block plugin collections that allow us to use the block editor in a new way. I

    If you’re a site owner or you’re a freelancer or a site builder, and you’re starting to work with building new sites in 2020, I would encourage you to try building a few sites with the block editor. I think you’ll be surprised at just how much you can do with the black editor that doesn’t require several other plugins to be implemented. (While you do have to install a number of block plugins, you could really install one collection of blocks and limit the resources they get queued up for the front end.)

    From a performance perspective, I see the block editor and block plugins as an easier way to keep your performance really fast and lightweight. Previously, before using the block editor, you may have plugins that are loading on every single page, whether that plugin is even needed on a page or not.

    Ultimately, the move to the block editor and WordPress blocks helps developers write better, more efficient code. It allows us as site builders and site owners to create sites that perform well out of the box because the right tools are now being used.

    Get SolidWP tips direct in your inbox

    Sign up

    This field is for validation purposes and should be left unchanged.
    Placeholder text
    Placeholder text
    Thanks

    Oops something went wrong, please try submitting again

    Get started with confidence — risk free, guaranteed

    Did you like this article? Spread the word: