From 8cf37d489e1efc47b88ddc7695cc6080f0bb82b2 Mon Sep 17 00:00:00 2001
From: Alex Lende <ajlende@gmail.com>
Date: Fri, 22 Jan 2021 04:22:13 -1000
Subject: [PATCH] Fix cover matrix alignment (#28404)

Co-authored-by: jasmussen <joen@automattic.com>
---
 packages/block-library/src/cover/editor.scss |  8 +-----
 packages/block-library/src/cover/style.scss  | 27 ++++++++++++++------
 2 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss
index 3d4e5c717d894e..ae178aba6c23c1 100644
--- 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
index fc9f05941b56ec..0f5e0edf96bb0c 100644
--- 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 {