Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cover block: Only use white text when the background of the cover block is dark. #33541

Merged
merged 13 commits into from
Oct 8, 2021
4 changes: 4 additions & 0 deletions packages/block-library/src/cover/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,10 @@
},
"contentPosition": {
"type": "string"
},
"isDark": {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to updates the deprecations when adding an attribute?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From my tests, we don't...

"type": "boolean",
"default": true
}
},
"supports": {
Expand Down
8 changes: 7 additions & 1 deletion packages/block-library/src/cover/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -317,6 +317,7 @@ function CoverEdit( {
dimRatio,
focalPoint,
hasParallax,
isDark,
isRepeated,
minHeight,
minHeightUnit,
Expand Down Expand Up @@ -379,13 +380,17 @@ function CoverEdit( {
};

const isDarkElement = useRef();
const isDark = useCoverIsDark(
const isCoverDark = useCoverIsDark(
url,
dimRatio,
overlayColor.color,
isDarkElement
);

useEffect( () => {
setAttributes( { isDark: isCoverDark } );
}, [ isCoverDark ] );

const isImageBackground = IMAGE_BACKGROUND_TYPE === backgroundType;
const isVideoBackground = VIDEO_BACKGROUND_TYPE === backgroundType;

Expand Down Expand Up @@ -647,6 +652,7 @@ function CoverEdit( {
dimRatioToClass( dimRatio ),
{
'is-dark-theme': isDark,
glendaviesnz marked this conversation as resolved.
Show resolved Hide resolved
'is-light': ! isDark,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is-light is preferable, since the current default for the block is dark. We can't update all the blocks that already exist in post content, so the class works better as a modification to a new style rather than a change to the existing rules.

'has-background-dim': dimRatio !== 0,
'is-transient': isUploadingMedia,
'has-parallax': hasParallax,
Expand Down
6 changes: 4 additions & 2 deletions packages/block-library/src/cover/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export default function save( { attributes } ) {
dimRatio,
focalPoint,
hasParallax,
isDark,
isRepeated,
overlayColor,
url,
Expand Down Expand Up @@ -69,13 +70,14 @@ export default function save( { attributes } ) {
const objectPosition =
// prettier-ignore
focalPoint && isImgElement
? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
: undefined;
? `${ Math.round( focalPoint.x * 100 ) }% ${ Math.round( focalPoint.y * 100 ) }%`
: undefined;

const classes = classnames(
dimRatioToClass( dimRatio ),
overlayColorClass,
{
'is-light': ! isDark,
'has-background-dim': dimRatio !== 0,
'has-parallax': hasParallax,
'is-repeated': isRepeated,
Expand Down
7 changes: 6 additions & 1 deletion packages/block-library/src/cover/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,6 @@
opacity: 0.5;
}


@for $i from 1 through 10 {
&.has-background-dim.has-background-dim-#{ $i * 10 } {
&:not(.has-background-gradient)::before,
Expand Down Expand Up @@ -107,6 +106,12 @@
color: $white;
}

&.is-light {
.wp-block-cover__inner-container {
color: $black;
}
}

p,
h1,
h2,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,8 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
<p>First paragraph</p>
<!-- /wp:paragraph -->

<!-- wp:cover -->
<div class=\\"wp-block-cover has-background-dim\\"><div class=\\"wp-block-cover__inner-container\\"></div></div>
<!-- wp:cover {\\"isDark\\":false} -->
<div class=\\"wp-block-cover is-light has-background-dim\\"><div class=\\"wp-block-cover__inner-container\\"></div></div>
<!-- /wp:cover -->

<!-- wp:heading -->
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__cover.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"hasParallax": false,
"isRepeated": false,
"dimRatio": 40,
"backgroundType": "image"
"backgroundType": "image",
"isDark": true
},
"innerBlocks": [
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34} -->
<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<div class="wp-block-cover is-light has-background-dim"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Cover Image</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":34} -->
<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<div class="wp-block-cover is-light has-background-dim"><img class="wp-block-cover__image-background wp-image-34" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35} -->
<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<div class="wp-block-cover is-light has-background-dim"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:cover {"url":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==","id":35,"focalPoint":{"x":"0.07","y":"0.07"}} -->
<div class="wp-block-cover has-background-dim"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" style="object-position:7% 7%" data-object-fit="cover" data-object-position="7% 7%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<div class="wp-block-cover is-light has-background-dim"><img class="wp-block-cover__image-background wp-image-35" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==" style="object-position:7% 7%" data-object-fit="cover" data-object-position="7% 7%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"><strong>Cover Block</strong></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","gradient":"midnight"} -->
<div class="wp-block-cover has-background-dim has-background-gradient"><span aria-hidden="true" class="wp-block-cover__gradient-background has-midnight-gradient-background"></span><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<div class="wp-block-cover is-light has-background-dim has-background-gradient"><span aria-hidden="true" class="wp-block-cover__gradient-background has-midnight-gradient-background"></span><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">Cover</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,8 @@
"isRepeated": false,
"dimRatio": 50,
"backgroundType": "image",
"contentPosition": "bottom right"
"contentPosition": "bottom right",
"isDark": true
},
"innerBlocks": [
{
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<!-- wp:cover {"url":"data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=","dimRatio":40} -->
<div class="wp-block-cover has-background-dim-40 has-background-dim"><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<div class="wp-block-cover has-background-dim-40 is-light has-background-dim"><img class="wp-block-cover__image-background" src="data:image/jpeg;base64,/9j/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/yQALCAABAAEBAREA/8wABgAQEAX/2gAIAQEAAD8A0s8g/9k=" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">
Guten Berg!
</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

<!-- wp:cover {"url":"https://example.com/some-background-image.png","id":1933,"dimRatio":0,"focalPoint":{"x":"0.50","y":"0.40"},"minHeight":48,"minHeightUnit":"vw","align":"full"} -->
<div class="wp-block-cover alignfull" style="min-height:48vw"><img class="wp-block-cover__image-background wp-image-1933" src="https://example.com/some-background-image.png" style="object-position:50% 40%" data-object-fit="cover" data-object-position="50% 40%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
<div class="wp-block-cover alignfull is-light" style="min-height:48vw"><img class="wp-block-cover__image-background wp-image-1933" src="https://example.com/some-background-image.png" style="object-position:50% 40%" data-object-fit="cover" data-object-position="50% 40%"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"isRepeated": false,
"dimRatio": 30,
"backgroundType": "image",
"customGradient": "linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)"
"customGradient": "linear-gradient(135deg,rgba(0,208,132,1) 0%,rgba(6,147,227,1) 100%)",
"isDark": true
},
"innerBlocks": [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"isRepeated": false,
"dimRatio": 70,
"backgroundType": "video",
"customGradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)"
"customGradient": "linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)",
"isDark": true
},
"innerBlocks": [
{
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__cover__gradient.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"isRepeated": false,
"dimRatio": 50,
"backgroundType": "image",
"customGradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)"
"customGradient": "linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%)",
"isDark": true
},
"innerBlocks": [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"isRepeated": false,
"dimRatio": 50,
"overlayColor": "primary",
"backgroundType": "image"
"backgroundType": "image",
"isDark": true
},
"innerBlocks": [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
"isRepeated": false,
"dimRatio": 10,
"customOverlayColor": "#3615d9",
"backgroundType": "video"
"backgroundType": "video",
"isDark": true
},
"innerBlocks": [
{
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__cover__video.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"hasParallax": false,
"isRepeated": false,
"dimRatio": 40,
"backgroundType": "video"
"backgroundType": "video",
"isDark": true
},
"innerBlocks": [
{
Expand Down