diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json index 214a485a942514..096cade78b1664 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 500cdd37838a82..5740c07562a607 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 1b1de52e075214..ce96a76d2ba794 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 43155f41d9ebf6..b50a0fcd07d652 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 ec465386aaf05d..f356747b05a226 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
- -Cover Image
Cover Block
Cover Block
Cover Block
Cover
Guten Berg!
@@ -7,7 +7,7 @@ -