diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 214a485a94251..096cade78b166 100644 --- a/packages/block-library/src/cover/block.json +++ b/packages/block-library/src/cover/block.json @@ -58,6 +58,10 @@ }, "contentPosition": { "type": "string" + }, + "isDark": { + "type": "boolean", + "default": true } }, "supports": { diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 500cdd37838a8..5740c07562a60 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -317,6 +317,7 @@ function CoverEdit( { dimRatio, focalPoint, hasParallax, + isDark, isRepeated, minHeight, minHeightUnit, @@ -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; @@ -647,6 +652,7 @@ function CoverEdit( { dimRatioToClass( dimRatio ), { 'is-dark-theme': isDark, + 'is-light': ! isDark, 'has-background-dim': dimRatio !== 0, 'is-transient': isUploadingMedia, 'has-parallax': hasParallax, diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js index 1b1de52e07521..ce96a76d2ba79 100644 --- a/packages/block-library/src/cover/save.js +++ b/packages/block-library/src/cover/save.js @@ -35,6 +35,7 @@ export default function save( { attributes } ) { dimRatio, focalPoint, hasParallax, + isDark, isRepeated, overlayColor, url, @@ -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, diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 43155f41d9ebf..b50a0fcd07d65 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -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, @@ -107,6 +106,12 @@ color: $white; } + &.is-light { + .wp-block-cover__inner-container { + color: $black; + } + } + p, h1, h2, diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap index ec465386aaf05..f356747b05a22 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/inserting-blocks.test.js.snap @@ -88,8 +88,8 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \

First paragraph

- -
+ +
diff --git a/test/integration/fixtures/blocks/core__cover.json b/test/integration/fixtures/blocks/core__cover.json index cfe2fc497d833..2d4fd0ffede21 100644 --- a/test/integration/fixtures/blocks/core__cover.json +++ b/test/integration/fixtures/blocks/core__cover.json @@ -9,7 +9,8 @@ "hasParallax": false, "isRepeated": false, "dimRatio": 40, - "backgroundType": "image" + "backgroundType": "image", + "isDark": true }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html index 57143dcc57fcc..f2ff32ce15567 100644 --- a/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html +++ b/test/integration/fixtures/blocks/core__cover__deprecated-1.serialized.html @@ -1,5 +1,5 @@ -
+

Cover Image

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html index 908d376db6d78..623d9313edc55 100644 --- a/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html +++ b/test/integration/fixtures/blocks/core__cover__deprecated-2.serialized.html @@ -1,5 +1,5 @@ -
+

Cover Block

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html index d398f77561a7d..33c9c0cbf4d04 100644 --- a/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html +++ b/test/integration/fixtures/blocks/core__cover__deprecated-3.serialized.html @@ -1,5 +1,5 @@ -
+

Cover Block

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html index 4e455dc180f65..8ddb7566feaf3 100644 --- a/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html +++ b/test/integration/fixtures/blocks/core__cover__deprecated-4.serialized.html @@ -1,5 +1,5 @@ -
+

Cover Block

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html index edaa52301e112..4f110f17bce4f 100644 --- a/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html +++ b/test/integration/fixtures/blocks/core__cover__deprecated-5.serialized.html @@ -1,5 +1,5 @@ -
+

Cover

diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-6.json b/test/integration/fixtures/blocks/core__cover__deprecated-6.json index 992f6d7892d69..bc3c84f2f37a7 100644 --- a/test/integration/fixtures/blocks/core__cover__deprecated-6.json +++ b/test/integration/fixtures/blocks/core__cover__deprecated-6.json @@ -74,7 +74,8 @@ "isRepeated": false, "dimRatio": 50, "backgroundType": "image", - "contentPosition": "bottom right" + "contentPosition": "bottom right", + "isDark": true }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html b/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html index 4da8ec2748281..d49a8e328beaa 100644 --- a/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html +++ b/test/integration/fixtures/blocks/core__cover__deprecated-6.serialized.html @@ -1,5 +1,5 @@ -
+

Guten Berg!

@@ -7,7 +7,7 @@ -
+

diff --git a/test/integration/fixtures/blocks/core__cover__gradient-image.json b/test/integration/fixtures/blocks/core__cover__gradient-image.json index 6f56615b5f7af..929f65374caeb 100644 --- a/test/integration/fixtures/blocks/core__cover__gradient-image.json +++ b/test/integration/fixtures/blocks/core__cover__gradient-image.json @@ -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": [ { diff --git a/test/integration/fixtures/blocks/core__cover__gradient-video.json b/test/integration/fixtures/blocks/core__cover__gradient-video.json index a71f345cadf22..a7de6527076d0 100644 --- a/test/integration/fixtures/blocks/core__cover__gradient-video.json +++ b/test/integration/fixtures/blocks/core__cover__gradient-video.json @@ -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": [ { diff --git a/test/integration/fixtures/blocks/core__cover__gradient.json b/test/integration/fixtures/blocks/core__cover__gradient.json index 5728150c46b0c..756c96b44a667 100644 --- a/test/integration/fixtures/blocks/core__cover__gradient.json +++ b/test/integration/fixtures/blocks/core__cover__gradient.json @@ -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": [ { diff --git a/test/integration/fixtures/blocks/core__cover__solid-color.json b/test/integration/fixtures/blocks/core__cover__solid-color.json index ed5442cd7e8d1..e79359c136744 100644 --- a/test/integration/fixtures/blocks/core__cover__solid-color.json +++ b/test/integration/fixtures/blocks/core__cover__solid-color.json @@ -9,7 +9,8 @@ "isRepeated": false, "dimRatio": 50, "overlayColor": "primary", - "backgroundType": "image" + "backgroundType": "image", + "isDark": true }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__cover__video-overlay.json b/test/integration/fixtures/blocks/core__cover__video-overlay.json index 7e3d1e3e4193a..61c90de1e7ed5 100644 --- a/test/integration/fixtures/blocks/core__cover__video-overlay.json +++ b/test/integration/fixtures/blocks/core__cover__video-overlay.json @@ -10,7 +10,8 @@ "isRepeated": false, "dimRatio": 10, "customOverlayColor": "#3615d9", - "backgroundType": "video" + "backgroundType": "video", + "isDark": true }, "innerBlocks": [ { diff --git a/test/integration/fixtures/blocks/core__cover__video.json b/test/integration/fixtures/blocks/core__cover__video.json index 2f46f1e5884ce..d690fe3b723f2 100644 --- a/test/integration/fixtures/blocks/core__cover__video.json +++ b/test/integration/fixtures/blocks/core__cover__video.json @@ -9,7 +9,8 @@ "hasParallax": false, "isRepeated": false, "dimRatio": 40, - "backgroundType": "video" + "backgroundType": "video", + "isDark": true }, "innerBlocks": [ {