6 Ways to Copy and Duplicate Gutenberg Blocks in WordPress

WordPress introduced Gutenberg block editor with version 5.0. From there, almost each version update has new features for optimizing Gutenberg editor. Frankly, Gutenberg offers superior options compared to previous Classic Editor with rearrangeable blocks. One of the useful function in Gutenberg is to duplicate a block and insert on the same or another page on your site. If you wonder how to copy and duplicate Gutenberg blocks, we will explain here.

Why to Copy or Duplicate Blocks?

Many users keep templates for reusing when creating posts. This will help to focus on new content while reusing existing content. For example, you maybe interested in inserting a call to action or social icons block created with Gutenberg on various posts. There could also be situations you want to reuse a block on the same post by modifying its content. In any case, copying the block and duplicating can save lot of time. Gutenberg offers multiple ways to copy and duplicate a block depending on your need.

1. Use copy content menu
2. Use duplicate context menu
3. Edit code and copy content
4. Copying multiple blocks
5. Copy all blocks on a page
6. Reusing block content

Let us explain all these options in detail. If you are looking for bulk duplication of multiple posts, check out how to use duplicate posts plugin for that purpose.

Gutenberg Block Settings Menu

After creating a block and customized as per your need, click on the three dots icon that shows “More options”. It will open a context menu with multiple items like below.

1. Using Copy Menu

The easiest way is to use the “Copy” option from the context menu.

• Click on “Copy” option to copy the block to your clipboard.
• You will see a message that the element is copied to clipboard.
• Go to any other page on your site or any other website that has Gutenberg editor.
• Create a new paragraph block.
• Press “Control + V” in Windows and “Command + V” in macOS to paste the block.
• You can get the same block with all the content.
• Update the content if required and use the block.

2. Duplicating on Same Page

Use the “Duplicate” context menu, if you want to simply duplicate the block. This is useful when you want to create multiple blocks with style having different content. After duplicating a block, you can edit the content independently and update as per your need.

3. Edit as HTML

“Edit as HTML” option allows you to view the backend code the selected block. Though you can use this option to insert inline style to elements, you can also copy the code of a block. After copying, again click on the option button and select “Edit visually” to go back to normal view.

Create a new paragraph block and paste the copied code. This will create a duplicate of the original block.

4. Copying Multiple Blocks

Now, you know how to copy and duplicate single block content. The next option is to copy the content of multiple blocks and Gutenberg allows to do that as well.

• Select multiple blocks by holding shift keys.
• Click on the “Change block style” button that appears first in the list.

• Select “Group” to combine the selected blocks as a single element.
• You will see all the selected blocks are grouped inside a single box.
• Now, click on more options button and select “Copy”.
• This will copy the content of all the blocks inside a group block.
• You can paste the copied blocks anywhere on your website.

• You can also use the duplicate menu to clone multiple blocks with single click.

SEO Offer: Optimize your site with Semrush Pro special 14 days free trial.

5. Copy Entire Page Content

Let’s say, you have 25 blocks on the page and wanted to copy the entire content. It does not make sense to copy one by one or group them. Gutenberg allows two ways to copy the entire content of a page from the editor.

• Click on the three vertical dots button that shows “More tools & options” on the top right corner of the editor. Remember, this is a different options button available at editor level and not the button on the block.
• Select “Copy all content” option to copy the entire content into your computer’s clipboard.
• You will get a message that shows “All content copied”.

• Alternatively, click on “Code editor” to view the backend code.
• Select all the code and copy to your clipboard.

• Exit code editor to go back to the visual mode.

6. Reusable Blocks

All the above options allow you to copy and duplicate Gutenberg blocks in WordPress as a one-time action. However, you may want to reuse the block or grouped blocks whenever you login to your dashboard for creating / editing posts. In this case, you can follow the below instructions:

• Choose the “Add to Reusable blocks” menu from the block’s option.
• You will see a message “Block created” and provide the name for your reusable block.
• Click “Save” button to add the block into reusable group.

• You can search and insert reusable blocks by name similar to any other Gutenberg blocks.
• Alternatively, click on the + icon on the left corner of the editor and go to “Reusable” section.
• Here you can find all reusable bocks you have created on your site.
• Click on the block to insert on your page.

• After inserting a reusable block, click on the block options icon and select “Convert to Regular Block”.
• Start editing the block content and publish your page.

Using Copied Blocks Across Sites

The beauty of Gutenberg is that you can copy the block and paste it on any other website to duplicate the content. With this, you can use single block style across multiple sites by copying and duplicating the block and then adding into reusable section on each site. However, when pasting blocks on another website, block’s font and style may differ based on your theme’s style.