@wordpress/block-library 7.18.0 → 8.0.0

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement, Fragment } from "@wordpress/element";
 
 /**
@@ -8,9 +9,8 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { useState, useEffect, useRef, Platform } from '@wordpress/element';
-import { addQueryArgs } from '@wordpress/url';
-import { InspectorControls, useBlockProps, __experimentalRecursionProvider as RecursionProvider, __experimentalUseHasRecursion as useHasRecursion, store as blockEditorStore, withColors, PanelColorSettings, ContrastChecker, getColorClassName, Warning, __experimentalUseBlockOverlayActive as useBlockOverlayActive } from '@wordpress/block-editor';
+import { useState, useEffect, useRef, Platform, useMemo } from '@wordpress/element';
+import { InspectorControls, useBlockProps, __experimentalRecursionProvider as RecursionProvider, __experimentalUseHasRecursion as useHasRecursion, store as blockEditorStore, withColors, ContrastChecker, getColorClassName, Warning, __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, __experimentalUseBlockOverlayActive as useBlockOverlayActive, __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients } from '@wordpress/block-editor';
 import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 import { useDispatch } from '@wordpress/data';
 import { PanelBody, ToggleControl, __experimentalToggleGroupControl as ToggleGroupControl, __experimentalToggleGroupControlOption as ToggleGroupControlOption, Button, Spinner } from '@wordpress/components';
@@ -27,7 +27,6 @@ import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
 import ResponsiveWrapper from './responsive-wrapper';
 import NavigationInnerBlocks from './inner-blocks';
-import NavigationMenuSelector from './navigation-menu-selector';
 import NavigationMenuNameControl from './navigation-menu-name-control';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
@@ -38,9 +37,11 @@ import useConvertClassicToBlockMenu, { CLASSIC_MENU_CONVERSION_ERROR, CLASSIC_ME
 import useCreateNavigationMenu from './use-create-navigation-menu';
 import { useInnerBlocks } from './use-inner-blocks';
 import { detectColors } from './utils';
+import ManageMenusButton from './manage-menus-button';
+import MenuInspectorControls from './menu-inspector-controls';
 
 function Navigation(_ref) {
-  var _attributes$style, _attributes$style$typ;
+  var _window, _attributes$style, _attributes$style$typ;
 
   let {
     attributes,
@@ -62,6 +63,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,
@@ -149,7 +151,6 @@ function Navigation(_ref) {
     selectBlock,
     __unstableMarkNextChangeAsNotPersistent
   } = useDispatch(blockEditorStore);
-  const [hasSavedUnsavedInnerBlocks, setHasSavedUnsavedInnerBlocks] = useState(false);
   const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = useState(false);
   const [overlayMenuPreview, setOverlayMenuPreview] = useState(false);
   const {
@@ -174,7 +175,15 @@ function Navigation(_ref) {
   } = useConvertClassicToBlockMenu(clientId);
   const isConvertingClassicMenu = classicMenuConversionStatus === 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 = 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.
@@ -186,12 +195,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
@@ -200,18 +203,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]);
   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.
 
 
-    convertClassicMenu(classicMenus[0].id, classicMenus[0].name, 'publish');
+    const primaryMenus = classicMenus.filter(classicMenu => classicMenu.locations.includes('primary') || classicMenu.slug === 'primary');
+
+    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 = useRef(); // The standard HTML5 tag for the block wrapper.
 
@@ -288,6 +303,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);
+  };
+
   useEffect(() => {
     hideClassicMenuConversionNotice();
 
@@ -365,7 +394,8 @@ function Navigation(_ref) {
       showMenuAutoPublishDraftNotice(__('Error occurred while publishing the navigation menu.'));
     });
   }, [isDraftNavigationMenu, navigationMenu]);
-  const stylingInspectorControls = createElement(InspectorControls, null, hasSubmenuIndicatorSetting && createElement(PanelBody, {
+  const colorGradientSettings = useMultipleOriginColorsAndGradients();
+  const stylingInspectorControls = createElement(Fragment, null, createElement(InspectorControls, null, hasSubmenuIndicatorSetting && createElement(PanelBody, {
     title: __('Display')
   }, isResponsive && createElement(Fragment, null, createElement(Button, {
     className: overlayMenuPreviewClasses,
@@ -419,35 +449,43 @@ function Navigation(_ref) {
     },
     disabled: attributes.openSubmenusOnClick,
     label: __('Show arrow')
-  }))), hasColorSettings && createElement(PanelColorSettings, {
+  })))), createElement(InspectorControls, {
+    __experimentalGroup: "color"
+  }, hasColorSettings && createElement(Fragment, null, createElement(ColorGradientSettingsDropdown, _extends({
     __experimentalHasMultipleOrigins: true,
     __experimentalIsRenderedInSidebar: true,
-    title: __('Color'),
-    initialOpen: false,
-    colorSettings: [{
-      value: textColor.color,
-      onChange: setTextColor,
-      label: __('Text')
+    settings: [{
+      colorValue: textColor.color,
+      label: __('Text'),
+      onColorChange: setTextColor,
+      resetAllFilter: () => setTextColor()
     }, {
-      value: backgroundColor.color,
-      onChange: setBackgroundColor,
-      label: __('Background')
+      colorValue: backgroundColor.color,
+      label: __('Background'),
+      onColorChange: setBackgroundColor,
+      resetAllFilter: () => setBackgroundColor()
     }, {
-      value: overlayTextColor.color,
-      onChange: setOverlayTextColor,
-      label: __('Submenu & overlay text')
+      colorValue: overlayTextColor.color,
+      label: __('Submenu & overlay text'),
+      onColorChange: setOverlayTextColor,
+      resetAllFilter: () => setOverlayTextColor()
     }, {
-      value: overlayBackgroundColor.color,
-      onChange: setOverlayBackgroundColor,
-      label: __('Submenu & overlay background')
-    }]
-  }, enableContrastChecking && createElement(Fragment, null, createElement(ContrastChecker, {
+      colorValue: overlayBackgroundColor.color,
+      label: __('Submenu & overlay background'),
+      onColorChange: setOverlayBackgroundColor,
+      resetAllFilter: () => setOverlayBackgroundColor()
+    }],
+    panelId: clientId
+  }, colorGradientSettings, {
+    gradients: [],
+    disableCustomGradients: true
+  })), enableContrastChecking && createElement(Fragment, null, createElement(ContrastChecker, {
     backgroundColor: detectedBackgroundColor,
     textColor: detectedColor
   }), createElement(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.
@@ -455,37 +493,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 createElement(TagName, blockProps, createElement(InspectorControls, null, createElement(PanelBody, {
-      title: __('Menu')
-    }, createElement(NavigationMenuSelector, {
+  if (hasUnsavedBlocks && !isCreatingNavigationMenu) {
+    return createElement(TagName, blockProps, createElement(MenuInspectorControls, {
+      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: __("Switch to '%s'")
-    }), createElement(Button, {
-      variant: "link",
-      disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
-      href: addQueryArgs('edit.php', {
-        post_type: 'wp_navigation'
-      })
-    }, __('Manage menus')))), stylingInspectorControls, createElement(ResponsiveWrapper, {
+      onSelectClassicMenu: onSelectClassicMenu,
+      onSelectNavigationMenu: onSelectNavigationMenu
+    }), stylingInspectorControls, createElement(ResponsiveWrapper, {
       id: clientId,
       onToggle: setResponsiveMenuVisibility,
       isOpen: isResponsiveMenuOpen,
@@ -496,54 +517,27 @@ function Navigation(_ref) {
       overlayBackgroundColor: overlayBackgroundColor,
       overlayTextColor: overlayTextColor
     }, createElement(UnsavedInnerBlocks, {
+      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(__(`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 createElement(TagName, blockProps, createElement(InspectorControls, null, createElement(PanelBody, {
-      title: __('Menu')
-    }, createElement(NavigationMenuSelector, {
-      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 createElement(TagName, blockProps, createElement(MenuInspectorControls, {
+      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
+      createNavigationMenuIsError: createNavigationMenuIsError,
+      isNavigationMenuMissing: isNavigationMenuMissing,
+      innerBlocks: innerBlocks,
+      isManageMenusButtonDisabled: isManageMenusButtonDisabled,
       onCreateNew: createUntitledEmptyNavigationMenu,
-      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess
-      /* translators: %s: The name of a menu. */
-      ,
-      actionLabel: __("Switch to '%s'")
-    }), createElement(Button, {
-      variant: "link",
-      disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
-      href: addQueryArgs('edit.php', {
-        post_type: 'wp_navigation'
-      })
-    }, __('Manage menus')))), createElement(Warning, null, __('Navigation menu has been deleted or is unavailable. '), createElement(Button, {
+      onSelectClassicMenu: onSelectClassicMenu,
+      onSelectNavigationMenu: onSelectNavigationMenu
+    }), createElement(Warning, null, __('Navigation menu has been deleted or is unavailable. '), createElement(Button, {
       onClick: createUntitledEmptyNavigationMenu,
       variant: "link"
     }, __('Create a new menu?'))));
@@ -571,18 +565,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
     }));
   }
@@ -593,36 +577,17 @@ function Navigation(_ref) {
     id: ref
   }, createElement(RecursionProvider, {
     uniqueId: recursionId
-  }, createElement(InspectorControls, null, createElement(PanelBody, {
-    title: __('Menu')
-  }, createElement(NavigationMenuSelector, {
+  }, createElement(MenuInspectorControls, {
+    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: __("Switch to '%s'")
-  }), createElement(Button, {
-    variant: "link",
-    disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
-    href: addQueryArgs('edit.php', {
-      post_type: 'wp_navigation'
-    })
-  }, __('Manage menus')))), stylingInspectorControls, isEntityAvailable && createElement(InspectorControls, {
+    onSelectClassicMenu: onSelectClassicMenu,
+    onSelectNavigationMenu: onSelectNavigationMenu
+  }), stylingInspectorControls, isEntityAvailable && createElement(InspectorControls, {
     __experimentalGroup: "advanced"
   }, hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && createElement(NavigationMenuNameControl, null), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && createElement(NavigationMenuDeleteControl, {
     onDelete: function () {
@@ -631,6 +596,9 @@ function Navigation(_ref) {
       showNavigationMenuStatusNotice(sprintf( // translators: %s: the name of a menu (e.g. Header navigation).
       __('Navigation menu %s successfully deleted.'), deletedMenuTitle));
     }
+  }), isOffCanvasNavigationEditorEnabled && createElement(ManageMenusButton, {
+    disabled: isManageMenusButtonDisabled,
+    className: "wp-block-navigation-manage-menus-button"
   })), isLoading && createElement(TagName, blockProps, createElement(Spinner, {
     className: "wp-block-navigation__loading-indicator"
   })), !isLoading && createElement(TagName, blockProps, createElement(ResponsiveWrapper, {