Block: Refactor insertion point within sibling inserter

WordPress · Oct 13, 2017 · 82c3e27 · 82c3e27
1 parent 6477a7a
commit 82c3e27
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 47 deletions.
diff --git a/editor/modes/visual-editor/block-list.js b/editor/modes/visual-editor/block-list.js
@@ -19,8 +19,6 @@ import VisualEditorSiblingInserter from './sibling-inserter';
 import BlockDropZone from './block-drop-zone';
 import {
 	getBlockUids,
-	getBlockInsertionPoint,
-	isBlockInsertionPointVisible,
 	getMultiSelectedBlocksStartUid,
 	getMultiSelectedBlocksEndUid,
 	getMultiSelectedBlocks,
@@ -29,8 +27,6 @@ import {
 } from '../../selectors';
 import { insertBlock, startMultiSelect, stopMultiSelect, multiSelect, selectBlock } from '../../actions';
 
-const INSERTION_POINT_PLACEHOLDER = '[[insertion-point]]';
-
 class VisualEditorBlockList extends Component {
 	constructor( props ) {
 		super( props );
@@ -196,47 +192,24 @@ class VisualEditorBlockList extends Component {
 	}
 
 	render() {
-		const {
-			blocks,
-			showInsertionPoint,
-			insertionPoint,
-		} = this.props;
-
-		const blocksWithInsertionPoint = showInsertionPoint
-			? [
-				...blocks.slice( 0, insertionPoint ),
-				INSERTION_POINT_PLACEHOLDER,
-				...blocks.slice( insertionPoint ),
-			]
-			: blocks;
+		const { blocks } = this.props;
 
 		return (
 			<div>
 				{ !! blocks.length && <VisualEditorSiblingInserter insertIndex={ 0 } /> }
-				{ !! blocks.length && blocksWithInsertionPoint.map( ( uid, index ) => {
-					if ( uid === INSERTION_POINT_PLACEHOLDER ) {
-						return (
-							<div
-								key={ INSERTION_POINT_PLACEHOLDER }
-								className="editor-visual-editor__insertion-point"
-							/>
-						);
-					}
-
-					return [
-						<VisualEditorBlock
-							key={ 'block-' + uid }
-							uid={ uid }
-							blockRef={ ( ref ) => this.setBlockRef( ref, uid ) }
-							onSelectionStart={ this.onSelectionStart }
-							onShiftSelection={ this.onShiftSelection }
-						/>,
-						<VisualEditorSiblingInserter
-							key={ 'sibling-inserter-' + uid }
-							insertIndex={ index + 1 }
-						/>,
-					];
-				} ) }
+				{ blocks.map( ( uid, index ) => [
+					<VisualEditorBlock
+						key={ 'block-' + uid }
+						uid={ uid }
+						blockRef={ ( ref ) => this.setBlockRef( ref, uid ) }
+						onSelectionStart={ this.onSelectionStart }
+						onShiftSelection={ this.onShiftSelection }
+					/>,
+					<VisualEditorSiblingInserter
+						key={ 'sibling-inserter-' + uid }
+						insertIndex={ index + 1 }
+					/>,
+				] ) }
 				{ ! blocks.length &&
 					<div className="editor-visual-editor__placeholder">
 						<BlockDropZone />
@@ -258,8 +231,6 @@ class VisualEditorBlockList extends Component {
 export default connect(
 	( state ) => ( {
 		blocks: getBlockUids( state ),
-		insertionPoint: getBlockInsertionPoint( state ),
-		showInsertionPoint: isBlockInsertionPointVisible( state ),
 		selectionStart: getMultiSelectedBlocksStartUid( state ),
 		selectionEnd: getMultiSelectedBlocksEndUid( state ),
 		multiSelectedBlocks: getMultiSelectedBlocks( state ),

diff --git a/editor/modes/visual-editor/sibling-inserter.js b/editor/modes/visual-editor/sibling-inserter.js
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { connect } from 'react-redux';
 import classnames from 'classnames';
 
 /**
@@ -13,6 +14,10 @@ import { focus } from '@wordpress/utils';
  * Internal dependencies
  */
 import Inserter from '../../inserter';
+import {
+	getBlockInsertionPoint,
+	isBlockInsertionPointVisible,
+} from '../../selectors';
 
 class VisualEditorSiblingInserter extends Component {
 	constructor() {
@@ -82,11 +87,11 @@ class VisualEditorSiblingInserter extends Component {
 	}
 
 	render() {
-		const { insertIndex } = this.props;
+		const { insertIndex, showInsertionPoint } = this.props;
 		const { isVisible } = this.state;
 
 		const classes = classnames( 'editor-visual-editor__sibling-inserter', {
-			'is-visible': isVisible,
+			'is-visible': isVisible || showInsertionPoint,
 		} );
 
 		return (
@@ -99,6 +104,9 @@ class VisualEditorSiblingInserter extends Component {
 				onMouseEnter={ this.show }
 				onMouseLeave={ this.hide }
 				tabIndex={ 0 }>
+				{ showInsertionPoint && (
+					<div className="editor-visual-editor__insertion-point" />
+				) }
 				{ isVisible && [
 					<hr
 						key="rule"
@@ -116,4 +124,13 @@ class VisualEditorSiblingInserter extends Component {
 	}
 }
 
-export default VisualEditorSiblingInserter;
+export default connect(
+	( state, ownProps ) => {
+		return {
+			showInsertionPoint: (
+				isBlockInsertionPointVisible( state ) &&
+				getBlockInsertionPoint( state ) === ownProps.insertIndex
+			),
+		};
+	}
+)( VisualEditorSiblingInserter );
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -304,7 +304,7 @@
 
 	&:before {
 		position: absolute;
-		top: -3px;
+		top: -1px;
 		height: 2px;
 		left: 0;
 		right: 0;