Adjust gallery caption flex alignment (#9762)

* Adjust gallery caption flex alignment.

Gallery captions are meant to appear at the bottom of gallery items, but a recent change in #9622 changed that and introduced a visual bug. This sets things back to the way they were before.

Fixes #9752

* Fix issue with non-cropped galleries.

* Fix issues with captions.

Props for the code to @webmandesign.

* Fix another issue with captions.

* Set a bottom position value gallery captions.

packages/block-library/src/gallery/editor.scss

@@ -16,9 +16,13 @@
 
 .blocks-gallery-item {
 
+	// Hide the focus outline that otherwise briefly appears when selecting a block.
+	figure:not(.is-selected):focus {
+		outline: none;
+	}
+
 	.is-selected {
 		outline: 4px solid theme(primary);
-		outline-offset: -4px;
 	}
 
 	&.is-transient img {
@@ -27,6 +31,7 @@
 
 	.editor-rich-text {
 		position: absolute;
+		bottom: 0;
 		width: 100%;
 		max-height: 100%;
 		overflow-y: auto;
@@ -38,9 +43,12 @@
 	}
 
 	.is-selected .editor-rich-text {
-		width: calc(100% - 8px);
-		left: 4px;
-		margin-top: -4px;
+		// IE calculates this incorrectly, so leave it to modern browsers.
+		@supports (position: sticky) {
+			right: 0;
+			left: 0;
+			margin-top: -4px;
+		}
 
 		// Override negative margins so this toolbar isn't hidden by overflow. Overflow is needed for long captions.
 		.editor-rich-text__inline-toolbar {
@@ -92,8 +100,8 @@
 .block-library-gallery-item__inline-menu {
 	padding: 2px;
 	position: absolute;
-	top: 0;
-	right: 0;
+	top: -2px;
+	right: -2px;
 	background-color: theme(primary);
 	display: inline-flex;
 	z-index: z-index(".block-library-gallery-item__inline-menu");

packages/block-library/src/gallery/style.scss

@@ -19,8 +19,13 @@
 		figure {
 			margin: 0;
 			height: 100%;
-			display: flex;
-			align-items: center;
+
+			// IE doesn't support flex so omit that.
+			@supports (position: sticky) {
+				display: flex;
+				align-items: flex-end;
+				justify-content: flex-start;
+			}
 		}
 
 		img {
@@ -29,8 +34,19 @@
 			height: auto;
 		}
 
+		// IE doesn't handle cropping, so we need an explicit width here.
+		img {
+			width: 100%;
+
+			// IE11 doesn't read rules inside this query. They are applied only to modern browsers.
+			@supports (position: sticky) {
+				width: auto;
+			}
+		}
+
 		figcaption {
 			position: absolute;
+			bottom: 0;
 			width: 100%;
 			max-height: 100%;
 			overflow: auto;