Create a Reusable Block in WordPress Gutenberg Editor

WordPress 5.0 and up has a new editor for posts and pages—the Gutenberg Editor. It’s different from the previous editor, as it puts everything into it’s own “block” — Page Titles, Headings, Paragraphs, Images, and more. Because of the blocks, the Gutenberg Editor is also referred to as a block editor.

teal and purple art photo by ferdinand stohr 149422 unsplash

The new Gutenberg editor has some features that the previous editor didn’t have. One of them is reusable blocks. This means that you can create a piece of content once and use it over and over in your WordPress posts and pages with just a click.

Note: The previous editor (TinyMCE) can still be used by installing the Classic Editor plugin. This is a great plugin because it allows you to use the new block editor on newer posts and pages, but still use the previous editor on your older posts and pages. This way, you don’t have to worry about something not working or breaking your website.

If you’ve never used the Gutenberg Editor, you can follow along or check out some other resources first.

You’re going to see how easy it is to create and reuse a block that you can use for ads, or calls to action, or affiliate disclosures. Since these are all done in the editor, they’ll work for any WordPress theme.

Create a Reusable Paragraph Block for Affiliate Disclosures

For this block, you’re just going to add your affiliate notice to a paragraph block.

gutenberg editor name reusable block

Step 1. First click the little plus sign in a circle. It’s always off to the bottom left or up at the top left of the editor.

Step 2. Choose the Paragraph block; it’s in the Most Used which is always open or the Common Blocks sections. You can click to open and close other sections to find other blocks.

gutenberg editor paragraph block

Step 3. You can see that you’re in the Paragraph block. Add your text; you have the formatting options shown in the image.

gutenberg editor add reusable block

Step 4. Click the 3 vertical dots; you’ll see all the options shown.

Step 5. Select “Add to Reusable Blocks“.

gutenberg editor add reusable block

Step 6. Add a name for your reusable block; you can name it whatever you like.

Step 7. Click the Save button. 

And that’s it! 

Now Reuse Your Paragraph Block

Now you’ll want to use your reusable paragraph block. So open a new post or page.

This time when you click to add a new block, in addition to the default sections — Most Used, Common Blocks, Formatting, Layout Elements, Widgets, Embeds — you’ll see a new Reusable block section, at the bottom. If you’ve installed any other block plugins, you’ll see them, as well. 

gutenberg editor add a block
gutenberg editor reusable affiliate block

Click to open the Reusable section and select the Affiliate Notice block that you made reusable, and you’re done!

Create a Custom HTML Reusable Block for a Call to Action

For the next reusable Gutenberg block, we’re going to use a Custom HTML block. If you have ads, you can use your ad code or make a call to action block that looks like this.

call to action from html block

You may already have an ad or a call to action box that you use, perhaps in a widget area. If not, you can try this one. Note that there are other block plugins that you can use for a call to action, but this method will let you reuse what you already have.

Step 1. You can find the Custom HTML block under the Formatting section of blocks. 

gutenberg custom html block

Step 2. If you’re taking your call to action from a text widget, you can change to the Text tab to copy the html.

Or here’s some html for you to copy and use. Change the heading, paragraph, and button text to be what you need for your own call to action. Be sure to replace the # with a link to your own contact page.

<div class="theme-callout-box">
    <h4>Is This Right for You?</h4>
    <p>Find out now. Get your questions answered with a quick complimentary call!</p>
    <p><a class="button" href="#">Contact Us
 Today!</a></p>
</div>

The code pasted in the Custom HTML block will look something like this.

call to action in custom html block

Step 3. You can also add a bit of CSS to the WordPress Custom CSS in the Customizer under Appearance > Customize. This adds a border, some padding, a bottom margin, and centers the text. Be sure to change the color #3a86ff.

.theme-callout-box {
	border: 3px solid #3a86ff;
	padding: 30px;
	margin-bottom: 30px;
	text-align: center;
}

Step 4. Save your Block: Next you want to use the 3 vertical dots on your Custom HTML block and choose Add to Reusable Blocks to save your call to action as a reusable block!

Use the Media & Text Block as a Reusable Block

There is a Media & Text block under the Layout Elements section. This block looks like the image below. It would make a great reusable block too. The image can be on either the right or the left.

gutenberg editor media text block

Here is an example that I did. I used the heading, but made the font smaller. I added a paragraph and a link, and centered the text. 

image for text - media block

Plan Your Year!

Get your free planning guide and get your year off to a great start!

Download Your Plan Now!

Let me know in the comments how you’re using your reusable blocks. And if you need help creating a custom block, contact me.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

3 responses to “Create a Reusable Block in WordPress Gutenberg Editor”

  1. This is one of the best Posts I have seen on Gutenberg, and especially reusable blocks.

    The next step perhaps would be to place all of these reusable blocks into a “reusable block template”.

    https://www.lynda.com/WordPress-tutorials/Create-templates-reusable-blocks/651229/5010138-4.html

    Thank you Marcy – wonderful job as always!

    • Marcy Diaz says:

      Thank you, Marcus! I’ll have a few more posts on using reusable blocks too.
      The Lynda post you link to is great, but my understanding is that it won’t be available without a subscription for much longer.

  2. Jim says:

    Thanks a lot for this useful tutorial, I need to create a Reusable Block, so it’s a great solution for me.

Leave a Reply

Your email address will not be published. Required fields are marked *