Add empty message in case of empty menu

WordPress · Mar 28, 2022 · 9a59e6e · 9a59e6e
1 parent 782602f
commit 9a59e6e
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar/navigation-menu-sidebar/navigation-inspector.js
@@ -148,6 +148,8 @@ export default function NavigationInspector() {
 	// Guard by only allowing their usage if there are published Nav Menus.
 	const publishedInnerBlocks = hasNavigationMenus ? innerBlocks : [];
 
+	const hasInnerBlocks = !! publishedInnerBlocks?.length;
+
 	useEffect( () => {
 		if ( isResolvingNavigationMenus ) {
 			speak( 'Loading Navigation sidebar menus.' );
@@ -199,7 +201,7 @@ export default function NavigationInspector() {
 					<div className="edit-site-navigation-inspector__placeholder is-child" />
 				</>
 			) }
-			{ ! isLoading && (
+			{ hasInnerBlocks && ! isLoading && (
 				<BlockEditorProvider
 					value={ publishedInnerBlocks }
 					onChange={ onChange }
@@ -211,6 +213,12 @@ export default function NavigationInspector() {
 					/>
 				</BlockEditorProvider>
 			) }
+
+			{ ! hasInnerBlocks && ! isLoading && (
+				<p className="edit-site-navigation-inspector__empty-msg">
+					{ __( 'Navigation Menu is empty.' ) }
+				</p>
+			) }
 		</div>
 	);
 }