[Lightbox] Add theme.json support for lightbox overlay background color#78588
[Lightbox] Add theme.json support for lightbox overlay background color#78588sarthaknagoshe2002 wants to merge 2 commits into
Conversation
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
What?
Closes #78506
This PR adds support for a new
overlayBackgroundColorproperty within thelightboxsettings intheme.json. It updates the Image block's lightbox rendering to use a CSS custom property for the overlay background instead of a hardcoded inline style.Why?
Currently, the Image and Gallery block lightbox feature hardcodes the
scrimbackground color as an inline style (style="background-color: #fff"). This is a major pain point for dark themes or portfolio sites, as it forces theme developers to use!importantin their custom CSS to override the white background. By moving this totheme.jsonand utilizing CSS custom properties, we align the lightbox feature with the standard Gutenberg design tools system and make it much easier for theme authors to customize.How?
overlayBackgroundColorto the lightbox configuration.overlayBackgroundColorvalue in the block level settings (settings.blocks.core/image.lightbox) and falls back to the global settings (settings.lightbox).background-coloron the.scrimdiv with a CSS custom property:--wp--lightbox--overlay-background-color.packages/block-library/src/image/style.scssto consume the newvar(--wp--lightbox--overlay-background-color)with a default fallback ofrgb(255, 255, 255).Testing Instructions
theme.jsonfile and add a global lightbox background color:Screenshots or screencast