diff --git a/wp-content/plugins/vf-gutenberg/assets/vf-blocks.js b/wp-content/plugins/vf-gutenberg/assets/vf-blocks.js index d28a1fde0..e3bf46006 100644 --- a/wp-content/plugins/vf-gutenberg/assets/vf-blocks.js +++ b/wp-content/plugins/vf-gutenberg/assets/vf-blocks.js @@ -396,17 +396,19 @@ var store$3 = sharedStore.exports = globalThis$b[SHARED] || defineGlobalProperty$2(SHARED, {}); (store$3.versions || (store$3.versions = [])).push({ - version: '3.49.0', + version: '3.50.0', mode: 'global', copyright: '© 2013–2025 Denis Pushkarev (zloirock.ru), 2025–2026 CoreJS Company (core-js.io). All rights reserved.', - license: 'https://github.com/zloirock/core-js/blob/v3.49.0/LICENSE', + license: 'https://github.com/zloirock/core-js/blob/v3.50.0/LICENSE', source: 'https://github.com/zloirock/core-js' }); var store$2 = sharedStore.exports; + // eslint-disable-next-line es/no-object-create -- safe + var create$1 = Object.create || Object; var shared$3 = function (key, value) { - return store$2[key] || (store$2[key] = value || {}); + return store$2[key] || (store$2[key] = value || create$1(null)); }; var requireObjectCoercible = requireObjectCoercible$2; @@ -8748,6 +8750,7 @@ if (ResizeObserver) { const [acfId] = React.useState(acf.uniqid('block_')); const [isFetching, setFetching] = React.useState(true); const [isLoading, setLoading] = React.useState(true); + const [previewHeight, setPreviewHeight] = React.useState(0); const [render, setRender] = React.useState(''); const [script, setScript] = React.useState(null); const ref = React.useRef(null); @@ -8764,10 +8767,13 @@ if (ResizeObserver) { id } = ev.data; if (id && id.includes(acfId)) { + const height = Number(ev.data.height); + if (height && isFinite(height)) { + setPreviewHeight(Math.ceil(height)); + } const targetWindow = ev.currentTarget || window; clearTimeout(targetWindow[`${id}_onMessage`]); targetWindow[`${id}_onMessage`] = targetWindow.setTimeout(() => { - targetWindow.removeEventListener('message', onMessage); setLoading(false); }, 100); } @@ -8857,10 +8863,16 @@ if (ResizeObserver) { if (isLoading) { rootAttrs.style.minHeight = '100px'; } + if (previewHeight) { + rootAttrs.style.minHeight = `${previewHeight}px`; + } const viewStyle = {}; if (isLoading) { viewStyle.visibility = 'hidden'; } + if (previewHeight) { + viewStyle.minHeight = `${previewHeight}px`; + } return wp.element.createElement("div", rootAttrs, isLoading && wp.element.createElement(components.Spinner, null), wp.element.createElement("div", { ref: ref, style: viewStyle, diff --git a/wp-content/plugins/vf-gutenberg/assets/vf-gutenberg.js b/wp-content/plugins/vf-gutenberg/assets/vf-gutenberg.js index 5fc9d7d3e..f372dc56c 100644 --- a/wp-content/plugins/vf-gutenberg/assets/vf-gutenberg.js +++ b/wp-content/plugins/vf-gutenberg/assets/vf-gutenberg.js @@ -106,7 +106,7 @@ }; const handleResizeMessage = (doc, data) => { - if (data !== Object(data) || !/^vfblock_/.test(data.id)) { + if (data !== Object(data) || !/^(vfblock_|vfwp_)/.test(data.id)) { return; } const iframe = doc.getElementById(data.id); @@ -171,7 +171,8 @@ if ( existingIframe && - existingIframe.dataset.srcdoc === template.innerHTML + existingIframe.dataset.srcdoc === template.innerHTML && + existingIframe.vfActive ) { return; } @@ -185,25 +186,87 @@ iframe.classList.add('vf-block__iframe'); iframe.style.overflow = 'hidden'; iframe.scrolling = 'no'; - iframe.srcdoc = template.innerHTML; iframe.dataset.srcdoc = template.innerHTML; - iframe.addEventListener( - 'load', - () => { - const doc = iframe.contentWindow.document; - const render = doc.createElement('div'); - render.id = iframe.id; - render.classList.add('vf-block-render'); - render.innerHTML = doc.body.innerHTML; - doc.body.innerHTML = ''; - doc.body.appendChild(render); - iframe.vfActive = true; - }, - {once: true} - ); + const resizeIframeToContent = () => { + const doc = iframe.contentWindow && iframe.contentWindow.document; + const render = doc && doc.getElementById(iframe.id); + if (!render) { + return; + } + + const renderRect = render.getBoundingClientRect(); + let height = Math.max( + renderRect.height, + render.scrollHeight, + render.offsetHeight + ); + + // Include positioned or floated children that do not increase the + // wrapper's normal-flow height. + Array.prototype.forEach.call(render.children, (child) => { + const childRect = child.getBoundingClientRect(); + height = Math.max(height, childRect.bottom - renderRect.top); + }); + + if (height > 0) { + iframe.style.height = `${Math.ceil(height)}px`; + } + }; + + const observeIframeContent = (render) => { + const iframeWindow = iframe.contentWindow; + if (iframeWindow && 'ResizeObserver' in iframeWindow) { + const resizeObserver = new iframeWindow.ResizeObserver( + resizeIframeToContent + ); + resizeObserver.observe(render); + Array.prototype.forEach.call(render.children, (child) => { + resizeObserver.observe(child); + }); + iframe.vfResizeObserver = resizeObserver; + } + + Array.prototype.forEach.call(render.querySelectorAll('img'), (image) => { + if (!image.complete) { + image.addEventListener('load', resizeIframeToContent, {once: true}); + image.addEventListener('error', resizeIframeToContent, {once: true}); + } + }); + + resizeIframeToContent(); + [50, 100, 500, 1000, 2000].forEach((delay) => { + iframeWindow.setTimeout(resizeIframeToContent, delay); + }); + if (iframeWindow.document.fonts && iframeWindow.document.fonts.ready) { + iframeWindow.document.fonts.ready.then(resizeIframeToContent); + } + }; + + const prepareIframeRender = () => { + const doc = iframe.contentWindow && iframe.contentWindow.document; + if (!doc || !doc.body || iframe.vfActive) { + return; + } + if (!doc.getElementById('vf-block-render-js')) { + return; + } + + const render = doc.createElement('div'); + render.id = iframe.id; + render.classList.add('vf-block-render'); + render.innerHTML = doc.body.innerHTML; + doc.body.innerHTML = ''; + doc.body.appendChild(render); + iframe.vfActive = true; + observeIframeContent(render); + }; + + iframe.addEventListener('load', prepareIframeRender); + iframe.srcdoc = template.innerHTML; block.appendChild(iframe); + requestAnimationFrame(prepareIframeRender); iframes.set(node, iframe); if (template.hasAttribute('data-is-container')) { diff --git a/wp-content/plugins/vf-gutenberg/blocks/vf-core/vf-plugin.jsx b/wp-content/plugins/vf-gutenberg/blocks/vf-core/vf-plugin.jsx index 2e284c73d..505dfd168 100644 --- a/wp-content/plugins/vf-gutenberg/blocks/vf-core/vf-plugin.jsx +++ b/wp-content/plugins/vf-gutenberg/blocks/vf-core/vf-plugin.jsx @@ -20,6 +20,7 @@ const Edit = (props) => { const [acfId] = useState(acf.uniqid('block_')); const [isFetching, setFetching] = useState(true); const [isLoading, setLoading] = useState(true); + const [previewHeight, setPreviewHeight] = useState(0); const [render, setRender] = useState(''); const [script, setScript] = useState(null); const ref = useRef(null); @@ -35,10 +36,13 @@ const Edit = (props) => { } const {id} = ev.data; if (id && id.includes(acfId)) { + const height = Number(ev.data.height); + if (height && isFinite(height)) { + setPreviewHeight(Math.ceil(height)); + } const targetWindow = ev.currentTarget || window; clearTimeout(targetWindow[`${id}_onMessage`]); targetWindow[`${id}_onMessage`] = targetWindow.setTimeout(() => { - targetWindow.removeEventListener('message', onMessage); setLoading(false); }, 100); } @@ -134,11 +138,17 @@ const Edit = (props) => { if (isLoading) { rootAttrs.style.minHeight = '100px'; } + if (previewHeight) { + rootAttrs.style.minHeight = `${previewHeight}px`; + } const viewStyle = {}; if (isLoading) { viewStyle.visibility = 'hidden'; } + if (previewHeight) { + viewStyle.minHeight = `${previewHeight}px`; + } return (