New Lightbox with display bug in Classic Themes

[burnuser]

Description

Image Lightbox (expand on click) in Gutenberg 16.7.0 RC1 works as expected with Theme Twenty Twenty-Two

After changing to classic Theme Twenty Sixteen (or GeneratePress) an error occurs:
Warning: Array to string conversion in ...\wp-includes\formatting.php on line 1104

Checked:

Visual bug:

1. Image looks regular
2. on mouseover: image disappears and is replaced with a monochrome coloured area of same size
3. click on image opens lightbox as expected
4. click again closes lightbox as expected
5. image was again replaced with coloured area (even without mouseover!)
6. clicking elsewhere make image reappear like regular

Step-by-step reproduction instructions

1. Install Gutenberg 16.7.0 RC1
2. change to theme Twenty Sixteen
3. add page/post
4. add image
5. activate "expand on click"
6. view page
7. try lightbox-efect

Screenshots, screen recording, code snippet

No response

Environment info

WP 6.3.1
Gutenberg 16.7.0 RC1
Themes: Twenty Sixteen, GeneratePress

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

[properlypurple]

I've been able to reproduce this consistently with classic themes. In the block themes that I tested, the following css is applied (coming from here in Gutenberg )

.wp-lightbox-container button {
  background: none;
  border: none;
  cursor: zoom-in;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 100;
}

[annezazu]

cc @artemiomorales for your awareness!

[michalczaplinski]

@SantosGuillamot and I took a look at this together and I think we've got a fix. I'll send a PR shortly.

[t-hamano]

I believe this issue is the same as the issue reported in #54930.

[SantosGuillamot]

I think you're right. I just dropped a comment there: link.

[afercia]

Hello everyone. I'm not sure the fix for the hover/focus implemented in #54837 is enough. Some theme nay use CSS for the hover / focus state that use selectors with a higher specificity. For example, testing with Twenty Seventeen, I still see the theme CSS for the buttons making the image button overlay completely grey on hover, which is the hover sstyle Twenty Seventeen uses for buttons:

Looks like the two related CSS selectors have the same specificity but thte theme's stylesheet is enqueued later.

Lightbox: .wp-lightbox-container button:hover
Theme: :not( .mejs-button ) > button:hover

Seems to me the lightbox 'reset' rule needs a selector with much higher specificity.

See also #55097 for more considerations about overlaying the image with a transparent button.

Additionally:
There is no custom focus style provided for the Close button. With Twenty Twenty-Four, the focus style is the native browsers one. However, some themes reset the native focus style with outline: none and provide their own custom focus style. Most of the WordPress bundled themes do so. In this case, the Close button doesn't show any focus style. The lightbox CSS should make sure there is always a focus style.

[artemiomorales]

The outstanding issue here may be resolved by #55212 depending on how conversations on design go. The hover style actually looks good when testing on this branch, so we can consider adding that style by default, or overriding it with a more detailed specificty there.

[artemiomorales]

I just closed #54940, which is a duplicate of this.

There's a related Core ticket: https://core.trac.wordpress.org/ticket/59513

[artemiomorales]

This issue is largely fixed in #55212.

We may still run across some minor style inconsistencies with the :active or :hover styles (the :active style in Twenty Twelve changes the color of the button background slightly, for example — will hopefully be able to fix that soon), but as the button is in the top right corner now, I don't believe any of those inconsistencies would be showstoppers for the feature to be included in 6.4.

[annezazu]

@artemiomorales can we close this out at this point and open up any particular remaining issues separately?

[artemiomorales]

can we close this out at this point and open up any particular remaining issues separately?

@annezazu Yes! That sounds good to me.