Media & Text Block: Fix the "Crop image to fill entire column" option (…

…#20439) * Use correct class name for media container element * Rename media container class name for consistency
WordPress · Mar 10, 2020 · ece56ae · ece56ae
1 parent 190491d
commit ece56ae
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/packages/block-library/src/media-text/edit.js b/packages/block-library/src/media-text/edit.js
@@ -159,7 +159,7 @@ class MediaTextEdit extends Component {
 		} = attributes;
 		return (
 			<MediaContainer
-				className="block-library-media-text__media-container"
+				className="wp-block-media-text__media-container"
 				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,14 +59,14 @@
 	max-width: unset;
 }
 
-figure.block-library-media-text__media-container {
+figure.wp-block-media-text__media-container {
 	margin: 0;
 	height: 100%;
 	width: 100%;
 }
 
-.wp-block-media-text .block-library-media-text__media-container img,
-.wp-block-media-text .block-library-media-text__media-container video {
+.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%;
 }

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 {
+.wp-block-media-text.is-image-fill figure.wp-block-media-text__media-container {
 	height: 100%;
 	min-height: 250px;
 	background-size: cover;
 }
 
-.wp-block-media-text.is-image-fill figure.wp-block-media-text__media > img {
+.wp-block-media-text.is-image-fill figure.wp-block-media-text__media-container > img {
 	// The image is visually hidden but accessible to assistive technologies.
 	position: absolute;
 	width: 1px;