diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 3d4e5c717d894..ae178aba6c23c 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 fc9f05941b56e..0f5e0edf96bb0 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 {