WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.52k stars 4.21k forks source link

`Post Featured Image` inconsistent style between Editor and front end #52238

Open albarin opened 1 year ago

albarin commented 1 year ago

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
Screenshot 2023-07-03 at 11 20 18 Screenshot 2023-07-03 at 11 20 23

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 commented 1 year ago

@carolinan kindly please assign this issues

jordesign commented 1 year ago

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 commented 1 year ago

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[bot] commented 1 year ago

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 commented 1 year ago

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

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