From 6c7efc1c9004b1ba4d7b2c4c035e7cb755c6b3af Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 29 Apr 2019 14:47:35 +0100
Subject: [PATCH] post rebase fixes

---
 .../block-library/src/media-text/editor.scss  | 38 +++++++++++++---
 .../block-library/src/media-text/style.scss   | 43 ++++++++++++++++---
 2 files changed, 69 insertions(+), 12 deletions(-)

diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 97f6a59e298ec..5c67b8c8e4e1a 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -3,35 +3,59 @@
 	grid-row: 2;
 }
 
+.wp-block-media-text.is-vertically-aligned-top {
+	.block-editor-inner-blocks,
+	.editor-media-container__resizer {
+		align-self: start;
+	}
+}
+.wp-block-media-text,
+.wp-block-media-text.is-vertically-aligned-center {
+	.block-editor-inner-blocks,
+	.editor-media-container__resizer {
+		align-self: center;
+	}
+}
+
+.wp-block-media-text.is-vertically-aligned-bottom {
+	.block-editor-inner-blocks,
+	.editor-media-container__resizer {
+		align-self: end;
+	}
+}
+
 .wp-block-media-text .editor-media-container__resizer {
 	grid-column: 1;
 	grid-row: 1;
-	align-self: center;
 	// The resizer sets a inline width but as we are using a grid layout,
 	// we set the width on container.
 	width: 100% !important;
 }
 
+.wp-block-media-text.is-image-fill .editor-media-container__resizer {
+	// The resizer sets an inline height but for the image fill we set it to full height.
+	height: 100% !important;
+}
+
 .wp-block-media-text.has-media-on-the-right .editor-media-container__resizer {
 	grid-column: 2;
 	grid-row: 1;
 }
 
-.wp-block-media-text .editor-inner-blocks {
+.wp-block-media-text .block-editor-inner-blocks {
 	word-break: break-word;
 	grid-column: 2;
 	grid-row: 1;
 	text-align: initial;
 	padding: 0 8% 0 8%;
-	align-self: center;
 }
 
-.wp-block-media-text.has-media-on-the-right .editor-inner-blocks {
+.wp-block-media-text.has-media-on-the-right .block-editor-inner-blocks {
 	grid-column: 1;
 	grid-row: 1;
 }
 
-.wp-block-media-text > .editor-inner-blocks > .editor-block-list__layout > .editor-block-list__block {
+.wp-block-media-text > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
 	max-width: unset;
 }
 
@@ -67,7 +91,7 @@ figure.block-library-media-text__media-container {
 
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
-		.editor-inner-blocks {
+		.block-editor-inner-blocks {
 			grid-column: 1;
 			grid-row: 2;
 		}
@@ -77,7 +101,7 @@ figure.block-library-media-text__media-container {
 		}
 	}
 	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
-		.editor-inner-blocks {
+		.block-editor-inner-blocks {
 			grid-column: 1;
 			grid-row: 1;
 		}
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index f1552900a256c..c06e92a88844e 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -1,8 +1,5 @@
 .wp-block-media-text {
 	display: grid;
-}
-
-.wp-block-media-text {
 	grid-template-rows: auto;
 	grid-template-columns: 50% 1fr;
 	.has-media-on-the-right {
@@ -10,11 +7,31 @@
 	}
 }
 
+.wp-block-media-text.is-vertically-aligned-top {
+	.wp-block-media-text__content,
+	.wp-block-media-text__media {
+		align-self: start;
+	}
+}
+.wp-block-media-text,
+.wp-block-media-text.is-vertically-aligned-center {
+	.wp-block-media-text__content,
+	.wp-block-media-text__media {
+		align-self: center;
+	}
+}
+
+.wp-block-media-text.is-vertically-aligned-bottom {
+	.wp-block-media-text__content,
+	.wp-block-media-text__media {
+		align-self: end;
+	}
+}
+
 .wp-block-media-text .wp-block-media-text__media {
 	grid-column: 1;
 	grid-row: 1;
 	margin: 0;
-	align-self: center;
 }
 
 .wp-block-media-text .wp-block-media-text__content {
@@ -22,7 +39,6 @@
 	grid-row: 1;
 	word-break: break-word;
 	padding: 0 8% 0 8%;
-	align-self: center;
 }
 
 .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
@@ -42,6 +58,23 @@
 	vertical-align: middle;
 }
 
+.wp-block-media-text.is-image-fill figure {
+	height: 100%;
+	min-height: 250px;
+	background-size: cover;
+}
+
+.wp-block-media-text.is-image-fill figure > img {
+	// The image is visually hidden but accessible to assistive technologies.
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	border: 0;
+}
 /*
 * Here we here not able to use a mobile first CSS approach.
 * Custom widths are set using inline styles, and on mobile,