@wordpress/block-library 7.18.0 → 8.0.0

package/build/navigation/edit/index.js

@@ -9,9 +9,9 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _url = require("@wordpress/url");
+var _classnames = _interopRequireDefault(require("classnames"));
 
 var _blockEditor = require("@wordpress/block-editor");
 
@@ -39,8 +39,6 @@ var _responsiveWrapper = _interopRequireDefault(require("./responsive-wrapper"))
 
 var _innerBlocks = _interopRequireDefault(require("./inner-blocks"));
 
-var _navigationMenuSelector = _interopRequireDefault(require("./navigation-menu-selector"));
-
 var _navigationMenuNameControl = _interopRequireDefault(require("./navigation-menu-name-control"));
 
 var _unsavedInnerBlocks = _interopRequireDefault(require("./unsaved-inner-blocks"));
@@ -61,6 +59,10 @@ var _useInnerBlocks = require("./use-inner-blocks");
 
 var _utils = require("./utils");
 
+var _manageMenusButton = _interopRequireDefault(require("./manage-menus-button"));
+
+var _menuInspectorControls = _interopRequireDefault(require("./menu-inspector-controls"));
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -77,7 +79,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Internal dependencies
  */
 function Navigation(_ref) {
-  var _attributes$style, _attributes$style$typ;
+  var _window, _attributes$style, _attributes$style$typ;
 
   let {
     attributes,
@@ -99,6 +101,7 @@ function Navigation(_ref) {
     hasColorSettings = true,
     customPlaceholder: CustomPlaceholder = null
   } = _ref;
+  const isOffCanvasNavigationEditorEnabled = ((_window = window) === null || _window === void 0 ? void 0 : _window.__experimentalEnableOffCanvasNavigationEditor) === true;
   const {
     openSubmenusOnClick,
     overlayMenu,
@@ -186,7 +189,6 @@ function Navigation(_ref) {
     selectBlock,
     __unstableMarkNextChangeAsNotPersistent
   } = (0, _data.useDispatch)(_blockEditor.store);
-  const [hasSavedUnsavedInnerBlocks, setHasSavedUnsavedInnerBlocks] = (0, _element.useState)(false);
   const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = (0, _element.useState)(false);
   const [overlayMenuPreview, setOverlayMenuPreview] = (0, _element.useState)(false);
   const {
@@ -211,7 +213,15 @@ function Navigation(_ref) {
   } = (0, _useConvertClassicMenuToBlockMenu.default)(clientId);
   const isConvertingClassicMenu = classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_PENDING; // Only autofallback to published menus.
 
-  const fallbackNavigationMenus = navigationMenus === null || navigationMenus === void 0 ? void 0 : navigationMenus.filter(menu => menu.status === 'publish'); // Attempt to retrieve and prioritize any existing navigation menu unless:
+  const fallbackNavigationMenus = (0, _element.useMemo)(() => {
+    var _navigationMenus$filt;
+
+    return navigationMenus === null || navigationMenus === void 0 ? void 0 : (_navigationMenus$filt = navigationMenus.filter(menu => menu.status === 'publish')) === null || _navigationMenus$filt === void 0 ? void 0 : _navigationMenus$filt.sort((menuA, menuB) => {
+      const menuADate = new Date(menuA.date);
+      const menuBDate = new Date(menuB.date);
+      return menuADate.getTime() < menuBDate.getTime();
+    });
+  }, [navigationMenus]); // 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.
@@ -223,12 +233,6 @@ function Navigation(_ref) {
     if (hasUncontrolledInnerBlocks || isCreatingNavigationMenu || ref || !(fallbackNavigationMenus !== null && fallbackNavigationMenus !== void 0 && fallbackNavigationMenus.length)) {
       return;
     }
-
-    fallbackNavigationMenus.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
@@ -237,18 +241,30 @@ function Navigation(_ref) {
      *  nor to be undoable, hence why it is marked as non persistent
      */
 
+
     __unstableMarkNextChangeAsNotPersistent();
 
     setRef(fallbackNavigationMenus[0].id);
-  }, [navigationMenus]);
+  }, [ref, isCreatingNavigationMenu, fallbackNavigationMenus, hasUncontrolledInnerBlocks]);
   (0, _element.useEffect)(() => {
-    if (!hasResolvedNavigationMenus || isConvertingClassicMenu || (fallbackNavigationMenus === null || fallbackNavigationMenus === void 0 ? void 0 : fallbackNavigationMenus.length) > 0 || (classicMenus === null || classicMenus === void 0 ? void 0 : classicMenus.length) !== 1) {
+    if (!hasResolvedNavigationMenus || isConvertingClassicMenu || (fallbackNavigationMenus === null || fallbackNavigationMenus === void 0 ? void 0 : fallbackNavigationMenus.length) > 0 || !(classicMenus !== null && classicMenus !== void 0 && classicMenus.length)) {
       return;
     } // If there's non fallback navigation menus and
-    // only one classic menu then create a new navigation menu based on it.
+    // a classic menu with a `primary` location or slug,
+    // then create a new navigation menu based on it.
+    // Otherwise, use the most recently created classic menu.
+
 
+    const primaryMenus = classicMenus.filter(classicMenu => classicMenu.locations.includes('primary') || classicMenu.slug === 'primary');
 
-    convertClassicMenu(classicMenus[0].id, classicMenus[0].name, 'publish');
+    if (primaryMenus.length) {
+      convertClassicMenu(primaryMenus[0].id, primaryMenus[0].name, 'publish');
+    } else {
+      classicMenus.sort((a, b) => {
+        return b.id - a.id;
+      });
+      convertClassicMenu(classicMenus[0].id, classicMenus[0].name, 'publish');
+    }
   }, [hasResolvedNavigationMenus]);
   const navRef = (0, _element.useRef)(); // The standard HTML5 tag for the block wrapper.
 
@@ -325,6 +341,20 @@ function Navigation(_ref) {
     }
   };
 
+  const onSelectClassicMenu = async classicMenu => {
+    const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name, 'draft');
+
+    if (navMenu) {
+      handleUpdateMenu(navMenu.id, {
+        focusNavigationBlock: true
+      });
+    }
+  };
+
+  const onSelectNavigationMenu = menuId => {
+    handleUpdateMenu(menuId);
+  };
+
   (0, _element.useEffect)(() => {
     hideClassicMenuConversionNotice();
 
@@ -402,7 +432,8 @@ function Navigation(_ref) {
       showMenuAutoPublishDraftNotice((0, _i18n.__)('Error occurred while publishing the navigation menu.'));
     });
   }, [isDraftNavigationMenu, navigationMenu]);
-  const stylingInspectorControls = (0, _element.createElement)(_blockEditor.InspectorControls, null, hasSubmenuIndicatorSetting && (0, _element.createElement)(_components.PanelBody, {
+  const colorGradientSettings = (0, _blockEditor.__experimentalUseMultipleOriginColorsAndGradients)();
+  const stylingInspectorControls = (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.InspectorControls, null, hasSubmenuIndicatorSetting && (0, _element.createElement)(_components.PanelBody, {
     title: (0, _i18n.__)('Display')
   }, isResponsive && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, {
     className: overlayMenuPreviewClasses,
@@ -456,35 +487,43 @@ function Navigation(_ref) {
     },
     disabled: attributes.openSubmenusOnClick,
     label: (0, _i18n.__)('Show arrow')
-  }))), hasColorSettings && (0, _element.createElement)(_blockEditor.PanelColorSettings, {
+  })))), (0, _element.createElement)(_blockEditor.InspectorControls, {
+    __experimentalGroup: "color"
+  }, hasColorSettings && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.__experimentalColorGradientSettingsDropdown, (0, _extends2.default)({
     __experimentalHasMultipleOrigins: true,
     __experimentalIsRenderedInSidebar: true,
-    title: (0, _i18n.__)('Color'),
-    initialOpen: false,
-    colorSettings: [{
-      value: textColor.color,
-      onChange: setTextColor,
-      label: (0, _i18n.__)('Text')
+    settings: [{
+      colorValue: textColor.color,
+      label: (0, _i18n.__)('Text'),
+      onColorChange: setTextColor,
+      resetAllFilter: () => setTextColor()
     }, {
-      value: backgroundColor.color,
-      onChange: setBackgroundColor,
-      label: (0, _i18n.__)('Background')
+      colorValue: backgroundColor.color,
+      label: (0, _i18n.__)('Background'),
+      onColorChange: setBackgroundColor,
+      resetAllFilter: () => setBackgroundColor()
     }, {
-      value: overlayTextColor.color,
-      onChange: setOverlayTextColor,
-      label: (0, _i18n.__)('Submenu & overlay text')
+      colorValue: overlayTextColor.color,
+      label: (0, _i18n.__)('Submenu & overlay text'),
+      onColorChange: setOverlayTextColor,
+      resetAllFilter: () => setOverlayTextColor()
     }, {
-      value: overlayBackgroundColor.color,
-      onChange: setOverlayBackgroundColor,
-      label: (0, _i18n.__)('Submenu & overlay background')
-    }]
-  }, enableContrastChecking && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.ContrastChecker, {
+      colorValue: overlayBackgroundColor.color,
+      label: (0, _i18n.__)('Submenu & overlay background'),
+      onColorChange: setOverlayBackgroundColor,
+      resetAllFilter: () => setOverlayBackgroundColor()
+    }],
+    panelId: clientId
+  }, colorGradientSettings, {
+    gradients: [],
+    disableCustomGradients: true
+  })), enableContrastChecking && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.ContrastChecker, {
     backgroundColor: detectedBackgroundColor,
     textColor: detectedColor
   }), (0, _element.createElement)(_blockEditor.ContrastChecker, {
     backgroundColor: detectedOverlayBackgroundColor,
     textColor: detectedOverlayColor
-  })))); // If the block has inner blocks, but no menu id, then these blocks are either:
+  }))))); // If the block has inner blocks, but no menu id, then these blocks are either:
   // - inserted via a pattern.
   // - inserted directly via Code View (or otherwise).
   // - from an older version of navigation block added before the block used a wp_navigation entity.
@@ -492,37 +531,20 @@ function Navigation(_ref) {
   // that automatically saves the menu as an entity when changes are made to the inner blocks.
 
   const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable;
+  const isManageMenusButtonDisabled = !hasManagePermissions || !hasResolvedNavigationMenus;
 
-  if (hasUnsavedBlocks) {
-    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
-      title: (0, _i18n.__)('Menu')
-    }, (0, _element.createElement)(_navigationMenuSelector.default, {
+  if (hasUnsavedBlocks && !isCreatingNavigationMenu) {
+    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_menuInspectorControls.default, {
+      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
+      createNavigationMenuIsError: createNavigationMenuIsError,
       currentMenuId: ref,
-      clientId: clientId,
-      onSelectNavigationMenu: menuId => {
-        handleUpdateMenu(menuId);
-      },
-      onSelectClassicMenu: async classicMenu => {
-        const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name, 'draft');
-
-        if (navMenu) {
-          handleUpdateMenu(navMenu.id, {
-            focusNavigationBlock: true
-          });
-        }
-      },
+      isNavigationMenuMissing: isNavigationMenuMissing,
+      innerBlocks: innerBlocks,
+      isManageMenusButtonDisabled: isManageMenusButtonDisabled,
       onCreateNew: createUntitledEmptyNavigationMenu,
-      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess
-      /* translators: %s: The name of a menu. */
-      ,
-      actionLabel: (0, _i18n.__)("Switch to '%s'")
-    }), (0, _element.createElement)(_components.Button, {
-      variant: "link",
-      disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
-      href: (0, _url.addQueryArgs)('edit.php', {
-        post_type: 'wp_navigation'
-      })
-    }, (0, _i18n.__)('Manage menus')))), stylingInspectorControls, (0, _element.createElement)(_responsiveWrapper.default, {
+      onSelectClassicMenu: onSelectClassicMenu,
+      onSelectNavigationMenu: onSelectNavigationMenu
+    }), stylingInspectorControls, (0, _element.createElement)(_responsiveWrapper.default, {
       id: clientId,
       onToggle: setResponsiveMenuVisibility,
       isOpen: isResponsiveMenuOpen,
@@ -533,54 +555,27 @@ function Navigation(_ref) {
       overlayBackgroundColor: overlayBackgroundColor,
       overlayTextColor: overlayTextColor
     }, (0, _element.createElement)(_unsavedInnerBlocks.default, {
+      createNavigationMenu: createNavigationMenu,
       blocks: uncontrolledInnerBlocks,
-      clientId: clientId,
       templateLock: templateLock,
       navigationMenus: navigationMenus,
-      hasSelection: isSelected || isInnerBlockSelected,
-      hasSavedUnsavedInnerBlocks: hasSavedUnsavedInnerBlocks,
-      onSave: post => {
-        // Set some state used as a guard to prevent the creation of multiple posts.
-        setHasSavedUnsavedInnerBlocks(true); // Switch to using the wp_navigation entity.
-
-        setRef(post.id);
-        showNavigationMenuStatusNotice((0, _i18n.__)(`New Navigation Menu created.`));
-      }
+      hasSelection: isSelected || isInnerBlockSelected
     })));
   } // Show a warning if the selected menu is no longer available.
   // TODO - the user should be able to select a new one?
 
 
   if (ref && isNavigationMenuMissing) {
-    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
-      title: (0, _i18n.__)('Menu')
-    }, (0, _element.createElement)(_navigationMenuSelector.default, {
-      currentMenuId: null,
-      clientId: clientId,
-      onSelectNavigationMenu: menuId => {
-        handleUpdateMenu(menuId);
-      },
-      onSelectClassicMenu: async classicMenu => {
-        const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name, 'draft');
-
-        if (navMenu) {
-          handleUpdateMenu(navMenu.id, {
-            focusNavigationBlock: true
-          });
-        }
-      },
+    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_menuInspectorControls.default, {
+      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
+      createNavigationMenuIsError: createNavigationMenuIsError,
+      isNavigationMenuMissing: isNavigationMenuMissing,
+      innerBlocks: innerBlocks,
+      isManageMenusButtonDisabled: isManageMenusButtonDisabled,
       onCreateNew: createUntitledEmptyNavigationMenu,
-      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess
-      /* translators: %s: The name of a menu. */
-      ,
-      actionLabel: (0, _i18n.__)("Switch to '%s'")
-    }), (0, _element.createElement)(_components.Button, {
-      variant: "link",
-      disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
-      href: (0, _url.addQueryArgs)('edit.php', {
-        post_type: 'wp_navigation'
-      })
-    }, (0, _i18n.__)('Manage menus')))), (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Navigation menu has been deleted or is unavailable. '), (0, _element.createElement)(_components.Button, {
+      onSelectClassicMenu: onSelectClassicMenu,
+      onSelectNavigationMenu: onSelectNavigationMenu
+    }), (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Navigation menu has been deleted or is unavailable. '), (0, _element.createElement)(_components.Button, {
       onClick: createUntitledEmptyNavigationMenu,
       variant: "link"
     }, (0, _i18n.__)('Create a new menu?'))));
@@ -608,18 +603,8 @@ function Navigation(_ref) {
       clientId: clientId,
       canUserCreateNavigationMenu: canUserCreateNavigationMenu,
       isResolvingCanUserCreateNavigationMenu: isResolvingCanUserCreateNavigationMenu,
-      onSelectNavigationMenu: menuId => {
-        handleUpdateMenu(menuId);
-      },
-      onSelectClassicMenu: async classicMenu => {
-        const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name, 'draft');
-
-        if (navMenu) {
-          handleUpdateMenu(navMenu.id, {
-            focusNavigationBlock: true
-          });
-        }
-      },
+      onSelectNavigationMenu: onSelectNavigationMenu,
+      onSelectClassicMenu: onSelectClassicMenu,
       onCreateEmpty: createUntitledEmptyNavigationMenu
     }));
   }
@@ -630,36 +615,17 @@ function Navigation(_ref) {
     id: ref
   }, (0, _element.createElement)(_blockEditor.__experimentalRecursionProvider, {
     uniqueId: recursionId
-  }, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
-    title: (0, _i18n.__)('Menu')
-  }, (0, _element.createElement)(_navigationMenuSelector.default, {
+  }, (0, _element.createElement)(_menuInspectorControls.default, {
+    createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
+    createNavigationMenuIsError: createNavigationMenuIsError,
     currentMenuId: ref,
-    clientId: clientId,
-    onSelectNavigationMenu: menuId => {
-      handleUpdateMenu(menuId);
-    },
-    onSelectClassicMenu: async classicMenu => {
-      const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name, 'draft');
-
-      if (navMenu) {
-        handleUpdateMenu(navMenu.id, {
-          focusNavigationBlock: true
-        });
-      }
-    },
+    isNavigationMenuMissing: isNavigationMenuMissing,
+    innerBlocks: innerBlocks,
+    isManageMenusButtonDisabled: isManageMenusButtonDisabled,
     onCreateNew: createUntitledEmptyNavigationMenu,
-    createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
-    createNavigationMenuIsError: createNavigationMenuIsError
-    /* translators: %s: The name of a menu. */
-    ,
-    actionLabel: (0, _i18n.__)("Switch to '%s'")
-  }), (0, _element.createElement)(_components.Button, {
-    variant: "link",
-    disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
-    href: (0, _url.addQueryArgs)('edit.php', {
-      post_type: 'wp_navigation'
-    })
-  }, (0, _i18n.__)('Manage menus')))), stylingInspectorControls, isEntityAvailable && (0, _element.createElement)(_blockEditor.InspectorControls, {
+    onSelectClassicMenu: onSelectClassicMenu,
+    onSelectNavigationMenu: onSelectNavigationMenu
+  }), stylingInspectorControls, isEntityAvailable && (0, _element.createElement)(_blockEditor.InspectorControls, {
     __experimentalGroup: "advanced"
   }, hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && (0, _element.createElement)(_navigationMenuNameControl.default, null), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && (0, _element.createElement)(_navigationMenuDeleteControl.default, {
     onDelete: function () {
@@ -668,6 +634,9 @@ function Navigation(_ref) {
       showNavigationMenuStatusNotice((0, _i18n.sprintf)( // translators: %s: the name of a menu (e.g. Header navigation).
       (0, _i18n.__)('Navigation menu %s successfully deleted.'), deletedMenuTitle));
     }
+  }), isOffCanvasNavigationEditorEnabled && (0, _element.createElement)(_manageMenusButton.default, {
+    disabled: isManageMenusButtonDisabled,
+    className: "wp-block-navigation-manage-menus-button"
   })), isLoading && (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_components.Spinner, {
     className: "wp-block-navigation__loading-indicator"
   })), !isLoading && (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_responsiveWrapper.default, {