@wordpress/block-library 9.32.0 → 9.33.0

package/build/navigation/edit/index.js

@@ -1,97 +1,91 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var edit_exports = {};
+__export(edit_exports, {
+  default: () => edit_default
 });
-exports.default = void 0;
-var _clsx = _interopRequireDefault(require("clsx"));
-var _element = require("@wordpress/element");
-var _blockEditor = require("@wordpress/block-editor");
-var _coreData = require("@wordpress/core-data");
-var _data = require("@wordpress/data");
-var _components = require("@wordpress/components");
-var _i18n = require("@wordpress/i18n");
-var _a11y = require("@wordpress/a11y");
-var _icons = require("@wordpress/icons");
-var _blocks = require("@wordpress/blocks");
-var _compose = require("@wordpress/compose");
-var _useNavigationMenu = _interopRequireDefault(require("../use-navigation-menu"));
-var _useNavigationEntities = _interopRequireDefault(require("../use-navigation-entities"));
-var _placeholder = _interopRequireDefault(require("./placeholder"));
-var _responsiveWrapper = _interopRequireDefault(require("./responsive-wrapper"));
-var _innerBlocks = _interopRequireDefault(require("./inner-blocks"));
-var _navigationMenuNameControl = _interopRequireDefault(require("./navigation-menu-name-control"));
-var _unsavedInnerBlocks = _interopRequireDefault(require("./unsaved-inner-blocks"));
-var _navigationMenuDeleteControl = _interopRequireDefault(require("./navigation-menu-delete-control"));
-var _useNavigationNotice = _interopRequireDefault(require("./use-navigation-notice"));
-var _overlayMenuIcon = _interopRequireDefault(require("./overlay-menu-icon"));
-var _overlayMenuPreview = _interopRequireDefault(require("./overlay-menu-preview"));
-var _useConvertClassicMenuToBlockMenu = _interopRequireWildcard(require("./use-convert-classic-menu-to-block-menu"));
-var _useCreateNavigationMenu = _interopRequireDefault(require("./use-create-navigation-menu"));
-var _useInnerBlocks = require("./use-inner-blocks");
-var _utils = require("./utils");
-var _manageMenusButton = _interopRequireDefault(require("./manage-menus-button"));
-var _menuInspectorControls = _interopRequireDefault(require("./menu-inspector-controls"));
-var _deletedNavigationWarning = _interopRequireDefault(require("./deleted-navigation-warning"));
-var _accessibleDescription = _interopRequireDefault(require("./accessible-description"));
-var _accessibleMenuDescription = _interopRequireDefault(require("./accessible-menu-description"));
-var _lockUnlock = require("../../lock-unlock");
-var _hooks = require("../../utils/hooks");
-var _constants = require("../constants");
-var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-/**
- * Component that renders the Add page button for the Navigation block.
- *
- * @param {Object} props          Component props.
- * @param {string} props.clientId Block client ID.
- * @return {JSX.Element|null} The Add page button component or null if not applicable.
- */function NavigationAddPageButton({
-  clientId
-}) {
-  const {
-    insertBlock
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const {
-    getBlockCount
-  } = (0, _data.useSelect)(_blockEditor.store);
-  const onAddPage = (0, _element.useCallback)(() => {
-    // Get the current number of blocks to insert at the end
+module.exports = __toCommonJS(edit_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_clsx = __toESM(require("clsx"));
+var import_element = require("@wordpress/element");
+var import_block_editor = require("@wordpress/block-editor");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_a11y = require("@wordpress/a11y");
+var import_icons = require("@wordpress/icons");
+var import_blocks = require("@wordpress/blocks");
+var import_compose = require("@wordpress/compose");
+var import_use_navigation_menu = __toESM(require("../use-navigation-menu"));
+var import_use_navigation_entities = __toESM(require("../use-navigation-entities"));
+var import_placeholder = __toESM(require("./placeholder"));
+var import_responsive_wrapper = __toESM(require("./responsive-wrapper"));
+var import_inner_blocks = __toESM(require("./inner-blocks"));
+var import_navigation_menu_name_control = __toESM(require("./navigation-menu-name-control"));
+var import_unsaved_inner_blocks = __toESM(require("./unsaved-inner-blocks"));
+var import_navigation_menu_delete_control = __toESM(require("./navigation-menu-delete-control"));
+var import_use_navigation_notice = __toESM(require("./use-navigation-notice"));
+var import_overlay_menu_icon = __toESM(require("./overlay-menu-icon"));
+var import_overlay_menu_preview = __toESM(require("./overlay-menu-preview"));
+var import_use_convert_classic_menu_to_block_menu = __toESM(require("./use-convert-classic-menu-to-block-menu"));
+var import_use_create_navigation_menu = __toESM(require("./use-create-navigation-menu"));
+var import_use_inner_blocks = require("./use-inner-blocks");
+var import_utils = require("./utils");
+var import_manage_menus_button = __toESM(require("./manage-menus-button"));
+var import_menu_inspector_controls = __toESM(require("./menu-inspector-controls"));
+var import_deleted_navigation_warning = __toESM(require("./deleted-navigation-warning"));
+var import_accessible_description = __toESM(require("./accessible-description"));
+var import_accessible_menu_description = __toESM(require("./accessible-menu-description"));
+var import_lock_unlock = require("../../lock-unlock");
+var import_hooks = require("../../utils/hooks");
+var import_constants = require("../constants");
+function NavigationAddPageButton({ clientId }) {
+  const { insertBlock } = (0, import_data.useDispatch)(import_block_editor.store);
+  const { getBlockCount } = (0, import_data.useSelect)(import_block_editor.store);
+  const onAddPage = (0, import_element.useCallback)(() => {
     const blockCount = getBlockCount(clientId);
-
-    // Create a new navigation link block (default block)
-    const newBlock = (0, _blocks.createBlock)(_constants.DEFAULT_BLOCK.name, {
-      kind: _constants.DEFAULT_BLOCK.attributes.kind,
-      type: _constants.DEFAULT_BLOCK.attributes.type
+    const newBlock = (0, import_blocks.createBlock)(import_constants.DEFAULT_BLOCK.name, {
+      kind: import_constants.DEFAULT_BLOCK.attributes.kind,
+      type: import_constants.DEFAULT_BLOCK.attributes.type
     });
-
-    // Insert the block at the end of the navigation
     insertBlock(newBlock, blockCount, clientId);
   }, [clientId, insertBlock, getBlockCount]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockControls, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarGroup, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToolbarButton, {
-        name: "add-page",
-        icon: _icons.page,
-        onClick: onAddPage,
-        children: (0, _i18n.__)('Add page')
-      })
-    })
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.ToolbarButton,
+    {
+      name: "add-page",
+      icon: import_icons.page,
+      onClick: onAddPage,
+      children: (0, import_i18n.__)("Add page")
+    }
+  ) }) });
 }
 function ColorTools({
   textColor,
@@ -105,79 +99,108 @@ function ColorTools({
   clientId,
   navRef
 }) {
-  const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)();
-  const [detectedColor, setDetectedColor] = (0, _element.useState)();
-  const [detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor] = (0, _element.useState)();
-  const [detectedOverlayColor, setDetectedOverlayColor] = (0, _element.useState)();
-  // Turn on contrast checker for web only since it's not supported on mobile yet.
-  const enableContrastChecking = _element.Platform.OS === 'web';
-  (0, _element.useEffect)(() => {
+  const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, import_element.useState)();
+  const [detectedColor, setDetectedColor] = (0, import_element.useState)();
+  const [
+    detectedOverlayBackgroundColor,
+    setDetectedOverlayBackgroundColor
+  ] = (0, import_element.useState)();
+  const [detectedOverlayColor, setDetectedOverlayColor] = (0, import_element.useState)();
+  const enableContrastChecking = import_element.Platform.OS === "web";
+  (0, import_element.useEffect)(() => {
     if (!enableContrastChecking) {
       return;
     }
-    (0, _utils.detectColors)(navRef.current, setDetectedColor, setDetectedBackgroundColor);
-    const subMenuElement = navRef.current?.querySelector('[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]');
+    (0, import_utils.detectColors)(
+      navRef.current,
+      setDetectedColor,
+      setDetectedBackgroundColor
+    );
+    const subMenuElement = navRef.current?.querySelector(
+      '[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]'
+    );
     if (!subMenuElement) {
       return;
     }
-
-    // Only detect submenu overlay colors if they have previously been explicitly set.
-    // This avoids the contrast checker from reporting on inherited submenu colors and
-    // showing the contrast warning twice.
     if (overlayTextColor.color || overlayBackgroundColor.color) {
-      (0, _utils.detectColors)(subMenuElement, setDetectedOverlayColor, setDetectedOverlayBackgroundColor);
+      (0, import_utils.detectColors)(
+        subMenuElement,
+        setDetectedOverlayColor,
+        setDetectedOverlayBackgroundColor
+      );
     }
-  }, [enableContrastChecking, overlayTextColor.color, overlayBackgroundColor.color, navRef]);
-  const colorGradientSettings = (0, _blockEditor.__experimentalUseMultipleOriginColorsAndGradients)();
+  }, [
+    enableContrastChecking,
+    overlayTextColor.color,
+    overlayBackgroundColor.color,
+    navRef
+  ]);
+  const colorGradientSettings = (0, import_block_editor.__experimentalUseMultipleOriginColorsAndGradients)();
   if (!colorGradientSettings.hasColorsOrGradients) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalColorGradientSettingsDropdown, {
-      __experimentalIsRenderedInSidebar: true,
-      settings: [{
-        colorValue: textColor.color,
-        label: (0, _i18n.__)('Text'),
-        onColorChange: setTextColor,
-        resetAllFilter: () => setTextColor(),
-        clearable: true,
-        enableAlpha: true
-      }, {
-        colorValue: backgroundColor.color,
-        label: (0, _i18n.__)('Background'),
-        onColorChange: setBackgroundColor,
-        resetAllFilter: () => setBackgroundColor(),
-        clearable: true,
-        enableAlpha: true
-      }, {
-        colorValue: overlayTextColor.color,
-        label: (0, _i18n.__)('Submenu & overlay text'),
-        onColorChange: setOverlayTextColor,
-        resetAllFilter: () => setOverlayTextColor(),
-        clearable: true,
-        enableAlpha: true
-      }, {
-        colorValue: overlayBackgroundColor.color,
-        label: (0, _i18n.__)('Submenu & overlay background'),
-        onColorChange: setOverlayBackgroundColor,
-        resetAllFilter: () => setOverlayBackgroundColor(),
-        clearable: true,
-        enableAlpha: true
-      }],
-      panelId: clientId,
-      ...colorGradientSettings,
-      gradients: [],
-      disableCustomGradients: true
-    }), enableContrastChecking && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.ContrastChecker, {
-        backgroundColor: detectedBackgroundColor,
-        textColor: detectedColor
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.ContrastChecker, {
-        backgroundColor: detectedOverlayBackgroundColor,
-        textColor: detectedOverlayColor
-      })]
-    })]
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_block_editor.__experimentalColorGradientSettingsDropdown,
+      {
+        __experimentalIsRenderedInSidebar: true,
+        settings: [
+          {
+            colorValue: textColor.color,
+            label: (0, import_i18n.__)("Text"),
+            onColorChange: setTextColor,
+            resetAllFilter: () => setTextColor(),
+            clearable: true,
+            enableAlpha: true
+          },
+          {
+            colorValue: backgroundColor.color,
+            label: (0, import_i18n.__)("Background"),
+            onColorChange: setBackgroundColor,
+            resetAllFilter: () => setBackgroundColor(),
+            clearable: true,
+            enableAlpha: true
+          },
+          {
+            colorValue: overlayTextColor.color,
+            label: (0, import_i18n.__)("Submenu & overlay text"),
+            onColorChange: setOverlayTextColor,
+            resetAllFilter: () => setOverlayTextColor(),
+            clearable: true,
+            enableAlpha: true
+          },
+          {
+            colorValue: overlayBackgroundColor.color,
+            label: (0, import_i18n.__)("Submenu & overlay background"),
+            onColorChange: setOverlayBackgroundColor,
+            resetAllFilter: () => setOverlayBackgroundColor(),
+            clearable: true,
+            enableAlpha: true
+          }
+        ],
+        panelId: clientId,
+        ...colorGradientSettings,
+        gradients: [],
+        disableCustomGradients: true
+      }
+    ),
+    enableContrastChecking && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_block_editor.ContrastChecker,
+        {
+          backgroundColor: detectedBackgroundColor,
+          textColor: detectedColor
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_block_editor.ContrastChecker,
+        {
+          backgroundColor: detectedOverlayBackgroundColor,
+          textColor: detectedOverlayColor
+        }
+      )
+    ] })
+  ] });
 }
 function Navigation({
   attributes,
@@ -206,35 +229,34 @@ function Navigation({
     templateLock,
     layout: {
       justifyContent,
-      orientation = 'horizontal',
-      flexWrap = 'wrap'
+      orientation = "horizontal",
+      flexWrap = "wrap"
     } = {},
     hasIcon,
-    icon = 'handle'
+    icon = "handle"
   } = attributes;
   const ref = attributes.ref;
-  const setRef = (0, _element.useCallback)(postId => {
-    setAttributes({
-      ref: postId
-    });
-  }, [setAttributes]);
+  const setRef = (0, import_element.useCallback)(
+    (postId) => {
+      setAttributes({ ref: postId });
+    },
+    [setAttributes]
+  );
   const recursionId = `navigationMenu/${ref}`;
-  const hasAlreadyRendered = (0, _blockEditor.useHasRecursion)(recursionId);
-  const blockEditingMode = (0, _blockEditor.useBlockEditingMode)();
-
-  // Preload classic menus, so that they don't suddenly pop-in when viewing
-  // the Select Menu dropdown.
-  const {
-    menus: classicMenus
-  } = (0, _useNavigationEntities.default)();
-  const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/status'
+  const hasAlreadyRendered = (0, import_block_editor.useHasRecursion)(recursionId);
+  const blockEditingMode = (0, import_block_editor.useBlockEditingMode)();
+  const { menus: classicMenus } = (0, import_use_navigation_entities.default)();
+  const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = (0, import_use_navigation_notice.default)({
+    name: "block-library/core/navigation/status"
   });
-  const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/classic-menu-conversion'
+  const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = (0, import_use_navigation_notice.default)({
+    name: "block-library/core/navigation/classic-menu-conversion"
   });
-  const [showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice] = (0, _useNavigationNotice.default)({
-    name: 'block-library/core/navigation/permissions/update'
+  const [
+    showNavigationMenuPermissionsNotice,
+    hideNavigationMenuPermissionsNotice
+  ] = (0, import_use_navigation_notice.default)({
+    name: "block-library/core/navigation/permissions/update"
   });
   const {
     create: createNavigationMenu,
@@ -244,24 +266,26 @@ function Navigation({
     isPending: isCreatingNavigationMenu,
     isSuccess: createNavigationMenuIsSuccess,
     isError: createNavigationMenuIsError
-  } = (0, _useCreateNavigationMenu.default)(clientId);
+  } = (0, import_use_create_navigation_menu.default)(clientId);
   const createUntitledEmptyNavigationMenu = async () => {
-    await createNavigationMenu('');
+    await createNavigationMenu("");
   };
   const {
     hasUncontrolledInnerBlocks,
     uncontrolledInnerBlocks,
     isInnerBlockSelected,
     innerBlocks
-  } = (0, _useInnerBlocks.useInnerBlocks)(clientId);
-  const hasSubmenus = !!innerBlocks.find(block => block.name === 'core/navigation-submenu');
+  } = (0, import_use_inner_blocks.useInnerBlocks)(clientId);
+  const hasSubmenus = !!innerBlocks.find(
+    (block) => block.name === "core/navigation-submenu"
+  );
   const {
     replaceInnerBlocks,
     selectBlock,
     __unstableMarkNextChangeAsNotPersistent
-  } = (0, _data.useDispatch)(_blockEditor.store);
-  const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = (0, _element.useState)(false);
-  const [overlayMenuPreview, setOverlayMenuPreview] = (0, _element.useState)(false);
+  } = (0, import_data.useDispatch)(import_block_editor.store);
+  const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = (0, import_element.useState)(false);
+  const [overlayMenuPreview, setOverlayMenuPreview] = (0, import_element.useState)(false);
   const {
     hasResolvedNavigationMenus,
     isNavigationMenuResolved,
@@ -273,480 +297,579 @@ function Navigation({
     canUserCreateNavigationMenus,
     isResolvingCanUserCreateNavigationMenus,
     hasResolvedCanUserCreateNavigationMenus
-  } = (0, _useNavigationMenu.default)(ref);
+  } = (0, import_use_navigation_menu.default)(ref);
   const navMenuResolvedButMissing = hasResolvedNavigationMenus && isNavigationMenuMissing;
   const {
     convert: convertClassicMenu,
     status: classicMenuConversionStatus,
     error: classicMenuConversionError
-  } = (0, _useConvertClassicMenuToBlockMenu.default)(createNavigationMenu);
-  const isConvertingClassicMenu = classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_PENDING;
-  const handleUpdateMenu = (0, _element.useCallback)((menuId, options = {
-    focusNavigationBlock: false
-  }) => {
-    const {
-      focusNavigationBlock
-    } = options;
-    setRef(menuId);
-    if (focusNavigationBlock) {
-      selectBlock(clientId);
-    }
-  }, [selectBlock, clientId, setRef]);
+  } = (0, import_use_convert_classic_menu_to_block_menu.default)(createNavigationMenu);
+  const isConvertingClassicMenu = classicMenuConversionStatus === import_use_convert_classic_menu_to_block_menu.CLASSIC_MENU_CONVERSION_PENDING;
+  const handleUpdateMenu = (0, import_element.useCallback)(
+    (menuId, options = { focusNavigationBlock: false }) => {
+      const { focusNavigationBlock } = options;
+      setRef(menuId);
+      if (focusNavigationBlock) {
+        selectBlock(clientId);
+      }
+    },
+    [selectBlock, clientId, setRef]
+  );
   const isEntityAvailable = !isNavigationMenuMissing && isNavigationMenuResolved;
-
-  // 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.
-  // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
-  // that automatically saves the menu as an entity when changes are made to the inner blocks.
   const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable;
-  const {
-    getNavigationFallbackId
-  } = (0, _lockUnlock.unlock)((0, _data.useSelect)(_coreData.store));
+  const { getNavigationFallbackId } = (0, import_lock_unlock.unlock)((0, import_data.useSelect)(import_core_data.store));
   const navigationFallbackId = !(ref || hasUnsavedBlocks) ? getNavigationFallbackId() : null;
-  (0, _element.useEffect)(() => {
-    // If:
-    // - there is an existing menu, OR
-    // - there are existing (uncontrolled) inner blocks
-    // ...then don't request a fallback menu.
+  (0, import_element.useEffect)(() => {
     if (ref || hasUnsavedBlocks || !navigationFallbackId) {
       return;
     }
-
-    /**
-     *  This fallback displays (both in editor and on front)
-     *  The fallback should not request a save (entity dirty state)
-     *  nor to be undoable, hence why it is marked as non persistent
-     */
-
     __unstableMarkNextChangeAsNotPersistent();
     setRef(navigationFallbackId);
-  }, [ref, setRef, hasUnsavedBlocks, navigationFallbackId, __unstableMarkNextChangeAsNotPersistent]);
-  const navRef = (0, _element.useRef)();
-
-  // The standard HTML5 tag for the block wrapper.
-  const TagName = 'nav';
-
-  // "placeholder" shown if:
-  // - there is no ref attribute pointing to a Navigation Post.
-  // - there is no classic menu conversion process in progress.
-  // - there is no menu creation process in progress.
-  // - there are no uncontrolled blocks.
+  }, [
+    ref,
+    setRef,
+    hasUnsavedBlocks,
+    navigationFallbackId,
+    __unstableMarkNextChangeAsNotPersistent
+  ]);
+  const navRef = (0, import_element.useRef)();
+  const TagName = "nav";
   const isPlaceholder = !ref && !isCreatingNavigationMenu && !isConvertingClassicMenu && hasResolvedNavigationMenus && classicMenus?.length === 0 && !hasUncontrolledInnerBlocks;
-
-  // "loading" state:
-  // - there is a menu creation process in progress.
-  // - there is a classic menu conversion process in progress.
-  // OR:
-  // - there is a ref attribute pointing to a Navigation Post
-  // - the Navigation Post isn't available (hasn't resolved) yet.
   const isLoading = !hasResolvedNavigationMenus || isCreatingNavigationMenu || isConvertingClassicMenu || !!(ref && !isEntityAvailable && !isConvertingClassicMenu);
   const textDecoration = attributes.style?.typography?.textDecoration;
-  const hasBlockOverlay = (0, _data.useSelect)(select => select(_blockEditor.store).__unstableHasActiveBlockOverlayActive(clientId), [clientId]);
-  const isResponsive = 'never' !== overlayMenu;
-  const blockProps = (0, _blockEditor.useBlockProps)({
+  const hasBlockOverlay = (0, import_data.useSelect)(
+    (select) => select(import_block_editor.store).__unstableHasActiveBlockOverlayActive(
+      clientId
+    ),
+    [clientId]
+  );
+  const isResponsive = "never" !== overlayMenu;
+  const blockProps = (0, import_block_editor.useBlockProps)({
     ref: navRef,
-    className: (0, _clsx.default)(className, {
-      'items-justified-right': justifyContent === 'right',
-      'items-justified-space-between': justifyContent === 'space-between',
-      'items-justified-left': justifyContent === 'left',
-      'items-justified-center': justifyContent === 'center',
-      'is-vertical': orientation === 'vertical',
-      'no-wrap': flexWrap === 'nowrap',
-      'is-responsive': isResponsive,
-      'has-text-color': !!textColor.color || !!textColor?.class,
-      [(0, _blockEditor.getColorClassName)('color', textColor?.slug)]: !!textColor?.slug,
-      'has-background': !!backgroundColor.color || backgroundColor.class,
-      [(0, _blockEditor.getColorClassName)('background-color', backgroundColor?.slug)]: !!backgroundColor?.slug,
-      [`has-text-decoration-${textDecoration}`]: textDecoration,
-      'block-editor-block-content-overlay': hasBlockOverlay
-    }, layoutClassNames),
+    className: (0, import_clsx.default)(
+      className,
+      {
+        "items-justified-right": justifyContent === "right",
+        "items-justified-space-between": justifyContent === "space-between",
+        "items-justified-left": justifyContent === "left",
+        "items-justified-center": justifyContent === "center",
+        "is-vertical": orientation === "vertical",
+        "no-wrap": flexWrap === "nowrap",
+        "is-responsive": isResponsive,
+        "has-text-color": !!textColor.color || !!textColor?.class,
+        [(0, import_block_editor.getColorClassName)("color", textColor?.slug)]: !!textColor?.slug,
+        "has-background": !!backgroundColor.color || backgroundColor.class,
+        [(0, import_block_editor.getColorClassName)(
+          "background-color",
+          backgroundColor?.slug
+        )]: !!backgroundColor?.slug,
+        [`has-text-decoration-${textDecoration}`]: textDecoration,
+        "block-editor-block-content-overlay": hasBlockOverlay
+      },
+      layoutClassNames
+    ),
     style: {
       color: !textColor?.slug && textColor?.color,
       backgroundColor: !backgroundColor?.slug && backgroundColor?.color
     }
   });
-  const onSelectClassicMenu = async classicMenu => {
-    return convertClassicMenu(classicMenu.id, classicMenu.name, 'draft');
+  const onSelectClassicMenu = async (classicMenu) => {
+    return convertClassicMenu(classicMenu.id, classicMenu.name, "draft");
   };
-  const onSelectNavigationMenu = menuId => {
+  const onSelectNavigationMenu = (menuId) => {
     handleUpdateMenu(menuId);
   };
-  (0, _element.useEffect)(() => {
+  (0, import_element.useEffect)(() => {
     hideNavigationMenuStatusNotice();
     if (isCreatingNavigationMenu) {
-      (0, _a11y.speak)((0, _i18n.__)(`Creating Navigation Menu.`));
+      (0, import_a11y.speak)((0, import_i18n.__)(`Creating Navigation Menu.`));
     }
     if (createNavigationMenuIsSuccess) {
       handleUpdateMenu(createNavigationMenuPost?.id, {
         focusNavigationBlock: true
       });
-      showNavigationMenuStatusNotice((0, _i18n.__)(`Navigation Menu successfully created.`));
+      showNavigationMenuStatusNotice(
+        (0, import_i18n.__)(`Navigation Menu successfully created.`)
+      );
     }
     if (createNavigationMenuIsError) {
-      showNavigationMenuStatusNotice((0, _i18n.__)('Failed to create Navigation Menu.'));
+      showNavigationMenuStatusNotice(
+        (0, import_i18n.__)("Failed to create Navigation Menu.")
+      );
     }
-  }, [createNavigationMenuStatus, createNavigationMenuError, createNavigationMenuPost?.id, createNavigationMenuIsError, createNavigationMenuIsSuccess, isCreatingNavigationMenu, handleUpdateMenu, hideNavigationMenuStatusNotice, showNavigationMenuStatusNotice]);
-  (0, _element.useEffect)(() => {
+  }, [
+    createNavigationMenuStatus,
+    createNavigationMenuError,
+    createNavigationMenuPost?.id,
+    createNavigationMenuIsError,
+    createNavigationMenuIsSuccess,
+    isCreatingNavigationMenu,
+    handleUpdateMenu,
+    hideNavigationMenuStatusNotice,
+    showNavigationMenuStatusNotice
+  ]);
+  (0, import_element.useEffect)(() => {
     hideClassicMenuConversionNotice();
-    if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_PENDING) {
-      (0, _a11y.speak)((0, _i18n.__)('Classic menu importing.'));
+    if (classicMenuConversionStatus === import_use_convert_classic_menu_to_block_menu.CLASSIC_MENU_CONVERSION_PENDING) {
+      (0, import_a11y.speak)((0, import_i18n.__)("Classic menu importing."));
     }
-    if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_SUCCESS) {
-      showClassicMenuConversionNotice((0, _i18n.__)('Classic menu imported successfully.'));
+    if (classicMenuConversionStatus === import_use_convert_classic_menu_to_block_menu.CLASSIC_MENU_CONVERSION_SUCCESS) {
+      showClassicMenuConversionNotice(
+        (0, import_i18n.__)("Classic menu imported successfully.")
+      );
       handleUpdateMenu(createNavigationMenuPost?.id, {
         focusNavigationBlock: true
       });
     }
-    if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_ERROR) {
-      showClassicMenuConversionNotice((0, _i18n.__)('Classic menu import failed.'));
+    if (classicMenuConversionStatus === import_use_convert_classic_menu_to_block_menu.CLASSIC_MENU_CONVERSION_ERROR) {
+      showClassicMenuConversionNotice(
+        (0, import_i18n.__)("Classic menu import failed.")
+      );
     }
-  }, [classicMenuConversionStatus, classicMenuConversionError, hideClassicMenuConversionNotice, showClassicMenuConversionNotice, createNavigationMenuPost?.id, handleUpdateMenu]);
-  (0, _element.useEffect)(() => {
+  }, [
+    classicMenuConversionStatus,
+    classicMenuConversionError,
+    hideClassicMenuConversionNotice,
+    showClassicMenuConversionNotice,
+    createNavigationMenuPost?.id,
+    handleUpdateMenu
+  ]);
+  (0, import_element.useEffect)(() => {
     if (!isSelected && !isInnerBlockSelected) {
       hideNavigationMenuPermissionsNotice();
     }
     if (isSelected || isInnerBlockSelected) {
       if (ref && !navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) {
-        showNavigationMenuPermissionsNotice((0, _i18n.__)('You do not have permission to edit this Menu. Any changes made will not be saved.'));
+        showNavigationMenuPermissionsNotice(
+          (0, import_i18n.__)(
+            "You do not have permission to edit this Menu. Any changes made will not be saved."
+          )
+        );
       }
       if (!ref && hasResolvedCanUserCreateNavigationMenus && !canUserCreateNavigationMenus) {
-        showNavigationMenuPermissionsNotice((0, _i18n.__)('You do not have permission to create Navigation Menus.'));
+        showNavigationMenuPermissionsNotice(
+          (0, import_i18n.__)(
+            "You do not have permission to create Navigation Menus."
+          )
+        );
       }
     }
-  }, [isSelected, isInnerBlockSelected, canUserUpdateNavigationMenu, hasResolvedCanUserUpdateNavigationMenu, canUserCreateNavigationMenus, hasResolvedCanUserCreateNavigationMenus, ref, hideNavigationMenuPermissionsNotice, showNavigationMenuPermissionsNotice, navMenuResolvedButMissing]);
+  }, [
+    isSelected,
+    isInnerBlockSelected,
+    canUserUpdateNavigationMenu,
+    hasResolvedCanUserUpdateNavigationMenu,
+    canUserCreateNavigationMenus,
+    hasResolvedCanUserCreateNavigationMenus,
+    ref,
+    hideNavigationMenuPermissionsNotice,
+    showNavigationMenuPermissionsNotice,
+    navMenuResolvedButMissing
+  ]);
   const hasManagePermissions = canUserCreateNavigationMenus || canUserUpdateNavigationMenu;
-  const overlayMenuPreviewClasses = (0, _clsx.default)('wp-block-navigation__overlay-menu-preview', {
-    open: overlayMenuPreview
-  });
-  const submenuAccessibilityNotice = !showSubmenuIcon && !openSubmenusOnClick ? (0, _i18n.__)('The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.') : '';
-  const isFirstRender = (0, _element.useRef)(true); // Don't speak on first render.
-  (0, _element.useEffect)(() => {
+  const overlayMenuPreviewClasses = (0, import_clsx.default)(
+    "wp-block-navigation__overlay-menu-preview",
+    { open: overlayMenuPreview }
+  );
+  const submenuAccessibilityNotice = !showSubmenuIcon && !openSubmenusOnClick ? (0, import_i18n.__)(
+    'The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.'
+  ) : "";
+  const isFirstRender = (0, import_element.useRef)(true);
+  (0, import_element.useEffect)(() => {
     if (!isFirstRender.current && submenuAccessibilityNotice) {
-      (0, _a11y.speak)(submenuAccessibilityNotice);
+      (0, import_a11y.speak)(submenuAccessibilityNotice);
     }
     isFirstRender.current = false;
   }, [submenuAccessibilityNotice]);
-  const overlayMenuPreviewId = (0, _compose.useInstanceId)(_overlayMenuPreview.default, `overlay-menu-preview`);
-  const dropdownMenuProps = (0, _hooks.useToolsPanelDropdownMenuProps)();
-  const stylingInspectorControls = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-      children: hasSubmenuIndicatorSetting && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToolsPanel, {
-        label: (0, _i18n.__)('Display'),
+  const overlayMenuPreviewId = (0, import_compose.useInstanceId)(
+    import_overlay_menu_preview.default,
+    `overlay-menu-preview`
+  );
+  const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
+  const stylingInspectorControls = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: hasSubmenuIndicatorSetting && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.__experimentalToolsPanel,
+      {
+        label: (0, import_i18n.__)("Display"),
         resetAll: () => {
           setAttributes({
             showSubmenuIcon: true,
             openSubmenusOnClick: false,
-            overlayMenu: 'mobile',
+            overlayMenu: "mobile",
             hasIcon: true,
-            icon: 'handle'
+            icon: "handle"
           });
         },
-        dropdownMenuProps: dropdownMenuProps,
-        children: [isResponsive && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Button, {
-            __next40pxDefaultSize: true,
-            className: overlayMenuPreviewClasses,
-            onClick: () => {
-              setOverlayMenuPreview(!overlayMenuPreview);
-            },
-            "aria-label": (0, _i18n.__)('Overlay menu controls'),
-            "aria-controls": overlayMenuPreviewId,
-            "aria-expanded": overlayMenuPreview,
-            children: [hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayMenuIcon.default, {
-                icon: icon
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
-                icon: _icons.close
-              })]
-            }), !hasIcon && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: (0, _i18n.__)('Menu')
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-                children: (0, _i18n.__)('Close')
-              })]
-            })]
-          }), overlayMenuPreview && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
-            id: overlayMenuPreviewId,
-            spacing: 4,
-            style: {
-              gridColumn: 'span 2'
-            },
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_overlayMenuPreview.default, {
-              setAttributes: setAttributes,
-              hasIcon: hasIcon,
-              icon: icon,
-              hidden: !overlayMenuPreview
-            })
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-          hasValue: () => overlayMenu !== 'mobile',
-          label: (0, _i18n.__)('Overlay Menu'),
-          onDeselect: () => setAttributes({
-            overlayMenu: 'mobile'
-          }),
-          isShownByDefault: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
-            __next40pxDefaultSize: true,
-            __nextHasNoMarginBottom: true,
-            label: (0, _i18n.__)('Overlay Menu'),
-            "aria-label": (0, _i18n.__)('Configure overlay menu'),
-            value: overlayMenu,
-            help: (0, _i18n.__)('Collapses the navigation options in a menu icon opening an overlay.'),
-            onChange: value => setAttributes({
-              overlayMenu: value
-            }),
-            isBlock: true,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-              value: "never",
-              label: (0, _i18n.__)('Off')
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-              value: "mobile",
-              label: (0, _i18n.__)('Mobile')
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
-              value: "always",
-              label: (0, _i18n.__)('Always')
-            })]
-          })
-        }), hasSubmenus && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
-            className: "wp-block-navigation__submenu-header",
-            children: (0, _i18n.__)('Submenus')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-            hasValue: () => openSubmenusOnClick,
-            label: (0, _i18n.__)('Open on click'),
-            onDeselect: () => setAttributes({
-              openSubmenusOnClick: false,
-              showSubmenuIcon: true
-            }),
-            isShownByDefault: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-              __nextHasNoMarginBottom: true,
-              checked: openSubmenusOnClick,
-              onChange: value => {
-                setAttributes({
-                  openSubmenusOnClick: value,
-                  ...(value && {
-                    showSubmenuIcon: true
-                  }) // Make sure arrows are shown when we toggle this on.
-                });
-              },
-              label: (0, _i18n.__)('Open on click')
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToolsPanelItem, {
-            hasValue: () => !showSubmenuIcon,
-            label: (0, _i18n.__)('Show arrow'),
-            onDeselect: () => setAttributes({
-              showSubmenuIcon: true
-            }),
-            isDisabled: attributes.openSubmenusOnClick,
-            isShownByDefault: true,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ToggleControl, {
-              __nextHasNoMarginBottom: true,
-              checked: showSubmenuIcon,
-              onChange: value => {
-                setAttributes({
-                  showSubmenuIcon: value
-                });
-              },
-              disabled: attributes.openSubmenusOnClick,
-              label: (0, _i18n.__)('Show arrow')
-            })
-          }), submenuAccessibilityNotice && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Notice, {
-            spokenMessage: null,
-            status: "warning",
-            isDismissible: false,
-            className: "wp-block-navigation__submenu-accessibility-notice",
-            children: submenuAccessibilityNotice
-          })]
-        })]
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.InspectorControls, {
-      group: "color",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ColorTools, {
-        textColor: textColor,
-        setTextColor: setTextColor,
-        backgroundColor: backgroundColor,
-        setBackgroundColor: setBackgroundColor,
-        overlayTextColor: overlayTextColor,
-        setOverlayTextColor: setOverlayTextColor,
-        overlayBackgroundColor: overlayBackgroundColor,
-        setOverlayBackgroundColor: setOverlayBackgroundColor,
-        clientId: clientId,
-        navRef: navRef
-      })
-    })]
-  });
+        dropdownMenuProps,
+        children: [
+          isResponsive && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              import_components.Button,
+              {
+                __next40pxDefaultSize: true,
+                className: overlayMenuPreviewClasses,
+                onClick: () => {
+                  setOverlayMenuPreview(
+                    !overlayMenuPreview
+                  );
+                },
+                "aria-label": (0, import_i18n.__)("Overlay menu controls"),
+                "aria-controls": overlayMenuPreviewId,
+                "aria-expanded": overlayMenuPreview,
+                children: [
+                  hasIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_overlay_menu_icon.default, { icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.close })
+                  ] }),
+                  !hasIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: (0, import_i18n.__)("Menu") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: (0, import_i18n.__)("Close") })
+                  ] })
+                ]
+              }
+            ),
+            overlayMenuPreview && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalVStack,
+              {
+                id: overlayMenuPreviewId,
+                spacing: 4,
+                style: {
+                  gridColumn: "span 2"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_overlay_menu_preview.default,
+                  {
+                    setAttributes,
+                    hasIcon,
+                    icon,
+                    hidden: !overlayMenuPreview
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToolsPanelItem,
+            {
+              hasValue: () => overlayMenu !== "mobile",
+              label: (0, import_i18n.__)("Overlay Menu"),
+              onDeselect: () => setAttributes({ overlayMenu: "mobile" }),
+              isShownByDefault: true,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_components.__experimentalToggleGroupControl,
+                {
+                  __next40pxDefaultSize: true,
+                  __nextHasNoMarginBottom: true,
+                  label: (0, import_i18n.__)("Overlay Menu"),
+                  "aria-label": (0, import_i18n.__)("Configure overlay menu"),
+                  value: overlayMenu,
+                  help: (0, import_i18n.__)(
+                    "Collapses the navigation options in a menu icon opening an overlay."
+                  ),
+                  onChange: (value) => setAttributes({ overlayMenu: value }),
+                  isBlock: true,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.__experimentalToggleGroupControlOption,
+                      {
+                        value: "never",
+                        label: (0, import_i18n.__)("Off")
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.__experimentalToggleGroupControlOption,
+                      {
+                        value: "mobile",
+                        label: (0, import_i18n.__)("Mobile")
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.__experimentalToggleGroupControlOption,
+                      {
+                        value: "always",
+                        label: (0, import_i18n.__)("Always")
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          ),
+          hasSubmenus && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "wp-block-navigation__submenu-header", children: (0, import_i18n.__)("Submenus") }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                hasValue: () => openSubmenusOnClick,
+                label: (0, import_i18n.__)("Open on click"),
+                onDeselect: () => setAttributes({
+                  openSubmenusOnClick: false,
+                  showSubmenuIcon: true
+                }),
+                isShownByDefault: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    checked: openSubmenusOnClick,
+                    onChange: (value) => {
+                      setAttributes({
+                        openSubmenusOnClick: value,
+                        ...value && {
+                          showSubmenuIcon: true
+                        }
+                        // Make sure arrows are shown when we toggle this on.
+                      });
+                    },
+                    label: (0, import_i18n.__)("Open on click")
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.__experimentalToolsPanelItem,
+              {
+                hasValue: () => !showSubmenuIcon,
+                label: (0, import_i18n.__)("Show arrow"),
+                onDeselect: () => setAttributes({
+                  showSubmenuIcon: true
+                }),
+                isDisabled: attributes.openSubmenusOnClick,
+                isShownByDefault: true,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.ToggleControl,
+                  {
+                    __nextHasNoMarginBottom: true,
+                    checked: showSubmenuIcon,
+                    onChange: (value) => {
+                      setAttributes({
+                        showSubmenuIcon: value
+                      });
+                    },
+                    disabled: attributes.openSubmenusOnClick,
+                    label: (0, import_i18n.__)("Show arrow")
+                  }
+                )
+              }
+            ),
+            submenuAccessibilityNotice && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.Notice,
+              {
+                spokenMessage: null,
+                status: "warning",
+                isDismissible: false,
+                className: "wp-block-navigation__submenu-accessibility-notice",
+                children: submenuAccessibilityNotice
+              }
+            )
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "color", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ColorTools,
+      {
+        textColor,
+        setTextColor,
+        backgroundColor,
+        setBackgroundColor,
+        overlayTextColor,
+        setOverlayTextColor,
+        overlayBackgroundColor,
+        setOverlayBackgroundColor,
+        clientId,
+        navRef
+      }
+    ) })
+  ] });
   const accessibleDescriptionId = `${clientId}-desc`;
-  const isHiddenByDefault = 'always' === overlayMenu;
+  const isHiddenByDefault = "always" === overlayMenu;
   const isManageMenusButtonDisabled = !hasManagePermissions || !hasResolvedNavigationMenus;
   if (hasUnsavedBlocks && !isCreatingNavigationMenu) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
-      ...blockProps,
-      "aria-describedby": !isPlaceholder ? accessibleDescriptionId : undefined,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_accessibleDescription.default, {
-        id: accessibleDescriptionId,
-        children: (0, _i18n.__)('Unsaved Navigation Menu.')
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuInspectorControls.default, {
-        clientId: clientId,
-        createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
-        createNavigationMenuIsError: createNavigationMenuIsError,
-        currentMenuId: ref,
-        isNavigationMenuMissing: isNavigationMenuMissing,
-        isManageMenusButtonDisabled: isManageMenusButtonDisabled,
-        onCreateNew: createUntitledEmptyNavigationMenu,
-        onSelectClassicMenu: onSelectClassicMenu,
-        onSelectNavigationMenu: onSelectNavigationMenu,
-        isLoading: isLoading,
-        blockEditingMode: blockEditingMode
-      }), blockEditingMode === 'default' && stylingInspectorControls, /*#__PURE__*/(0, _jsxRuntime.jsx)(_responsiveWrapper.default, {
-        id: clientId,
-        onToggle: setResponsiveMenuVisibility,
-        isOpen: isResponsiveMenuOpen,
-        hasIcon: hasIcon,
-        icon: icon,
-        isResponsive: isResponsive,
-        isHiddenByDefault: isHiddenByDefault,
-        overlayBackgroundColor: overlayBackgroundColor,
-        overlayTextColor: overlayTextColor,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_unsavedInnerBlocks.default, {
-          createNavigationMenu: createNavigationMenu,
-          blocks: uncontrolledInnerBlocks,
-          hasSelection: isSelected || isInnerBlockSelected
-        })
-      })]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      TagName,
+      {
+        ...blockProps,
+        "aria-describedby": !isPlaceholder ? accessibleDescriptionId : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accessible_description.default, { id: accessibleDescriptionId, children: (0, import_i18n.__)("Unsaved Navigation Menu.") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_menu_inspector_controls.default,
+            {
+              clientId,
+              createNavigationMenuIsSuccess,
+              createNavigationMenuIsError,
+              currentMenuId: ref,
+              isNavigationMenuMissing,
+              isManageMenusButtonDisabled,
+              onCreateNew: createUntitledEmptyNavigationMenu,
+              onSelectClassicMenu,
+              onSelectNavigationMenu,
+              isLoading,
+              blockEditingMode
+            }
+          ),
+          blockEditingMode === "default" && stylingInspectorControls,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_responsive_wrapper.default,
+            {
+              id: clientId,
+              onToggle: setResponsiveMenuVisibility,
+              isOpen: isResponsiveMenuOpen,
+              hasIcon,
+              icon,
+              isResponsive,
+              isHiddenByDefault,
+              overlayBackgroundColor,
+              overlayTextColor,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_unsaved_inner_blocks.default,
+                {
+                  createNavigationMenu,
+                  blocks: uncontrolledInnerBlocks,
+                  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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
-      ...blockProps,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_menuInspectorControls.default, {
-        clientId: clientId,
-        createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
-        createNavigationMenuIsError: createNavigationMenuIsError,
-        currentMenuId: ref,
-        isNavigationMenuMissing: isNavigationMenuMissing,
-        isManageMenusButtonDisabled: isManageMenusButtonDisabled,
-        onCreateNew: createUntitledEmptyNavigationMenu,
-        onSelectClassicMenu: onSelectClassicMenu,
-        onSelectNavigationMenu: onSelectNavigationMenu,
-        isLoading: isLoading,
-        blockEditingMode: blockEditingMode
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_deletedNavigationWarning.default, {
-        onCreateNew: createUntitledEmptyNavigationMenu
-      })]
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TagName, { ...blockProps, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_menu_inspector_controls.default,
+        {
+          clientId,
+          createNavigationMenuIsSuccess,
+          createNavigationMenuIsError,
+          currentMenuId: ref,
+          isNavigationMenuMissing,
+          isManageMenusButtonDisabled,
+          onCreateNew: createUntitledEmptyNavigationMenu,
+          onSelectClassicMenu,
+          onSelectNavigationMenu,
+          isLoading,
+          blockEditingMode
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_deleted_navigation_warning.default,
+        {
+          onCreateNew: createUntitledEmptyNavigationMenu
+        }
+      )
+    ] });
   }
   if (isEntityAvailable && hasAlreadyRendered) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      ...blockProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.Warning, {
-        children: (0, _i18n.__)('Block cannot be rendered inside itself.')
-      })
-    });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.Warning, { children: (0, import_i18n.__)("Block cannot be rendered inside itself.") }) });
   }
-  const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : _placeholder.default;
-
-  /**
-   * 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.
-   *
-   */
-
+  const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : import_placeholder.default;
   if (isPlaceholder && CustomPlaceholder) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
-      ...blockProps,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PlaceholderComponent, {
-        isSelected: isSelected,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagName, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PlaceholderComponent,
+      {
+        isSelected,
         currentMenuId: ref,
-        clientId: clientId,
-        canUserCreateNavigationMenus: canUserCreateNavigationMenus,
-        isResolvingCanUserCreateNavigationMenus: isResolvingCanUserCreateNavigationMenus,
-        onSelectNavigationMenu: onSelectNavigationMenu,
-        onSelectClassicMenu: onSelectClassicMenu,
+        clientId,
+        canUserCreateNavigationMenus,
+        isResolvingCanUserCreateNavigationMenus,
+        onSelectNavigationMenu,
+        onSelectClassicMenu,
         onCreateEmpty: createUntitledEmptyNavigationMenu
-      })
-    });
+      }
+    ) });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_coreData.EntityProvider, {
-    kind: "postType",
-    type: "wp_navigation",
-    id: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.RecursionProvider, {
-      uniqueId: recursionId,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_menuInspectorControls.default, {
-        clientId: clientId,
-        createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
-        createNavigationMenuIsError: createNavigationMenuIsError,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core_data.EntityProvider, { kind: "postType", type: "wp_navigation", id: ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.RecursionProvider, { uniqueId: recursionId, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_menu_inspector_controls.default,
+      {
+        clientId,
+        createNavigationMenuIsSuccess,
+        createNavigationMenuIsError,
         currentMenuId: ref,
-        isNavigationMenuMissing: isNavigationMenuMissing,
-        isManageMenusButtonDisabled: isManageMenusButtonDisabled,
+        isNavigationMenuMissing,
+        isManageMenusButtonDisabled,
         onCreateNew: createUntitledEmptyNavigationMenu,
-        onSelectClassicMenu: onSelectClassicMenu,
-        onSelectNavigationMenu: onSelectNavigationMenu,
-        isLoading: isLoading,
-        blockEditingMode: blockEditingMode
-      }), blockEditingMode === 'default' && stylingInspectorControls, blockEditingMode === 'contentOnly' && isEntityAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(NavigationAddPageButton, {
-        clientId: clientId
-      }), blockEditingMode === 'default' && isEntityAvailable && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_blockEditor.InspectorControls, {
-        group: "advanced",
-        children: [hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationMenuNameControl.default, {}), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationMenuDeleteControl.default, {
+        onSelectClassicMenu,
+        onSelectNavigationMenu,
+        isLoading,
+        blockEditingMode
+      }
+    ),
+    blockEditingMode === "default" && stylingInspectorControls,
+    blockEditingMode === "contentOnly" && isEntityAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationAddPageButton, { clientId }),
+    blockEditingMode === "default" && isEntityAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.InspectorControls, { group: "advanced", children: [
+      hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_menu_name_control.default, {}),
+      hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_navigation_menu_delete_control.default,
+        {
           onDelete: () => {
             replaceInnerBlocks(clientId, []);
-            showNavigationMenuStatusNotice((0, _i18n.__)('Navigation Menu successfully deleted.'));
+            showNavigationMenuStatusNotice(
+              (0, import_i18n.__)(
+                "Navigation Menu successfully deleted."
+              )
+            );
           }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_manageMenusButton.default, {
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_manage_menus_button.default,
+        {
           disabled: isManageMenusButtonDisabled,
           className: "wp-block-navigation-manage-menus-button"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TagName, {
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      TagName,
+      {
         ...blockProps,
-        "aria-describedby": !isPlaceholder && !isLoading ? accessibleDescriptionId : undefined,
-        children: [isLoading && !isHiddenByDefault && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "wp-block-navigation__loading-indicator-container",
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Spinner, {
-            className: "wp-block-navigation__loading-indicator"
-          })
-        }), (!isLoading || isHiddenByDefault) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_accessibleMenuDescription.default, {
-            id: accessibleDescriptionId
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_responsiveWrapper.default, {
-            id: clientId,
-            onToggle: setResponsiveMenuVisibility,
-            hasIcon: hasIcon,
-            icon: icon,
-            isOpen: isResponsiveMenuOpen,
-            isResponsive: isResponsive,
-            isHiddenByDefault: isHiddenByDefault,
-            overlayBackgroundColor: overlayBackgroundColor,
-            overlayTextColor: overlayTextColor,
-            children: isEntityAvailable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_innerBlocks.default, {
-              clientId: clientId,
-              hasCustomPlaceholder: !!CustomPlaceholder,
-              templateLock: templateLock,
-              orientation: orientation
-            })
-          })]
-        })]
-      })]
-    })
-  });
+        "aria-describedby": !isPlaceholder && !isLoading ? accessibleDescriptionId : void 0,
+        children: [
+          isLoading && !isHiddenByDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wp-block-navigation__loading-indicator-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, { className: "wp-block-navigation__loading-indicator" }) }),
+          (!isLoading || isHiddenByDefault) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_accessible_menu_description.default,
+              {
+                id: accessibleDescriptionId
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_responsive_wrapper.default,
+              {
+                id: clientId,
+                onToggle: setResponsiveMenuVisibility,
+                hasIcon,
+                icon,
+                isOpen: isResponsiveMenuOpen,
+                isResponsive,
+                isHiddenByDefault,
+                overlayBackgroundColor,
+                overlayTextColor,
+                children: isEntityAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_inner_blocks.default,
+                  {
+                    clientId,
+                    hasCustomPlaceholder: !!CustomPlaceholder,
+                    templateLock,
+                    orientation
+                  }
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] }) });
 }
-var _default = exports.default = (0, _blockEditor.withColors)({
-  textColor: 'color'
-}, {
-  backgroundColor: 'color'
-}, {
-  overlayBackgroundColor: 'color'
-}, {
-  overlayTextColor: 'color'
-})(Navigation);
-//# sourceMappingURL=index.js.map
+var edit_default = (0, import_block_editor.withColors)(
+  { textColor: "color" },
+  { backgroundColor: "color" },
+  { overlayBackgroundColor: "color" },
+  { overlayTextColor: "color" }
+)(Navigation);
+//# sourceMappingURL=index.js.map