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:
- Create and layout your block (for example a button: contact)
- Click on Add to Reusable Blocks, and give your block a name, and save
- Go to a page where you want to add the button
- Open the block section Reusable and select your saved block
- Insert your button on other pages as well
- Next day, you decide to rename the button from Contact into Get in touch
- Open any page that contains your button
- Click left to see the reusable dialogue
- Click edit
- Change the text of your button
- Click save (you have to click save, clicking update will not do the trick)
- 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.
last updated: 7 July 2019 Working with Gutenberg This post has nothing to do with the Easy Town Book Series and everything with this website. By now, I have built and rebuilt a few websites with the Gutenberg Editor, and I like it. Yes, you need a steady hand, some ingenuity, patience to get the…
last updated: 7 July 2019 Inline images Luckily, this is really simple now. It was a bit of a mess when Gutenberg was first launched. Now, you simply insert a picture above the text of your choice and select the position of the picture (see example right). You can use a spacer above the image…