diff --git a/docs/reference-guides/theme-json-reference/theme-json-living.md b/docs/reference-guides/theme-json-reference/theme-json-living.md
index 811b1a86bfb7b7..48ffc9f593f518 100644
--- a/docs/reference-guides/theme-json-reference/theme-json-living.md
+++ b/docs/reference-guides/theme-json-reference/theme-json-living.md
@@ -138,6 +138,7 @@ Settings related to the lightbox.
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| enabled | Defines whether the lightbox is enabled or not. | `boolean` | |
+| overlayBackgroundColor | The background color of the lightbox overlay. Accepts any valid CSS color value. | `string` | |
| allowEditing | Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor. | `boolean` | |
---
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index df1334d8abf611..8cfb2c177f3902 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -439,8 +439,9 @@ class WP_Theme_JSON_Gutenberg {
'allowCustomContentAndWideSize' => null,
),
'lightbox' => array(
- 'enabled' => true,
- 'allowEditing' => true,
+ 'enabled' => true,
+ 'allowEditing' => true,
+ 'overlayBackgroundColor' => null,
),
'position' => array(
'fixed' => null,
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 02b60f91c030a1..415ebe4ea47220 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -344,6 +344,25 @@ function block_core_image_print_lightbox_overlay() {
}
}
+ // Check for a lightbox specific overlay background color.
+ // Themes can set this in theme.json under:
+ // settings.blocks.core/image.lightbox.overlayBackgroundColor (block-level)
+ // settings.lightbox.overlayBackgroundColor (global fallback).
+ $lightbox_overlay_background_color = null;
+ $lightbox_block_settings = wp_get_global_settings( array( 'lightbox' ), array( 'block_name' => 'core/image' ) );
+ if ( isset( $lightbox_block_settings['overlayBackgroundColor'] ) ) {
+ $lightbox_overlay_background_color = esc_attr( $lightbox_block_settings['overlayBackgroundColor'] );
+ } else {
+ $lightbox_global_settings = wp_get_global_settings( array( 'lightbox' ) );
+ if ( isset( $lightbox_global_settings['overlayBackgroundColor'] ) ) {
+ $lightbox_overlay_background_color = esc_attr( $lightbox_global_settings['overlayBackgroundColor'] );
+ }
+ }
+
+ // Prefer the lightbox specific color when set, otherwise fall back to
+ // the global background color.
+ $overlay_background_color = $lightbox_overlay_background_color ?? $background_color;
+
echo <<{$next_button_icon}
-
+
HTML;
}
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index dddd0758e0c3e8..b1ed62344dae07 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -341,7 +341,7 @@
height: 100%;
position: absolute;
z-index: 2000000;
- background-color: rgb(255, 255, 255);
+ background-color: var(--wp--lightbox--overlay-background-color, rgb(255, 255, 255));
opacity: 0.9;
}
diff --git a/schemas/json/theme.json b/schemas/json/theme.json
index ad6da3fd8d7c0f..278768331bf73d 100644
--- a/schemas/json/theme.json
+++ b/schemas/json/theme.json
@@ -369,6 +369,10 @@
"description": "Defines whether the lightbox is enabled or not.",
"type": "boolean"
},
+ "overlayBackgroundColor": {
+ "description": "The background color of the lightbox overlay. Accepts any valid CSS color value.",
+ "type": "string"
+ },
"allowEditing": {
"description": "Defines whether to show the Lightbox UI in the block editor. If set to `false`, the user won't be able to change the lightbox settings in the block editor.",
"type": "boolean"