Alternative: add inserter to Nav block offcanvas experiment (#45947)

* Include offcanvas specific styles

* Use standard Inserter only

* Avoid using underscore naming convention

* Use standard UI components for keyboard navigation

* Extract appender to file

* Apply TreeGridRow props

* Remove clientId prop drilling

* Remove need to pass clientID to offcanvas component

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

@@ -0,0 +1,46 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import Inserter from '../inserter';
+
+export const Appender = forwardRef( ( props, ref ) => {
+	const { hideInserter, clientId } = useSelect( ( select ) => {
+		const {
+			getTemplateLock,
+			__unstableGetEditorMode,
+			getSelectedBlockClientId,
+		} = select( blockEditorStore );
+
+		const _clientId = getSelectedBlockClientId();
+
+		return {
+			clientId: getSelectedBlockClientId(),
+			hideInserter:
+				!! getTemplateLock( _clientId ) ||
+				__unstableGetEditorMode() === 'zoom-out',
+		};
+	}, [] );
+
+	if ( hideInserter ) {
+		return null;
+	}
+
+	return (
+		<div className="offcanvas-editor__appender">
+			<Inserter
+				ref={ ref }
+				rootClientId={ clientId }
+				position="bottom right"
+				isAppender
+				__experimentalIsQuick
+				{ ...props }
+			/>
+		</div>
+	);
+} );

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

@@ -5,7 +5,11 @@ import {
 	useMergeRefs,
 	__experimentalUseFixedWindowList as useFixedWindowList,
 } from '@wordpress/compose';
-import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
+import {
+	__experimentalTreeGrid as TreeGrid,
+	__experimentalTreeGridRow as TreeGridRow,
+	__experimentalTreeGridCell as TreeGridCell,
+} from '@wordpress/components';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 import {
 	useCallback,
@@ -28,6 +32,7 @@ import useListViewClientIds from './use-list-view-client-ids';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
+import { Appender } from './appender';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -104,9 +109,9 @@ function __ExperimentalOffCanvasEditor(
 		setExpandedState,
 	} );
 	const selectEditorBlock = useCallback(
-		( event, clientId ) => {
-			updateBlockSelection( event, clientId );
-			setSelectedTreeId( clientId );
+		( event, blockClientId ) => {
+			updateBlockSelection( event, blockClientId );
+			setSelectedTreeId( blockClientId );
 		},
 		[ setSelectedTreeId, updateBlockSelection ]
 	);
@@ -128,20 +133,26 @@ function __ExperimentalOffCanvasEditor(
 	);
 
 	const expand = useCallback(
-		( clientId ) => {
-			if ( ! clientId ) {
+		( blockClientId ) => {
+			if ( ! blockClientId ) {
 				return;
 			}
-			setExpandedState( { type: 'expand', clientIds: [ clientId ] } );
+			setExpandedState( {
+				type: 'expand',
+				clientIds: [ blockClientId ],
+			} );
 		},
 		[ setExpandedState ]
 	);
 	const collapse = useCallback(
-		( clientId ) => {
-			if ( ! clientId ) {
+		( blockClientId ) => {
+			if ( ! blockClientId ) {
 				return;
 			}
-			setExpandedState( { type: 'collapse', clientIds: [ clientId ] } );
+			setExpandedState( {
+				type: 'collapse',
+				clientIds: [ blockClientId ],
+			} );
 		},
 		[ setExpandedState ]
 	);
@@ -208,9 +219,22 @@ function __ExperimentalOffCanvasEditor(
 						shouldShowInnerBlocks={ shouldShowInnerBlocks }
 						selectBlockInCanvas={ selectBlockInCanvas }
 					/>
+					<TreeGridRow
+						level={ 1 }
+						setSize={ 1 }
+						positionInSet={ 1 }
+						isExpanded={ true }
+					>
+						<TreeGridCell>
+							{ ( treeGridCellProps ) => (
+								<Appender { ...treeGridCellProps } />
+							) }
+						</TreeGridCell>
+					</TreeGridRow>
 				</ListViewContext.Provider>
 			</TreeGrid>
 		</AsyncModeProvider>
 	);
 }
+
 export default forwardRef( __ExperimentalOffCanvasEditor );

packages/block-editor/src/components/off-canvas-editor/style.scss

@@ -1 +1,15 @@
-//Styles for off-canvas editor, remove this line when you add some css to this file!
+.offcanvas-editor__appender .block-editor-inserter__toggle {
+	background-color: #1e1e1e;
+	color: #fff;
+	margin: $grid-unit-10 0 0 28px;
+	border-radius: 2px;
+	height: 24px;
+	min-width: 24px;
+	padding: 0;
+
+	&:hover,
+	&:focus {
+		background: var(--wp-admin-theme-color);
+		color: #fff;
+	}
+}