From e9e1ab8a98951846f6cf96427412c5ebcb7b14f8 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 21 Jan 2021 07:59:31 -1000 Subject: [PATCH 1/6] Fix cover matrix alignment --- packages/block-library/src/cover/style.scss | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index fc9f05941b56ec..57c2e027a36735 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -172,8 +172,12 @@ .wp-block-cover__image-background, .wp-block-cover__video-background { position: absolute; - width: 100%; - height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: inherit; + height: inherit; object-fit: cover; } From 729d65357fc8c66d4d05133557383332db668545 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 21 Jan 2021 08:40:12 -1000 Subject: [PATCH 2/6] Consolidate editor and save styles --- packages/block-library/src/cover/editor.scss | 6 ----- packages/block-library/src/cover/style.scss | 23 ++++++++++---------- 2 files changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 3d4e5c717d894e..9808a20dadeaa5 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -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 57c2e027a36735..6030ee39896bcb 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -167,18 +167,19 @@ width: auto; } } -} -.wp-block-cover__image-background, -.wp-block-cover__video-background { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: inherit; - height: inherit; - 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; + width: inherit; + height: inherit; + object-fit: cover; + } } .wp-block-cover__video-background { From 8b698ab9fc5958b444556b03cd3dd1819fe8cfec Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 21 Jan 2021 09:24:14 -1000 Subject: [PATCH 3/6] Override img margin/padding from .wp-block-cover.alignright > * --- packages/block-library/src/cover/style.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 6030ee39896bcb..b36734e3672bda 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -178,6 +178,8 @@ bottom: 0; width: inherit; height: inherit; + margin: 0; + padding: 0; object-fit: cover; } } From ad72dcf71031d10bf3d77955aaae638fe0056709 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 21 Jan 2021 09:53:13 -1000 Subject: [PATCH 4/6] Fix cover block height in Twenty Twenty --- packages/block-library/src/cover/editor.scss | 2 ++ packages/block-library/src/cover/style.scss | 6 ++---- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 9808a20dadeaa5..9d1725c674fb16 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -1,5 +1,7 @@ .wp-block-cover { position: relative; + width: 100%; + 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. diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index b36734e3672bda..5ae57a12496fc2 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -4,8 +4,6 @@ background-size: cover; 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; @@ -176,10 +174,10 @@ left: 0; right: 0; bottom: 0; - width: inherit; - height: inherit; margin: 0; padding: 0; + width: 100%; + height: 100%; object-fit: cover; } } From e4dee72464774d44e5703fd585971542f7b41e85 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 22 Jan 2021 14:09:58 +0100 Subject: [PATCH 5/6] Add more rules. --- packages/block-library/src/cover/editor.scss | 4 ---- packages/block-library/src/cover/style.scss | 7 +++++++ 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 9d1725c674fb16..b6d6aae7e92ec9 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -1,8 +1,4 @@ .wp-block-cover { - position: relative; - width: 100%; - 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. &.is-placeholder { diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 5ae57a12496fc2..68da24d6537863 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -4,6 +4,8 @@ background-size: cover; 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; @@ -178,7 +180,12 @@ padding: 0; width: 100%; height: 100%; + max-width: none; + max-height: none; object-fit: cover; + outline: none; + border: none; + box-shadow: none; } } From 2543962c7623192f6e9176d93131d3c23dc7c50d Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 22 Jan 2021 14:31:23 +0100 Subject: [PATCH 6/6] Move height back. --- packages/block-library/src/cover/editor.scss | 2 ++ packages/block-library/src/cover/style.scss | 1 - 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index b6d6aae7e92ec9..ae178aba6c23c1 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -1,4 +1,6 @@ .wp-block-cover { + 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. &.is-placeholder { diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 68da24d6537863..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;