From 47f47961664a76155dce46fdf70828cc7bf0093f Mon Sep 17 00:00:00 2001
From: Adam Zielinski <adam@adamziel.com>
Date: Tue, 9 Jun 2020 16:21:59 +0200
Subject: [PATCH] [Navigation screen] Only show appender for the currently
 selected block (#22998)

* Only show appender for the currently selected block

* Don't display an empty branch
---
 .../src/components/block-navigation/branch.js    | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/branch.js b/packages/block-editor/src/components/block-navigation/branch.js
index 58e24890f79c9..e76c5dd9b8d6a 100644
--- a/packages/block-editor/src/components/block-navigation/branch.js
+++ b/packages/block-editor/src/components/block-navigation/branch.js
@@ -30,26 +30,30 @@ export default function BlockNavigationBranch( props ) {
 
 	const isTreeRoot = ! parentBlockClientId;
 	const filteredBlocks = compact( blocks );
+	const itemHasAppender = ( parentClientId ) =>
+		showAppender &&
+		! isTreeRoot &&
+		selectedBlockClientId === parentClientId;
+	const hasAppender = itemHasAppender( parentBlockClientId );
 	// Add +1 to the rowCount to take the block appender into account.
-	const rowCount = showAppender
+	const rowCount = hasAppender
 		? filteredBlocks.length + 1
 		: filteredBlocks.length;
-	const hasAppender =
-		showAppender && filteredBlocks.length > 0 && ! isTreeRoot;
 	const appenderPosition = rowCount;
 
 	return (
 		<>
 			{ map( filteredBlocks, ( block, index ) => {
 				const { clientId, innerBlocks } = block;
-				const hasNestedBlocks =
-					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
 				const position = index + 1;
 				const isLastRowAtLevel = rowCount === position;
 				const updatedTerminatedLevels = isLastRowAtLevel
 					? [ ...terminatedLevels, level ]
 					: terminatedLevels;
 				const updatedPath = [ ...path, position ];
+				const hasNestedBlocks =
+					showNestedBlocks && !! innerBlocks && !! innerBlocks.length;
+				const hasNestedAppender = itemHasAppender( clientId );
 
 				return (
 					<Fragment key={ clientId }>
@@ -64,7 +68,7 @@ export default function BlockNavigationBranch( props ) {
 							terminatedLevels={ terminatedLevels }
 							path={ updatedPath }
 						/>
-						{ hasNestedBlocks && (
+						{ ( hasNestedBlocks || hasNestedAppender ) && (
 							<BlockNavigationBranch
 								blocks={ innerBlocks }
 								selectedBlockClientId={ selectedBlockClientId }