Fix: Inserter on the navigation sidebar. (#48049

With the changes on #47853, we are not using a specific block editor for the navigation sidebar anymore. The inserter of the off-canvas menu editor assumes the navigation block or a child is selected. On the navigation sidebar, the navigation block may not be selected, so we need a specific inserter for the navigation sidebar.
This PR adds a simple inserter for the navigation sidebar. Given that we previously wanted to have the text "Add menu item" this PR also adds the text to the inserter superseding PR #46949.

packages/block-editor/src/components/off-canvas-editor/appender.js

@@ -15,26 +15,23 @@ import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import Inserter from '../inserter';
 
 export const Appender = forwardRef(
-	( { nestingLevel, blockCount, ...props }, ref ) => {
+	( { nestingLevel, blockCount, clientId, ...props }, ref ) => {
 		const [ insertedBlock, setInsertedBlock ] = useState( null );
 
 		const instanceId = useInstanceId( Appender );
-		const { hideInserter, clientId } = useSelect( ( select ) => {
-			const {
-				getTemplateLock,
-				__unstableGetEditorMode,
-				getSelectedBlockClientId,
-			} = select( blockEditorStore );
+		const { hideInserter } = useSelect(
+			( select ) => {
+				const { getTemplateLock, __unstableGetEditorMode } =
+					select( blockEditorStore );
 
-			const _clientId = getSelectedBlockClientId();
-
-			return {
-				clientId: getSelectedBlockClientId(),
-				hideInserter:
-					!! getTemplateLock( _clientId ) ||
-					__unstableGetEditorMode() === 'zoom-out',
-			};
-		}, [] );
+				return {
+					hideInserter:
+						!! getTemplateLock( clientId ) ||
+						__unstableGetEditorMode() === 'zoom-out',
+				};
+			},
+			[ clientId ]
+		);
 
 		const blockTitle = useBlockDisplayTitle( {
 			clientId,

packages/block-editor/src/components/off-canvas-editor/branch.js

@@ -116,8 +116,8 @@ function ListViewBranch( props ) {
 		return null;
 	}
 
-	// Only show the appender at the first level.
-	const showAppender = level === 1;
+	// Only show the appender at the first level and if there is a parent block.
+	const showAppender = level === 1 && parentId;
 
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
@@ -220,6 +220,7 @@ function ListViewBranch( props ) {
 					<TreeGridCell>
 						{ ( treeGridCellProps ) => (
 							<Appender
+								clientId={ parentId }
 								nestingLevel={ level }
 								blockCount={ blockCount }
 								{ ...treeGridCellProps }

packages/block-editor/src/components/off-canvas-editor/index.js

@@ -80,9 +80,10 @@ function OffCanvasEditor(
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
-	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
+	const { visibleBlockCount, shouldShowInnerBlocks, parentId } = useSelect(
 		( select ) => {
 			const {
+				getBlockRootClientId,
 				getGlobalBlockCount,
 				getClientIdsOfDescendants,
 				__unstableGetEditorMode,
@@ -94,9 +95,13 @@ function OffCanvasEditor(
 			return {
 				visibleBlockCount: getGlobalBlockCount() - draggedBlockCount,
 				shouldShowInnerBlocks: __unstableGetEditorMode() !== 'zoom-out',
+				parentId:
+					blocks.length > 0
+						? getBlockRootClientId( blocks[ 0 ].clientId )
+						: undefined,
 			};
 		},
-		[ draggedClientIds ]
+		[ draggedClientIds, blocks ]
 	);
 
 	const { updateBlockSelection } = useBlockSelection();
@@ -227,6 +232,7 @@ function OffCanvasEditor(
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch
+							parentId={ parentId }
 							blocks={ clientIdsTree }
 							selectBlock={ selectEditorBlock }
 							showBlockMovers={ showBlockMovers }