From 4c7a14244fc95d5c1940eacfd948601c9c6b869b Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Fri, 19 Oct 2018 19:53:54 +0100
Subject: [PATCH] post rebase fixes (+1 squashed commit) Squashed commits:
 [48c530fcb] Improve media&text block on IE.

---
 bin/packages/post-css-config.js               |  2 +-
 packages/block-library/src/media-text/edit.js |  4 +-
 .../block-library/src/media-text/editor.scss  | 73 +++++++++++++++----
 .../block-library/src/media-text/style.scss   | 66 ++++++++++++-----
 4 files changed, 109 insertions(+), 36 deletions(-)

diff --git a/bin/packages/post-css-config.js b/bin/packages/post-css-config.js
index b6a5dc8e58d30d..3d7861f75044bd 100644
--- a/bin/packages/post-css-config.js
+++ b/bin/packages/post-css-config.js
@@ -59,6 +59,6 @@ module.exports = [
 			},
 		},
 	} ),
-	require( 'autoprefixer' ),
+	require( 'autoprefixer' )( { grid: true } ),
 	require( 'postcss-color-function' ),
 ];
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
index da93226253817a..94495a7d635d65 100644
--- a/packages/block-library/src/media-text/edit.js
+++ b/packages/block-library/src/media-text/edit.js
@@ -148,8 +148,10 @@ class MediaTextEdit extends Component {
 			'is-image-fill': imageFill,
 		} );
 		const widthString = `${ temporaryMediaWidth || mediaWidth }%`;
+		const gridTemplateColumns = 'right' === mediaPosition ? `1fr ${ widthString }` : `${ widthString } 1fr`;
 		const style = {
-			gridTemplateColumns: 'right' === mediaPosition ? `auto ${ widthString }` : `${ widthString } auto`,
+			gridTemplateColumns,
+			msGridColumns: gridTemplateColumns,
 			backgroundColor: backgroundColor.color,
 		};
 		const colorSettings = [ {
diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
index 3d0ad0361bd947..5f6cabb151f90b 100644
--- a/packages/block-library/src/media-text/editor.scss
+++ b/packages/block-library/src/media-text/editor.scss
@@ -1,22 +1,32 @@
-.wp-block-media-text {
-	grid-template-areas:
-		"media-text-media media-text-content"
-		"resizer resizer";
-	align-items: center;
+.wp-block-media-text .__resizable_base__ {
+	grid-column: 1 / span 2;
+	grid-row: 2;
 }
 
-.wp-block-media-text.has-media-on-the-right {
-	grid-template-areas:
-		"media-text-content media-text-media"
-		"resizer resizer";
+.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 .__resizable_base__ {
-	grid-area: resizer;
+.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-area: media-text-media;
+	grid-column: 1;
+	grid-row: 1;
 	// The resizer sets a inline width but as we are using a grid layout,
 	// we set the width on container.
 	width: 100% !important;
@@ -27,13 +37,24 @@
 	height: 100% !important;
 }
 
-.wp-block-media-text .block-editor-inner-blocks {
+.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 {
 	word-break: break-word;
-	grid-area: media-text-content;
+	grid-column: 2;
+	grid-row: 1;
 	text-align: initial;
 	padding: 0 8% 0 8%;
 }
 
+.wp-block-media-text.has-media-on-the-right .block-editor-inner-blocks {
+	grid-column: 1;
+	grid-row: 1;
+}
+
 .wp-block-media-text > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-editor-block-list__block {
 	max-width: unset;
 }
@@ -67,3 +88,27 @@ figure.block-library-media-text__media-container {
 		}
 	}
 }
+
+@media (max-width: #{ ($break-small) }) {
+	.wp-block-media-text.is-stacked-on-mobile {
+		.block-editor-inner-blocks {
+			grid-column: 1;
+			grid-row: 2;
+		}
+		.editor-media-container__resizer {
+			grid-column: 1;
+			grid-row: 1;
+		}
+	}
+	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
+		.block-editor-inner-blocks {
+			grid-column: 1;
+			grid-row: 1;
+		}
+		.editor-media-container__resizer {
+			grid-column: 1;
+			grid-row: 2;
+		}
+	}
+}
+
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index c8dc4f8ac2b73e..c06e92a88844e8 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -1,39 +1,56 @@
 .wp-block-media-text {
 	display: grid;
 	grid-template-rows: auto;
-	align-items: center;
-	grid-template-areas: "media-text-media media-text-content";
-	grid-template-columns: 50% auto;
-
-	&.has-media-on-the-right {
-		grid-template-areas: "media-text-content media-text-media";
-		grid-template-columns: auto 50%;
+	grid-template-columns: 50% 1fr;
+	.has-media-on-the-right {
+		grid-template-columns: 1fr 50%;
 	}
 }
 
 .wp-block-media-text.is-vertically-aligned-top {
-	align-items: start;
+	.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 {
-	align-items: center;
+	.wp-block-media-text__content,
+	.wp-block-media-text__media {
+		align-self: center;
+	}
 }
 
 .wp-block-media-text.is-vertically-aligned-bottom {
-	align-items: end;
+	.wp-block-media-text__content,
+	.wp-block-media-text__media {
+		align-self: end;
+	}
 }
 
 .wp-block-media-text .wp-block-media-text__media {
-	grid-area: media-text-media;
+	grid-column: 1;
+	grid-row: 1;
 	margin: 0;
 }
 
 .wp-block-media-text .wp-block-media-text__content {
+	grid-column: 2;
+	grid-row: 1;
 	word-break: break-word;
-	grid-area: media-text-content;
 	padding: 0 8% 0 8%;
 }
 
+.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
+	grid-column: 2;
+	grid-row: 1;
+}
+
+.wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
+	grid-column: 1;
+	grid-row: 1;
+}
+
 .wp-block-media-text > figure > img,
 .wp-block-media-text > figure > video {
 	max-width: unset;
@@ -58,7 +75,6 @@
 	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,
@@ -69,14 +85,24 @@
 @media (max-width: #{ ($break-small) }) {
 	.wp-block-media-text.is-stacked-on-mobile {
 		grid-template-columns: 100% !important;
-		grid-template-areas:
-			"media-text-media"
-			"media-text-content";
+		.wp-block-media-text__media {
+			grid-column: 1;
+			grid-row: 1;
+		}
+		.wp-block-media-text__content {
+			grid-column: 1;
+			grid-row: 2;
+		}
 	}
 
 	.wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
-		grid-template-areas:
-			"media-text-content"
-			"media-text-media";
+		.wp-block-media-text__media {
+			grid-column: 1;
+			grid-row: 2;
+		}
+		.wp-block-media-text__content {
+			grid-column: 1;
+			grid-row: 1;
+		}
 	}
 }