Image lightbox: setting alignment causes image not to be expanded on click

[SainteFamille64]

Description

This purpose is related to this WordPress issue thread:
https://wordpress.org/support/topic/enlarge-in-click-ko-bug/

Since the last release of WordPress (6.5.2 for my case) the functionality that allows to “Expand on click“ (“Enlarge on click“) an image is not working.

Since version 6.5.2 of WordPress editor, instead of having the option “Expand on click“ within the bloc settings, it is suggested within the associated link. It does not work when you click on the image as visiting the site. It only shows the small image instead of enlarging it.

AND… another point is: You must update all pages having this kind of setting if you want the click working.
If not, nothing happen when you click on the image.

Wordpress “Expand on click“ / “Enlarge on click“ new setting:

With WordPress 6.4 the “Enlarge on click“ function was perfectly working as it was set within the Bloc settings panel lie this:

Step-by-step reproduction instructions

1. Go to https://www.saintefamile64.org/
2. Click on the small image associated with the “A ne pas manquer En avril“ topic
3. The image is shown as it is, instead of being expanded to its original size

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.5.2
Gutenberg coming with WordPress
Browsers used : Firefox 124, SAFARI and others
All supports (computer, smartphones and tablets)

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

[SainteFamille64]

hi.
I think I found the case when it is not working

If no specific alignment are specified for the image, it works
If you set a specific alignment like center, right or left for the image or for the bloc containing the image, the image is shown with its small size instead of being expanded;

[annezazu]

Hey there! Thanks for reporting. I tried replicating this with 6.5.2 but couldn't quite replicate. To explain, I did the following:

1. Uploaded an image.
2. Set it to expand on click.
3. Set alignment to center.
4. Published and viewed the page, noticing the image is the same size.

Screen.Recording.2024-04-23.at.1.45.57.PM.mov

I tried to view this on https://www.saintefamile64.org/ but I found that site doesn't load! Any additional info you can provide, including a recording, would be very helpful.

[OriginalHickem]

I have the same problem, updated yesterday to 6.5.2 and none of the images are expanding on the click when previously using the Block Panel Setting they were.

(a little example: https://www.sideproject.games/news/the-quintessential-quintuplets-la-serie-di-visual-novel-arriva-in-inglese/ this was done without the update and worked but since yesterday it stays like this)

[SainteFamille64]

Hi
thank you for replies
here is the right URL : https://www.saintefamille64.org/
I founded some workarounds by waiting for the bug correction on the production site,
and I have a page with different scenarios : some are OK, some not
https://www.saintefamille64.org/test-images/

@annezazu , could you please let us have the URL of your own test.

[pehaa]

This problem was also reported here https://wordpress.org/support/topic/expand-on-click-disappears-with-jetpack-active/

[annezazu]

Looks like the latter issue was resolved with Jetpack (I actually ran into my own issues there previously: Automattic/jetpack#32668 (comment)).

As for the URL of my site, I was just using playground: https://playground.wordpress.net/ Perhaps try testing there? Of note, make sure you have ruled out a plugin conflict, like the above with Jetpack.

[andrewcpacifico]

I had the same problem on this page of my website: https://programai.com.br/android-studio-tutorial/

After investigating a bit, I think I found the issue. When we add an image without any alignment, the <figure> element around the image is given the class wp-block-image, which has the following CSS applied:

.wp-lightbox-overlay .wp-block-image img{
  height:var(--wp--lightbox-image-height);
  min-height:var(--wp--lightbox-image-height);
  min-width:var(--wp--lightbox-image-width);
  width:var(--wp--lightbox-image-width);
}

This CSS is added here:

gutenberg/packages/block-library/src/image/style.scss

Lines 254 to 257 in 49c3bf9

	min-width: var(--wp--lightbox-image-width);
	min-height: var(--wp--lightbox-image-height);
	width: var(--wp--lightbox-image-width);
	height: var(--wp--lightbox-image-height);

However, when an alignment is applied, the .wp-block-image class is no longer added to the <figure> element. I recorded a video demonstrating this behavior: https://www.youtube.com/watch?v=JVoGu-JU2w0

To resolve the issue on my site, I added the following CSS to my theme's style.css:

.wp-lightbox-overlay .aligncenter > img {
  height: var(--wp--lightbox-image-height);
  min-height: var(--wp--lightbox-image-height);
  min-width: var(--wp--lightbox-image-width);
}

This works well, at least for centered images.