WordPress / gutenberg

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

Image Block: Aligned images do not display lightboxes correctly in Classic theme #66692

Open t-hamano opened 4 days ago

t-hamano commented 4 days ago

Description

In the classic theme, if "Align left", "Align center", or "Align right" is applied to the Image block, the position and size of the image opened by the lightbox are incorrect.

In the classic theme, which does not have theme.json, the outer div is restored, so I suspect this is why iAPI is not working properly.

Step-by-step reproduction instructions

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/9628d007-d38f-428c-b5a3-cb04b045dd49

Environment info

No response

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

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

Please confirm which theme type you used for testing.

rohitmathur-7 commented 1 day ago

Hii @t-hamano , I tried to replicate this issue by following the steps mentioned by you but I was not able to replicate it.

Environment info: WordPress Version: 6.8-alpha-59346 Theme: Twenty Twenty-One Gutenberg Version: 19.6.0-rc.3

PFA the screenshot of the image I get after clicking on the images on frontend. Please let me know if we needed to follow any additional steps to replicate the issue. 🙇 Thanks! Image

t-hamano commented 9 hours ago

@rohitmathur-7 Sorry for the lack of explanation. This problem probably occurs when the image is resized. Also, I found that the block styles are missing, even though they should be inherited by the lightbox.

You should be able to test it with the following HTML:

<!-- wp:image {"lightbox":{"enabled":true},"width":"300px","sizeSlug":"large","linkDestination":"none","align":"left","className":"is-style-twentytwentyone-image-frame"} -->
<figure class="wp-block-image alignleft size-large is-resized is-style-twentytwentyone-image-frame"><img src="https://live.staticflickr.com/3911/15062644869_356a408f15_b.jpg" alt="" style="width:300px"/></figure>
<!-- /wp:image -->

https://github.com/user-attachments/assets/a79ec170-a89c-43b4-bfb6-731872389821