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 {