0

I have the following HTML/JS code:

<div style="position:relative; transition: all 0.3s cubic-bezier(0.65,0.05,0.36,1); height: 0px;">
    <iframe
        width="100%"
        height="100%"
        onload="window.addEventListener('message',e=>{if('https://m.ink'===e.origin){var t=e.data.split(':'),o=t[0],s=t[1],n=t[2];if(['load','show','hide','resize'].includes(o)){var r='mink_david_f8cbd4l3',i=document.getElementById(r);if(i&&s===r){var d=document.getElementById(r+'_preview');'load'===o?i.getAttribute('src')||(i.setAttribute('src','https://m.ink/david/this-is-a-quick-test-f8cbd4l3'),i.onload=()=>{sessionStorage.setItem(r+'_loaded','true'),d&&d.contentWindow&&d.contentWindow.postMessage('loaded','*'),'true'===sessionStorage.getItem(r+'_show')&&(i.style.setProperty('top',0),i.style.setProperty('pointer-events','auto'))}):'show'===o?'true'===sessionStorage.getItem(r+'_loaded')?(d.contentWindow.postMessage('loaded','*'),i.style.setProperty('top',0),i.style.setProperty('pointer-events','auto')):d&&d.contentWindow&&(d.contentWindow.postMessage('loading','*'),sessionStorage.setItem(r+'_show','true')):'hide'===o?(i.style.setProperty('top','100%'),i.style.setProperty('pointer-events','none')):'resize'===o&&n&&i.parentElement.style.setProperty('height',n+'px')}}}});"
        title="Mink Preview"
        src="https://m.ink/iframe/david/this-is-a-quick-test-f8cbd4l3?b=rgba%280%2C0%2C0%2C0.15%29&bg=%23FFFFFF&d=%233D4461&l=%23E81247&t=%232A304A"
        style="border:0px;"
        id="mink_david_f8cbd4l3_preview"
    ></iframe>
    <iframe
        title="Mink Full Screen"
        style="transition: all 0.3s cubic-bezier(0.65,0.05,0.36,1); position: fixed; width: 100vw; height: 100vh; top: 100%; left: 0; border: 0; z-index: 10000; pointer-events: auto; background: white;" 
        id="mink_david_f8cbd4l3"
    ></iframe>
</div>

I thought I could use the Custom HTML block, but it doesn't seem to like that.

When I preview the page, it looks like this:

enter image description here

Doesn't make any sense.

New to WordPress so not sure if I'm missing something.

1
  • Yikes! That JavaScript looks like it would be a pain to debug 😅. It looks like the block is treating the first > character as the end of the iframe tag (window.addEventListener('message',e=>), and then spitting out the rest to the page. That much JS would be better off enqueued or put in a plugin like WPCode. It would also solve your issue.
    – YourManDan
    Mar 9 at 17:01

0

Your Answer

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

Browse other questions tagged or ask your own question.