From bef540208518fb9e91a16460ac6ad0c6884d94fa Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Thu, 19 Aug 2021 16:46:11 -0700 Subject: [PATCH 1/3] Update specificity of text color declaration Block level global styling for cover block text colors were being overridden by default colors. This is because, for global styles, we were setting styles on the top-level cover block element. The default text color, however, was being set on the child cover block inner container. Since the text content's nearest ancestor was the inner container, it was inheriting the inner containers text color declarations. --- packages/block-library/src/cover/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 43155f41d9ebf..fc3ef0aabd8bf 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -11,6 +11,7 @@ padding: 1em; // This block has customizable padding, border-box makes that more predictable. box-sizing: border-box; + color: $white; &.has-parallax { background-attachment: fixed; @@ -104,7 +105,6 @@ .wp-block-cover__inner-container { width: 100%; z-index: z-index(".wp-block-cover__inner-container"); - color: $white; } p, From e9aab137956c2ff464255764b86483b96d46a0ad Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Tue, 24 Aug 2021 01:19:31 -0700 Subject: [PATCH 2/3] Ensure image url exists before adding background dim class --- packages/block-library/src/cover/edit.js | 2 +- packages/block-library/src/cover/save.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 244390fd3a9ac..28a3db8387984 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -629,7 +629,7 @@ function CoverEdit( { dimRatioToClass( dimRatio ), { 'is-dark-theme': isDark, - 'has-background-dim': dimRatio !== 0, + 'has-background-dim': url && dimRatio !== 0, 'is-transient': isUploadingMedia, 'has-parallax': hasParallax, 'is-repeated': isRepeated, diff --git a/packages/block-library/src/cover/save.js b/packages/block-library/src/cover/save.js index 1b1de52e07521..1ddd572d9df16 100644 --- a/packages/block-library/src/cover/save.js +++ b/packages/block-library/src/cover/save.js @@ -76,7 +76,7 @@ export default function save( { attributes } ) { dimRatioToClass( dimRatio ), overlayColorClass, { - 'has-background-dim': dimRatio !== 0, + 'has-background-dim': url && dimRatio !== 0, 'has-parallax': hasParallax, 'is-repeated': isRepeated, 'has-background-gradient': gradient || customGradient, From c9e7375308678ebd07545c1794a1d01f45ba09ac Mon Sep 17 00:00:00 2001 From: Jeremy Yip Date: Tue, 24 Aug 2021 02:14:16 -0700 Subject: [PATCH 3/3] Add default background color logic --- packages/block-library/src/cover/edit.js | 1 + packages/block-library/src/cover/style.scss | 12 +----------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/cover/edit.js b/packages/block-library/src/cover/edit.js index 28a3db8387984..54833248a74d3 100644 --- a/packages/block-library/src/cover/edit.js +++ b/packages/block-library/src/cover/edit.js @@ -639,6 +639,7 @@ function CoverEdit( { 'has-custom-content-position': ! isContentPositionCenter( contentPosition ), + 'is-default-background-color': ! overlayColor.class, }, getPositionClassName( contentPosition ) ); diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index fc3ef0aabd8bf..bcdfbfcee5169 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -34,17 +34,7 @@ background-size: auto; } - /** - * Set a default background color for has-background-dim _unless_ it includes another - * background-color class (e.g. has-green-background-color). The presence of another - * background-color class implies that another style will provide the background color - * for the overlay. - * - * See: - * - Issue with background color specificity: https://github.com/WordPress/gutenberg/issues/26545 - * - Issue with alternative fix: https://github.com/WordPress/gutenberg/issues/26545 - */ - &.has-background-dim:not([class*="-background-color"]) { + &.is-default-background-color { background-color: $black; }