Open t-hamano opened 3 weeks ago
rohitmathur-7
commented
2 weeks 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!
t-hamano
commented
2 weeks 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
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.