I have this code that I am trying to rewrite for Gutenberg block:

    <script type="text/javascript">
        <iframe onload="javascript:resizeIframe(this);" 
            src="/modularconvbox/modularconvbox.php?type=newsletter&amp;title=Subsribe to our newsletter!&amp;text=Once in a lifetime opportunity to get all our latest posts delivered right to your inbox!&amp;button=Subscribe!&amp;secret=not_set"
             scrolling="no" frameborder="0" width:100%="" style="width: 1px; min-width: 100%; border: none; height: 70px;">
      function resizeIframe(obj){
         {obj.style.height = 0;};
         {obj.style.height = (obj.contentWindow.document.body.scrollHeight+70) + "px";}

This is my save() function:

save({ attributes }) {
  return (

      src={"https://domain.me/modularconvbox/modularconvbox.php?type=newsletter&title=" + attributes.title + "&text=" +attributes.text + "&button=" + attributes.button + "!&secret=" + attributes.button} 
      scrolling= {"no"} 
      frameborder= {"0"} 
      width= {"100%"} 


I don't know how to wirte this resizeIframe function. It seems nothing I write here works. I've tried to test with:

 onLoad={() => console.log('LOADED')}

Does anyone know how to get this to work?

  • I would note that this is perhaps more applicable to general React components than you might realise, just note that you may not necessarily want to apply it to the save function, try the edit function instead
    – Tom J Nowell
    Commented Jul 10, 2018 at 15:35
  • In particular: github.com/WordPress/gutenberg-examples/blob/master/…, the save function determines what gets put in the document, not what is displayed on screen, so it doesn't make sense to apply JS libraries to it
    – Tom J Nowell
    Commented Jul 10, 2018 at 15:40
  • @TomJNowell Could you, please, be more precise about how I should change the code to add an onLoad function to the iFrame that will be saved? I am still trying to get familiar with React Commented Jul 10, 2018 at 21:43
  • I don't know how to integrate it, else I'd answer, but the answer here would be the same as any answer in generic React, except it would be in an edit function not a save function. Applying it in the save function makes no sense, similar to how to apply a JS library directly to a database table
    – Tom J Nowell
    Commented Jul 11, 2018 at 7:13


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.