diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
index 7bc2f126e03cd..4dc8208bd311b 100644
--- a/editor/components/block-list/block.js
+++ b/editor/components/block-list/block.js
@@ -34,6 +34,7 @@ import BlockContextualToolbar from './block-contextual-toolbar';
import BlockMultiControls from './multi-controls';
import BlockMobileToolbar from './block-mobile-toolbar';
import BlockListSiblingInserter from './sibling-inserter';
+import BlockListInsertionPoint from './insertion-point';
import {
clearSelectedBlock,
editPost,
@@ -63,6 +64,7 @@ import {
isSelectionEnabled,
isTyping,
getBlockMode,
+ getBlockCount,
} from '../../store/selectors';
const { BACKSPACE, ESCAPE, DELETE, ENTER, UP, RIGHT, DOWN, LEFT } = keycodes;
@@ -357,7 +359,7 @@ export class BlockListBlock extends Component {
}
render() {
- const { block, order, mode, showContextualToolbar, isLocked } = this.props;
+ const { block, order, mode, showContextualToolbar, isLocked, isLast } = this.props;
const { name: blockName, isValid } = block;
const blockType = getBlockType( blockName );
// translators: %s: Type of block (i.e. Text, Image etc)
@@ -375,6 +377,7 @@ export class BlockListBlock extends Component {
'is-multi-selected': isMultiSelected,
'is-hovered': isHovered,
'is-reusable': isReusableBlock( blockType ),
+ 'is-last': isLast,
} );
const { onMouseLeave, onFocus, onReplace } = this.props;
@@ -448,27 +451,33 @@ export class BlockListBlock extends Component {
{ !! error && }
+
);
/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
}
}
-const mapStateToProps = ( state, { uid } ) => ( {
- previousBlock: getPreviousBlock( state, uid ),
- nextBlock: getNextBlock( state, uid ),
- block: getBlock( state, uid ),
- isSelected: isBlockSelected( state, uid ),
- isMultiSelected: isBlockMultiSelected( state, uid ),
- isFirstMultiSelected: isFirstMultiSelectedBlock( state, uid ),
- isHovered: isBlockHovered( state, uid ) && ! isMultiSelecting( state ),
- focus: getBlockFocus( state, uid ),
- isTyping: isTyping( state ),
- order: getBlockIndex( state, uid ),
- meta: getEditedPostAttribute( state, 'meta' ),
- mode: getBlockMode( state, uid ),
- isSelectionEnabled: isSelectionEnabled( state ),
-} );
+const mapStateToProps = ( state, { uid } ) => {
+ const index = getBlockIndex( state, uid );
+
+ return {
+ previousBlock: getPreviousBlock( state, uid ),
+ nextBlock: getNextBlock( state, uid ),
+ block: getBlock( state, uid ),
+ isSelected: isBlockSelected( state, uid ),
+ isMultiSelected: isBlockMultiSelected( state, uid ),
+ isFirstMultiSelected: isFirstMultiSelectedBlock( state, uid ),
+ isHovered: isBlockHovered( state, uid ) && ! isMultiSelecting( state ),
+ focus: getBlockFocus( state, uid ),
+ isTyping: isTyping( state ),
+ order: index,
+ meta: getEditedPostAttribute( state, 'meta' ),
+ mode: getBlockMode( state, uid ),
+ isSelectionEnabled: isSelectionEnabled( state ),
+ isLast: index === getBlockCount( state ) - 1,
+ };
+};
const mapDispatchToProps = ( dispatch, ownProps ) => ( {
onChange( uid, attributes ) {
diff --git a/editor/components/block-list/insertion-point.js b/editor/components/block-list/insertion-point.js
new file mode 100644
index 0000000000000..99bb0b84de61a
--- /dev/null
+++ b/editor/components/block-list/insertion-point.js
@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+
+/**
+ * Internal dependencies
+ */
+import {
+ getBlockUids,
+ getBlockInsertionPoint,
+ isBlockInsertionPointVisible,
+} from '../../store/selectors';
+import {
+ clearSelectedBlock,
+} from '../../store/actions';
+
+/**
+ * Component showing the block's insertion point.
+ *
+ * @param {Object} props React props passed to the component.
+ * @returns {Object|false} Rendered insertion point.
+ */
+function BlockListInsertionPoint( { showInsertionPoint } ) {
+ return showInsertionPoint && (
+
+ );
+}
+
+export default connect(
+ ( state, { uid } ) => {
+ const blockIndex = uid ? getBlockUids( state ).indexOf( uid ) : -1;
+ const insertIndex = blockIndex > -1 ? blockIndex + 1 : 0;
+
+ return {
+ showInsertionPoint: (
+ isBlockInsertionPointVisible( state ) &&
+ getBlockInsertionPoint( state ) === insertIndex
+ ),
+ };
+ },
+ {
+ clearSelectedBlock,
+ }
+)( BlockListInsertionPoint );
diff --git a/editor/components/block-list/sibling-inserter.js b/editor/components/block-list/sibling-inserter.js
index c3c35226259f2..b77b839bcd482 100644
--- a/editor/components/block-list/sibling-inserter.js
+++ b/editor/components/block-list/sibling-inserter.js
@@ -15,8 +15,6 @@ import { Component } from '@wordpress/element';
import Inserter from '../inserter';
import {
getBlockUids,
- getBlockInsertionPoint,
- isBlockInsertionPointVisible,
isBlockWithinSelection,
} from '../../store/selectors';
import {
@@ -49,11 +47,11 @@ class BlockListSiblingInserter extends Component {
return null;
}
- const { insertIndex, showInsertionPoint } = this.props;
+ const { insertIndex } = this.props;
const { isForcedVisible } = this.state;
const classes = classnames( 'editor-block-list__sibling-inserter', {
- 'is-forced-visible': isForcedVisible || showInsertionPoint,
+ 'is-forced-visible': isForcedVisible,
} );
return (
@@ -61,9 +59,6 @@ class BlockListSiblingInserter extends Component {
ref={ this.bindNode }
data-insert-index={ insertIndex }
className={ classes }>
- { showInsertionPoint && (
-
- ) }
.editor-block-mover {
+ display: none;
+}
+
+.editor-block-list__block.is-last > .editor-block-list__sibling-inserter {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: $block-mover-padding-visible;
+}
+
+.editor-block-list__block.is-last.is-selected > .editor-block-list__sibling-inserter .editor-inserter__toggle {
+ opacity: 1;
+}
+
.editor-block-list__block > .editor-block-list__sibling-inserter {
position: absolute;
bottom: 0;
diff --git a/editor/components/inserter/index.js b/editor/components/inserter/index.js
index 51f385435f69b..cabf87cc8bd14 100644
--- a/editor/components/inserter/index.js
+++ b/editor/components/inserter/index.js
@@ -36,7 +36,7 @@ class Inserter extends Component {
insertIndex,
onToggle,
} = this.props;
-
+ console.log( 'isOpen', isOpen );
if ( isOpen ) {
this.props.showInsertionPoint( insertIndex );
} else {