Add New Page Screen: rendering issue with galleries in thumbnails and previews

[ianstewart]

To reproduce this issue, visit the new page screen in Calypso.

Gallery screens are not correctly rendering in thumbnails.

The Mayland layout is not rendering at all in preview.

[andrewserong]

@ianstewart, (this comment is very similar to the one in #48883) I put together a fix in #49101 that refactored the preview, however there are some concerns with the approach given that Ganon will be working on the redesigned layout picker shortly.

In the short-term, what do you think about us unpublishing / switching this layout to draft to hide it from the layout picker?

The issue is that the existing preview iframe does not load the necessary JS for the block to function. In the short-term it looks like the existing layout picker preview does not support any blocks that use JavaScript to render their default behaviour / layout.

[ianstewart]

Given the above direction, there's benefit in anticipating the changes and generally making blocks more resilient to rendering well in an iframe.
— Jon's comment on the PR

Sounds like it might be worth pursuing a fix still? But I'll draft the pattern in the meantime until we swap out the block and/or find a fix.

[andrewserong]

Thanks Ian, much appreciated!

Sounds like it might be worth pursuing a fix still?

Yes, particularly for #48883 given that the Map block is under our care, it'd be good to get to the bottom of how best to get blocks that depend on JS to update their front end rendering to play nicely in iframes. I'm pleased that we can at least hide the errors in the meantime.

Let's keep these issues open, and we can add more context as we learn more.

[andrewserong]

Looking into the issue in the screenshot separately in: 219-gh-Automattic/view-design — although this is specifically to do with the Masonry block, I get the feeling that fixing that display issue in the template/demo endpoint will resolve some other related issues.

[andrewserong]

Fix for 219-gh-Automattic/view-design in D57481-code. It's possible it'd be difficult to fix in the large iframe preview, because CoBlocks conditionally loads the JS for the block if the current post contains a masonry block (at least on the front end). Similarly to #48889, because the page layout picker will be refactored shortly, let's skip trying to get the large iframe preview working, and just focus on the fix for the template/demo endpoint in D57481-code. I'll leave this issue open until that fix lands.

[andrewserong]

Closing now as the fix for the template/demo endpoint was rolled out in D57481-code, so the affected patterns should work correctly once the new page layout picker is launched.