From f9fc112ae4d749fbb6d7dbb3cd7def48cc830497 Mon Sep 17 00:00:00 2001
From: "Joen A." <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 19 Aug 2024 09:44:06 +0200
Subject: [PATCH] Try: Overlay caption w. text-shadow. (#63471)

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: beafialho <beafialho@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
---
 packages/block-library/src/gallery/style.scss | 40 +++++++++++++++----
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index afbc3088049858..1c4d5549339e1f 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -43,22 +43,44 @@ figure.wp-block-gallery.has-nested-images {
 			width: auto;
 		}
 
+		// Position caption and scrim at the bottom.
+		&:has(figcaption)::before,
 		figcaption {
-			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+			position: absolute;
 			bottom: 0;
+			right: 0;
+			left: 0;
+			max-height: 100%;
+		}
+
+		// Create a background blur layer.
+		&:has(figcaption)::before {
+			content: "";
+			height: 100%;
+			max-height: 40%;
+
+			// Blur the background under the gradient scrim.
+			backdrop-filter: blur(3px);
+
+			// Crop the caption so the blur is only on the edge.
+			mask-image: linear-gradient(0deg, $black 20%, transparent 100%);
+		}
+
+		// Place the caption at the bottom.
+		figcaption {
 			color: $white;
+			text-shadow: 0 0 1.5px $black;
 			font-size: $default-font-size;
-			left: 0;
-			margin-bottom: 0;
-			max-height: 60%;
+			margin: 0;
 			overflow: auto;
-			padding: 0 8px 8px;
-			position: absolute;
+			padding: 1em;
 			text-align: center;
-			width: 100%;
 			box-sizing: border-box;
 			@include custom-scrollbars-on-hover(transparent, rgba($white, 0.8));
 
+			// Dark gradient scrim.
+			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.4) 0%, transparent 100%);
+
 			img {
 				display: inline;
 			}
@@ -85,6 +107,10 @@ figure.wp-block-gallery.has-nested-images {
 				margin: 0;
 				padding: 10px 10px 9px;
 				position: relative;
+				text-shadow: none;
+			}
+			&::before {
+				content: none;
 			}
 		}
 	}