RichText: show boundary only with editable element focus (#15466)

WordPress · May 15, 2019 · 9ea31a7 · 9ea31a7
1 parent f004741
commit 9ea31a7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/packages/block-editor/src/components/rich-text/editable.js b/packages/block-editor/src/components/rich-text/editable.js
@@ -83,7 +83,10 @@ function applyInternetExplorerInputFix( editorNode ) {
 }
 
 const IS_PLACEHOLDER_VISIBLE_ATTR_NAME = 'data-is-placeholder-visible';
-const CLASS_NAME = 'editor-rich-text__editable block-editor-rich-text__editable';
+
+const oldClassName = 'editor-rich-text__editable';
+
+export const className = 'block-editor-rich-text__editable';
 
 /**
  * Whether or not the user agent is Internet Explorer.
@@ -116,7 +119,11 @@ export default class Editable extends Component {
 		}
 
 		if ( ! isEqual( this.props.className, nextProps.className ) ) {
-			this.editorNode.className = classnames( nextProps.className, CLASS_NAME );
+			this.editorNode.className = classnames(
+				className,
+				oldClassName,
+				nextProps.className
+			);
 		}
 
 		const { removedKeys, updatedKeys } = diffAriaProps( this.props, nextProps );
@@ -156,7 +163,7 @@ export default class Editable extends Component {
 			style,
 			record,
 			valueToEditableHTML,
-			className,
+			className: additionalClassName,
 			isPlaceholderVisible,
 			...remainingProps
 		} = this.props;
@@ -166,7 +173,7 @@ export default class Editable extends Component {
 		return createElement( tagName, {
 			role: 'textbox',
 			'aria-multiline': true,
-			className: classnames( className, CLASS_NAME ),
+			className: classnames( className, oldClassName, additionalClassName ),
 			contentEditable: true,
 			[ IS_PLACEHOLDER_VISIBLE_ATTR_NAME ]: isPlaceholderVisible,
 			ref: this.bindEditorNode,

diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -56,7 +56,7 @@ import Autocomplete from '../autocomplete';
 import BlockFormatControls from '../block-format-controls';
 import FormatEdit from './format-edit';
 import FormatToolbar from './format-toolbar';
-import Editable from './editable';
+import Editable, { className as editableClassName } from './editable';
 import { pickAriaProps } from './aria';
 import { getPatterns } from './patterns';
 import { withBlockEditContext } from '../block-edit/context';
@@ -472,15 +472,18 @@ export class RichText extends Component {
 		const boundarySelector = '*[data-rich-text-format-boundary]';
 		const element = this.editableRef.querySelector( boundarySelector );
 
-		if ( element ) {
-			const computedStyle = getComputedStyle( element );
-			const newColor = computedStyle.color
-				.replace( ')', ', 0.2)' )
-				.replace( 'rgb', 'rgba' );
-
-			globalStyle.innerHTML =
-				`*:focus ${ boundarySelector }{background-color: ${ newColor }}`;
+		if ( ! element ) {
+			return;
 		}
+
+		const computedStyle = getComputedStyle( element );
+		const newColor = computedStyle.color
+			.replace( ')', ', 0.2)' )
+			.replace( 'rgb', 'rgba' );
+		const selector = `.${ editableClassName }:focus ${ boundarySelector }`;
+		const rule = `background-color: ${ newColor }`;
+
+		globalStyle.innerHTML = `${ selector } {${ rule }}`;
 	}
 
 	/**