From a433b4f811707077dbfa30aca32a7364baba7566 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Mon, 13 Feb 2023 21:31:30 +0000
Subject: [PATCH] Fix: Inserter on navigation menu sidebar.

---
 .../navigation-inspector/appender.js          | 57 +++++++++++++++++++
 .../navigation-inspector/navigation-menu.js   |  2 +
 .../navigation-inspector/style.scss           |  8 +++
 3 files changed, 67 insertions(+)
 create mode 100644 packages/edit-site/src/components/navigation-inspector/appender.js

diff --git a/packages/edit-site/src/components/navigation-inspector/appender.js b/packages/edit-site/src/components/navigation-inspector/appender.js
new file mode 100644
index 00000000000000..edeca60ab92dd2
--- /dev/null
+++ b/packages/edit-site/src/components/navigation-inspector/appender.js
@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { Inserter } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { plus } from '@wordpress/icons';
+
+export default function Appender( { clientId } ) {
+	return (
+		<div className="edit-site-navigation-inspector__appender">
+			<Inserter
+				rootClientId={ clientId }
+				position="bottom right"
+				isAppender={ true }
+				selectBlockOnInsert={ false }
+				shouldDirectInsert={ false }
+				__experimentalIsQuick
+				renderToggle={ ( {
+					onToggle,
+					disabled,
+					isOpen,
+					hasSingleBlockType,
+					toggleProps = {},
+				} ) => {
+					const { onClick, ...rest } = toggleProps;
+					// Handle both onClick functions from the toggle and the parent component.
+					function handleClick( event ) {
+						if ( onToggle ) {
+							onToggle( event );
+						}
+						if ( onClick ) {
+							onClick( event );
+						}
+					}
+					return (
+						<Button
+							icon={ plus }
+							onClick={ handleClick }
+							className="block-editor-inserter__toggle"
+							aria-haspopup={
+								! hasSingleBlockType ? 'true' : false
+							}
+							aria-expanded={
+								! hasSingleBlockType ? isOpen : false
+							}
+							disabled={ disabled }
+							{ ...rest }
+						>
+							{ __( 'Add menu item' ) }
+						</Button>
+					);
+				} }
+			/>
+		</div>
+	);
+}
diff --git a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
index 7e2255f874ddbc..7160899f152f6b 100644
--- a/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
+++ b/packages/edit-site/src/components/navigation-inspector/navigation-menu.js
@@ -11,6 +11,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { unlock } from '../../private-apis';
+import Appender from './appender';
 
 /**
  * Experimental dependencies
@@ -35,6 +36,7 @@ export default function NavigationMenu( { onSelect, navigationBlockId } ) {
 				onSelect={ onSelect }
 				LeafMoreMenu={ LeafMoreMenu }
 			/>
+			<Appender clientId={ navigationBlockId } />
 		</>
 	);
 }
diff --git a/packages/edit-site/src/components/navigation-inspector/style.scss b/packages/edit-site/src/components/navigation-inspector/style.scss
index 5d13cde8304cfb..7427d85a6aa514 100644
--- a/packages/edit-site/src/components/navigation-inspector/style.scss
+++ b/packages/edit-site/src/components/navigation-inspector/style.scss
@@ -26,6 +26,10 @@
 	.edit-site-navigation-inspector__select-menu {
 		margin-bottom: $grid-unit-10;
 	}
+
+	.offcanvas-editor-appender {
+		display: none;
+	}
 }
 
 .edit-site-navigation-inspector__placeholder {
@@ -44,3 +48,7 @@
 .edit-site-navigation-inspector__empty-msg {
 	padding: 0 $grid-unit-10;
 }
+
+.edit-site-navigation-inspector__appender {
+	margin-left: $grid-unit-10;
+}