@wordpress/block-library 9.36.2-next.8fd3f8831.0 → 9.37.2-next.79a2f3cdd.0

package/build-module/navigation/edit/overlay-menu-icon.mjs

@@ -0,0 +1,28 @@
+// packages/block-library/src/navigation/edit/overlay-menu-icon.js
+import { SVG, Rect } from "@wordpress/primitives";
+import { Icon, menu } from "@wordpress/icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OverlayMenuIcon({ icon }) {
+  if (icon === "menu") {
+    return /* @__PURE__ */ jsx(Icon, { icon: menu });
+  }
+  return /* @__PURE__ */ jsxs(
+    SVG,
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: "24",
+      height: "24",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: [
+        /* @__PURE__ */ jsx(Rect, { x: "4", y: "7.5", width: "16", height: "1.5" }),
+        /* @__PURE__ */ jsx(Rect, { x: "4", y: "15", width: "16", height: "1.5" })
+      ]
+    }
+  );
+}
+export {
+  OverlayMenuIcon as default
+};
+//# sourceMappingURL=overlay-menu-icon.mjs.map

package/build-module/navigation/edit/overlay-menu-preview-button.mjs

@@ -0,0 +1,65 @@
+// packages/block-library/src/navigation/edit/overlay-menu-preview-button.js
+import { Button, __experimentalVStack as VStack } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { Icon, close } from "@wordpress/icons";
+import OverlayMenuIcon from "./overlay-menu-icon.mjs";
+import OverlayMenuPreviewControls from "./overlay-menu-preview-controls.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function OverlayMenuPreviewButton({
+  isResponsive,
+  overlayMenuPreview,
+  setOverlayMenuPreview,
+  hasIcon,
+  icon,
+  setAttributes,
+  overlayMenuPreviewClasses,
+  overlayMenuPreviewId,
+  containerStyle
+}) {
+  if (!isResponsive) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        className: overlayMenuPreviewClasses,
+        onClick: () => setOverlayMenuPreview(!overlayMenuPreview),
+        "aria-label": __("Overlay menu controls"),
+        "aria-controls": overlayMenuPreviewId,
+        "aria-expanded": overlayMenuPreview,
+        children: [
+          hasIcon && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(OverlayMenuIcon, { icon }),
+            /* @__PURE__ */ jsx(Icon, { icon: close })
+          ] }),
+          !hasIcon && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { children: __("Menu") }),
+            /* @__PURE__ */ jsx("span", { children: __("Close") })
+          ] })
+        ]
+      }
+    ),
+    overlayMenuPreview && /* @__PURE__ */ jsx(
+      VStack,
+      {
+        id: overlayMenuPreviewId,
+        spacing: 4,
+        style: containerStyle,
+        children: /* @__PURE__ */ jsx(
+          OverlayMenuPreviewControls,
+          {
+            hasIcon,
+            icon,
+            setAttributes
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  OverlayMenuPreviewButton as default
+};
+//# sourceMappingURL=overlay-menu-preview-button.mjs.map

package/build-module/navigation/edit/overlay-menu-preview-controls.mjs

@@ -0,0 +1,62 @@
+// packages/block-library/src/navigation/edit/overlay-menu-preview-controls.js
+import {
+  __experimentalVStack as VStack,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  ToggleControl
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import OverlayMenuIcon from "./overlay-menu-icon.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OverlayMenuPreviewControls({
+  hasIcon,
+  icon,
+  setAttributes
+}) {
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+    /* @__PURE__ */ jsx(
+      ToggleControl,
+      {
+        label: __("Show icon button"),
+        help: __(
+          "Configure the visual appearance of the button that toggles the overlay menu."
+        ),
+        onChange: (value) => setAttributes({ hasIcon: value }),
+        checked: hasIcon
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      ToggleGroupControl,
+      {
+        __next40pxDefaultSize: true,
+        className: "wp-block-navigation__overlay-menu-icon-toggle-group",
+        label: __("Icon"),
+        value: icon,
+        onChange: (value) => setAttributes({ icon: value }),
+        isBlock: true,
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleGroupControlOption,
+            {
+              value: "handle",
+              "aria-label": __("handle"),
+              label: /* @__PURE__ */ jsx(OverlayMenuIcon, { icon: "handle" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToggleGroupControlOption,
+            {
+              value: "menu",
+              "aria-label": __("menu"),
+              label: /* @__PURE__ */ jsx(OverlayMenuIcon, { icon: "menu" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  OverlayMenuPreviewControls as default
+};
+//# sourceMappingURL=overlay-menu-preview-controls.mjs.map

package/build-module/navigation/edit/overlay-menu-preview.mjs

@@ -0,0 +1,76 @@
+// packages/block-library/src/navigation/edit/overlay-menu-preview.js
+import {
+  ToggleControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+  __experimentalToolsPanelItem as ToolsPanelItem
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import OverlayMenuIcon from "./overlay-menu-icon.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function OverlayMenuPreview({ setAttributes, hasIcon, icon }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ToolsPanelItem,
+      {
+        label: __("Show icon button"),
+        isShownByDefault: true,
+        hasValue: () => !hasIcon,
+        onDeselect: () => setAttributes({ hasIcon: true }),
+        children: /* @__PURE__ */ jsx(
+          ToggleControl,
+          {
+            label: __("Show icon button"),
+            help: __(
+              "Configure the visual appearance of the button that toggles the overlay menu."
+            ),
+            onChange: (value) => setAttributes({ hasIcon: value }),
+            checked: hasIcon
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ToolsPanelItem,
+      {
+        label: __("Icon"),
+        isShownByDefault: true,
+        hasValue: () => icon !== "handle",
+        onDeselect: () => setAttributes({ icon: "handle" }),
+        children: /* @__PURE__ */ jsxs(
+          ToggleGroupControl,
+          {
+            __next40pxDefaultSize: true,
+            className: "wp-block-navigation__overlay-menu-icon-toggle-group",
+            label: __("Icon"),
+            value: icon,
+            onChange: (value) => setAttributes({ icon: value }),
+            isBlock: true,
+            children: [
+              /* @__PURE__ */ jsx(
+                ToggleGroupControlOption,
+                {
+                  value: "handle",
+                  "aria-label": __("handle"),
+                  label: /* @__PURE__ */ jsx(OverlayMenuIcon, { icon: "handle" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToggleGroupControlOption,
+                {
+                  value: "menu",
+                  "aria-label": __("menu"),
+                  label: /* @__PURE__ */ jsx(OverlayMenuIcon, { icon: "menu" })
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  OverlayMenuPreview as default
+};
+//# sourceMappingURL=overlay-menu-preview.mjs.map

package/build-module/navigation/edit/overlay-panel.mjs

@@ -0,0 +1,58 @@
+// packages/block-library/src/navigation/edit/overlay-panel.js
+import {
+  PanelBody,
+  __experimentalVStack as VStack
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import OverlayTemplatePartSelector from "./overlay-template-part-selector.mjs";
+import OverlayVisibilityControl from "./overlay-visibility-control.mjs";
+import OverlayMenuPreviewButton from "./overlay-menu-preview-button.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OverlayPanel({
+  overlayMenu,
+  overlay,
+  setAttributes,
+  onNavigateToEntityRecord,
+  overlayMenuPreview,
+  setOverlayMenuPreview,
+  hasIcon,
+  icon,
+  overlayMenuPreviewClasses,
+  overlayMenuPreviewId,
+  isResponsive
+}) {
+  return /* @__PURE__ */ jsx(PanelBody, { title: __("Overlay"), initialOpen: true, children: /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+    /* @__PURE__ */ jsx(
+      OverlayVisibilityControl,
+      {
+        overlayMenu,
+        setAttributes
+      }
+    ),
+    overlayMenu !== "never" && /* @__PURE__ */ jsx(
+      OverlayMenuPreviewButton,
+      {
+        isResponsive,
+        overlayMenuPreview,
+        setOverlayMenuPreview,
+        hasIcon,
+        icon,
+        setAttributes,
+        overlayMenuPreviewClasses,
+        overlayMenuPreviewId
+      }
+    ),
+    overlayMenu !== "never" && /* @__PURE__ */ jsx(
+      OverlayTemplatePartSelector,
+      {
+        overlay,
+        setAttributes,
+        onNavigateToEntityRecord
+      }
+    )
+  ] }) });
+}
+export {
+  OverlayPanel as default
+};
+//# sourceMappingURL=overlay-panel.mjs.map

package/build-module/navigation/edit/overlay-template-part-selector.mjs

@@ -0,0 +1,182 @@
+// packages/block-library/src/navigation/edit/overlay-template-part-selector.js
+import { useMemo, useState, useCallback } from "@wordpress/element";
+import { useEntityRecords } from "@wordpress/core-data";
+import { useDispatch } from "@wordpress/data";
+import {
+  SelectControl,
+  Button,
+  FlexBlock,
+  FlexItem,
+  __experimentalHStack as HStack
+} from "@wordpress/components";
+import { __, sprintf } from "@wordpress/i18n";
+import { decodeEntities } from "@wordpress/html-entities";
+import { store as noticesStore } from "@wordpress/notices";
+import { plus } from "@wordpress/icons";
+import { createTemplatePartId } from "../../template-part/edit/utils/create-template-part-id.mjs";
+import useCreateOverlayTemplatePart from "./use-create-overlay.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OverlayTemplatePartSelector({
+  overlay,
+  setAttributes,
+  onNavigateToEntityRecord
+}) {
+  const {
+    records: templateParts,
+    isResolving,
+    hasResolved
+  } = useEntityRecords("postType", "wp_template_part", {
+    per_page: -1
+  });
+  const { createErrorNotice } = useDispatch(noticesStore);
+  const [isCreating, setIsCreating] = useState(false);
+  const overlayTemplateParts = useMemo(() => {
+    if (!templateParts) {
+      return [];
+    }
+    return templateParts.filter(
+      (templatePart) => templatePart.area === "overlay"
+    );
+  }, [templateParts]);
+  const createOverlayTemplatePart = useCreateOverlayTemplatePart(overlayTemplateParts);
+  const options = useMemo(() => {
+    const baseOptions = [
+      {
+        label: __("None (default)"),
+        value: ""
+      }
+    ];
+    if (!hasResolved || isResolving) {
+      return baseOptions;
+    }
+    const templatePartOptions = overlayTemplateParts.map(
+      (templatePart) => {
+        const templatePartId = createTemplatePartId(
+          templatePart.theme,
+          templatePart.slug
+        );
+        const label = templatePart.title?.rendered ? decodeEntities(templatePart.title.rendered) : templatePart.slug;
+        return {
+          label,
+          value: templatePartId
+        };
+      }
+    );
+    return [...baseOptions, ...templatePartOptions];
+  }, [overlayTemplateParts, hasResolved, isResolving]);
+  const selectedTemplatePart = useMemo(() => {
+    if (!overlay || !overlayTemplateParts) {
+      return null;
+    }
+    return overlayTemplateParts.find((templatePart) => {
+      const templatePartId = createTemplatePartId(
+        templatePart.theme,
+        templatePart.slug
+      );
+      return templatePartId === overlay;
+    });
+  }, [overlay, overlayTemplateParts]);
+  const handleSelectChange = (value) => {
+    setAttributes({
+      overlay: value || void 0
+    });
+  };
+  const handleEditClick = () => {
+    if (!overlay || !onNavigateToEntityRecord) {
+      return;
+    }
+    onNavigateToEntityRecord({
+      postId: overlay,
+      postType: "wp_template_part"
+    });
+  };
+  const handleCreateOverlay = useCallback(async () => {
+    try {
+      setIsCreating(true);
+      const templatePart = await createOverlayTemplatePart();
+      setAttributes({
+        overlay: templatePart.id
+      });
+      if (onNavigateToEntityRecord) {
+        onNavigateToEntityRecord({
+          postId: templatePart.id,
+          postType: "wp_template_part"
+        });
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error && "code" in error && error.message && error.code !== "unknown_error" ? error.message : __("An error occurred while creating the overlay.");
+      createErrorNotice(errorMessage, { type: "snackbar" });
+    } finally {
+      setIsCreating(false);
+    }
+  }, [
+    createOverlayTemplatePart,
+    setAttributes,
+    onNavigateToEntityRecord,
+    createErrorNotice
+  ]);
+  const isCreateButtonDisabled = isResolving || isCreating;
+  const helpText = useMemo(() => {
+    if (overlayTemplateParts.length === 0 && hasResolved) {
+      return __("No overlays found.");
+    }
+    return __("Select an overlay for navigation.");
+  }, [overlayTemplateParts.length, hasResolved]);
+  const editButtonLabel = useMemo(() => {
+    return selectedTemplatePart ? sprintf(
+      /* translators: %s: Overlay title. */
+      __("Edit overlay: %s"),
+      selectedTemplatePart.title?.rendered ? decodeEntities(selectedTemplatePart.title.rendered) : selectedTemplatePart.slug
+    ) : __("Edit overlay");
+  }, [selectedTemplatePart]);
+  return /* @__PURE__ */ jsxs("div", { className: "wp-block-navigation__overlay-selector", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        icon: plus,
+        onClick: handleCreateOverlay,
+        disabled: isCreateButtonDisabled,
+        accessibleWhenDisabled: true,
+        isBusy: isCreating,
+        label: __("Create new overlay template"),
+        showTooltip: true,
+        className: "wp-block-navigation__overlay-create-button"
+      }
+    ),
+    /* @__PURE__ */ jsxs(HStack, { alignment: "flex-start", children: [
+      /* @__PURE__ */ jsx(FlexBlock, { children: /* @__PURE__ */ jsx(
+        SelectControl,
+        {
+          __next40pxDefaultSize: true,
+          __nextHasNoMarginBottom: true,
+          label: __("Overlay template"),
+          value: overlay || "",
+          options,
+          onChange: handleSelectChange,
+          disabled: isResolving,
+          accessibleWhenDisabled: true,
+          help: helpText
+        }
+      ) }),
+      overlay && hasResolved && selectedTemplatePart && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          __next40pxDefaultSize: true,
+          variant: "secondary",
+          onClick: handleEditClick,
+          disabled: !onNavigateToEntityRecord,
+          accessibleWhenDisabled: true,
+          label: editButtonLabel,
+          showTooltip: true,
+          className: "wp-block-navigation__overlay-edit-button",
+          children: __("Edit")
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  OverlayTemplatePartSelector as default
+};
+//# sourceMappingURL=overlay-template-part-selector.mjs.map

package/build-module/navigation/edit/overlay-visibility-control.mjs

@@ -0,0 +1,35 @@
+// packages/block-library/src/navigation/edit/overlay-visibility-control.js
+import {
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption
+} from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OverlayVisibilityControl({
+  overlayMenu,
+  setAttributes
+}) {
+  return /* @__PURE__ */ jsxs(
+    ToggleGroupControl,
+    {
+      __next40pxDefaultSize: true,
+      label: __("Overlay Visibility"),
+      "aria-label": __("Configure overlay visibility"),
+      value: overlayMenu,
+      help: __(
+        "Collapses the navigation options in a menu icon opening an overlay."
+      ),
+      onChange: (value) => setAttributes({ overlayMenu: value }),
+      isBlock: true,
+      children: [
+        /* @__PURE__ */ jsx(ToggleGroupControlOption, { value: "never", label: __("Off") }),
+        /* @__PURE__ */ jsx(ToggleGroupControlOption, { value: "mobile", label: __("Mobile") }),
+        /* @__PURE__ */ jsx(ToggleGroupControlOption, { value: "always", label: __("Always") })
+      ]
+    }
+  );
+}
+export {
+  OverlayVisibilityControl as default
+};
+//# sourceMappingURL=overlay-visibility-control.mjs.map

package/build-module/navigation/edit/placeholder/index.mjs

@@ -0,0 +1,76 @@
+// packages/block-library/src/navigation/edit/placeholder/index.js
+import { Placeholder, Button, Spinner } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { navigation, Icon } from "@wordpress/icons";
+import { speak } from "@wordpress/a11y";
+import { useEffect } from "@wordpress/element";
+import useNavigationEntities from "../../use-navigation-entities.mjs";
+import PlaceholderPreview from "./placeholder-preview.mjs";
+import NavigationMenuSelector from "../navigation-menu-selector.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function NavigationPlaceholder({
+  isSelected,
+  currentMenuId,
+  clientId,
+  canUserCreateNavigationMenus = false,
+  isResolvingCanUserCreateNavigationMenus,
+  onSelectNavigationMenu,
+  onSelectClassicMenu,
+  onCreateEmpty
+}) {
+  const { isResolvingMenus, hasResolvedMenus } = useNavigationEntities();
+  useEffect(() => {
+    if (!isSelected) {
+      return;
+    }
+    if (isResolvingMenus) {
+      speak(__("Loading navigation block setup options\u2026"));
+    }
+    if (hasResolvedMenus) {
+      speak(__("Navigation block setup options ready."));
+    }
+  }, [hasResolvedMenus, isResolvingMenus, isSelected]);
+  const isResolvingActions = isResolvingMenus && isResolvingCanUserCreateNavigationMenus;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Placeholder, { className: "wp-block-navigation-placeholder", children: [
+    /* @__PURE__ */ jsx(PlaceholderPreview, { isVisible: !isSelected }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": !isSelected ? true : void 0,
+        className: "wp-block-navigation-placeholder__controls",
+        children: /* @__PURE__ */ jsxs("div", { className: "wp-block-navigation-placeholder__actions", children: [
+          /* @__PURE__ */ jsxs("div", { className: "wp-block-navigation-placeholder__actions__indicator", children: [
+            /* @__PURE__ */ jsx(Icon, { icon: navigation }),
+            " ",
+            __("Navigation")
+          ] }),
+          /* @__PURE__ */ jsx("hr", {}),
+          isResolvingActions && /* @__PURE__ */ jsx(Spinner, {}),
+          /* @__PURE__ */ jsx(
+            NavigationMenuSelector,
+            {
+              currentMenuId,
+              clientId,
+              onSelectNavigationMenu,
+              onSelectClassicMenu
+            }
+          ),
+          /* @__PURE__ */ jsx("hr", {}),
+          canUserCreateNavigationMenus && /* @__PURE__ */ jsx(
+            Button,
+            {
+              __next40pxDefaultSize: true,
+              variant: "tertiary",
+              onClick: onCreateEmpty,
+              children: __("Start empty")
+            }
+          )
+        ] })
+      }
+    )
+  ] }) });
+}
+export {
+  NavigationPlaceholder as default
+};
+//# sourceMappingURL=index.mjs.map

package/build-module/navigation/edit/placeholder/placeholder-preview.mjs

@@ -0,0 +1,22 @@
+// packages/block-library/src/navigation/edit/placeholder/placeholder-preview.js
+import { Icon, navigation } from "@wordpress/icons";
+import { __ } from "@wordpress/i18n";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PlaceholderPreview = ({ isVisible = true }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": !isVisible ? true : void 0,
+      className: "wp-block-navigation-placeholder__preview",
+      children: /* @__PURE__ */ jsxs("div", { className: "wp-block-navigation-placeholder__actions__indicator", children: [
+        /* @__PURE__ */ jsx(Icon, { icon: navigation }),
+        __("Navigation")
+      ] })
+    }
+  );
+};
+var placeholder_preview_default = PlaceholderPreview;
+export {
+  placeholder_preview_default as default
+};
+//# sourceMappingURL=placeholder-preview.mjs.map