From 0a7e10db2037cb80e4ab8cda4363ba18d6a3a83f Mon Sep 17 00:00:00 2001
From: Artemio Morales <artemio.morales@a8c.com>
Date: Thu, 18 Jul 2024 09:19:02 -0400
Subject: [PATCH] Image lightbox: Remove duplicate image when lightbox is
 opened (#63381)

* Hide content image when lightbox is opened

* Handle duplicate image when closing lightbox as well

* Remove styling for prefers reduced motion

* Rename state getters

* Hide captions in galleries when opening lightbox

* Revert "Hide captions in galleries when opening lightbox"

This reverts commit 40c28b9eead72a44eb4bf4706b38e026fe77607f.
---
 packages/block-library/src/image/index.php  |  2 ++
 packages/block-library/src/image/style.scss | 22 +++++++++++++++++++++
 packages/block-library/src/image/view.js    | 15 +++++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index ce9c958c19b6c..75f0d404e4820 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -230,6 +230,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
 	$p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
+	$p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' );
+	$p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' );
 
 	$body_content = $p->get_updated_html();
 
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 84c5a1f42de15..1bb19bf29da69 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -9,6 +9,16 @@
 		max-width: 100%;
 		vertical-align: bottom;
 		box-sizing: border-box;
+
+		@media (prefers-reduced-motion: no-preference) {
+			&.hide {
+				visibility: hidden;
+			}
+
+			&.show {
+				animation: show-content-image 0.4s;
+			}
+		}
 	}
 
 	// The following style maintains border radius application for deprecated
@@ -319,6 +329,18 @@
 	}
 }
 
+@keyframes show-content-image {
+	0% {
+		visibility: hidden;
+	}
+	99% {
+		visibility: hidden;
+	}
+	100% {
+		visibility: visible;
+	}
+}
+
 @keyframes turn-on-visibility {
 	0% {
 		opacity: 0;
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 5ff97cccf1834..7010e9b7b2219 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -68,6 +68,19 @@ const { state, actions, callbacks } = store(
 				const { imageId } = getContext();
 				return state.metadata[ imageId ].imageButtonTop;
 			},
+			get isContentHidden() {
+				const ctx = getContext();
+				return (
+					state.overlayEnabled && state.currentImageId === ctx.imageId
+				);
+			},
+			get isContentVisible() {
+				const ctx = getContext();
+				return (
+					! state.overlayEnabled &&
+					state.currentImageId === ctx.imageId
+				);
+			},
 		},
 		actions: {
 			showLightbox() {
@@ -84,8 +97,8 @@ const { state, actions, callbacks } = store(
 				state.scrollLeftReset = document.documentElement.scrollLeft;
 
 				// Sets the current expanded image in the state and enables the overlay.
-				state.currentImageId = imageId;
 				state.overlayEnabled = true;
+				state.currentImageId = imageId;
 
 				// Computes the styles of the overlay for the animation.
 				callbacks.setOverlayStyles();