Lightbox: Theme styles are applied to the button element

[t-hamano]

Description

Enabling Lightbox on an image block adds a button element to click on the image and an element to close the Lightbox.

Many themes, especially classic themes, apply styles to the button element, which causes unintended styles to be applied to the two buttons in the Lightbox.

Below is examples:

• Twenty Twenty One:
  • If you do not hover over the image, the image will be covered in dark blue
  • Close lightbox button has black background
• Twenty Nineteen:
  • The image turns black when you hover the mouse over it
  • Close lightbox button has black background

I think we need a minimal style to override the theme's styles.

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

Note: Warning messages displayed in screencasts are reported with #54930.

e4964c058c8b00cd3bdebd9d9b8c3377.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

[annezazu]

@artemiomorales can you dive into this? Adding to the 6.4 board.

[artemiomorales]

This is related to #54682, because the close button color is not being read or determined properly in classic themes. I've begun adding a fix in the linked PR.

[OlaIola]

Related Core ticket: https://core.trac.wordpress.org/ticket/59513

[artemiomorales]

This is a duplicate of #54682 — I'll close this issue so we can consolidate conversation on just one.