Transform menu preview cut off or showing scrollbars

[annezazu]

Description

The preview for various transforms are either cut off or show a scrollbar randomly. This was found as part of the sixteenth FSE Outreach Program's call for testing:

Another time, when I was looking to transform a heading, the “preview” would sometimes be cut off. You can see this in the below video, especially the preview for transforming it to a paragaph. What’s odd is that hovering up and down over the different options, it sometimes displayed correctly and sometimes not.

Step-by-step reproduction instructions

1. Add some text to a paragraph or list block. Ensure there are 4-5 lines or items.
2. Open the transform menu and notice some of the options are cut off or show scrollbars.

Screenshots, screen recording, code snippet

Here's a video from a participant in the outreach program:

cut.off.mp4

Environment info

• WordPress 6.0.2
• GB 14.0.2
• TT2

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

[t-hamano]

About the cut-off, I think it is due to the margin-top of the block.
One solution is to set the margin of the root block to 0, as shown below.

.block-editor-block-preview__content-iframe .is-root-container > .block-editor-block-list__block {
	margin: 0;
}

078bb1fde3750070b7eb54d4195ffc46.mp4

However, this approach will not work if the top margin is applied to a child block. (For example, the quote block may have a child paragraph block with margin-top.

We can apply __experimentalpadding to provide padding around the preview, but this would not be a perfect way to prevent cutoffs.

I'm looking for someone who knows a good approach 🙂

[talldan]

About the cut-off, I think it is due to the margin-top of the block.

Thanks for the hint! That helped immensely. I stumbled across a solution for this in #44076.

edit: also put together a fix for the scrollbar issue in #44079.