Fix cover matrix alignment (#28404)

Co-authored-by: jasmussen <joen@automattic.com>
WordPress · Jan 22, 2021 · 1ea8dce · 1ea8dce
1 parent 3542b8c
commit 1ea8dce
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
@@ -1,5 +1,5 @@
 .wp-block-cover {
-	position: relative;
+	height: 100%; // This explicit height rule is necessary for the focal point picker to work.
 
 	// Override default cover styles
 	// because we're not ready yet to show the cover block.
@@ -43,12 +43,6 @@
 	.wp-block-cover__placeholder-background-options {
 		width: 100%;
 	}
-
-	// Fix object-fit when block is full width in the editor.
-	.wp-block-cover__image-background {
-		width: inherit;
-		height: inherit;
-	}
 }
 
 [data-align="left"] > .wp-block-cover,

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
@@ -5,7 +5,6 @@
 	background-position: center center;
 	min-height: 430px;
 	width: 100%;
-	height: 100%; // This explicit height rule is necessary for the focal point picker to work.
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -167,14 +166,26 @@
 			width: auto;
 		}
 	}
-}
 
-.wp-block-cover__image-background,
-.wp-block-cover__video-background {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
+	// Extra specificity for in edit mode where other styles would override it otherwise.
+	img.wp-block-cover__image-background,
+	video.wp-block-cover__video-background {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: 0;
+		padding: 0;
+		width: 100%;
+		height: 100%;
+		max-width: none;
+		max-height: none;
+		object-fit: cover;
+		outline: none;
+		border: none;
+		box-shadow: none;
+	}
 }
 
 .wp-block-cover__video-background {