@wordpress/block-library 9.38.0 → 9.39.0

package/build/navigation/edit/deleted-overlay-warning.cjs

@@ -0,0 +1,70 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/block-library/src/navigation/edit/deleted-overlay-warning.js
+var deleted_overlay_warning_exports = {};
+__export(deleted_overlay_warning_exports, {
+  default: () => deleted_overlay_warning_default
+});
+module.exports = __toCommonJS(deleted_overlay_warning_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_element = require("@wordpress/element");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DeletedOverlayWarning({ onClear, onCreate, isCreating = false }) {
+  const message = (0, import_element.createInterpolateElement)(
+    (0, import_i18n.__)(
+      "The selected overlay template part is missing or has been deleted. <clearButton>Reset to default overlay</clearButton> or <createButton>create a new overlay</createButton>."
+    ),
+    {
+      clearButton: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Button,
+        {
+          __next40pxDefaultSize: true,
+          onClick: onClear,
+          variant: "link",
+          disabled: isCreating,
+          accessibleWhenDisabled: true
+        }
+      ),
+      createButton: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Button,
+        {
+          __next40pxDefaultSize: true,
+          onClick: onCreate,
+          variant: "link",
+          disabled: isCreating,
+          accessibleWhenDisabled: true,
+          isBusy: isCreating
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Notice,
+    {
+      status: "warning",
+      isDismissible: false,
+      className: "wp-block-navigation__deleted-overlay-warning",
+      children: message
+    }
+  );
+}
+var deleted_overlay_warning_default = DeletedOverlayWarning;
+//# sourceMappingURL=deleted-overlay-warning.cjs.map

package/build/navigation/edit/deleted-overlay-warning.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/edit/deleted-overlay-warning.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Notice, Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { createInterpolateElement } from '@wordpress/element';\n\n/**\n * Warning displayed when a selected overlay template part has been deleted.\n *\n * @param {Object}   props            Component props.\n * @param {Function} props.onClear    Callback to clear the overlay selection.\n * @param {Function} props.onCreate   Callback to create a new overlay.\n * @param {boolean}  props.isCreating Whether a new overlay is being created.\n * @return {JSX.Element} The deleted overlay warning component.\n */\nfunction DeletedOverlayWarning( { onClear, onCreate, isCreating = false } ) {\n\tconst message = createInterpolateElement(\n\t\t__(\n\t\t\t'The selected overlay template part is missing or has been deleted. <clearButton>Reset to default overlay</clearButton> or <createButton>create a new overlay</createButton>.'\n\t\t),\n\t\t{\n\t\t\tclearButton: (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tonClick={ onClear }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tdisabled={ isCreating }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t/>\n\t\t\t),\n\t\t\tcreateButton: (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tonClick={ onCreate }\n\t\t\t\t\tvariant=\"link\"\n\t\t\t\t\tdisabled={ isCreating }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\tisBusy={ isCreating }\n\t\t\t\t/>\n\t\t\t),\n\t\t}\n\t);\n\n\treturn (\n\t\t<Notice\n\t\t\tstatus=\"warning\"\n\t\t\tisDismissible={ false }\n\t\t\tclassName=\"wp-block-navigation__deleted-overlay-warning\"\n\t\t>\n\t\t\t{ message }\n\t\t</Notice>\n\t);\n}\n\nexport default DeletedOverlayWarning;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA+B;AAC/B,kBAAmB;AACnB,qBAAyC;AAkBrC;AAPJ,SAAS,sBAAuB,EAAE,SAAS,UAAU,aAAa,MAAM,GAAI;AAC3E,QAAM,cAAU;AAAA,QACf;AAAA,MACC;AAAA,IACD;AAAA,IACA;AAAA,MACC,aACC;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,SAAU;AAAA,UACV,SAAQ;AAAA,UACR,UAAW;AAAA,UACX,wBAAsB;AAAA;AAAA,MACvB;AAAA,MAED,cACC;AAAA,QAAC;AAAA;AAAA,UACA,uBAAqB;AAAA,UACrB,SAAU;AAAA,UACV,SAAQ;AAAA,UACR,UAAW;AAAA,UACX,wBAAsB;AAAA,UACtB,QAAS;AAAA;AAAA,MACV;AAAA,IAEF;AAAA,EACD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAO;AAAA,MACP,eAAgB;AAAA,MAChB,WAAU;AAAA,MAER;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,kCAAQ;",
+  "names": []
+}

package/build/navigation/edit/index.cjs

@@ -68,7 +68,9 @@ var import_accessible_description = __toESM(require("./accessible-description.cj
 var import_accessible_menu_description = __toESM(require("./accessible-menu-description.cjs"));
 var import_lock_unlock = require("../../lock-unlock.cjs");
 var import_hooks = require("../../utils/hooks.cjs");
+var import_is_within_overlay = require("../../utils/is-within-overlay.cjs");
 var import_constants = require("../constants.cjs");
+var import_get_submenu_visibility = require("../utils/get-submenu-visibility.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function NavigationAddPageButton({ clientId }) {
   const { insertBlock } = (0, import_data.useDispatch)(import_block_editor.store);
@@ -111,6 +113,7 @@ function ColorTools({
     setDetectedOverlayBackgroundColor
   ] = (0, import_element.useState)();
   const [detectedOverlayColor, setDetectedOverlayColor] = (0, import_element.useState)();
+  const isWithinOverlay = (0, import_data.useSelect)(() => (0, import_is_within_overlay.isWithinNavigationOverlay)(), []);
   const enableContrastChecking = import_element.Platform.OS === "web";
   (0, import_element.useEffect)(() => {
     if (!enableContrastChecking) {
@@ -144,45 +147,48 @@ function ColorTools({
   if (!colorGradientSettings.hasColorsOrGradients) {
     return null;
   }
+  const colorSettings = [
+    {
+      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
+    }
+  ];
+  colorSettings.push(
+    {
+      colorValue: overlayTextColor.color,
+      label: hasCustomOverlay || isWithinOverlay ? (0, import_i18n.__)("Submenu text") : (0, import_i18n.__)("Submenu & overlay text"),
+      onColorChange: setOverlayTextColor,
+      resetAllFilter: () => setOverlayTextColor(),
+      clearable: true,
+      enableAlpha: true
+    },
+    {
+      colorValue: overlayBackgroundColor.color,
+      label: hasCustomOverlay || isWithinOverlay ? (0, import_i18n.__)("Submenu background") : (0, import_i18n.__)("Submenu & overlay background"),
+      onColorChange: setOverlayBackgroundColor,
+      resetAllFilter: () => setOverlayBackgroundColor(),
+      clearable: true,
+      enableAlpha: true
+    }
+  );
   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: hasCustomOverlay ? (0, import_i18n.__)("Submenu text") : (0, import_i18n.__)("Submenu & overlay text"),
-            onColorChange: setOverlayTextColor,
-            resetAllFilter: () => setOverlayTextColor(),
-            clearable: true,
-            enableAlpha: true
-          },
-          {
-            colorValue: overlayBackgroundColor.color,
-            label: hasCustomOverlay ? (0, import_i18n.__)("Submenu background") : (0, import_i18n.__)("Submenu & overlay background"),
-            onColorChange: setOverlayBackgroundColor,
-            resetAllFilter: () => setOverlayBackgroundColor(),
-            clearable: true,
-            enableAlpha: true
-          }
-        ],
+        settings: colorSettings,
         panelId: clientId,
         ...colorGradientSettings,
         gradients: [],
@@ -227,7 +233,7 @@ function Navigation({
   __unstableLayoutClassNames: layoutClassNames
 }) {
   const {
-    openSubmenusOnClick,
+    submenuVisibility,
     overlayMenu,
     overlay,
     showSubmenuIcon,
@@ -247,16 +253,31 @@ function Navigation({
     },
     [setAttributes]
   );
+  (0, import_element.useEffect)(() => {
+    if (orientation === "horizontal" && submenuVisibility === "always") {
+      setAttributes({
+        submenuVisibility: "hover",
+        showSubmenuIcon: true
+      });
+    }
+  }, [orientation, submenuVisibility, setAttributes]);
   const recursionId = `navigationMenu/${ref}`;
-  const hasAlreadyRendered = (0, import_block_editor.useHasRecursion)(recursionId);
+  const recursionDetected = (0, import_block_editor.useHasRecursion)(recursionId);
+  const { isPreviewMode, onNavigateToEntityRecord, currentTheme } = (0, import_data.useSelect)(
+    (select) => {
+      const { getSettings } = select(import_block_editor.store);
+      const settings = getSettings();
+      return {
+        isPreviewMode: settings.isPreviewMode,
+        onNavigateToEntityRecord: settings?.onNavigateToEntityRecord,
+        // Needed to construct the template part ID for the overlay preview.
+        currentTheme: select(import_core_data.store).getCurrentTheme()?.stylesheet
+      };
+    },
+    []
+  );
+  const hasAlreadyRendered = isPreviewMode ? false : recursionDetected;
   const blockEditingMode = (0, import_block_editor.useBlockEditingMode)();
-  const { onNavigateToEntityRecord } = (0, import_data.useSelect)((select) => {
-    const { getSettings } = select(import_block_editor.store);
-    const settings = getSettings();
-    return {
-      onNavigateToEntityRecord: settings?.onNavigateToEntityRecord
-    };
-  }, []);
   const isOverlayExperimentEnabled = typeof window !== "undefined" && window.__experimentalNavigationOverlays === true;
   const { menus: classicMenus } = (0, import_use_navigation_entities.default)();
   const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = (0, import_use_navigation_notice.default)({
@@ -346,7 +367,8 @@ function Navigation({
     __unstableMarkNextChangeAsNotPersistent
   ]);
   const navRef = (0, import_element.useRef)();
-  const TagName = "nav";
+  const isWithinOverlay = (0, import_data.useSelect)(() => (0, import_is_within_overlay.isWithinNavigationOverlay)(), []);
+  const TagName = isWithinOverlay ? "div" : "nav";
   const isPlaceholder = !ref && !isCreatingNavigationMenu && !isConvertingClassicMenu && hasResolvedNavigationMenus && classicMenus?.length === 0 && !hasUncontrolledInnerBlocks;
   const isLoading = !hasResolvedNavigationMenus || isCreatingNavigationMenu || isConvertingClassicMenu || !!(ref && !isEntityAvailable && !isConvertingClassicMenu);
   const textDecoration = attributes.style?.typography?.textDecoration;
@@ -356,6 +378,32 @@ function Navigation({
     ),
     [clientId]
   );
+  const hasSetOverlayDefault = (0, import_element.useRef)(false);
+  (0, import_element.useEffect)(() => {
+    if (!isWithinOverlay) {
+      return;
+    }
+    if (overlayMenu !== "never") {
+      setAttributes({ overlayMenu: "never" });
+    }
+    if (!hasSetOverlayDefault.current && !ref) {
+      hasSetOverlayDefault.current = true;
+      setAttributes({
+        submenuVisibility: "always",
+        layout: {
+          ...attributes.layout,
+          orientation: "vertical"
+        },
+        showSubmenuIcon: false
+      });
+    }
+  }, [
+    attributes.layout,
+    isWithinOverlay,
+    overlayMenu,
+    ref,
+    setAttributes
+  ]);
   const isResponsive = "never" !== overlayMenu;
   const blockProps = (0, import_block_editor.useBlockProps)({
     ref: navRef,
@@ -484,7 +532,8 @@ function Navigation({
     "wp-block-navigation__overlay-menu-preview",
     { open: overlayMenuPreview }
   );
-  const submenuAccessibilityNotice = !showSubmenuIcon && !openSubmenusOnClick ? (0, import_i18n.__)(
+  const computedSubmenuVisibility = (0, import_get_submenu_visibility.getSubmenuVisibility)(attributes);
+  const submenuAccessibilityNotice = !showSubmenuIcon && computedSubmenuVisibility !== "click" && computedSubmenuVisibility !== "always" ? (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);
@@ -507,7 +556,7 @@ function Navigation({
         resetAll: () => {
           setAttributes({
             showSubmenuIcon: true,
-            openSubmenusOnClick: false,
+            submenuVisibility: "hover",
             overlayMenu: "mobile",
             hasIcon: true,
             icon: "handle"
@@ -556,27 +605,55 @@ function Navigation({
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_components.__experimentalToolsPanelItem,
               {
-                hasValue: () => openSubmenusOnClick,
-                label: (0, import_i18n.__)("Open on click"),
+                hasValue: () => submenuVisibility !== "hover",
+                label: (0, import_i18n.__)("Submenu Visibility"),
                 onDeselect: () => setAttributes({
-                  openSubmenusOnClick: false,
-                  showSubmenuIcon: true
+                  submenuVisibility: "hover"
                 }),
                 isShownByDefault: true,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                  import_components.ToggleControl,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  import_components.__experimentalToggleGroupControl,
                   {
-                    checked: openSubmenusOnClick,
+                    __nextHasNoMarginBottom: true,
+                    __next40pxDefaultSize: true,
+                    label: (0, import_i18n.__)("Submenu Visibility"),
+                    value: submenuVisibility,
                     onChange: (value) => {
-                      setAttributes({
-                        openSubmenusOnClick: value,
-                        ...value && {
-                          showSubmenuIcon: true
-                        }
-                        // Make sure arrows are shown when we toggle this on.
-                      });
+                      const newAttributes = {
+                        submenuVisibility: value
+                      };
+                      const prevSubmenuVisibility = submenuVisibility;
+                      if (value === "always") {
+                        newAttributes.showSubmenuIcon = false;
+                      } else if (value === "click" || prevSubmenuVisibility === "always") {
+                        newAttributes.showSubmenuIcon = true;
+                      }
+                      setAttributes(newAttributes);
                     },
-                    label: (0, import_i18n.__)("Open on click")
+                    isBlock: true,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_components.__experimentalToggleGroupControlOption,
+                        {
+                          value: "hover",
+                          label: (0, import_i18n.__)("Hover")
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_components.__experimentalToggleGroupControlOption,
+                        {
+                          value: "click",
+                          label: (0, import_i18n.__)("Click")
+                        }
+                      ),
+                      orientation === "vertical" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        import_components.__experimentalToggleGroupControlOption,
+                        {
+                          value: "always",
+                          label: (0, import_i18n.__)("Always")
+                        }
+                      )
+                    ]
                   }
                 )
               }
@@ -589,7 +666,7 @@ function Navigation({
                 onDeselect: () => setAttributes({
                   showSubmenuIcon: true
                 }),
-                isDisabled: attributes.openSubmenusOnClick,
+                isDisabled: computedSubmenuVisibility === "click" || computedSubmenuVisibility === "always",
                 isShownByDefault: true,
                 children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_components.ToggleControl,
@@ -600,7 +677,7 @@ function Navigation({
                         showSubmenuIcon: value
                       });
                     },
-                    disabled: attributes.openSubmenusOnClick,
+                    disabled: computedSubmenuVisibility === "click" || computedSubmenuVisibility === "always",
                     label: (0, import_i18n.__)("Show arrow")
                   }
                 )
@@ -620,7 +697,7 @@ function Navigation({
         ]
       }
     ) }),
-    isOverlayExperimentEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    isOverlayExperimentEnabled && !isWithinOverlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_overlay_panel.default,
       {
         overlayMenu,
@@ -633,7 +710,8 @@ function Navigation({
         icon,
         overlayMenuPreviewClasses,
         overlayMenuPreviewId,
-        isResponsive
+        isResponsive,
+        currentTheme
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "color", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(