Block List: Factor out BlockMultiControls component

WordPress · Oct 27, 2017 · 488a891 · 488a891
1 parent 7378fc3
commit 488a891
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 15 deletions.
diff --git 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 }
 			>
 				<BlockDropZone index={ order } />
-				{ ( showUI || isProperlyHovered ) && <BlockMover uids={ [ block.uid ] } /> }
-				{ ( showUI || isProperlyHovered ) && <BlockSettingsMenu uids={ [ block.uid ] } /> }
+				{ ( showUI || isHovered ) && <BlockMover uids={ [ block.uid ] } /> }
+				{ ( showUI || isHovered ) && <BlockSettingsMenu uids={ [ block.uid ] } /> }
 				{ isSelected && isValid && <BlockToolbar uid={ block.uid } /> }
-				{ isFirstMultiSelected && ! this.props.isSelecting &&
-					<BlockMover uids={ multiSelectedBlockUids } />
-				}
-				{ isFirstMultiSelected && ! this.props.isSelecting &&
-					<BlockSettingsMenu uids={ multiSelectedBlockUids } />
-				}
+				{ isFirstMultiSelected && <BlockMultiControls /> }
 				<div
 					ref={ this.bindBlockNode }
 					onKeyPress={ this.maybeStartTyping }
@@ -413,12 +407,10 @@ export default connect(
 			isSelected: isBlockSelected( state, ownProps.uid ),
 			isMultiSelected: isBlockMultiSelected( state, ownProps.uid ),
 			isFirstMultiSelected: isFirstMultiSelectedBlock( state, ownProps.uid ),
-			isHovered: isBlockHovered( state, ownProps.uid ),
+			isHovered: isBlockHovered( state, ownProps.uid ) && ! isMultiSelecting( state ),
 			focus: getBlockFocus( state, ownProps.uid ),
-			isSelecting: isMultiSelecting( state ),
 			isTyping: isTyping( state ),
 			order: getBlockIndex( state, ownProps.uid ),
-			multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
 			meta: getEditedPostAttribute( state, 'meta' ),
 			mode: getBlockMode( state, ownProps.uid ),
 		};

diff --git a/editor/modes/visual-editor/multi-controls.js b/editor/modes/visual-editor/multi-controls.js
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import BlockMover from '../../block-mover';
+import BlockSettingsMenu from '../../block-settings-menu';
+import {
+	getMultiSelectedBlockUids,
+	isMultiSelecting,
+} from '../../selectors';
+
+function VisualEditorBlockMultiControls( { multiSelectedBlockUids, isSelecting } ) {
+	if ( isSelecting ) {
+		return null;
+	}
+
+	return [
+		<BlockMover
+			key="mover"
+			uids={ multiSelectedBlockUids } />,
+		<BlockSettingsMenu
+			key="menu"
+			uids={ multiSelectedBlockUids } />,
+	];
+}
+
+export default connect( ( state ) => {
+	return {
+		multiSelectedBlockUids: getMultiSelectedBlockUids( state ),
+		isSelecting: isMultiSelecting( state ),
+	};
+} )( VisualEditorBlockMultiControls );