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.

Sign up for GitHub

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

Jump to bottom

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
Merged

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

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
31283ea
Cover block: Adjust the color of the text based on the background
scruffian Jul 19, 2021
88a3fb6
formatting change
scruffian Jul 19, 2021
23435c2
Add an 'is-light' class to the cover block when it's saved with a lig…
Sep 14, 2021
dc1208c
Revert back to the is-dark-theme
Sep 17, 2021
6b12ec3
fix css linting issues
Sep 17, 2021
0a34642
Add some additional selectors to get around specificity issues with T…
Sep 20, 2021
aadb543
Regenerate the cover block fixtures
Sep 20, 2021
5cd2c8d
Fix e2e test
Sep 20, 2021
028f59b
Another e2e fix
Sep 20, 2021
e9c1ccb
Another attempt to fix e2e
Sep 20, 2021
b7c6727
Revert "Add some additional selectors to get around specificity issue…
Sep 20, 2021
198c4d1
Remove default for isDark attribute
Sep 21, 2021
ae9212b
Put attribute default back
Sep 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/block-library/src/cover/block.json
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap
View file
Open in desktop
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
View file
Open in desktop
Expand Up @@ -9,7 +9,8 @@
"hasParallax": false,
"isRepeated": false,
"dimRatio": 40,
"backgroundType": "image"
"backgroundType": "image",
"isDark": true
},
"innerBlocks": [
{
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html
View file
Open in desktop
@@ -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 -->
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html
View file
Open in desktop
@@ -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 -->
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html
View file
Open in desktop
@@ -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 -->
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html
View file
Open in desktop
@@ -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 -->
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html
View file
Open in desktop
@@ -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 -->
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__cover__deprecated-6.json
View file
Open in desktop
Expand Up @@ -74,7 +74,8 @@
"isRepeated": false,
"dimRatio": 50,
"backgroundType": "image",
"contentPosition": "bottom right"
"contentPosition": "bottom right",
"isDark": true
},
"innerBlocks": [
{
Expand Down
4 changes: 2 additions & 2 deletions test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html
View file
Open in desktop
@@ -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
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__cover__gradient-image.json
View file
Open in desktop
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
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__cover__gradient-video.json
View file
Open in desktop
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
View file
Open in desktop
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
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__cover__solid-color.json
View file
Open in desktop
Expand Up @@ -9,7 +9,8 @@
"isRepeated": false,
"dimRatio": 50,
"overlayColor": "primary",
"backgroundType": "image"
"backgroundType": "image",
"isDark": true
},
"innerBlocks": [
{
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__cover__video-overlay.json
View file
Open in desktop
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
View file
Open in desktop
Expand Up @@ -9,7 +9,8 @@
"hasParallax": false,
"isRepeated": false,
"dimRatio": 40,
"backgroundType": "video"
"backgroundType": "video",
"isDark": true
},
"innerBlocks": [
{
Expand Down