From 8eea831e003c8a7e1a46a20af55b170fa13dbcb9 Mon Sep 17 00:00:00 2001
From: Glen Davies <glendaviesnz@users.noreply.github.com>
Date: Thu, 24 Dec 2020 15:28:03 +1300
Subject: [PATCH] Remove the gradient and put caption under image if is-rounded
 style applied (#27869)

* Add alignment fixes for non cropped images

Co-authored-by: Glen Davies <glen.davies@a8c.com>
---
 packages/block-library/src/gallery/style.scss | 42 ++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 3b575edcac747b..2849ea90c954d0 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -24,7 +24,8 @@
 			flex-grow: 1;
 			justify-content: center;
 			position: relative;
-
+			margin-top: auto;
+			margin-bottom: auto;
 			// IE11 doesn't like the "flex-direction: column;" here.
 			@supports ( position: sticky ) {
 				flex-direction: column;
@@ -72,6 +73,28 @@
 					display: inline;
 				}
 			}
+
+			&.is-style-rounded {
+				> div,
+				> a {
+					// Not supported in IE11.
+					@supports ( position: sticky ) {
+						flex: 1 1 auto;
+					}
+				}
+				figcaption {
+					background: none;
+					// Not supported in IE11.
+					@supports ( position: sticky ) {
+						flex: initial;
+						background: none;
+						color: inherit;
+						margin: 0;
+						padding: 10px 10px 9px;
+						position: relative;
+					}
+				}
+			}
 		}
 	}
 
@@ -79,6 +102,23 @@
 		flex-grow: 1;
 	}
 
+	// Non cropped images.
+	&:not(.is-cropped) {
+		figure.blocks-gallery-grid {
+			figure.wp-block-image:not(#individual-image) {
+				margin-top: auto;
+				margin-bottom: auto;
+				img {
+					margin-bottom: $grid-unit-20;
+				}
+
+				figcaption {
+					bottom: $grid-unit-20;
+				}
+			}
+		}
+	}
+
 	// Cropped Images.
 	&.is-cropped figure.blocks-gallery-grid figure.wp-block-image:not(#individual-image) {
 		> div:not(.components-drop-zone),