Use is-selected instead of :focus

WordPress · Jul 26, 2019 · 69cb29d · 69cb29d
1 parent 406bc39
commit 69cb29d
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -337,7 +337,7 @@ class RichTextWrapper extends Component {
 				onSelectionChange={ onSelectionChange }
 				tagName={ tagName }
 				wrapperClassName={ classnames( wrapperClasses, wrapperClassName ) }
-				className={ classnames( classes, className ) }
+				className={ classnames( classes, className, { 'is-selected': originalIsSelected } ) }
 				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
@@ -43,7 +43,7 @@
 	}
 
 	// Could be unset for individual rich text instances.
-	&:focus [data-rich-text-placeholder]::after {
+	&.is-selected [data-rich-text-placeholder]::after {
 		display: none;
 	}
 }

diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
@@ -1,7 +1,7 @@
 // Specific to the empty paragraph placeholder:
 // when shown on mobile and in nested contexts, one or more icons show up on the right.
 // This padding makes sure it doesn't overlap text.
-.block-editor-rich-text__editable.wp-block-paragraph:not(:focus) [data-rich-text-placeholder]::after {
+.block-editor-rich-text__editable.wp-block-paragraph:not(.is-selected) [data-rich-text-placeholder]::after {
 	display: inline-block;
 	padding-right: $icon-button-size * 3;