Post Featured Image inconsistent style between Editor and front end

[albarin]

Description

The Post Featured Image has different behavior in the editor and in the front end.
When inserted in a column, if the image is wider than the column it shows under the second column content in the editor, but over it in the front-end.
It should have the same behavior in both cases.

Step-by-step reproduction instructions

1. Create a new page or post.
2. Insert a columns block with two columns.
3. Insert the Post Featured Image in the left column and give it a width larger than the column.
4. Insert some other block on the right column (like a Paragraph with some text).
5. Notice the image is shown under the right column blocks in the Editor.
6. Save and go to the front end and notice the image is shown over the right column blocks.

Screenshots, screen recording, code snippet

Editor	Front-end

Environment info

WordPress 6.2.2
Gutenberg 16.0.0

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

[ghorivipul97]

@carolinan kindly please assign this issues

[jordesign]

Hi @albarin - thanks for reporting this.

I'm interested to know - is this occurring for you with one of the default themes (like TwentyTwentyThree) or is it only with your current theme? I'd appreciate it if you could install and activate TwentyTwentyThree and see if the issue occurs then as well.

[albarin]

Hi @albarin - thanks for reporting this.

I'm interested to know - is this occurring for you with one of the default themes (like TwentyTwentyThree) or is it only with your current theme? I'd appreciate it if you could install and activate TwentyTwentyThree and see if the issue occurs then as well.

Hey @jordesign, this is happening with TwentyTwentyThree (it's the theme I was using to take the screenshots above) and other themes as well, I've tried TwentyTwentyTwo and I got the same result.

[github-actions]

Help us move this issue forward. This issue is being marked stale since it has no activity after 15 days of requesting more information. Please add info requested so we can help move the issue forward. Note: The triage policy is to close stale issues that need more info and no response after 2 weeks.

[jordesign]

Thanks for the explanation @albarin - I can confirm this in testing as well following your instructions.

• In the Post Editor - the content of the second column appears over the overflow of the first (ie. the image).
• When viewing the front end - the overflowing image appear over the content of the second column.

I do note that adding position:relative to the second column immediately shifts it higher in the z-index to show over the top.