Skip to content

Lightbox: Theme styles are applied to the button element #54940

@t-hamano

Description

@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

Metadata

Metadata

Labels

Backwards CompatibilityIssues or PRs that impact backwards compatability[Block] ImageAffects the Image Block[Feature] ThemesQuestions or issues with incorporating or styling blocks in a theme.[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions