diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js index 3b8bd06ca5ee8..740f30171425d 100644 --- a/packages/block-editor/src/components/rich-text/index.js +++ b/packages/block-editor/src/components/rich-text/index.js @@ -336,6 +336,7 @@ class RichTextWrapper extends Component { didAutomaticChange, undo, placeholder, + keepPlaceholderOnFocus, // eslint-disable-next-line no-unused-vars allowedFormats, withoutInteractiveFormatting, @@ -383,7 +384,10 @@ class RichTextWrapper extends Component { selectionEnd={ selectionEnd } onSelectionChange={ onSelectionChange } tagName={ tagName } - className={ classnames( classes, className, { 'is-selected': originalIsSelected } ) } + className={ classnames( classes, className, { + 'is-selected': originalIsSelected, + 'keep-placeholder-on-focus': keepPlaceholderOnFocus, + } ) } placeholder={ placeholder } allowedFormats={ adjustedAllowedFormats } withoutInteractiveFormatting={ withoutInteractiveFormatting } diff --git a/packages/block-editor/src/components/rich-text/style.scss b/packages/block-editor/src/components/rich-text/style.scss index e5498676c6015..ef382736a3a70 100644 --- a/packages/block-editor/src/components/rich-text/style.scss +++ b/packages/block-editor/src/components/rich-text/style.scss @@ -34,16 +34,19 @@ } } + [data-rich-text-placeholder] { + pointer-events: none; + } + [data-rich-text-placeholder]::after { content: attr(data-rich-text-placeholder); - pointer-events: none; // 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; } // Could be unset for individual rich text instances. - &.is-selected [data-rich-text-placeholder]::after { + &.is-selected:not(.keep-placeholder-on-focus) [data-rich-text-placeholder]::after { display: none; } }