Working with Gutenberg, part 2: reusable blocks

last updated: 7 July 2019

Gutenberg: Reusable blocks

I use reusable blocks for two tasks. Either to save a layout I want to use again, or to create a layout with identical content I want to use on several pages within the website. Let’s have a closer look at both.

Saving a layout

Even within a single page you might want to use a layout element several times. On this page, for example, I start each section with a headline wedged between two separators. I can either copy and past these elements, or I save them as reusable block and add them whenever I start a new section. Both approaches work. The advantage of the reusable block is that I can use it on any other page within this website too.

On this website I’ve used reusable blocks for buttons, for the three-step columns, for the related posts columns, some of the forms, and some others.

You can basically save any layout / block as reusable block. However, remember the following: After inserting a reusable block which only serves as layout copy, do click on ‘Convert to regular block’ to make sure the block becomes independent from the saved version. Find out why in the next paragraph.

Using identical content in various places

If you want to display identical content on various pages, you only have to create the content once and save it as reusable block. Moreover, you only have to make adjustments once.

How it works:
  1. Create and layout your block (for example a button: contact)
  2. Click on Add to Reusable Blocks, and give your block a name, and save
  3. Go to a page where you want to add the button
  4. Open the block section Reusable and select your saved block
  5. Insert your button on other pages as well
  6. Next day, you decide to rename the button from Contact into Get in touch
  7. Open any page that contains your button
  8. Click left to see the reusable dialogue
  9. Click edit
  10. Change the text of your button
  11. Click save (you have to click save, clicking update will not do the trick)
  12. Voilà, all buttons on every page will now read Get in touch. Well, all buttons that came from the same reusable button block.

On this page, I also used a reusable block for the anchor-links you find above each major headline. If I want to change a link, or add on, then this change will automatically be visible in all anchor-link blocks.

How to do complex reusable blocks? Use Atomic Blocks container.

If you want to combine more than one block into a single reusable block, you’d best use the Atomic Blocks container. Take for example the comment section at the end of this page. I put the separators, and the headline into a full width container.

Then I put the form into another container with a max width of 900px and added this container to the first one. And lastly, I converted the main container into a reusable block.

On a side note, I opted out of the WordPress comment form for two reasons, I only wanted two fields (email + comment), and I wanted to add the private policy note to be on the safe side regarding the GDPR.

Questions, Tips, Comments

I look forward to questions, tips and comments. The email from this form will be sent directly to my lemon pix media account. If you’d like a look at my other web design and photography work, visit the lemon pix media website.

Questions Gutenberg / WordPress