post rebase fixes (+1 squashed commit)

Squashed commits:
[48c530fcb] Improve media&text block on IE.

bin/packages/post-css-config.js

@@ -59,6 +59,6 @@ module.exports = [
 			},
 		},
 	} ),
-	require( 'autoprefixer' ),
+	require( 'autoprefixer' )( { grid: true } ),
 	require( 'postcss-color-function' ),
 ];

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 = [ {

packages/block-library/src/media-text/editor.scss

@@ -1,23 +1,36 @@
 .wp-block-media-text {
-	grid-template-areas:
-		"media-text-media media-text-content"
-		"resizer resizer";
-	align-items: center;
 	word-break: break-all;
 }
 
-.wp-block-media-text.has-media-on-the-right {
-	grid-template-areas:
-		"media-text-content media-text-media"
-		"resizer resizer";
+.wp-block-media-text .__resizable_base__ {
+	grid-column: 1 / span 2;
+	grid-row: 2;
 }
 
-.wp-block-media-text .__resizable_base__ {
-	grid-area: 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.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;
@@ -28,13 +41,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;
 }
@@ -68,3 +92,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;
+		}
+	}
+}
+

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;
+		}
 	}
 }