Map block: blocks overlapping in editor

[coder-karen]

Impacted plugin

Jetpack

Quick summary

There is an issue with the display of the Map block on self-hosted sites, in the editor. New blocks added directly underneath will overlap with it.

Steps to reproduce

• On a self-hosted Jetpack site, add a Map block, and then attempt to add any other block directly underneath
• The new block will overlap with the map block - but only in the editor

A clear and concise description of what you expected to happen.

There should be no block overlap with the Map block in the editor.

What actually happened

Any new block added underneath the Map block overlaps with the block.

Workaround

There is a workaround possible - click on the 'resizable box' handle on the block, which auto sets the height. That is the small blue circle visible when selecting the block, and the horizontal line associated with it if visible.

Platform (Simple and/or Atomic)

Self-hosted

Logs or notes

This is only an issue for self-hosted sites as it's only an issue when we're using Mapbox. Setting document.cookie = "map_provider=mapkit"; in the browser console will switch the map to Mapkit, and the issue is then not present. Setting document.cookie = "map_provider=mapbox"; will switch it back.

[anomiex]

I'm seeing this on 6.6.2 as well.

Bisect turns up #38956 as the culprit. Looks like the addition of position: absolute in that PR broke <ResizableBox> having height: 'auto'.

[coder-karen]

Great catch @anomiex and thanks for the quick sleuthing.

Turns out there is an easy workaround in the meantime which is to click on the 'resizable box' handle, which sets defined height and auto fits to the map. Which I must have clicked when testing on 6.6.2. Updated the title and description.