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,