From f1d6e35d0c8596a2f071183abcc7af36eb87d897 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 16 Feb 2018 11:54:07 -0500 Subject: [PATCH 1/3] Block List: Hide hover effects when typing --- editor/components/block-list/block.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index 631829059f6cb..5d575348f073d 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -85,7 +85,7 @@ export class BlockListBlock extends Component { this.bindBlockNode = this.bindBlockNode.bind( this ); this.setAttributes = this.setAttributes.bind( this ); this.maybeHover = this.maybeHover.bind( this ); - this.onMouseLeave = this.onMouseLeave.bind( this ); + this.hideHoverEffects = this.hideHoverEffects.bind( this ); this.maybeStartTyping = this.maybeStartTyping.bind( this ); this.stopTypingOnMouseMove = this.stopTypingOnMouseMove.bind( this ); this.mergeBlocks = this.mergeBlocks.bind( this ); @@ -145,6 +145,10 @@ export class BlockListBlock extends Component { ) { this.previousOffset = this.node.getBoundingClientRect().top; } + + if ( newProps.isTyping ) { + this.hideHoverEffects(); + } } componentDidUpdate( prevProps ) { @@ -301,7 +305,7 @@ export class BlockListBlock extends Component { * where mouseleave may occur but the block is not hovered (multi-select), * so to avoid unnecesary renders, the state is only set if hovered. */ - onMouseLeave() { + hideHoverEffects() { if ( this.state.isHovered ) { this.setState( { isHovered: false } ); } @@ -565,7 +569,7 @@ export class BlockListBlock extends Component { Date: Fri, 16 Feb 2018 11:54:42 -0500 Subject: [PATCH 2/3] Block List: Avoid hover state on all selections Multi-selecting and singular selection shouldn't have hover effects applied --- editor/components/block-list/block.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index 5d575348f073d..d3337583a3dc8 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -290,10 +290,11 @@ export class BlockListBlock extends Component { * @see https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter */ maybeHover() { - const { isMultiSelected } = this.props; + const { isMultiSelected, isSelected } = this.props; const { isHovered } = this.state; - if ( isHovered || isMultiSelected || this.hadTouchStart ) { + if ( isHovered || isMultiSelected || isSelected || + this.props.isMultiSelecting || this.hadTouchStart ) { return; } From d4b93b426c0a475bff1b999c25a4f56d78875cef Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 16 Feb 2018 12:07:44 -0500 Subject: [PATCH 3/3] Block List: Unset hover state when block is selected --- editor/components/block-list/block.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index d3337583a3dc8..b1ce7f7079590 100644 --- a/editor/components/block-list/block.js +++ b/editor/components/block-list/block.js @@ -146,7 +146,7 @@ export class BlockListBlock extends Component { this.previousOffset = this.node.getBoundingClientRect().top; } - if ( newProps.isTyping ) { + if ( newProps.isTyping || newProps.isSelected ) { this.hideHoverEffects(); } }