If you are reading this tutorial, you have probably already tried the new Gutenberg editor for WordPress.

If you haven't yet, I recommend you give it a try. It is currently available as a plugin but will be merged with WordPress at some point in the future, so you will have to get to know it someday.

try gutenberg.png

Like all new UIs, it has its fans and detractors. It always takes time to get comfortable with a new interface, and it's tempting to dismiss the new version.

Like many people, I was skeptical of Gutenberg at first. I've been working with the old interface for a few years now and I'm familiar with it.

But Gutenberg brings a bunch of optimizations. And he has one feature that really made me think twice. What is this feature? These are the duplicate and shared blocks.

It may not sound like much, but it has the potential to make the way I create contents more efficient, and to make this contents more effective in bringing visiteurs to act after reading it.

In this tutorial, I'm going to show you how to create duplicate and shared blocks in Gutenberg and share some of the possibilities they open up.

But first, a quick primer on blocks.

What are the blocks?

Blocks are what turns on Gutenberg. All your contents will be added via a block. In the screenshot below you can see an article with a number of blocks in the editor:

write an article about Gutenberg.png

There are a wide variety of blocks out there, which will reflect the types of content that you are used to adding to your posts, but give you a different way to do it. The blocks include:

  • Text blocks - paragraphs, lists, headings, code, quotes, tables
  • Media blocks - image, gallery, audio, video
  • Layout elements - buttons, spacers, dividers, page breaks
  • Widget blocks - categories, latest posts, shortcode
  • Integrate blocks – YouTube, Soundcloud, Spotify, Twitter and more

The range of blocks is huge and growing with a number of third party plugins released that use the Gutenberg API to add additional blocks.

Whenever you need to add a piece of content to a post or page, you add a block. And each piece of content will be stored in its own block - even individual paragraphs.

This means that you can move your blocks around to edit and rearrange your content. It also means that you can reuse content blocks by creating a duplicate or shared block.

Duplicate Blocks

A duplicate block is pretty straightforward. You take an existing block that you created and make a copy of it.

To do this, hover the mouse over the ellipse (three points aligned vertically) to the right of the block and click on the option Duplicate .

to duplicate a block.png

A duplicate of this block will be created directly after the original block, in the same article.

You can use it when you want to duplicate content (such as a quote, takedown, call-to-action, or image) and add another copy elsewhere in your article. You just drag the new block to where you want it to be. Beware of placing duplicate blocks too close to each other or accidentally creating too many duplicates!

Another use can be when you want to create a second block that is similar to the first but not the same. In this case, you need to create the duplicate block and then modify it. This is useful if you've spent some time formatting your first block (eg, size an image) and want to duplicate the formatting, but change the content - or vice versa.

When you edit a duplicate block, the changes you make have no impact on the original block - they are two unconnected blocks.

Thus, duplicate blocks are great for saving time when you want to create content that is the same or slightly different from other content in your publication.

But they have one flaw - they work only in an individual article. What do you use if you want to duplicate content between articles? This is where shared blocks come into play.

Shared blocks

A shared block works differently from a duplicate block. When you create a shared block, it's like a template for all of the other blocks you create from it. And when you change any of those blocks, the changes are reflected in all shared blocks. You can override it, as I will show you shortly.

Create a shared block

To create a shared block, start by creating any type of normal block in the usual way. Then once you've done that, hover over the ellipse again and this time select the option Convert to shared block .

You will see a text field displayed below the block, where you will need to give the block a name.

create a reutilisable block.png

Give the block a unique name that will make sense when you add it to posts other than this one. It should be memorable, so you know exactly what the block is when you come to use it again in weeks or even months. I find it useful to add the block type after the title, in parentheses. Once you have typed the block name, press the button Save .

block gutenberg.png

The title you gave the block will display below it in the editor every time you use it, but it will not display in the front end of your site.

Reuse a shared block

The power of shared blocks is that, having created them once, you can reuse them as many times as you want, wherever you are on your site.

When you want to add a shared block to an article, instead of creating a regular text block, click the button + at the top left of the edit screen. A context menu will appear with a variety of block types for you to choose from. Scroll down until you see the option shared and click on it.

You will now see all of the shared blocks that you have created on your site. Mine looks a bit messy - I experimented with shared blocks on this local site and didn't give them the best name.

use reutilisable blocks.png

Now click on the shared block you want to use and it will be added to your article.

Editing shared blocks

Editing shared blocks comes with some complications that you should keep in mind. The first is that if you edit a shared block that you added to a post, its content will also be changed in each post where you added that block.

To modify the block, click on the button Edit taking into consideration its title. You can then edit the content and title of the block. These changes will take effect in all instances of the block.

It's a great way to make changes to your site if you have content that needs to be updated. For example, if you've used a shared block for a call-to-action with your phone number or email address and your contact details change, you will only need to edit the block once.

However, this is a problem if you just want to edit an instance of the shared block, and make its content slightly different in an article. To do this, you need to convert it to a normal block and then edit it. Hover over the ellipse to the right of the block and click on the option Remove reusable blocks.

remove reutilizable blocks.png

It will then behave like any other regular block on your site.

If you want to create another shared block similar to an existing block (for example, if you want two different versions of your call-to-action text that you'll use based on the content of the post), you can do that. Follow these steps:

  1. Create your first shared block as described above.
  2. Add the shared block to a new article
  3. Convert it to a normal block and modify it.
  4. Convert it to a shared block, like you did the first time.
  5. Give it a different name than the original one - a name that will help you easily identify the differences between the two blocks. Save it.

You now have two shared blocks that you can use anywhere on your site.

Storage of shared blocks

If you intend to create multiple shared blocks to use on your site, it makes sense to keep a copy of each of them if they are in a place where you can easily access and edit them.

I created an article on my site that I will not publish that contains a unique copy of each of the shared blocks I created.

Not only can I use this article to access all of my shared blocks - if I want, I can also add text above each one to provide a note on what each block is and where it's designed to go on my site, such as what type of posts, where in the post etc. This acts as a handy benchmark that I (or anyone else editing the site) can use to make sure I'm using shared blocks consistently. It also makes it easier for me to find a shared block if I need to edit it.

Duplicate and shared blocks make content management more efficient

Being able to create duplicate content like this in the form of duplicate or shared blocks makes the process of adding content to your site more efficient.

In my opinion, the biggest gains come from using shared blocks for content that you want to add to multiple posts on your site, such as calls to action. In the past this is something I've done by writing a plugin and hooking the content to an action hook in each of my posts - but that's only possible if your theme has a hook in the right place. and if you are comfortable with the code. Gutenberg will make it easier and faster to create, add, and manage duplicate content on a site.

Tell us how you used duplicate and shared blocks!