insertBlock Throws Error

nathan888
(@nathan888)

5 years, 5 months ago

I’m in the weeds of using the blocks API. The following bit of code is giving me issues.

const newBlock = createBlock(JSON.parse(target.getAttribute(“data-block”)).name);
console.log(newBlock)
insertBlock(newBlock);

New block returns what looks like a valid block but insertBlock returns this error.

editor.js:148 Uncaught TypeError: Object(…) is not a function

I’ve tried using both insertBlock and InsertBlock with an array wrapper.

Viewing 1 replies (of 1 total)

Plugin Author Daniel Richards
(@talldanwp)

5 years, 5 months ago
@nathan888 Here’s the API reference for insertBlock:
https://developer.wordpress.org/block-editor/data/data-core-block-editor/#insertBlock

As your code snippet isn’t very complete it’s hard to provide feedback, but the error tells me that you’re trying to call something that’s an object as a function, quite possibly when you call insertBlock. How are you referencing insertBlock?

If you try the following in your browser console, it should work and will hopefully get you started:
```
wp.data.dispatch( 'core/block-editor' ).insertBlock( wp.blocks.createBlock( 'core/paragraph' ) );
```
If you have experience of redux you might be familiar with dispatch and actions. The ‘core/block-editor’ part is required because the block editor is built in a modular way with multiple data stores, the ‘core/block-editor’ namespace makes sure you’re using the right store.

The documentation for wordpress data is pretty long unfortunately:
https://developer.wordpress.org/block-editor/packages/packages-data/

There are some other blog posts I found that might be useful:
– https://riad.blog/2018/06/07/efficient-client-data-management-for-wordpress-plugins/
– https://getwithgutenberg.com/2019/05/selecting-and-dispatching-with-the-data-store/

But it’s worth noting that they’re a little older, for React components the recommended APIs are now useSelect and useDispatch:

Introducing useDispatch and useSelect

Viewing 1 replies (of 1 total)

The topic ‘insertBlock Throws Error’ is closed to new replies.