Show UI on text selection (#861)

WordPress · May 23, 2017 · 5781400 · 5781400
1 parent 3f2be75
commit 5781400
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/blocks/editable/index.js b/blocks/editable/index.js
@@ -131,10 +131,18 @@ export default class Editable extends wp.element.Component {
 		}
 
 		const content = this.getContent();
+		const collapsed = this.editor.selection.isCollapsed();
 
 		this.setState( {
 			empty: ! content || ! content.length,
 		} );
+
+		if ( this.props.focus.collapsed !== collapsed ) {
+			this.props.onFocus( {
+				...this.props.focus,
+				collapsed,
+			} );
+		}
 	}
 
 	onChange() {

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
@@ -166,8 +166,9 @@ class VisualEditorBlock extends wp.element.Component {
 		}
 
 		const { isHovered, isSelected, isTyping, focus } = this.props;
+		const showUI = isSelected && ( ! isTyping || ! focus.collapsed );
 		const className = classnames( 'editor-visual-editor__block', {
-			'is-selected': isSelected && ! isTyping,
+			'is-selected': showUI,
 			'is-hovered': isHovered,
 		} );
 
@@ -196,8 +197,8 @@ class VisualEditorBlock extends wp.element.Component {
 				tabIndex="0"
 				{ ...wrapperProps }
 			>
-				{ ( ( isSelected && ! isTyping ) || isHovered ) && <BlockMover uid={ block.uid } /> }
-				{ isSelected && ! isTyping &&
+				{ ( showUI || isHovered ) && <BlockMover uid={ block.uid } /> }
+				{ showUI &&
 					<div className="editor-visual-editor__block-controls">
 						<BlockSwitcher uid={ block.uid } />
 						{ !! settings.controls && (