Skip to content

fix: members block gutenberg preview #1502

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kasprzyk-sz merged 1 commit into from
Aug 20, 2026
Merged

fix: members block gutenberg preview #1502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions wp-content/plugins/vf-gutenberg/assets/vf-blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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);
}
Expand Down Expand Up @@ -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,
Expand Down
97 changes: 80 additions & 17 deletions wp-content/plugins/vf-gutenberg/assets/vf-gutenberg.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -171,7 +171,8 @@

if (
existingIframe &&
existingIframe.dataset.srcdoc === template.innerHTML
existingIframe.dataset.srcdoc === template.innerHTML &&
existingIframe.vfActive
) {
return;
}
Expand All @@ -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')) {
Expand Down
12 changes: 11 additions & 1 deletion wp-content/plugins/vf-gutenberg/blocks/vf-core/vf-plugin.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
}
Expand Down Expand Up @@ -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 (
<div {...rootAttrs}>
Expand Down
62 changes: 43 additions & 19 deletions wp-content/plugins/vf-gutenberg/vf-gutenberg.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,18 +353,7 @@ static function acf_render_template($args, $template, $acf_id = false) {

$is_inline_preview = false;
if ( ! $is_plugin) {
$template_path = is_string($template)
? wp_normalize_path($template)
: '';
$plugin_dir = wp_normalize_path(WP_PLUGIN_DIR) . '/';

if (
is_callable($template)
|| (
! empty($template_path)
&& strpos($template_path, $plugin_dir) === 0
)
) {
if (is_callable($template)) {
$is_inline_preview = true;
}
}
Expand Down Expand Up @@ -432,15 +421,50 @@ static function acf_render_template__deprecated($block, $html) {
</div>
<script>
(function() {
const iframeId = <?php echo wp_json_encode($id); ?>;
const parent = document.querySelector('.vf-block-preview[data-id="<?php echo esc_attr($acf_id); ?>"]');
if (!parent) {
return;
}

window.vfResizeHandlers = window.vfResizeHandlers || {};
if (window.vfResizeHandlers[iframeId]) {
window.removeEventListener('message', window.vfResizeHandlers[iframeId]);
}

Array.prototype.forEach.call(parent.children, function(child) {
if (
child.tagName === 'IFRAME' &&
child.classList.contains('vf-block__iframe')
) {
child.remove();
}
});

const iframe = document.createElement('iframe');
iframe.id = '<?php echo $id; ?>';
iframe.classList.add('vf-block__iframe');
iframe.style.overflow = 'hidden';
iframe.scrolling = 'no';
iframe.srcdoc = <?php echo json_encode($html); ?>;
iframe.vfActive = true;
parent.insertBefore(iframe, parent.firstChild);
iframe.id = iframeId;
iframe.classList.add('vf-block__iframe');
iframe.style.overflow = 'hidden';
iframe.scrolling = 'no';
iframe.srcdoc = <?php echo wp_json_encode($html); ?>;
iframe.vfActive = true;

window.vfResizeHandlers[iframeId] = function(event) {
const data = event.data;
if (data !== Object(data) || data.id !== iframeId) {
return;
}

const height = Number(data.height);
if (!height || !isFinite(height)) {
return;
}

iframe.style.height = Math.ceil(height) + 'px';
};
window.addEventListener('message', window.vfResizeHandlers[iframeId]);

parent.insertBefore(iframe, parent.firstChild);
})();
</script>
<?php
Expand Down
Loading