From da012ed2178b5b8475b8d6ec85553279490332ab Mon Sep 17 00:00:00 2001
From: David Arenas <david.arenas@automattic.com>
Date: Tue, 10 Dec 2024 17:16:09 +0100
Subject: [PATCH] Image Block: Change how the Image's overlay styles are
 applied (#67788)

Co-authored-by: DAreRodz <darerodz@git.wordpress.org>
Co-authored-by: SantosGuillamot <santosguillamot@git.wordpress.org>
---
 packages/block-library/src/image/index.php | 2 +-
 packages/block-library/src/image/view.js   | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 1a5fae7ce9cbb7..ac03011d73f63a 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -290,6 +290,7 @@ class="wp-lightbox-overlay zoom"
 			data-wp-on-async--click="actions.hideLightbox"
 			data-wp-on-async-window--resize="callbacks.setOverlayStyles"
 			data-wp-on-async-window--scroll="actions.handleScroll"
+			data-wp-bind--style="state.overlayStyles"
 			tabindex="-1"
 			>
 				<button type="button" aria-label="$close_button_label" style="fill: $close_button_color" class="close-button">
@@ -306,7 +307,6 @@ class="wp-lightbox-overlay zoom"
 					</figure>
 				</div>
 				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
-				<style data-wp-text="state.overlayStyles"></style>
 		</div>
 HTML;
 }
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 0bc0dfaacea1a2..3c9a729538813e 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -341,7 +341,6 @@ const { state, actions, callbacks } = store(
 				// adding 1 pixel to the container width and height solves the problem,
 				// though this can be removed if the issue is fixed in the future.
 				state.overlayStyles = `
-				:root {
 					--wp--lightbox-initial-top-position: ${ screenPosY }px;
 					--wp--lightbox-initial-left-position: ${ screenPosX }px;
 					--wp--lightbox-container-width: ${ containerWidth + 1 }px;
@@ -352,8 +351,7 @@ const { state, actions, callbacks } = store(
 					--wp--lightbox-scrollbar-width: ${
 						window.innerWidth - document.documentElement.clientWidth
 					}px;
-				}
-			`;
+				`;
 			},
 			setButtonStyles() {
 				const { imageId } = getContext();