Create Duplicate Content with Gutenberg

If you’re reading this post, you’ve probably tried out the new Gutenberg editor for WordPress by now.

If you haven’t yet, I recommend giving it a go. It’s currently available as a plugin but will be merged into WordPress core at some point in the future, so you’ll have to get to know it sometime.

the Gutenberg plugin page on the WordPress plugins directory
Gutenberg is currently available as a free plugin

Like all new user interfaces, it has its fans and its detractors. It always takes time to familiarise yourself with a new interface, and it’s tempting to reject the new version as a pale imitation of the old familiar one.

Like many people reading this, I was skeptical of Gutenberg at first. I’ve been working with the old interface for a good few years now and it’s become familiar.

But Gutenberg is growing on me. And it has one feature which has made me really sit up and take notice. A feature which, for my money, is worth installing Gutenberg for that feature alone.

What’s that feature? It’s duplicate and shared blocks.

This may not sound like much but it has the potential to make the way I create content more efficient, and to make that content more effective at driving visitors to take action after reading it.

In this post I’m going to show you how 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 Blocks?

Blocks are what Gutenberg revolves around. All of your content will be added via a block. In the screenshot below, you can see a post with a number of blocks in the editor:

There are a wide variety of blocks, which will mirror the content types you’re used to adding to your posts, but which give you a different way of doing it. Blocks include:

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

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

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

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

Duplicate blocks

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

To do this, hover over the ellipsis (three dots one on top of the other) to the right of the block, and click on the Duplicate option.

how to duplicate a block in WordPress Gutenberg

A duplicate of that block will be created directly after the original block, in the same post.

You can use this when you want to duplicate some content (such as a quote, a pullout, a call to action or an image) and add another copy of it elsewhere in your post. You just drag the new block to the place in the post where you want it to go. Beware putting duplicate blocks too close to each other, or accidentally making too many duplicates!

Another use is where you want to create a second block which is similar to the first one but not identical. In this case, you’d create the duplicate block then edit it. This is useful if you’ve spent some time formatting your first block (e.g. sizing 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.

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

But they have one flaw – they only work within an individual post. What do you use if you want to duplicate content between posts? That’s where shared blocks, my favourite Gutenberg feature, come in.

Shared Blocks

A shared block works differently from a duplicated block. When you create a shared block, it’s like a template for all the other blocks you create from it. And when you edit any of those blocks, the changes will carry through to all of the shared blocks. You can override that, as I’ll show you shortly.

Creating 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 ellipsis again and this time, select the Convert to shared block option.

You’ll see a text field displayed under the block, where you should give the block a name.

creating a shared block

Give the block a unique name that will make sense when you’re adding it to posts other than this one. It needs to be memorable, so you know exactly what the block is when you come to use it again in weeks’ or even months’ time. I find it useful to add the type of block it is after the title, in brackets.

Once you’ve typed in the name for the block, hit the Save button.

When a block is saved, the title appears below the content

The title you’ve given the block will be displayed beneath it in the editor every time you use it, but it won’t be displayed in the front end of your site.

Reusing a Shared Block

The power of shared blocks is that, having created them once, you can then use them again as many times as you like, wherever in your site you want.

When you want to add a shared block to a post, instead of creating a normal text block, go to the + button at the top left of the editing screen. A popup menu will appear with a variety of block types for you to choose from. Scroll down until you see the Shared option and click on it.

You’ll now see all of the shared blocks you’ve created anywhere in your site. Mine look a bit messy – I’ve been experimenting with shared blocks on this local site and didn’t give them all the best kind of name.

adding a shared block to your post - choosing from shared blocks that have been created

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

a shared block added to a new post

Simple!

Editing Shared Blocks

Editing shared blocks comes with some complications, which you have to bear in mind. The first is that if you edit a shared block you’ve added to a post, its contents will also be changed in every post where you’ve added that block.

To edit the block, click the Edit button next to its title:

You can then edit the content and the title of the block. These edits will take effect in all instances of the block.

This is a great way to make changes throughout your site if you’ve got repeating 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’ll only need to edit the block once.

However, this is a problem if you just want to edit one instance of the shared block, and make its content slightly different in one post. To do this, you’d need to convert it back to a regular block and then edit that. Hover over the ellipsis on the right of the block and click the Convert to regular block option.

converting a shared block to a regular block

It’ll then behave just like any other regular block in your site.

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

  1. Create your first shared block as described above.
  2. Add the shared block to a new post
  3. Convert it to a regular block, and edit it.
  4. Convert it to a shared block, in the same way you did first time around.
  5. Give it a different name from the original one – a name that will help you easily identify the different between the two blocks. Save it.

Now you have two shared blocks you can use wherever you want in your site.

Storing Shared Blocks

If ypu’re planning on creating multiple shared blocks for use around your site, it makes sense to keep a copy of each if them in one place where you can easily access and edit them.

I’ve created a post in my site which I won’t publish, and which has a single copy of each of the shared blocks I’ve created.

a draft post containing nothing but shared blocks

Not only can I use this post to access all of my shared blocks – if I want to, I can also add text above each to provide a note as to what each block is for and where it’s designed to go within my site, such as what kind of posts, where in the post etc. This acts as a handy reference point I (or anyone else editing the site) can use to make sure I’m using the 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.

The biggest gains, in my view, are to be gained from using shared blocks for content you want to add to multiple posts in 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’re comfortable writing the code. Gutenberg will make it easier and quicker to create, add and manage duplicate content across a site.

Let us know how you’ve been using duplicate and shared blocks!

Rachel McCollin
How do you use duplicate and shared blocks already, or how do you think you could use them? Let me know in the comments!