Block Editor: Fix Multiple Trailing Inserters for Nested Inner Blocks (…

…#24836)

* Hide trailing inserter if siblings in the block list are not selected
* Display trailing appender when the page is empty
* Display trailing inserter when parent block is selected

packages/block-editor/src/components/block-list-appender/index.js

@@ -27,6 +27,7 @@ function BlockListAppender( {
 	isLocked,
 	renderAppender: CustomAppender,
 	className,
+	selectedBlockClientId,
 	tagName: TagName = 'div',
 } ) {
 	if ( isLocked || CustomAppender === false ) {
@@ -40,6 +41,20 @@ function BlockListAppender( {
 	} else if ( canInsertDefaultBlock ) {
 		// Render the default block appender when renderAppender has not been
 		// provided and the context supports use of the default appender.
+		const isDocumentAppender = ! rootClientId;
+		const isParentSelected = selectedBlockClientId === rootClientId;
+		const isAnotherDefaultAppenderAlreadyDisplayed =
+			selectedBlockClientId &&
+			! blockClientIds.includes( selectedBlockClientId );
+
+		if (
+			! isDocumentAppender &&
+			! isParentSelected &&
+			isAnotherDefaultAppenderAlreadyDisplayed
+		) {
+			return null;
+		}
+
 		appender = (
 			<DefaultBlockAppender
 				rootClientId={ rootClientId }
@@ -79,9 +94,12 @@ function BlockListAppender( {
 }
 
 export default withSelect( ( select, { rootClientId } ) => {
-	const { getBlockOrder, canInsertBlockType, getTemplateLock } = select(
-		'core/block-editor'
-	);
+	const {
+		getBlockOrder,
+		canInsertBlockType,
+		getTemplateLock,
+		getSelectedBlockClientId,
+	} = select( 'core/block-editor' );
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),
@@ -90,5 +108,6 @@ export default withSelect( ( select, { rootClientId } ) => {
 			getDefaultBlockName(),
 			rootClientId
 		),
+		selectedBlockClientId: getSelectedBlockClientId(),
 	};
 } )( BlockListAppender );