From 2e819987327c7c6cb144d57f1b4135b45c210b40 Mon Sep 17 00:00:00 2001
From: Ricardo Artemio Morales <ric.morales22@gmail.com>
Date: Fri, 12 Jul 2024 18:00:45 -0400
Subject: [PATCH] Handle duplicate image when closing lightbox as well

---
 packages/block-library/src/image/index.php  |  4 +++-
 packages/block-library/src/image/style.scss | 18 +++++++++++++++++-
 packages/block-library/src/image/view.js    | 14 ++++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
index 62c72724cc05cb..a5b977dcd16ca0 100644
--- a/packages/block-library/src/image/index.php
+++ b/packages/block-library/src/image/index.php
@@ -191,6 +191,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		'data-wp-context',
 		wp_json_encode(
 			array(
+				'animationId'      => uniqid(),
 				'uploadedSrc'      => $img_uploaded_src,
 				'figureClassNames' => $figure_class_names,
 				'figureStyles'     => $figure_styles,
@@ -215,7 +216,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.overlayOpened' );
+	$p->set_attribute( 'data-wp-class--hide', 'state.contentImageHide' );
+	$p->set_attribute( 'data-wp-class--show', 'state.contentImageShow' );
 
 	$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 e71b7db064dd9f..62f8b77fb32630 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -11,7 +11,11 @@
 		box-sizing: border-box;
 
 		&.hide {
-			opacity: 0;
+			visibility: hidden;
+		}
+
+		&.show {
+			animation: show-content-image 0.4s;
 		}
 	}
 
@@ -323,6 +327,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 3d71e00aab324b..be0fb9f858ed53 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -62,6 +62,20 @@ const { state, actions, callbacks } = store(
 					) }; object-fit:cover;`
 				);
 			},
+			get contentImageHide() {
+				const ctx = getContext();
+				return (
+					state.overlayEnabled &&
+					state.currentImage.animationId === ctx.animationId
+				);
+			},
+			get contentImageShow() {
+				const ctx = getContext();
+				return (
+					! state.overlayEnabled &&
+					state.currentImage.animationId === ctx.animationId
+				);
+			},
 		},
 		actions: {
 			showLightbox() {