Media & Text Block: Fix frontend styles when "Crop image to fill" is …

…selected (#20539) * Fix selectors for frontend styles of media text block w/ "Crop image to fill" option active * Rename editor container class and remove redundant block styles
WordPress · Mar 3, 2020 · d63b737 · d63b737
1 parent 742dbf2
commit d63b737
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 15 deletions.
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -161,7 +161,7 @@ class MediaTextEdit extends Component {
 		} = attributes;
 		return (
 			<MediaContainer
-				className="wp-block-media-text__media-container"
+				className="wp-block-media-text__media"
 				onSelectMedia={ this.onSelectMedia }
 				onWidthChange={ this.onWidthChange }
 				commitWidthChange={ this.commitWidthChange }

diff --git a/packages/block-library/src/media-text/editor.scss b/packages/block-library/src/media-text/editor.scss
@@ -59,18 +59,6 @@
 	max-width: unset;
 }
 
-figure.wp-block-media-text__media-container {
-	margin: 0;
-	height: 100%;
-	width: 100%;
-}
-
-.wp-block-media-text .wp-block-media-text__media-container img,
-.wp-block-media-text .wp-block-media-text__media-container video {
-	vertical-align: middle;
-	width: 100%;
-}
-
 .editor-media-container__resizer .components-resizable-box__handle {
 	display: none;
 }

diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
@@ -72,13 +72,13 @@
 	vertical-align: middle;
 }
 
-.wp-block-media-text.is-image-fill figure.wp-block-media-text__media-container {
+.wp-block-media-text.is-image-fill figure.wp-block-media-text__media {
 	height: 100%;
 	min-height: 250px;
 	background-size: cover;
 }
 
-.wp-block-media-text.is-image-fill figure.wp-block-media-text__media-container > img {
+.wp-block-media-text.is-image-fill figure.wp-block-media-text__media > img {
 	// The image is visually hidden but accessible to assistive technologies.
 	position: absolute;
 	width: 1px;