Lightbox trigger BUTTON is not visible on an Image lightbox when Picture Element is enabled

Bug Description

I just found that Modern Image Formats prevents that button from ever being visible on hover when Picture Element is enabled. This is because of this CSS rule (source):

.wp-lightbox-container img:hover+button {
    opacity: 1;
}

That rule would not be necessary if the BUTTON.lightbox-trigger wrapped the IMG, since hovering over the button could always then cause the SVG to be revealed:

.wp-lightbox-container button.lightbox-trigger:hover > SVG {
    opacity: 1;
}

Originally discovered in WordPress/gutenberg#68726 (comment).

Steps to reproduce

Activate Modern Image Formats plugin
Enable Picture Element in the plugin settings
Upload an image
Add the image to a new Image block and enable lightbox
Hover over the Image block with your mouse

The lightbox trigger button is not visible.

Screenshots

The lightbox trigger button is supposed to appear in the top-right corner of the image:

Hello, I would like to work on this and fix it. Thanks !

I suppose there are two ways this could go. One, Gutenberg's CSS selector could be updated to remove the img, something like this:

.wp-lightbox-container > :hover+button {
    opacity: 1;
}

Otherwise, maybe the better course for now would be to conditionally add that CSS from the Modern Image Formats plugin when the Picture Element setting is enabled and there is a Image block that has lightbox enabled.

For example, at wp_footer you could check if has_filter( 'render_block_core/image', 'block_core_image_render_lightbox' ) and then print out that additional CSS if it is not false. You can see this filter is added when the lightbox appears on the page: https://github.com/WordPress/wordpress-develop/blob/7fe8f1cc6f2722d773c738bbe0811bef2a07756e/src/wp-includes/blocks/image.php#L67-L83

It appears we can't fix this easily. See #1814 (comment):

I'm seeing something problematic with the Interactivity API logic here. It's adding some inline styles to the BUTTON which is causing it to get positioned off-screen:
right: -629px;
top: -405px;
When Picture Element is not enabled, it's adding this style instead:
right: 16px;
top: 16px;
The culprit is display: contents. If I make these changes then it works as expected:
--- a/plugins/webp-uploads/picture-element.php
+++ b/plugins/webp-uploads/picture-element.php
@@ -162,7 +162,7 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int
 	}
 
 	return sprintf(
-		'<picture class="%s" style="display: contents;">%s%s</picture>',
+		'<picture class="%s" style="/*display: contents;*/">%s%s</picture>',
 		esc_attr( 'wp-picture-' . $attachment_id ),
 		$picture_sources,
 		$image
@@ -175,8 +175,8 @@ function webp_uploads_wrap_image_in_picture( string $image, string $context, int
  * @since n.e.x.t
  */
 function webp_make_lightbox_trigger_button_visible(): void {
-	if ( has_filter( 'render_block_core/image', 'block_core_image_render_lightbox' ) ) {
-		echo '<style> .wp-lightbox-container > picture + button { opacity: 1 } </style>';
+	if ( false !== has_action( 'wp_footer', 'block_core_image_print_lightbox_overlay' ) ) {
+		echo '<style> .wp-lightbox-container > picture:hover + button { opacity: 1 } </style>';
 	}
 }
I was not aware that the Image block was manually placing the button: https://github.com/WordPress/gutenberg/blob/b771bddb91ad74a7a03ee21b1ef311117efd815c/packages/block-library/src/image/view.js#L404-L438

And the addition of display:contents appears to be causing problems with that calculation. Also, the display:contents seems to be preventing the :hover pseudo-class from selecting the picture when it is hovered over.

But display:contents was added for a reason in #1307 to fix #1300.

Given all this, it doesn't seem like there is a quick fix which we can apply from our side.

Given all this, it doesn't seem like there is a quick fix which we can apply from our side.

Interesting, maybe we can rethink how the button is placed in Gutenberg? It feels a bit fragile as is.

Coincidentally, this would all be resolved by switching to popover where the BUTTON wraps the IMG (or PICTURE) in WordPress/gutenberg#68726

Coincidentally, this would all be resolved by switching to popover where the BUTTON wraps the IMG (or PICTURE) in WordPress/gutenberg#68726

That's not necessarily the right solution though, per the conversation in WordPress/gutenberg#55513.

Here's an alternative which should solve the issue in Gutenberg while being more resilient to variations in markup.

This selector:

img:hover + button

could be changed to:

&:has(img:hover) button

and this will then work for both regular IMG but also PICTURE (even when it has display:contents).

Tried &:has(img:hover) button in WordPress/gutenberg#70800

@westonruter

@westonruter Feel free to re-open if the upstream fix didn't resolve this issue.

Navigation Menu

Repository navigation

Lightbox trigger BUTTON is not visible on an Image lightbox when Picture Element is enabled #1805

Bug Description

Steps to reproduce

Screenshots

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Lightbox trigger BUTTON is not visible on an Image lightbox when Picture Element is enabled #1805

Description

Bug Description

Steps to reproduce

Screenshots

Activity

SohamPatel46 commented on Jan 20, 2025

westonruter commented on Jan 20, 2025

westonruter commented on Jan 23, 2025

adamsilverstein commented on Jan 30, 2025

westonruter commented on Jan 30, 2025

felixarntz commented on Jan 30, 2025

westonruter commented on Jan 31, 2025

adamsilverstein commented on Jul 20, 2025

adamsilverstein commented on Sep 25, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions