@wordpress/block-library 7.10.0 → 7.12.2-next.d6164808d3.0

package/build-module/navigation/edit/index.js

@@ -8,13 +8,14 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { useState, useEffect, useRef, useCallback, Platform } from '@wordpress/element';
-import { InspectorControls, BlockControls, useBlockProps, __experimentalUseNoRecursiveRenders as useNoRecursiveRenders, store as blockEditorStore, withColors, PanelColorSettings, ContrastChecker, getColorClassName, Warning, __experimentalUseBlockOverlayActive as useBlockOverlayActive } from '@wordpress/block-editor';
+import { useState, useEffect, useRef, Platform } from '@wordpress/element';
+import { InspectorControls, BlockControls, useBlockProps, __experimentalRecursionProvider as RecursionProvider, __experimentalUseHasRecursion as useHasRecursion, store as blockEditorStore, withColors, PanelColorSettings, ContrastChecker, getColorClassName, Warning, __experimentalUseBlockOverlayActive as useBlockOverlayActive } from '@wordpress/block-editor';
 import { EntityProvider } from '@wordpress/core-data';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { PanelBody, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, ToolbarGroup, Button, Spinner } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
+import { createBlock } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
@@ -31,29 +32,9 @@ import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 import useNavigationNotice from './use-navigation-notice';
 import OverlayMenuIcon from './overlay-menu-icon';
 import useConvertClassicToBlockMenu, { CLASSIC_MENU_CONVERSION_ERROR, CLASSIC_MENU_CONVERSION_PENDING, CLASSIC_MENU_CONVERSION_SUCCESS } from './use-convert-classic-menu-to-block-menu';
-import useCreateNavigationMenu, { CREATE_NAVIGATION_MENU_ERROR, CREATE_NAVIGATION_MENU_PENDING, CREATE_NAVIGATION_MENU_SUCCESS } from './use-create-navigation-menu';
-const EMPTY_ARRAY = [];
-
-function getComputedStyle(node) {
-  return node.ownerDocument.defaultView.getComputedStyle(node);
-}
-
-function detectColors(colorsDetectionElement, setColor, setBackground) {
-  if (!colorsDetectionElement) {
-    return;
-  }
-
-  setColor(getComputedStyle(colorsDetectionElement).color);
-  let backgroundColorNode = colorsDetectionElement;
-  let backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
-
-  while (backgroundColor === 'rgba(0, 0, 0, 0)' && backgroundColorNode.parentNode && backgroundColorNode.parentNode.nodeType === backgroundColorNode.parentNode.ELEMENT_NODE) {
-    backgroundColorNode = backgroundColorNode.parentNode;
-    backgroundColor = getComputedStyle(backgroundColorNode).backgroundColor;
-  }
-
-  setBackground(backgroundColor);
-}
+import useCreateNavigationMenu from './use-create-navigation-menu';
+import { useInnerBlocks } from './use-inner-blocks';
+import { detectColors } from './utils';
 
 function Navigation(_ref) {
   var _attributes$style, _attributes$style$typ;
@@ -90,7 +71,6 @@ function Navigation(_ref) {
     hasIcon
   } = attributes;
   const ref = attributes.ref;
-  const registry = useRegistry();
 
   const setRef = postId => {
     setAttributes({
@@ -98,69 +78,53 @@ function Navigation(_ref) {
     });
   };
 
-  const [hasAlreadyRendered, RecursionProvider] = useNoRecursiveRenders(`navigationMenu/${ref}`); // Preload classic menus, so that they don't suddenly pop-in when viewing
+  const recursionId = `navigationMenu/${ref}`;
+  const hasAlreadyRendered = useHasRecursion(recursionId); // Preload classic menus, so that they don't suddenly pop-in when viewing
   // the Select Menu dropdown.
 
   useNavigationEntities();
-  const [showNavigationMenuDeleteNotice] = useNavigationNotice({
-    name: 'block-library/core/navigation/delete'
+  const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = useNavigationNotice({
+    name: 'block-library/core/navigation/status'
   });
-  const [showNavigationMenuCreateNotice, hideNavigationMenuCreateNotice] = useNavigationNotice({
-    name: 'block-library/core/navigation/create'
+  const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = useNavigationNotice({
+    name: 'block-library/core/navigation/classic-menu-conversion'
+  });
+  const [showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice] = useNavigationNotice({
+    name: 'block-library/core/navigation/permissions/update'
   });
   const {
     create: createNavigationMenu,
     status: createNavigationMenuStatus,
     error: createNavigationMenuError,
-    value: createNavigationMenuPost
+    value: createNavigationMenuPost,
+    isPending: isCreatingNavigationMenu,
+    isSuccess: createNavigationMenuIsSuccess,
+    isError: createNavigationMenuIsError
   } = useCreateNavigationMenu(clientId);
-  const isCreatingNavigationMenu = createNavigationMenuStatus === CREATE_NAVIGATION_MENU_PENDING;
   useEffect(() => {
-    hideNavigationMenuCreateNotice();
+    hideNavigationMenuStatusNotice();
 
-    if (createNavigationMenuStatus === CREATE_NAVIGATION_MENU_PENDING) {
+    if (isCreatingNavigationMenu) {
       speak(__(`Creating Navigation Menu.`));
     }
 
-    if (createNavigationMenuStatus === CREATE_NAVIGATION_MENU_SUCCESS) {
+    if (createNavigationMenuIsSuccess) {
       setRef(createNavigationMenuPost.id);
       selectBlock(clientId);
-      showNavigationMenuCreateNotice(__(`Navigation Menu successfully created.`));
+      showNavigationMenuStatusNotice(__(`Navigation Menu successfully created.`));
     }
 
-    if (createNavigationMenuStatus === CREATE_NAVIGATION_MENU_ERROR) {
-      showNavigationMenuCreateNotice(__('Failed to create Navigation Menu.'));
+    if (createNavigationMenuIsError) {
+      showNavigationMenuStatusNotice(__('Failed to create Navigation Menu.'));
     }
   }, [createNavigationMenu, createNavigationMenuStatus, createNavigationMenuError, createNavigationMenuPost]);
   const {
     hasUncontrolledInnerBlocks,
     uncontrolledInnerBlocks,
     isInnerBlockSelected,
-    hasSubmenus
-  } = useSelect(select => {
-    const {
-      getBlock,
-      getBlocks,
-      hasSelectedInnerBlock
-    } = select(blockEditorStore); // This relies on the fact that `getBlock` won't return controlled
-    // inner blocks, while `getBlocks` does. It might be more stable to
-    // introduce a selector like `getUncontrolledInnerBlocks`, just in
-    // case `getBlock` is fixed.
-
-    const _uncontrolledInnerBlocks = getBlock(clientId).innerBlocks;
-
-    const _hasUncontrolledInnerBlocks = !!(_uncontrolledInnerBlocks !== null && _uncontrolledInnerBlocks !== void 0 && _uncontrolledInnerBlocks.length);
-
-    const _controlledInnerBlocks = _hasUncontrolledInnerBlocks ? EMPTY_ARRAY : getBlocks(clientId);
-
-    const innerBlocks = _hasUncontrolledInnerBlocks ? _uncontrolledInnerBlocks : _controlledInnerBlocks;
-    return {
-      hasSubmenus: !!innerBlocks.find(block => block.name === 'core/navigation-submenu'),
-      hasUncontrolledInnerBlocks: _hasUncontrolledInnerBlocks,
-      uncontrolledInnerBlocks: _uncontrolledInnerBlocks,
-      isInnerBlockSelected: hasSelectedInnerBlock(clientId, true)
-    };
-  }, [clientId]);
+    innerBlocks
+  } = useInnerBlocks(clientId);
+  const hasSubmenus = !!innerBlocks.find(block => block.name === 'core/navigation-submenu');
   const {
     replaceInnerBlocks,
     selectBlock,
@@ -182,24 +146,43 @@ function Navigation(_ref) {
     canUserCreateNavigationMenu,
     isResolvingCanUserCreateNavigationMenu,
     hasResolvedCanUserCreateNavigationMenu
-  } = useNavigationMenu(ref); // Attempt to retrieve and prioritize any existing navigation menu unless
-  // a specific ref is allocated or the user is explicitly creating a new menu. The aim is
-  // for the block to "just work" from a user perspective using existing data.
+  } = useNavigationMenu(ref);
+  const navMenuResolvedButMissing = hasResolvedNavigationMenus && isNavigationMenuMissing; // Attempt to retrieve and prioritize any existing navigation menu unless:
+  // - the are uncontrolled inner blocks already present in the block.
+  // - the user is creating a new menu.
+  // - there are no menus to choose from.
+  // This attempts to pick the first menu if there is a single Navigation Post. If more
+  // than 1 exists then use the most recent.
+  // The aim is for the block to "just work" from a user perspective using existing data.
 
   useEffect(() => {
-    if (isCreatingNavigationMenu || ref || !(navigationMenus !== null && navigationMenus !== void 0 && navigationMenus.length) || (navigationMenus === null || navigationMenus === void 0 ? void 0 : navigationMenus.length) > 1) {
+    if (hasUncontrolledInnerBlocks || isCreatingNavigationMenu || ref || !(navigationMenus !== null && navigationMenus !== void 0 && navigationMenus.length)) {
       return;
     }
 
+    navigationMenus.sort((menuA, menuB) => {
+      const menuADate = new Date(menuA.date);
+      const menuBDate = new Date(menuB.date);
+      return menuADate.getTime() < menuBDate.getTime();
+    });
+    /**
+     *  This fallback displays (both in editor and on front)
+     *  a list of pages only if no menu (user assigned or
+     *  automatically picked) is available.
+     *  The fallback should not request a save (entity dirty state)
+     *  nor to be undoable, hence why it is marked as non persistent
+     */
+
+    __unstableMarkNextChangeAsNotPersistent();
+
     setRef(navigationMenus[0].id);
   }, [navigationMenus]);
   const navRef = useRef();
   const isDraftNavigationMenu = (navigationMenu === null || navigationMenu === void 0 ? void 0 : navigationMenu.status) === 'draft';
   const {
-    convert,
+    convert: convertClassicMenu,
     status: classicMenuConversionStatus,
-    error: classicMenuConversionError,
-    value: classicMenuConversionResult
+    error: classicMenuConversionError
   } = useConvertClassicToBlockMenu(clientId);
   const isConvertingClassicMenu = classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING; // The standard HTML5 tag for the block wrapper.
 
@@ -210,10 +193,23 @@ function Navigation(_ref) {
   // - there are no uncontrolled blocks.
 
   const isPlaceholder = !ref && !isCreatingNavigationMenu && !isConvertingClassicMenu && hasResolvedNavigationMenus && !hasUncontrolledInnerBlocks;
+
+  if (isPlaceholder && !ref) {
+    /**
+     *  this fallback only displays (both in editor and on front)
+     *  the list of pages block if no menu is available as a fallback.
+     *  We don't want the fallback to request a save,
+     *  nor to be undoable, hence we mark it non persistent.
+     */
+    __unstableMarkNextChangeAsNotPersistent();
+
+    replaceInnerBlocks(clientId, [createBlock('core/page-list')]);
+  }
+
   const isEntityAvailable = !isNavigationMenuMissing && isNavigationMenuResolved; // "loading" state:
   // - there is a menu creation process in progress.
   // - there is a classic menu conversion process in progress.
-  // OR
+  // OR:
   // - there is a ref attribute pointing to a Navigation Post
   // - the Navigation Post isn't available (hasn't resolved) yet.
 
@@ -241,50 +237,34 @@ function Navigation(_ref) {
       color: !(textColor !== null && textColor !== void 0 && textColor.slug) && (textColor === null || textColor === void 0 ? void 0 : textColor.color),
       backgroundColor: !(backgroundColor !== null && backgroundColor !== void 0 && backgroundColor.slug) && (backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.color)
     }
-  }, {
-    __unstableIsDisabled: hasBlockOverlay
-  });
-  const overlayClassnames = classnames({
-    'has-text-color': !!overlayTextColor.color || !!(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.class),
-    [getColorClassName('color', overlayTextColor === null || overlayTextColor === void 0 ? void 0 : overlayTextColor.slug)]: !!(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.slug),
-    'has-background': !!overlayBackgroundColor.color || (overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.class),
-    [getColorClassName('background-color', overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.slug)]: !!(overlayBackgroundColor !== null && overlayBackgroundColor !== void 0 && overlayBackgroundColor.slug)
-  });
-  const overlayStyles = {
-    color: !(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.slug) && (overlayTextColor === null || overlayTextColor === void 0 ? void 0 : overlayTextColor.color),
-    backgroundColor: !(overlayBackgroundColor !== null && overlayBackgroundColor !== void 0 && overlayBackgroundColor.slug) && (overlayBackgroundColor === null || overlayBackgroundColor === void 0 ? void 0 : overlayBackgroundColor.color) && overlayBackgroundColor.color
-  }; // Turn on contrast checker for web only since it's not supported on mobile yet.
+  }); // Turn on contrast checker for web only since it's not supported on mobile yet.
 
   const enableContrastChecking = Platform.OS === 'web';
   const [detectedBackgroundColor, setDetectedBackgroundColor] = useState();
   const [detectedColor, setDetectedColor] = useState();
   const [detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor] = useState();
   const [detectedOverlayColor, setDetectedOverlayColor] = useState();
-  const [showClassicMenuConversionErrorNotice, hideClassicMenuConversionErrorNotice] = useNavigationNotice({
-    name: 'block-library/core/navigation/classic-menu-conversion/error'
-  });
 
-  function handleUpdateMenu(menuId) {
+  const handleUpdateMenu = menuId => {
     setRef(menuId);
     selectBlock(clientId);
-  }
+  };
 
   useEffect(() => {
+    hideClassicMenuConversionNotice();
+
     if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING) {
       speak(__('Classic menu importing.'));
     }
 
-    if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS && classicMenuConversionResult) {
-      handleUpdateMenu(classicMenuConversionResult === null || classicMenuConversionResult === void 0 ? void 0 : classicMenuConversionResult.id);
-      hideClassicMenuConversionErrorNotice();
-      speak(__('Classic menu imported successfully.'));
+    if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_SUCCESS) {
+      showClassicMenuConversionNotice(__('Classic menu imported successfully.'));
     }
 
     if (classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_ERROR) {
-      showClassicMenuConversionErrorNotice(classicMenuConversionError);
-      speak(__('Classic menu import failed.'));
+      showClassicMenuConversionNotice(__('Classic menu import failed.'));
     }
-  }, [classicMenuConversionStatus, classicMenuConversionResult, classicMenuConversionError]); // Spacer block needs orientation from context. This is a patch until
+  }, [classicMenuConversionStatus, classicMenuConversionError]); // Spacer block needs orientation from context. This is a patch until
   // https://github.com/WordPress/gutenberg/issues/36197 is addressed.
 
   useEffect(() => {
@@ -310,47 +290,23 @@ function Navigation(_ref) {
       detectColors(subMenuElement, setDetectedOverlayColor, setDetectedOverlayBackgroundColor);
     }
   });
-  const [showCantEditNotice, hideCantEditNotice] = useNavigationNotice({
-    name: 'block-library/core/navigation/permissions/update',
-    message: __('You do not have permission to edit this Menu. Any changes made will not be saved.')
-  });
-  const [showCantCreateNotice, hideCantCreateNotice] = useNavigationNotice({
-    name: 'block-library/core/navigation/permissions/create',
-    message: __('You do not have permission to create Navigation Menus.')
-  });
   useEffect(() => {
     if (!isSelected && !isInnerBlockSelected) {
-      hideCantEditNotice();
-      hideCantCreateNotice();
+      hideNavigationMenuPermissionsNotice();
     }
 
     if (isSelected || isInnerBlockSelected) {
-      if (ref && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) {
-        showCantEditNotice();
+      if (ref && !navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) {
+        showNavigationMenuPermissionsNotice(__('You do not have permission to edit this Menu. Any changes made will not be saved.'));
       }
 
       if (!ref && hasResolvedCanUserCreateNavigationMenu && !canUserCreateNavigationMenu) {
-        showCantCreateNotice();
+        showNavigationMenuPermissionsNotice(__('You do not have permission to create Navigation Menus.'));
       }
     }
   }, [isSelected, isInnerBlockSelected, canUserUpdateNavigationMenu, hasResolvedCanUserUpdateNavigationMenu, canUserCreateNavigationMenu, hasResolvedCanUserCreateNavigationMenu, ref]);
   const navigationSelectorRef = useRef();
-  const [shouldFocusNavigationSelector, setShouldFocusNavigationSelector] = useState(false);
-  const handleSelectNavigation = useCallback(navPostOrClassicMenu => {
-    if (!navPostOrClassicMenu) {
-      return;
-    }
-
-    const isClassicMenu = navPostOrClassicMenu.hasOwnProperty('auto_add');
-
-    if (isClassicMenu) {
-      convert(navPostOrClassicMenu.id, navPostOrClassicMenu.name);
-    } else {
-      handleUpdateMenu(navPostOrClassicMenu.id);
-    }
-
-    setShouldFocusNavigationSelector(true);
-  }, [convert, handleUpdateMenu]); // Focus support after menu selection.
+  const [shouldFocusNavigationSelector, setShouldFocusNavigationSelector] = useState(false); // Focus support after menu selection.
 
   useEffect(() => {
     var _navigationSelectorRe;
@@ -362,17 +318,6 @@ function Navigation(_ref) {
     navigationSelectorRef === null || navigationSelectorRef === void 0 ? void 0 : (_navigationSelectorRe = navigationSelectorRef.current) === null || _navigationSelectorRe === void 0 ? void 0 : _navigationSelectorRe.focus();
     setShouldFocusNavigationSelector(false);
   }, [isDraftNavigationMenu, isEntityAvailable, shouldFocusNavigationSelector]);
-  const resetToEmptyBlock = useCallback(() => {
-    registry.batch(() => {
-      setAttributes({
-        ref: undefined
-      });
-
-      if (!ref) {
-        replaceInnerBlocks(clientId, []);
-      }
-    });
-  }, [clientId, ref]);
   const isResponsive = 'never' !== overlayMenu;
   const overlayMenuPreviewClasses = classnames('wp-block-navigation__overlay-menu-preview', {
     open: overlayMenuPreview
@@ -468,14 +413,37 @@ function Navigation(_ref) {
   const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable;
 
   if (hasUnsavedBlocks) {
-    return createElement(TagName, blockProps, stylingInspectorControls, createElement(ResponsiveWrapper, {
+    return createElement(TagName, blockProps, createElement(BlockControls, null, createElement(ToolbarGroup, {
+      className: "wp-block-navigation__toolbar-menu-selector"
+    }, createElement(NavigationMenuSelector, {
+      ref: null,
+      currentMenuId: null,
+      clientId: clientId,
+      onSelectNavigationMenu: menuId => {
+        handleUpdateMenu(menuId);
+        setShouldFocusNavigationSelector(true);
+      },
+      onSelectClassicMenu: async classicMenu => {
+        const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name);
+
+        if (navMenu) {
+          handleUpdateMenu(navMenu.id);
+          setShouldFocusNavigationSelector(true);
+        }
+      },
+      onCreateNew: () => createNavigationMenu('', [])
+      /* translators: %s: The name of a menu. */
+      ,
+      actionLabel: __("Switch to '%s'"),
+      showManageActions: true
+    }))), stylingInspectorControls, createElement(ResponsiveWrapper, {
       id: clientId,
       onToggle: setResponsiveMenuVisibility,
       isOpen: isResponsiveMenuOpen,
       isResponsive: 'never' !== overlayMenu,
       isHiddenByDefault: 'always' === overlayMenu,
-      classNames: overlayClassnames,
-      styles: overlayStyles
+      overlayBackgroundColor: overlayBackgroundColor,
+      overlayTextColor: overlayTextColor
     }, createElement(UnsavedInnerBlocks, {
       blockProps: blockProps,
       blocks: uncontrolledInnerBlocks,
@@ -488,7 +456,7 @@ function Navigation(_ref) {
         setHasSavedUnsavedInnerBlocks(true); // Switch to using the wp_navigation entity.
 
         setRef(post.id);
-        showNavigationMenuCreateNotice(__(`New Navigation Menu created.`));
+        showNavigationMenuStatusNotice(__(`New Navigation Menu created.`));
       }
     })));
   } // Show a warning if the selected menu is no longer available.
@@ -496,8 +464,31 @@ function Navigation(_ref) {
 
 
   if (ref && isNavigationMenuMissing) {
-    return createElement("div", blockProps, createElement(Warning, null, __('Navigation menu has been deleted or is unavailable. '), createElement(Button, {
-      onClick: resetToEmptyBlock,
+    return createElement(TagName, blockProps, createElement(BlockControls, null, createElement(ToolbarGroup, {
+      className: "wp-block-navigation__toolbar-menu-selector"
+    }, createElement(NavigationMenuSelector, {
+      ref: navigationSelectorRef,
+      currentMenuId: ref,
+      clientId: clientId,
+      onSelectNavigationMenu: menuId => {
+        handleUpdateMenu(menuId);
+        setShouldFocusNavigationSelector(true);
+      },
+      onSelectClassicMenu: async classicMenu => {
+        const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name);
+
+        if (navMenu) {
+          handleUpdateMenu(navMenu.id);
+          setShouldFocusNavigationSelector(true);
+        }
+      },
+      onCreateNew: () => createNavigationMenu('', [])
+      /* translators: %s: The name of a menu. */
+      ,
+      actionLabel: __("Switch to '%s'"),
+      showManageActions: true
+    }))), createElement(Warning, null, __('Navigation menu has been deleted or is unavailable. '), createElement(Button, {
+      onClick: () => createNavigationMenu('', []),
       variant: "link"
     }, __('Create a new menu?'))));
   }
@@ -507,15 +498,35 @@ function Navigation(_ref) {
   }
 
   const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : Placeholder;
-
-  if (isPlaceholder) {
+  /**
+   * Historically the navigation block has supported custom placeholders.
+   * Even though the current UX tries as hard as possible not to
+   * end up in a placeholder state, the block continues to support
+   * this extensibility point, via a CustomPlaceholder.
+   * When CustomPlaceholder is present it becomes the default fallback
+   * for an empty navigation block, instead of the default fallbacks.
+   *
+   */
+
+  if (isPlaceholder && CustomPlaceholder) {
     return createElement(TagName, blockProps, createElement(PlaceholderComponent, {
       isSelected: isSelected,
       currentMenuId: ref,
       clientId: clientId,
       canUserCreateNavigationMenu: canUserCreateNavigationMenu,
       isResolvingCanUserCreateNavigationMenu: isResolvingCanUserCreateNavigationMenu,
-      onFinish: handleSelectNavigation,
+      onSelectNavigationMenu: menuId => {
+        handleUpdateMenu(menuId);
+        setShouldFocusNavigationSelector(true);
+      },
+      onSelectClassicMenu: async classicMenu => {
+        const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name);
+
+        if (navMenu) {
+          handleUpdateMenu(navMenu.id);
+          setShouldFocusNavigationSelector(true);
+        }
+      },
       onCreateEmpty: () => createNavigationMenu('', [])
     }));
   }
@@ -524,14 +535,27 @@ function Navigation(_ref) {
     kind: "postType",
     type: "wp_navigation",
     id: ref
-  }, createElement(RecursionProvider, null, createElement(BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && createElement(ToolbarGroup, {
+  }, createElement(RecursionProvider, {
+    uniqueId: recursionId
+  }, createElement(BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && createElement(ToolbarGroup, {
     className: "wp-block-navigation__toolbar-menu-selector"
   }, createElement(NavigationMenuSelector, {
     ref: navigationSelectorRef,
     currentMenuId: ref,
     clientId: clientId,
-    onSelect: handleSelectNavigation,
-    onCreateNew: resetToEmptyBlock
+    onSelectNavigationMenu: menuId => {
+      handleUpdateMenu(menuId);
+      setShouldFocusNavigationSelector(true);
+    },
+    onSelectClassicMenu: async classicMenu => {
+      const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name);
+
+      if (navMenu) {
+        handleUpdateMenu(navMenu.id);
+        setShouldFocusNavigationSelector(true);
+      }
+    },
+    onCreateNew: () => createNavigationMenu('', [])
     /* translators: %s: The name of a menu. */
     ,
     actionLabel: __("Switch to '%s'"),
@@ -541,8 +565,8 @@ function Navigation(_ref) {
   }, hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && createElement(NavigationMenuNameControl, null), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && createElement(NavigationMenuDeleteControl, {
     onDelete: function () {
       let deletedMenuTitle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      resetToEmptyBlock();
-      showNavigationMenuDeleteNotice(sprintf( // translators: %s: the name of a menu (e.g. Header navigation).
+      replaceInnerBlocks(clientId, []);
+      showNavigationMenuStatusNotice(sprintf( // translators: %s: the name of a menu (e.g. Header navigation).
       __('Navigation menu %s successfully deleted.'), deletedMenuTitle));
     }
   })), isLoading && createElement(TagName, blockProps, createElement(Spinner, {
@@ -555,8 +579,8 @@ function Navigation(_ref) {
     isOpen: isResponsiveMenuOpen,
     isResponsive: isResponsive,
     isHiddenByDefault: 'always' === overlayMenu,
-    classNames: overlayClassnames,
-    styles: overlayStyles
+    overlayBackgroundColor: overlayBackgroundColor,
+    overlayTextColor: overlayTextColor
   }, isEntityAvailable && createElement(NavigationInnerBlocks, {
     clientId: clientId,
     hasCustomPlaceholder: !!CustomPlaceholder,