• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Gutenberg Blocks

Create a Reusable Block in WordPress Gutenberg Editor

December 20, 2018 Updated on December 20, 2018 Marcy Diaz

Share this post:

TwitterFacebookPinterestLinkedInEmail

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.

Share this post:

TwitterFacebookPinterestLinkedInEmail

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus Tibesar says

    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!

    Reply
    • 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.

      Reply
  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.

    Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design
PO Box 94782
Phoenix AZ 85070

Phone: 602.759.0501
Email:

Contact Form
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!