Hide captions in galleries when opening lightbox

TylerB24890 · Jul 17, 2024 · 40c28b9 · 40c28b9
1 parent 72b3688
commit 40c28b9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -220,6 +220,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
 		)
 	);
+	$p->set_attribute( 'data-wp-class--hide-content', 'state.isContentHidden' );
+	$p->set_attribute( 'data-wp-class--show-content', 'state.isContentVisible' );
 
 	// Image.
 	$p->next_tag( 'img' );
@@ -230,8 +232,6 @@ 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
@@ -9,15 +9,29 @@
 		max-width: 100%;
 		vertical-align: bottom;
 		box-sizing: border-box;
+	}
 
-		@media (prefers-reduced-motion: no-preference) {
-			&.hide {
+	@media (prefers-reduced-motion: no-preference) {
+		&.hide-content {
+			img {
 				visibility: hidden;
 			}
+			figcaption {
+				.wp-block-gallery & {
+					visibility: hidden;
+				}
+			}
+		}
 
-			&.show {
+		&.show-content {
+			img {
 				animation: show-content-image 0.4s;
 			}
+			figcaption {
+				.wp-block-gallery & {
+					animation: show-content-image 0.4s;
+				}
+			}
 		}
 	}