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 }