Dimension visualizers do not display correctly in specific situations

[ndiego]

Description

Dimension visualizers for padding and margin are not always accurately displayed in the Editor. If a block is positioned at the top of the post or the top of a container block, hovering over a dimension control shifts the block down slightly. The visualizers do appear correctly, but the block is shifted by what appears to be the site-wide blockGap value.

Hovering over a second block with active padding or margin displays the visualizers, but they are off. See the gif below.

I believe the markup for the visualizers is getting hit by blockGap in some way. 🤔

Step-by-step reproduction instructions

1. Add a paragraph block with some text.
2. Apply top and bottom padding.
3. Duplicate the block.
4. On the first paragraph, hover over the padding control in the Dimensions panel and see that the block is shifted down slightly.
5. On the second paragraph, hover over the padding control in the Dimensions panel and see that the padding visualizers are off.

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.1.1
• Gutenberg trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[ndiego]

cc @glendaviesnz @jasmussen

[annezazu]

Since this was tested with GB trunk, assuming this includes the fix for a prior issue here #47139 cc @talldan who worked on that fix as a result.

[glendaviesnz]

@ndiego you are correct that it is related to the block gap - if I remove the top margin that is added to the second paragraph it fixes it. I will try and work out how we can get the overlay to account for this margin.

[glendaviesnz]

Looks like it is something to do with the calculation of the translateY value by the popover library. Currently, this value matches offsetTop which pushes the box out by the size of the block margin, but if translateY is adjusted to offsetHeight in dev tools the popover then sits in the right place.

[talldan]

It looks like what's happening is that the visualizer's popover component is receiving the same margin-block-start as whatever the block spacing is, and that margin is pushing it out of alignment with the block itself. The styles for block spacing don't distinguish between whether an element is a block or something else:

Here's the box model for the popover when block spacing is applied, showing the 176px margin at the top:

This is partly a side effect of the way the popover renders inline within the block list as discovered over on #47139. I'm not sure why it does that, but it seems like it's been the case for a long time.

Probably the best thing would be to make the popover render in a slot outside of the editor canvas, but I noticed in #47139 that this did introduce some other issues that made the visualizer inaccurate 😄 .

I'll put together a PR to make it use a slot, and then we can work through those other issues one by one.