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.

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.

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.

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

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

Step 5. Select “Add to Reusable Blocks“.

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. 

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.

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. 

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.

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.

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. 

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