Add new page screen: Issue with rendering map block in in preview

[ianstewart]

To reproduce, visit the add new page screen and observe the following contact pattern.

(Note: the issues in this screenshot with the gallery patterns are reported in #48881)

This is the editor content for the source site:

https://dotcompatterns.wordpress.com/2020/01/24/contact-7/

[andrewserong]

@ianstewart, 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]

Following this comment …

#48881 (comment)

I've kept this pattern live but am removing it from the page layout picker for now.

[andrewserong]

In terms of investigating how to get the Map block to play nicely in an iframe context, it looks like the Map block is complaining because the ref we're passing it in https://github.com/Automattic/jetpack/blob/e13487d0dbbe4c743739b6f1a3e37c143a8c2614/projects/plugins/jetpack/extensions/blocks/map/component.js#L331 is not a real HTMLElement (at this stage I believe it's a virtual React DOM object at the time of attempting to use it)... this might require a fix in Jetpack to get it to work well.

[andrewserong]

Related issue with mShots: Automattic/mShots#30

[andrewserong]

Update: it looks like Mapbox v2.1 might resolve the mShots rendering issue directly (I've added a comment in: Automattic/mShots#30 (comment)), however Mapbox v2 drops IE11 support, which is a non-starter in Jetpack. So, I think our next best bet is to see about adding support for the Mapbox Static Images API which was raised in Automattic/jetpack#14827.

The solutions are therefore:

• Short-term: add in support for static images in Mapbox, and then in page layout patterns that use the Map block, switch them to use static images by default
• Long-term: if and when Jetpack eventually drops IE11 support, upgrade Mapbox to v2