Add create new menu button to nav block (#36245)

* Adds a create new button to navigation block

* Keep it simple

packages/block-library/src/navigation/edit/index.js

@@ -319,6 +319,15 @@ function Navigation( {
  setNavigationMenuId( id );
  onClose();
  } }
+ onCreateNew={ () => {
+ if ( navigationArea ) {
+ setAreaMenu( 0 );
+ }
+ setAttributes( {
+ navigationMenuId: undefined,
+ } );
+ setIsPlaceholderShown( true );
+ } }
  />
  ) }
  </ToolbarDropdownMenu>

packages/block-library/src/navigation/edit/navigation-menu-selector.js

@@ -1,34 +1,42 @@
 /**
  * WordPress dependencies
  */
-import { MenuGroup, MenuItemsChoice } from '@wordpress/components';
+import { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components';
 import { useEntityId } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import useNavigationMenu from '../use-navigation-menu';
 
-export default function NavigationMenuSelector( { onSelect } ) {
+export default function NavigationMenuSelector( { onSelect, onCreateNew } ) {
  const { navigationMenus } = useNavigationMenu();
  const navigationMenuId = useEntityId( 'postType', 'wp_navigation' );
 
  return (
- <MenuGroup>
- <MenuItemsChoice
- value={ navigationMenuId }
- onSelect={ ( selectedId ) =>
- onSelect(
- navigationMenus.find(
- ( post ) => post.id === selectedId
+ <>
+ <MenuGroup>
+ <MenuItemsChoice
+ value={ navigationMenuId }
+ onSelect={ ( selectedId ) =>
+ onSelect(
+ navigationMenus.find(
+ ( post ) => post.id === selectedId
+ )
  )
- )
- }
- choices={ navigationMenus.map( ( { id, title } ) => ( {
- value: id,
- label: title.rendered,
- } ) ) }
- />
- </MenuGroup>
+ }
+ choices={ navigationMenus.map( ( { id, title } ) => ( {
+ value: id,
+ label: title.rendered,
+ } ) ) }
+ />
+ </MenuGroup>
+ <MenuGroup>
+ <MenuItem onClick={ onCreateNew }>
+ { __( 'Create new menu' ) }
+ </MenuItem>
+ </MenuGroup>
+ </>
  );
 }