diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js index da5d70a7ae43af..9d2618d21c97f3 100644 --- a/editor/modes/visual-editor/block.js +++ b/editor/modes/visual-editor/block.js @@ -23,6 +23,7 @@ import BlockDropZone from './block-drop-zone'; import BlockHtml from './block-html'; import BlockMover from '../../block-mover'; import BlockSettingsMenu from '../../block-settings-menu'; +import BlockMultiControls from './multi-controls'; import BlockToolbar from '../../block-toolbar'; import { clearSelectedBlock, @@ -43,7 +44,6 @@ import { isMultiSelecting, getBlockIndex, getEditedPostAttribute, - getMultiSelectedBlockUids, getNextBlock, getPreviousBlock, isBlockHovered, @@ -290,7 +290,7 @@ class VisualEditorBlock extends Component { } render() { - const { block, multiSelectedBlockUids, order, mode } = this.props; + const { block, order, mode } = this.props; const { name: blockName, isValid } = block; const blockType = getBlockType( blockName ); // translators: %s: Type of block (i.e. Text, Image etc) @@ -314,13 +314,12 @@ class VisualEditorBlock extends Component { // Generate the wrapper class names handling the different states of the block. const { isHovered, isSelected, isMultiSelected, isFirstMultiSelected, focus } = this.props; const showUI = isSelected && ( ! this.props.isTyping || focus.collapsed === false ); - const isProperlyHovered = isHovered && ! this.props.isSelecting; const { error } = this.state; const wrapperClassName = classnames( 'editor-visual-editor__block', { 'has-warning': ! isValid || !! error, 'is-selected': showUI, 'is-multi-selected': isMultiSelected, - 'is-hovered': isProperlyHovered, + 'is-hovered': isHovered, } ); const { onMouseLeave, onFocus, onReplace } = this.props; @@ -347,15 +346,10 @@ class VisualEditorBlock extends Component { { ...wrapperProps } > - { ( showUI || isProperlyHovered ) && } - { ( showUI || isProperlyHovered ) && } + { ( showUI || isHovered ) && } + { ( showUI || isHovered ) && } { isSelected && isValid && } - { isFirstMultiSelected && ! this.props.isSelecting && - - } - { isFirstMultiSelected && ! this.props.isSelecting && - - } + { isFirstMultiSelected && }
, + , + ]; +} + +export default connect( ( state ) => { + return { + multiSelectedBlockUids: getMultiSelectedBlockUids( state ), + isSelecting: isMultiSelecting( state ), + }; +} )( VisualEditorBlockMultiControls );