Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
3 of 6 tasks
t-hamano opened this issue Nov 2, 2024 · 2 comments · May be fixed by #67528 or WordPress/wordpress-develop#8105
Open
3 of 6 tasks

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

t-hamano opened this issue Nov 2, 2024 · 2 comments · May be fixed by #67528 or WordPress/wordpress-develop#8105
Labels
[Block] Image Affects the Image Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@t-hamano
Copy link
Contributor

t-hamano commented Nov 2, 2024

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

  • Activate Twenty Twenty-one
  • Insert an Image block with the lightbox enabled.
  • Apply Align {left|center|right}.
  • Check out the lightbox in action on the front end.

Screenshots, screen recording, code snippet

0c1a091d024557c95a3433bc8d19df19.mp4

Environment info

No response

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

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@t-hamano t-hamano added [Block] Image Affects the Image Block [Type] Bug An existing feature does not function as intended labels Nov 2, 2024
@rohitmathur-7
Copy link
Contributor

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
Copy link
Contributor Author

t-hamano commented Nov 6, 2024

@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 -->
a8f93ff5ec3d5729be9728c52933eaea.mp4

@karthick-murugan karthick-murugan linked a pull request Dec 3, 2024 that will close this issue
Open
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Dec 3, 2024
@karthick-murugan karthick-murugan linked a pull request Jan 9, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Image Affects the Image Block [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
2 participants
@t-hamano @rohitmathur-7