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:
Doesn't make any sense.
New to WordPress so not sure if I'm missing something.
>
character as the end of theiframe
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.