@wordpress/block-library 7.11.0 → 7.13.0

package/build/navigation/edit/index.js

@@ -23,6 +23,8 @@ var _i18n = require("@wordpress/i18n");
 
 var _a11y = require("@wordpress/a11y");
 
+var _blocks = require("@wordpress/blocks");
+
 var _useNavigationMenu = _interopRequireDefault(require("../use-navigation-menu"));
 
 var _useNavigationEntities = _interopRequireDefault(require("../use-navigation-entities"));
@@ -47,7 +49,11 @@ var _overlayMenuIcon = _interopRequireDefault(require("./overlay-menu-icon"));
 
 var _useConvertClassicMenuToBlockMenu = _interopRequireWildcard(require("./use-convert-classic-menu-to-block-menu"));
 
-var _useCreateNavigationMenu = _interopRequireWildcard(require("./use-create-navigation-menu"));
+var _useCreateNavigationMenu = _interopRequireDefault(require("./use-create-navigation-menu"));
+
+var _useInnerBlocks = require("./use-inner-blocks");
+
+var _utils = require("./utils");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -64,29 +70,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
-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);
-}
-
 function Navigation(_ref) {
   var _attributes$style, _attributes$style$typ;
 
@@ -122,7 +105,6 @@ function Navigation(_ref) {
     hasIcon
   } = attributes;
   const ref = attributes.ref;
-  const registry = (0, _data.useRegistry)();
 
   const setRef = postId => {
     setAttributes({
@@ -130,69 +112,53 @@ function Navigation(_ref) {
     });
   };
 
-  const [hasAlreadyRendered, RecursionProvider] = (0, _blockEditor.__experimentalUseNoRecursiveRenders)(`navigationMenu/${ref}`); // Preload classic menus, so that they don't suddenly pop-in when viewing
+  const recursionId = `navigationMenu/${ref}`;
+  const hasAlreadyRendered = (0, _blockEditor.__experimentalUseHasRecursion)(recursionId); // Preload classic menus, so that they don't suddenly pop-in when viewing
   // the Select Menu dropdown.
 
   (0, _useNavigationEntities.default)();
-  const [showNavigationMenuDeleteNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/delete'
+  const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = (0, _useNavigationNotice.default)({
+    name: 'block-library/core/navigation/status'
+  });
+  const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = (0, _useNavigationNotice.default)({
+    name: 'block-library/core/navigation/classic-menu-conversion'
   });
-  const [showNavigationMenuCreateNotice, hideNavigationMenuCreateNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/create'
+  const [showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice] = (0, _useNavigationNotice.default)({
+    name: 'block-library/core/navigation/permissions/update'
   });
   const {
     create: createNavigationMenu,
     status: createNavigationMenuStatus,
     error: createNavigationMenuError,
-    value: createNavigationMenuPost
+    value: createNavigationMenuPost,
+    isPending: isCreatingNavigationMenu,
+    isSuccess: createNavigationMenuIsSuccess,
+    isError: createNavigationMenuIsError
   } = (0, _useCreateNavigationMenu.default)(clientId);
-  const isCreatingNavigationMenu = createNavigationMenuStatus === _useCreateNavigationMenu.CREATE_NAVIGATION_MENU_PENDING;
   (0, _element.useEffect)(() => {
-    hideNavigationMenuCreateNotice();
+    hideNavigationMenuStatusNotice();
 
-    if (createNavigationMenuStatus === _useCreateNavigationMenu.CREATE_NAVIGATION_MENU_PENDING) {
+    if (isCreatingNavigationMenu) {
       (0, _a11y.speak)((0, _i18n.__)(`Creating Navigation Menu.`));
     }
 
-    if (createNavigationMenuStatus === _useCreateNavigationMenu.CREATE_NAVIGATION_MENU_SUCCESS) {
+    if (createNavigationMenuIsSuccess) {
       setRef(createNavigationMenuPost.id);
       selectBlock(clientId);
-      showNavigationMenuCreateNotice((0, _i18n.__)(`Navigation Menu successfully created.`));
+      showNavigationMenuStatusNotice((0, _i18n.__)(`Navigation Menu successfully created.`));
     }
 
-    if (createNavigationMenuStatus === _useCreateNavigationMenu.CREATE_NAVIGATION_MENU_ERROR) {
-      showNavigationMenuCreateNotice((0, _i18n.__)('Failed to create Navigation Menu.'));
+    if (createNavigationMenuIsError) {
+      showNavigationMenuStatusNotice((0, _i18n.__)('Failed to create Navigation Menu.'));
     }
   }, [createNavigationMenu, createNavigationMenuStatus, createNavigationMenuError, createNavigationMenuPost]);
   const {
     hasUncontrolledInnerBlocks,
     uncontrolledInnerBlocks,
     isInnerBlockSelected,
-    hasSubmenus
-  } = (0, _data.useSelect)(select => {
-    const {
-      getBlock,
-      getBlocks,
-      hasSelectedInnerBlock
-    } = select(_blockEditor.store); // 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
+  } = (0, _useInnerBlocks.useInnerBlocks)(clientId);
+  const hasSubmenus = !!innerBlocks.find(block => block.name === 'core/navigation-submenu');
   const {
     replaceInnerBlocks,
     selectBlock,
@@ -214,24 +180,43 @@ function Navigation(_ref) {
     canUserCreateNavigationMenu,
     isResolvingCanUserCreateNavigationMenu,
     hasResolvedCanUserCreateNavigationMenu
-  } = (0, _useNavigationMenu.default)(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.
+  } = (0, _useNavigationMenu.default)(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.
 
   (0, _element.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 = (0, _element.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
   } = (0, _useConvertClassicMenuToBlockMenu.default)(clientId);
   const isConvertingClassicMenu = classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_PENDING; // The standard HTML5 tag for the block wrapper.
 
@@ -242,10 +227,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, [(0, _blocks.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.
 
@@ -273,50 +271,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 = (0, _classnames.default)({
-    'has-text-color': !!overlayTextColor.color || !!(overlayTextColor !== null && overlayTextColor !== void 0 && overlayTextColor.class),
-    [(0, _blockEditor.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),
-    [(0, _blockEditor.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 = _element.Platform.OS === 'web';
   const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)();
   const [detectedColor, setDetectedColor] = (0, _element.useState)();
   const [detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor] = (0, _element.useState)();
   const [detectedOverlayColor, setDetectedOverlayColor] = (0, _element.useState)();
-  const [showClassicMenuConversionErrorNotice, hideClassicMenuConversionErrorNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/classic-menu-conversion/error'
-  });
 
-  function handleUpdateMenu(menuId) {
+  const handleUpdateMenu = menuId => {
     setRef(menuId);
     selectBlock(clientId);
-  }
+  };
 
   (0, _element.useEffect)(() => {
+    hideClassicMenuConversionNotice();
+
     if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_PENDING) {
       (0, _a11y.speak)((0, _i18n.__)('Classic menu importing.'));
     }
 
-    if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_SUCCESS && classicMenuConversionResult) {
-      handleUpdateMenu(classicMenuConversionResult === null || classicMenuConversionResult === void 0 ? void 0 : classicMenuConversionResult.id);
-      hideClassicMenuConversionErrorNotice();
-      (0, _a11y.speak)((0, _i18n.__)('Classic menu imported successfully.'));
+    if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_SUCCESS) {
+      showClassicMenuConversionNotice((0, _i18n.__)('Classic menu imported successfully.'));
     }
 
     if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_ERROR) {
-      showClassicMenuConversionErrorNotice(classicMenuConversionError);
-      (0, _a11y.speak)((0, _i18n.__)('Classic menu import failed.'));
+      showClassicMenuConversionNotice((0, _i18n.__)('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.
 
   (0, _element.useEffect)(() => {
@@ -335,54 +317,30 @@ function Navigation(_ref) {
       return;
     }
 
-    detectColors(navRef.current, setDetectedColor, setDetectedBackgroundColor);
+    (0, _utils.detectColors)(navRef.current, setDetectedColor, setDetectedBackgroundColor);
     const subMenuElement = (_navRef$current = navRef.current) === null || _navRef$current === void 0 ? void 0 : _navRef$current.querySelector('[data-type="core/navigation-link"] [data-type="core/navigation-link"]');
 
     if (subMenuElement) {
-      detectColors(subMenuElement, setDetectedOverlayColor, setDetectedOverlayBackgroundColor);
+      (0, _utils.detectColors)(subMenuElement, setDetectedOverlayColor, setDetectedOverlayBackgroundColor);
     }
   });
-  const [showCantEditNotice, hideCantEditNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/permissions/update',
-    message: (0, _i18n.__)('You do not have permission to edit this Menu. Any changes made will not be saved.')
-  });
-  const [showCantCreateNotice, hideCantCreateNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/permissions/create',
-    message: (0, _i18n.__)('You do not have permission to create Navigation Menus.')
-  });
   (0, _element.useEffect)(() => {
     if (!isSelected && !isInnerBlockSelected) {
-      hideCantEditNotice();
-      hideCantCreateNotice();
+      hideNavigationMenuPermissionsNotice();
     }
 
     if (isSelected || isInnerBlockSelected) {
-      if (ref && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) {
-        showCantEditNotice();
+      if (ref && !navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) {
+        showNavigationMenuPermissionsNotice((0, _i18n.__)('You do not have permission to edit this Menu. Any changes made will not be saved.'));
       }
 
       if (!ref && hasResolvedCanUserCreateNavigationMenu && !canUserCreateNavigationMenu) {
-        showCantCreateNotice();
+        showNavigationMenuPermissionsNotice((0, _i18n.__)('You do not have permission to create Navigation Menus.'));
       }
     }
   }, [isSelected, isInnerBlockSelected, canUserUpdateNavigationMenu, hasResolvedCanUserUpdateNavigationMenu, canUserCreateNavigationMenu, hasResolvedCanUserCreateNavigationMenu, ref]);
   const navigationSelectorRef = (0, _element.useRef)();
-  const [shouldFocusNavigationSelector, setShouldFocusNavigationSelector] = (0, _element.useState)(false);
-  const handleSelectNavigation = (0, _element.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] = (0, _element.useState)(false); // Focus support after menu selection.
 
   (0, _element.useEffect)(() => {
     var _navigationSelectorRe;
@@ -394,17 +352,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 = (0, _element.useCallback)(() => {
-    registry.batch(() => {
-      setAttributes({
-        ref: undefined
-      });
-
-      if (!ref) {
-        replaceInnerBlocks(clientId, []);
-      }
-    });
-  }, [clientId, ref]);
   const isResponsive = 'never' !== overlayMenu;
   const overlayMenuPreviewClasses = (0, _classnames.default)('wp-block-navigation__overlay-menu-preview', {
     open: overlayMenuPreview
@@ -500,14 +447,37 @@ function Navigation(_ref) {
   const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable;
 
   if (hasUnsavedBlocks) {
-    return (0, _element.createElement)(TagName, blockProps, stylingInspectorControls, (0, _element.createElement)(_responsiveWrapper.default, {
+    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.ToolbarGroup, {
+      className: "wp-block-navigation__toolbar-menu-selector"
+    }, (0, _element.createElement)(_navigationMenuSelector.default, {
+      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: (0, _i18n.__)("Switch to '%s'"),
+      showManageActions: true
+    }))), stylingInspectorControls, (0, _element.createElement)(_responsiveWrapper.default, {
       id: clientId,
       onToggle: setResponsiveMenuVisibility,
       isOpen: isResponsiveMenuOpen,
       isResponsive: 'never' !== overlayMenu,
       isHiddenByDefault: 'always' === overlayMenu,
-      classNames: overlayClassnames,
-      styles: overlayStyles
+      overlayBackgroundColor: overlayBackgroundColor,
+      overlayTextColor: overlayTextColor
     }, (0, _element.createElement)(_unsavedInnerBlocks.default, {
       blockProps: blockProps,
       blocks: uncontrolledInnerBlocks,
@@ -520,7 +490,7 @@ function Navigation(_ref) {
         setHasSavedUnsavedInnerBlocks(true); // Switch to using the wp_navigation entity.
 
         setRef(post.id);
-        showNavigationMenuCreateNotice((0, _i18n.__)(`New Navigation Menu created.`));
+        showNavigationMenuStatusNotice((0, _i18n.__)(`New Navigation Menu created.`));
       }
     })));
   } // Show a warning if the selected menu is no longer available.
@@ -528,8 +498,31 @@ function Navigation(_ref) {
 
 
   if (ref && isNavigationMenuMissing) {
-    return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Navigation menu has been deleted or is unavailable. '), (0, _element.createElement)(_components.Button, {
-      onClick: resetToEmptyBlock,
+    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.ToolbarGroup, {
+      className: "wp-block-navigation__toolbar-menu-selector"
+    }, (0, _element.createElement)(_navigationMenuSelector.default, {
+      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: (0, _i18n.__)("Switch to '%s'"),
+      showManageActions: true
+    }))), (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Navigation menu has been deleted or is unavailable. '), (0, _element.createElement)(_components.Button, {
+      onClick: () => createNavigationMenu('', []),
       variant: "link"
     }, (0, _i18n.__)('Create a new menu?'))));
   }
@@ -539,15 +532,35 @@ function Navigation(_ref) {
   }
 
   const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : _placeholder.default;
-
-  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 (0, _element.createElement)(TagName, blockProps, (0, _element.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('', [])
     }));
   }
@@ -556,14 +569,27 @@ function Navigation(_ref) {
     kind: "postType",
     type: "wp_navigation",
     id: ref
-  }, (0, _element.createElement)(RecursionProvider, null, (0, _element.createElement)(_blockEditor.BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && (0, _element.createElement)(_components.ToolbarGroup, {
+  }, (0, _element.createElement)(_blockEditor.__experimentalRecursionProvider, {
+    uniqueId: recursionId
+  }, (0, _element.createElement)(_blockEditor.BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && (0, _element.createElement)(_components.ToolbarGroup, {
     className: "wp-block-navigation__toolbar-menu-selector"
   }, (0, _element.createElement)(_navigationMenuSelector.default, {
     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: (0, _i18n.__)("Switch to '%s'"),
@@ -573,8 +599,8 @@ function Navigation(_ref) {
   }, hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && (0, _element.createElement)(_navigationMenuNameControl.default, null), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && (0, _element.createElement)(_navigationMenuDeleteControl.default, {
     onDelete: function () {
       let deletedMenuTitle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-      resetToEmptyBlock();
-      showNavigationMenuDeleteNotice((0, _i18n.sprintf)( // translators: %s: the name of a menu (e.g. Header navigation).
+      replaceInnerBlocks(clientId, []);
+      showNavigationMenuStatusNotice((0, _i18n.sprintf)( // translators: %s: the name of a menu (e.g. Header navigation).
       (0, _i18n.__)('Navigation menu %s successfully deleted.'), deletedMenuTitle));
     }
   })), isLoading && (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_components.Spinner, {
@@ -587,8 +613,8 @@ function Navigation(_ref) {
     isOpen: isResponsiveMenuOpen,
     isResponsive: isResponsive,
     isHiddenByDefault: 'always' === overlayMenu,
-    classNames: overlayClassnames,
-    styles: overlayStyles
+    overlayBackgroundColor: overlayBackgroundColor,
+    overlayTextColor: overlayTextColor
   }, isEntityAvailable && (0, _element.createElement)(_innerBlocks.default, {
     clientId: clientId,
     hasCustomPlaceholder: !!CustomPlaceholder,