How to Create Reusable Blocks in WordPress

Posted on January 19, 2019 by in WordPress | 14 comments

How to Create Reusable Blocks in WordPress

WordPress’ new Block Editor streamlines the writing process for a simpler, more accessible web publishing experience. The main method of doing this is with a variety of content ‘blocks’ encompassing a plethora of formatting and design options. One of these – a ‘reusable block’ – is a handy element to help cut down on the repetitive work involved in creating and placing blocks you use often.

In this article, we’ll explain what reusable blocks are and why they’re useful. Then we’ll show you how to create them to utilize in your posts in just three simple steps.

Let’s get started!

Subscribe To Our Youtube Channel

What Reusable Blocks Are and Why You May Want to Use Them

As you may know, the Block Editor is based on modular blocks of content. They can contain text, images, buttons, videos, tables, and dozens of other content types. What’s more, they can be easily added, deleted, edited, and moved to create posts and pages. This is all achieved through a drag-and-drop interface.

However, you may use the same collection of blocks often in your layouts. This could prove repetitive and a time sink. To solve this issue, you can leverage reusable blocks. These can be any group of pre-existing blocks of practically any type, which can be saved and used wherever necessary.

The major benefit of reusable blocks in WordPress is the time saved in creating new Heading and Text blocks, typing out the content and setting the correct formatting, and designing a button or form for each individual post or page. In addition, content will be consistent across your entire site, rather than the natural inconsistencies in creating these elements from scratch.

Any block can be made reusable, but the most value will be had when complex or otherwise ‘dense’ layout designs feature often in your content. For example, a Call To Action (CTA) is a common feature of many sites, and it may encompass a heading, blurb, and button or form elements.

In this instance, you could save your CTA collection as a reusable block, then simply insert it at the end of every new post you create. Of course, the sky’s the limit here, and you can do the same for your logo, social media buttons, or any other frequently used content on your website.

How to Create Reusable Blocks in WordPress (in 3 Steps)

As we’ve said, creating reusable blocks is a short and simple process. Let’s take a look at how to achieve this in WordPress using the Block Editor, starting with the most simple step.

Step 1: Create a New Block and Add Your Content

If you’ve been using the Block Editor already, you should be familiar with this process. To begin, create a new block by clicking the Add Block icon button (visualized as a ‘plus’ sign), and select the type of block you want to use from the menu:

Adding a new block.

Once you’ve added the block to the post, begin creating the content you want to include in your reusable block. Note you can do this for a singular block, or a collection.

You may already have a block featured in a previous post that would suit being turned into a reusable block. To do this, open the post containing the block in question, and continue following these steps – reusable blocks are nothing if not flexible elements.

Step 2: Add Your Block to the Reusable Blocks Drop-Down

Each block has a dedicated toolbar, where you can make edits and change its settings. To do this for your reusable block, click on the ‘hamburger’-style menu button to see some additional options. Somewhere in the list will be the Add to Reusable Blocks item:

Adding a collection of blocks to the reusable list.

By selecting this option you’ll be able to give your reusable block a distinct name. In order to find it more easily later on, make sure the name clearly and concisely describes the block.

Finally, click Save to add your block to the reusable blocks list. At this point, you’ll be able to use it within your posts and pages.

Step 3: Use Your Reusable Block in a New Post

Now you’re ready to put your reusable block to the test! Open a new post, then go to add a new block as you normally would. If you scroll past the block menu, you should see a drop-down titled Reusable Blocks:

Adding a reusable block to a post.

You can find all of your reusable blocks in this menu, or alternatively you can search for its name. From here, click on the reusable block you wish to add, and it will appear in the editor.

While you can edit your reusable block directly, this will make changes globally. In other words, all instances of the reusable block on your site will be subjected to the changes you make. This could make it difficult to tailor a reusable block to your specific application, but it’s possible to do so by converting it back to regular blocks.

To do this, click the hamburger-style menu in your reusable block’s toolbar, and select Convert to Regular Block:

Converting a reusable block to a regular block.

This ‘unlinks’ the blocks from the saved version, and lets you work on them to match your custom intentions. We’d recommend leaving them as-is, although you can of course set them as a reusable block again. However, just make sure you’ve provided a suitably unique name, in order to stop any confusion down the line.

Conclusion

Reusable blocks could help cut down on the time you spend inserting the same type of content into your posts and pages. It will also help keep frequently used content such as CTAs, logos, and social media links consistent from post to post. You’ll be able to eliminate one of the most tedious aspects of writing and publishing posts, so you can focus on more important tasks relating to your content.

This post has looked at how to create reusable blocks in WordPress, in three easy steps. Let’s recap them quickly:

  1. Create a new block and add content.
  2. Add your block to the Reusable Blocks list.
  3. Use your reusable block in a new post.

Do you have any questions about how to create or use reusable blocks? Ask away in the comments section below!

Article image thumbnail: Shutterstock.

Check Out These Related Posts

14 Comments

  1. John is a blogging addict, WordPress fanatic, and a staff writer for me.

  2. Will Divi be updated to turn Global Library items into these??

    • While the new block editor has several shortcomings that ned to be addressed there are several more that are quite interesting including this reusable block option.

      The Divi theme primarily needs to get an update so that it works with some of the content widths that allow you to set the blocks to go wide and fullwidth. At the moment. Any content you create outside of the Divi/Visual Builder on pages gets confined to the container div which is around 1066px by default. This has been problematic for custom post types for a while and needing some hacking of css is a child theme to get the fullwidth value of the builder on these post types. Hopefully this is something that will get addressed now that the block editor is being used.

      The other big issue with Gutenberg that should have been addressed is the legacy of lock in when using different themes and builders. This has been the plague of WordPress for years. Using Divi on a site but now need to move to another theme for custom reasons and you lose your layout and content gets peppered with the shortcodes that Divi needed to render that layout. With the new block editor the same problem remains. There are some nice layout plugins (Kadence and CoBlocks) that do a nice job but the problem I have with them is that if you decide to disable the plugin you do retain the design but editing can be an issue.

      Ideally the block editor should have offered the basic structure mechanism for layout, sections, rows, columns, with minimal controls for padding. A hook/API should have been added for third party themes and builders like Divi to add there own interfaces, bells and whistles. Switch to another theme and it least the layout would remain, to some degree, intact.

      From what I can see, until the block editor adopts this approach or, at least some other approach, it makes it difficult for developers like Elegant Themes to integrate in an easy or meaningful way with it. But, if and when that happens developers will have to up their game.

    • Well Arby I say we will at some point of time get a second Gutenberg update for DIVI. What it will be I do not know.

  3. blocks can make your life very easy if one knows how to use and reuse them. nicely written.

  4. Discovered something quite interesting, by accident with a copy and paste from the block editor to a Divi module on another page. You can reproduce designs, made in Gutenberg/block editor into a Divi layout and it works.

    There are many variants of this.

    My initial discovery was copy text out of a call to action block. My selection clipped the button and when I pasted in Divi the button appeared, fully rendered. It seems all the code/html gets carried over. I went back and opened Stackable Feature block to Edit as HTML, copied and pasted into a Divi code module, Boom!!! the block renders perfectly. Now you can’t do much with this unless you hack around in the html, so pasting back into a Gutenberg page would be the obvious thing to do. It does render but is placed into a classic block.

    The best way to do this then is to copy from Gutenberg when it is in the Code Editor mode, taking the as well. If you want to change it later copy it all back into the code editor and render the original block properly.

    • I brought this up with support before. Divi needs a content module that takes the content form the back end editor, TinyMCE text area in the case of the old editor, any html generated in the block editor. PageLines DMS has had this years ago.

  5. Great Tutorial, however I can’t imagine myself ever choosing to use Fuglytenberg instead of Divi !!

  6. very nice idea of Reusable Block, I will use it on my blog.
    Thanks.

  7. Great tutorial on “Reusable Blocks”. WIll try it on my WordPress blog now and see if it increases my productivity.

    • John Hughes

      Thanks for the kind words, Beena. 🙂

  8. It is good to know Reusable Blocks are GLOBAL on a WP installation.

    However, in a same question to ET (which I think is solved), what if you want to reuse those blocks on a different website/WP install?

    My guess is: sigh and re-create from scratch.

Join To Download Today

Pin It on Pinterest