Bug: Featured Image Block overlaps with other blocks if it's not the topmost block in a container

[liviopv]

Description

When editing a template, the Featured Image Block preview will overlap with other block previews if the Featured Image Block is not the topmost block in a container.

I tested with Gutenberg 16 RC4 on TT3, and I don't recall this being an issue with previous versions.

Step-by-step reproduction instructions

1. Edit a template that includes the Featured Image Block, like Page or Single
2. Reorder the Featured Image Block so it displays below another block, like Post Title
3. The Featured Image preview will overflow the adjacent block, visually displaying "below" it in the backend.

Screenshots, screen recording, code snippet

CleanShot.2023-06-13.at.10.45.07.video-converter.com.mp4

Environment info

• WordPress 6.2.2, Gutenberg 16 RC 4 running on a local site built on Local by Flywheel
• TT3 1.1
• Chrome 114, Mac OS 13.0.1

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]

Hi @liviopv, thanks for reporting. This issue was reviewed in today's Editor Bug Scrub, and we discovered that this is caused by some hardcoded negative margin in the page.html template of TT3. Negative margins are technically not supported in the Editor, due to issues like this, so it's a bit unfortunate that TT3 has this code. But thankfully this is not a broader issue with the Featured Image block. Therefore I am going to close this issue.

If you want to manually fix on your end, you just need to update this top margin setting:

[mrfoxtalbot]

Do we have a Core Trac ticket for this, @ndiego? Thank you!

[ndiego]

Do we have a Core Trac ticket for this, @ndiego? Thank you!

Not that I know of. As far as I am aware, this was an intended design choice in TT3.