diff --git a/packages/base-styles/_mixins.scss b/packages/base-styles/_mixins.scss index e61541f0270570..79c23d4221cecd 100644 --- a/packages/base-styles/_mixins.scss +++ b/packages/base-styles/_mixins.scss @@ -278,6 +278,10 @@ @include input-style__focus(); } + @include input-placeholder-color; +} + +@mixin input-placeholder-color { // Use opacity to work in various editor styles. &::-webkit-input-placeholder { color: $dark-gray-placeholder; diff --git a/packages/block-editor/src/components/rich-text/content.scss b/packages/block-editor/src/components/rich-text/content.scss index 67e14b0882d7ef..420b449fb95598 100644 --- a/packages/block-editor/src/components/rich-text/content.scss +++ b/packages/block-editor/src/components/rich-text/content.scss @@ -5,9 +5,15 @@ [data-rich-text-placeholder]::after { content: attr(data-rich-text-placeholder); - // Use opacity to work in various editor styles. - // We don't specify the color here, because blocks or editor styles might provide their own. - opacity: 0.62; + // The RichText placeholder is the equivalent of the HTML placeholder + // attribute. As such, its color should have a sufficient contrast ratio + // with the background. However, themes, blocks or editor styles might + // provide their own color for the text of the block where RichText is + // used. For this reason, the RichText placeholder color should resemble + // the text color. We assume the block text color is responsible for + // providing sufficient contrast and slightly dim the placeholder color. + color: currentColor; + opacity: 85%; } &:focus { @@ -16,12 +22,6 @@ } } -// Captions may have lighter (gray) text, or be shown on a range of different background luminosites. -// To ensure legibility, we increase the default placeholder opacity to ensure contrast. -figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before { - opacity: 0.8; -} - [data-rich-text-script] { display: inline; diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss index dd2dfa0578c66d..22b75bab1d7d18 100644 --- a/packages/block-library/src/cover/style.scss +++ b/packages/block-library/src/cover/style.scss @@ -34,6 +34,15 @@ background-color: $black; } + // Make sure the placeholder text is white when has-background-dim default background is black. + // the first selector is required for old Cover markup + &.has-background-dim:not([class*="-background-color"]):not(.is-light), + &:not(.is-light) .has-background-dim:not([class*="-background-color"]) { + & ~ .wp-block-cover__inner-container [data-rich-text-placeholder]::after { + color: $white; + } + } + .has-background-dim.has-background-gradient { background-color: transparent; } diff --git a/packages/editor/src/components/post-text-editor/style.scss b/packages/editor/src/components/post-text-editor/style.scss index ad7b3383db2aa5..c0d7b3ffeea672 100644 --- a/packages/editor/src/components/post-text-editor/style.scss +++ b/packages/editor/src/components/post-text-editor/style.scss @@ -35,15 +35,5 @@ textarea.editor-post-text-editor { position: relative; } - &::-webkit-input-placeholder { - color: $dark-gray-placeholder; - } - - &::-moz-placeholder { - color: $dark-gray-placeholder; - } - - &:-ms-input-placeholder { - color: $dark-gray-placeholder; - } + @include input-placeholder-color; }