From ffab55f0529141792c2bd583c4f06e3e48469179 Mon Sep 17 00:00:00 2001 From: Marty Helmick Date: Fri, 7 Dec 2018 17:13:25 -0500 Subject: [PATCH 1/4] Fix Cover CSS specificity Reduces specificity in core Cover styles to ease clashes with theme styles. This has been explained and discussed in further detail here https://github.com/WordPress/gutenberg/issues/11779#issuecomment-438819158 The cover text color was added to the parent `.wp-block-cover` element so that text`.wp-block-cover-text` and links`.wp-block-cover-text a` could `inherit` the color. This drys up the code and allows for single class selector overrides. I've also removed the references and styles for `.wp-block-cover-image`. I couldn't find anything mentioning a planned removal date and assumed now would be OK to do so..? I'm also not sure what the `h2` styles are referencing. Is an `h2` something I'm missing within the Cover Block? I'd like to remove if not. --- packages/block-library/src/cover/style.scss | 86 +++++++++++---------- 1 file changed, 44 insertions(+), 42 deletions(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 5e35c6d8ff809d..3d35f7d03a9485 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -1,6 +1,6 @@ -.wp-block-cover-image, .wp-block-cover { position: relative; + color: $white; background-color: $black; background-size: cover; background-position: center center; @@ -14,44 +14,10 @@ &.has-left-content { justify-content: flex-start; - - h2, - .wp-block-cover-image-text, - .wp-block-cover-text { - margin-left: 0; - text-align: left; - } } &.has-right-content { justify-content: flex-end; - - h2, - .wp-block-cover-image-text, - .wp-block-cover-text { - margin-right: 0; - text-align: right; - } - } - - h2, - .wp-block-cover-image-text, - .wp-block-cover-text { - color: $white; - font-size: 2em; - line-height: 1.25; - z-index: 1; - margin-bottom: 0; - max-width: $content-width; - padding: $block-padding; - text-align: center; - - a, - a:hover, - a:focus, - a:active { - color: $white; - } } &.has-parallax { @@ -78,16 +44,23 @@ } @for $i from 1 through 10 { - &.has-background-dim.has-background-dim-#{ $i * 10 }::before { + + &.has-background-dim-#{ $i * 10 }::before { opacity: $i * 0.1; } } + // Aligned cover blocks should not use our global alignment rules + &.aligncenter, + &.alignleft, + &.alignright { + display: flex; + } + // Apply max-width to floated items that have no intrinsic width &.alignleft, &.alignright { max-width: $content-width / 2; - width: 100%; } // Using flexbox without an assigned height property breaks vertical center alignment in IE11. @@ -103,12 +76,41 @@ content: none; } } +} + +.wp-block-cover-text { + color: inherit; + font-size: 2em; + line-height: 1.25; + z-index: 1; + margin-bottom: 0; + max-width: $content-width; + padding: $block-padding; + text-align: center; + + a, + a:hover, + a:focus, + a:active { + color: inherit; + } +} - // Aligned cover blocks should not use our global alignment rules - &.aligncenter, - &.alignleft, - &.alignright { - display: flex; +.has-left-content { + + h2, + .wp-block-cover-text { + margin-left: 0; + text-align: left; + } +} + +.has-right-content { + + h2, + .wp-block-cover-text { + margin-right: 0; + text-align: right; } } From ebc1d24db63e0ae5cc38d06c1aeece3805e373d1 Mon Sep 17 00:00:00 2001 From: m-e-h Date: Fri, 8 Feb 2019 17:20:42 -0500 Subject: [PATCH 2/4] don't change text-color of the upload-media box. --- packages/block-library/src/cover/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index 00d3fed4c8fcab..b6a24d12af3d3b 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -21,6 +21,7 @@ // use opacity to work in various editor styles background: $dark-opacity-light-200; min-height: 200px; + color: inherit; .is-dark-theme & { background: $light-opacity-light-200; From 661dec3870ee27d6e756c9ecf85f04df268ce595 Mon Sep 17 00:00:00 2001 From: m-e-h Date: Fri, 8 Feb 2019 17:37:07 -0500 Subject: [PATCH 3/4] keep specificity on cover-text font-size because .editor-styles-wrapper p Also remove old h2 --- packages/block-library/src/cover/style.scss | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index 3d35f7d03a9485..bfef69c8a6f9a4 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -12,6 +12,11 @@ align-items: center; overflow: hidden; + .wp-block-cover-text { + font-size: 2em; + line-height: 1.25; + } + &.has-left-content { justify-content: flex-start; } @@ -71,7 +76,7 @@ font-size: 0; min-height: inherit; - // IE doesn't support flex so omit that. + // Omit the pseudo-element if flex isn't supported. @supports (position: sticky) { content: none; } @@ -80,8 +85,6 @@ .wp-block-cover-text { color: inherit; - font-size: 2em; - line-height: 1.25; z-index: 1; margin-bottom: 0; max-width: $content-width; @@ -98,7 +101,6 @@ .has-left-content { - h2, .wp-block-cover-text { margin-left: 0; text-align: left; @@ -107,7 +109,6 @@ .has-right-content { - h2, .wp-block-cover-text { margin-right: 0; text-align: right; From a00c4020b548a43832ea0bf295654e3953f3b648 Mon Sep 17 00:00:00 2001 From: m-e-h Date: Fri, 8 Feb 2019 17:37:51 -0500 Subject: [PATCH 4/4] remove old h2 and wp-block-cover-image references --- packages/block-library/src/cover/editor.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/cover/editor.scss b/packages/block-library/src/cover/editor.scss index b6a24d12af3d3b..b73643f7dd9917 100644 --- a/packages/block-library/src/cover/editor.scss +++ b/packages/block-library/src/cover/editor.scss @@ -1,14 +1,9 @@ -.wp-block-cover-image, .wp-block-cover { .editor-rich-text__editable:focus a[data-rich-text-format-boundary] { box-shadow: none; background: rgba(255, 255, 255, 0.3); } - &.components-placeholder h2 { - color: inherit; - } - &.has-left-content .editor-rich-text__inline-toolbar { justify-content: flex-start; }