How to add javascript function in the “save()” of gutenberg block?


I have created a custom Gutenberg block that creates a form. This form contains a button and I want to attach a script to this button to do form validation and then make an AJAX call to back end to submit the form.

I have all this working correctly in the “edit” function. And things work as expected in Gutenberg edit mode.

What question is about the save function. First of all I am not able to use Button component in save mode. If I use button element and attach function to onclick as onclick ={OnHandleSubmit}, the curly brackets do not resolve and I get the text as is in the final html.

If I write my own function in save render html the curly brackets in the script cause a problem.

I tried writing my function in separate js file and en-queuing that, but I get function not defined error.

Finally, I had to resort to using & # 123; etc in place of special characters in the script in the “save” function. I feel that there must be a better way to handle the script in save mode.

Please help with this.


Aalok Bhatwal 4 years 2019-04-04T20:23:58-05:00 0 Answers 88 views 0

Leave an answer