diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js index b925a724809ecb..486b8fb94968c3 100644 --- a/packages/block-editor/src/components/block-list/index.native.js +++ b/packages/block-editor/src/components/block-list/index.native.js @@ -59,12 +59,17 @@ export class BlockList extends Component { } renderDefaultBlockAppender() { + const { shouldShowInsertionPointBefore } = this.props; + const willShowInsertionPoint = shouldShowInsertionPointBefore(); // call without the client_id argument since this is the appender return ( - + { willShowInsertionPoint ? + this.renderAddBlockSeparator() : // show the new-block indicator when we're inserting a block or + + } ); } @@ -117,10 +122,10 @@ export class BlockList extends Component { renderItem( { item: clientId, index } ) { const blockHolderFocusedStyle = this.props.getStylesFromColorScheme( styles.blockHolderFocused, styles.blockHolderFocusedDark ); - const { shouldShowBlockAtIndex, shouldShowInsertionPoint } = this.props; + const { shouldShowBlockAtIndex, shouldShowInsertionPointBefore, shouldShowInsertionPointAfter } = this.props; return ( - { shouldShowInsertionPoint( clientId ) && this.renderAddBlockSeparator() } + { shouldShowInsertionPointBefore( clientId ) && this.renderAddBlockSeparator() } { shouldShowBlockAtIndex( index ) && ( ) } + { shouldShowInsertionPointAfter( clientId ) && this.renderAddBlockSeparator() } ); } @@ -178,11 +184,28 @@ export default compose( [ const blockInsertionPointIsVisible = isBlockInsertionPointVisible(); const selectedBlock = getSelectedBlock(); const isSelectedGroup = selectedBlock && selectedBlock.name === 'core/group'; - const shouldShowInsertionPoint = ( clientId ) => { + const shouldShowInsertionPointBefore = ( clientId ) => { + return ( + blockInsertionPointIsVisible && + insertionPoint.rootClientId === rootClientId && + ( + // if list is empty, show the insertion point (via the default appender) + blockClientIds.length === 0 || + // or if the insertion point is right before the denoted block + blockClientIds[ insertionPoint.index ] === clientId + ) + ); + }; + const shouldShowInsertionPointAfter = ( clientId ) => { return ( blockInsertionPointIsVisible && insertionPoint.rootClientId === rootClientId && - blockClientIds[ insertionPoint.index ] === clientId + + // if the insertion point is at the end of the list + blockClientIds.length === insertionPoint.index && + + // and the denoted block is the last one on the list, show the indicator at the end of the block + blockClientIds[ insertionPoint.index - 1 ] === clientId ); }; @@ -208,7 +231,8 @@ export default compose( [ blockCount: getBlockCount( rootClientId ), isBlockInsertionPointVisible: isBlockInsertionPointVisible(), shouldShowBlockAtIndex, - shouldShowInsertionPoint, + shouldShowInsertionPointBefore, + shouldShowInsertionPointAfter, selectedBlockClientId, isFirstBlock, selectedBlockParentId,