diff --git a/editor/modes/visual-editor/block-list.js b/editor/modes/visual-editor/block-list.js index a0af958a9bfbe..b67565af6ca8a 100644 --- 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 (
{ !! blocks.length && } - { !! blocks.length && blocksWithInsertionPoint.map( ( uid, index ) => { - if ( uid === INSERTION_POINT_PLACEHOLDER ) { - return ( -
- ); - } - - return [ - this.setBlockRef( ref, uid ) } - onSelectionStart={ this.onSelectionStart } - onShiftSelection={ this.onShiftSelection } - />, - , - ]; - } ) } + { blocks.map( ( uid, index ) => [ + this.setBlockRef( ref, uid ) } + onSelectionStart={ this.onSelectionStart } + onShiftSelection={ this.onShiftSelection } + />, + , + ] ) } { ! blocks.length &&
@@ -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 index 716ba3c80a13a..03cfdde620d36 100644 --- 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 && ( +
+ ) } { isVisible && [
{ + 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 index 3ac63a8772552..5fd32c1f8d376 100644 --- 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;