From e64664b51778db1ae576741f7a9285e60f2eeb9e Mon Sep 17 00:00:00 2001 From: Jon Surrell Date: Mon, 2 Nov 2020 10:50:27 +0100 Subject: [PATCH] Cover block: Restore default overlay background (#26569) * Restore default Cover overlay background The default Cover block overlay background was removed. This changed the style of existing blocks on existing sites. Restore the default background in such a way that it does not conflict with theme-provided background-color styles and there is no need to artificially add extra specificity. Fix regression: https://github.com/WordPress/gutenberg/issues/26545 --- packages/block-library/CHANGELOG.md | 5 +++++ packages/block-library/src/cover/style.scss | 14 ++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 2dc5aab8feb40..88e305999351b 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -2,6 +2,11 @@ ## Unreleased +### Bug Fixes + +- Fix a regression ([#26545](https://github.com/WordPress/gutenberg/pull/26545)) where the Cover block lost its default background overlay color + ([#26569](https://github.com/WordPress/gutenberg/pull/26569)). + ## 2.23.0 (2020-09-03) ### Enhancement diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 6d4030d5c918a..1f4f09f9fc9c1 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -34,6 +34,20 @@ 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"]) { + background-color: $black; + } + &.has-background-dim::before { content: ""; background-color: inherit;