Gutenberg How to Insert a Reusable Block Anywhere in the Editor with JavaScript

Python What is the Point of Finally

To add a reusable Gutenberg block anywhere in the WordPress post:

  1. Select any block.
  2. Get the ID of the selected block.
  3. Find the index of the selected block with the help of the ID.
  4. Insert the new block at the index.

For example, to add a paragraph anywhere in the post using JavaScript, run this piece of code:

var selectionID = document.getSelection().focusNode.parentElement.id.split("block-")[1];

var index = wp.data.select('core/editor').getBlocks().map(function(block) { return block.clientId == selectionID; }).indexOf(true) + 1;

const newBlock = wp.blocks.createBlock( "core/paragraph", {
    content: 'This is a paragraph',
});

wp.data.dispatch("core/editor").insertBlocks(newBlock, index);

This example adds a new paragraph below the block you have selected in the post editor in WordPress.

Gutenberg add a block to a selected block using JavaScript

Detailed Description

You may know you can use JavaScript to add reusable blocks to the Gutenberg editor in WordPress.

For example, to programmatically add a new paragraph to your post, you can run the following JavaScript code:

const newBlock = wp.blocks.createBlock("core/paragraph", {
    content: 'This is a paragraph',
});

wp.data.dispatch("core/editor").insertBlocks(newBlock);

But this piece of code adds the new paragraph at the of the post. This is not what you want. Instead, you want to insert the block at any selected location in the post.

Let me show you how to do it.

How to Insert a Block Anywhere in the Post

To insert the block anywhere in the post (on any selected block), specify the index at which you want to add it. This happens by adding a second parameter to the insertBlocks() method.

But how do you know the index of the current selection?

1. Select Any Block in the WordPress Gutenberg Editor

Open up a post you are editing with the Gutenberg editor.

Activate any block by clicking on it. This can also be an empty new block that says Type / to choose a block

2. Get the ID of the Selected Block Element

First, get the ID of the block you have selected. Here is one way you can do it. (This picks the ID of the HTML element of the selected block.)

var selectionID = document.getSelection().focusNode.parentElement.id.split("block-")[1];

3. Get the Index of the Selection

Access all the blocks in the post and figure out the index of your selected block. You can do this with the ID you figured out in the previous step:

var index = wp.data.select('core/editor').getBlocks().map(function(block) { return block.clientId == selectionID; }).indexOf(true) + 1;

Now you know the index of the block you have selected.

4. Insert the Block at the Index After the Selection

Next, insert the block at the index after the selection. To do this, pass it as a second parameter to the insertBlocks() method:

const newBlock = wp.blocks.createBlock( "core/paragraph", {
    content: 'This is a paragraph',
});

wp.data.dispatch("core/editor").insertBlocks(newBlock, index);

And that’s it!

Full Code

Here is the full code for your convenience:

var selectionID = document.getSelection().focusNode.parentElement.id.split("block-")[1];

var index = wp.data.select('core/editor').getBlocks().map(function(block) { return block.clientId == selectionID; }).indexOf(true) + 1;

const newBlock = wp.blocks.createBlock( "core/paragraph", {
    content: 'This is a paragraph',
});

wp.data.dispatch("core/editor").insertBlocks(newBlock, index);

Test It in the JavaScript Console

Feel free to try it out by:

  • Opening a JavaScript console on a post you are editing
  • Select any block with your mouse.
  • Run the above code in the console
  • See a new paragraph appear below the selection.
Gutenberg add a block to a selected block using JavaScript

Conclusion

Thanks for reading. I hope you find it useful.

Happy coding!

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest