@wordpress/block-library 9.36.1-next.8b30e05b0.0 → 9.37.0

package/build/navigation/edit/overlay-menu-preview-controls.js

@@ -0,0 +1,90 @@
+"use strict";
+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);
+
+// packages/block-library/src/navigation/edit/overlay-menu-preview-controls.js
+var overlay_menu_preview_controls_exports = {};
+__export(overlay_menu_preview_controls_exports, {
+  default: () => OverlayMenuPreviewControls
+});
+module.exports = __toCommonJS(overlay_menu_preview_controls_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_overlay_menu_icon = __toESM(require("./overlay-menu-icon"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function OverlayMenuPreviewControls({
+  hasIcon,
+  icon,
+  setAttributes
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.ToggleControl,
+      {
+        __nextHasNoMarginBottom: true,
+        label: (0, import_i18n.__)("Show icon button"),
+        help: (0, import_i18n.__)(
+          "Configure the visual appearance of the button that toggles the overlay menu."
+        ),
+        onChange: (value) => setAttributes({ hasIcon: value }),
+        checked: hasIcon
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_components.__experimentalToggleGroupControl,
+      {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
+        className: "wp-block-navigation__overlay-menu-icon-toggle-group",
+        label: (0, import_i18n.__)("Icon"),
+        value: icon,
+        onChange: (value) => setAttributes({ icon: value }),
+        isBlock: true,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "handle",
+              "aria-label": (0, import_i18n.__)("handle"),
+              label: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_overlay_menu_icon.default, { icon: "handle" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.__experimentalToggleGroupControlOption,
+            {
+              value: "menu",
+              "aria-label": (0, import_i18n.__)("menu"),
+              label: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_overlay_menu_icon.default, { icon: "menu" })
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=overlay-menu-preview-controls.js.map

package/build/navigation/edit/overlay-menu-preview-controls.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/edit/overlay-menu-preview-controls.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\tToggleControl,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport OverlayMenuIcon from './overlay-menu-icon';\n\n/**\n * Overlay Menu Preview Controls component.\n * Used within PanelBody context (not ToolsPanel).\n *\n * @param {Object}   props               Component props.\n * @param {boolean}  props.hasIcon       Whether the overlay menu has an icon.\n * @param {string}   props.icon          Icon type for overlay menu.\n * @param {Function} props.setAttributes Function to update block attributes.\n * @return {JSX.Element}                The overlay menu preview controls.\n */\nexport default function OverlayMenuPreviewControls( {\n\thasIcon,\n\ticon,\n\tsetAttributes,\n} ) {\n\treturn (\n\t\t<VStack spacing={ 4 }>\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Show icon button' ) }\n\t\t\t\thelp={ __(\n\t\t\t\t\t'Configure the visual appearance of the button that toggles the overlay menu.'\n\t\t\t\t) }\n\t\t\t\tonChange={ ( value ) => setAttributes( { hasIcon: value } ) }\n\t\t\t\tchecked={ hasIcon }\n\t\t\t/>\n\t\t\t<ToggleGroupControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"wp-block-navigation__overlay-menu-icon-toggle-group\"\n\t\t\t\tlabel={ __( 'Icon' ) }\n\t\t\t\tvalue={ icon }\n\t\t\t\tonChange={ ( value ) => setAttributes( { icon: value } ) }\n\t\t\t\tisBlock\n\t\t\t>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"handle\"\n\t\t\t\t\taria-label={ __( 'handle' ) }\n\t\t\t\t\tlabel={ <OverlayMenuIcon icon=\"handle\" /> }\n\t\t\t\t/>\n\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\tvalue=\"menu\"\n\t\t\t\t\taria-label={ __( 'menu' ) }\n\t\t\t\t\tlabel={ <OverlayMenuIcon icon=\"menu\" /> }\n\t\t\t\t/>\n\t\t\t</ToggleGroupControl>\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAKO;AACP,kBAAmB;AAKnB,+BAA4B;AAmBzB;AAPY,SAAR,2BAA6C;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,6CAAC,kBAAAA,sBAAA,EAAO,SAAU,GACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,yBAAuB;AAAA,QACvB,WAAQ,gBAAI,kBAAmB;AAAA,QAC/B,UAAO;AAAA,UACN;AAAA,QACD;AAAA,QACA,UAAW,CAAE,UAAW,cAAe,EAAE,SAAS,MAAM,CAAE;AAAA,QAC1D,SAAU;AAAA;AAAA,IACX;AAAA,IACA;AAAA,MAAC,kBAAAC;AAAA,MAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,yBAAuB;AAAA,QACvB,WAAU;AAAA,QACV,WAAQ,gBAAI,MAAO;AAAA,QACnB,OAAQ;AAAA,QACR,UAAW,CAAE,UAAW,cAAe,EAAE,MAAM,MAAM,CAAE;AAAA,QACvD,SAAO;AAAA,QAEP;AAAA;AAAA,YAAC,kBAAAC;AAAA,YAAA;AAAA,cACA,OAAM;AAAA,cACN,kBAAa,gBAAI,QAAS;AAAA,cAC1B,OAAQ,4CAAC,yBAAAC,SAAA,EAAgB,MAAK,UAAS;AAAA;AAAA,UACxC;AAAA,UACA;AAAA,YAAC,kBAAAD;AAAA,YAAA;AAAA,cACA,OAAM;AAAA,cACN,kBAAa,gBAAI,MAAO;AAAA,cACxB,OAAQ,4CAAC,yBAAAC,SAAA,EAAgB,MAAK,QAAO;AAAA;AAAA,UACtC;AAAA;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "names": ["VStack", "ToggleGroupControl", "ToggleGroupControlOption", "OverlayMenuIcon"]
+}

package/build/navigation/edit/overlay-panel.js

@@ -0,0 +1,86 @@
+"use strict";
+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);
+
+// packages/block-library/src/navigation/edit/overlay-panel.js
+var overlay_panel_exports = {};
+__export(overlay_panel_exports, {
+  default: () => OverlayPanel
+});
+module.exports = __toCommonJS(overlay_panel_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_overlay_template_part_selector = __toESM(require("./overlay-template-part-selector"));
+var import_overlay_visibility_control = __toESM(require("./overlay-visibility-control"));
+var import_overlay_menu_preview_button = __toESM(require("./overlay-menu-preview-button"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function OverlayPanel({
+  overlayMenu,
+  overlay,
+  setAttributes,
+  onNavigateToEntityRecord,
+  overlayMenuPreview,
+  setOverlayMenuPreview,
+  hasIcon,
+  icon,
+  overlayMenuPreviewClasses,
+  overlayMenuPreviewId,
+  isResponsive
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.PanelBody, { title: (0, import_i18n.__)("Overlay"), initialOpen: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_overlay_visibility_control.default,
+      {
+        overlayMenu,
+        setAttributes
+      }
+    ),
+    overlayMenu !== "never" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_overlay_menu_preview_button.default,
+      {
+        isResponsive,
+        overlayMenuPreview,
+        setOverlayMenuPreview,
+        hasIcon,
+        icon,
+        setAttributes,
+        overlayMenuPreviewClasses,
+        overlayMenuPreviewId
+      }
+    ),
+    overlayMenu !== "never" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_overlay_template_part_selector.default,
+      {
+        overlay,
+        setAttributes,
+        onNavigateToEntityRecord
+      }
+    )
+  ] }) });
+}
+//# sourceMappingURL=overlay-panel.js.map

package/build/navigation/edit/overlay-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/edit/overlay-panel.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport OverlayTemplatePartSelector from './overlay-template-part-selector';\nimport OverlayVisibilityControl from './overlay-visibility-control';\nimport OverlayMenuPreviewButton from './overlay-menu-preview-button';\n\n/**\n * Overlay Panel component for Navigation block.\n *\n * @param {Object}   props                           Component props.\n * @param {string}   props.overlayMenu               Overlay menu setting ('never', 'mobile', 'always').\n * @param {string}   props.overlay                   Currently selected overlay template part ID.\n * @param {Function} props.setAttributes             Function to update block attributes.\n * @param {Function} props.onNavigateToEntityRecord  Function to navigate to template part editor.\n * @param {boolean}  props.overlayMenuPreview        Whether overlay menu preview is open.\n * @param {Function} props.setOverlayMenuPreview     Function to toggle overlay menu preview.\n * @param {boolean}  props.hasIcon                   Whether the overlay menu has an icon.\n * @param {string}   props.icon                      Icon type for overlay menu.\n * @param {string}   props.overlayMenuPreviewClasses CSS classes for overlay menu preview button.\n * @param {string}   props.overlayMenuPreviewId      ID for overlay menu preview.\n * @param {boolean}  props.isResponsive              Whether overlay menu is responsive.\n * @return {JSX.Element|null}                       The overlay panel component or null if overlay is disabled.\n */\nexport default function OverlayPanel( {\n\toverlayMenu,\n\toverlay,\n\tsetAttributes,\n\tonNavigateToEntityRecord,\n\toverlayMenuPreview,\n\tsetOverlayMenuPreview,\n\thasIcon,\n\ticon,\n\toverlayMenuPreviewClasses,\n\toverlayMenuPreviewId,\n\tisResponsive,\n} ) {\n\treturn (\n\t\t<PanelBody title={ __( 'Overlay' ) } initialOpen>\n\t\t\t<VStack spacing={ 4 }>\n\t\t\t\t<OverlayVisibilityControl\n\t\t\t\t\toverlayMenu={ overlayMenu }\n\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t/>\n\n\t\t\t\t{ overlayMenu !== 'never' && (\n\t\t\t\t\t<OverlayMenuPreviewButton\n\t\t\t\t\t\tisResponsive={ isResponsive }\n\t\t\t\t\t\toverlayMenuPreview={ overlayMenuPreview }\n\t\t\t\t\t\tsetOverlayMenuPreview={ setOverlayMenuPreview }\n\t\t\t\t\t\thasIcon={ hasIcon }\n\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\t\toverlayMenuPreviewClasses={ overlayMenuPreviewClasses }\n\t\t\t\t\t\toverlayMenuPreviewId={ overlayMenuPreviewId }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ overlayMenu !== 'never' && (\n\t\t\t\t\t<OverlayTemplatePartSelector\n\t\t\t\t\t\toverlay={ overlay }\n\t\t\t\t\t\tsetAttributes={ setAttributes }\n\t\t\t\t\t\tonNavigateToEntityRecord={ onNavigateToEntityRecord }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</PanelBody>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,kBAAmB;AAKnB,4CAAwC;AACxC,wCAAqC;AACrC,yCAAqC;AAkClC;AAfY,SAAR,aAA+B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,4CAAC,+BAAU,WAAQ,gBAAI,SAAU,GAAI,aAAW,MAC/C,uDAAC,kBAAAA,sBAAA,EAAO,SAAU,GACjB;AAAA;AAAA,MAAC,kCAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEE,gBAAgB,WACjB;AAAA,MAAC,mCAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAGC,gBAAgB,WACjB;AAAA,MAAC,sCAAAC;AAAA,MAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KAEF,GACD;AAEF;",
+  "names": ["VStack", "OverlayVisibilityControl", "OverlayMenuPreviewButton", "OverlayTemplatePartSelector"]
+}

package/build/navigation/edit/overlay-template-part-selector.js

@@ -0,0 +1,163 @@
+"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/overlay-template-part-selector.js
+var overlay_template_part_selector_exports = {};
+__export(overlay_template_part_selector_exports, {
+  default: () => OverlayTemplatePartSelector
+});
+module.exports = __toCommonJS(overlay_template_part_selector_exports);
+var import_element = require("@wordpress/element");
+var import_core_data = require("@wordpress/core-data");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_html_entities = require("@wordpress/html-entities");
+var import_create_template_part_id = require("../../template-part/edit/utils/create-template-part-id");
+var import_jsx_runtime = require("react/jsx-runtime");
+function parseTemplatePartId(templatePartId) {
+  if (!templatePartId || typeof templatePartId !== "string") {
+    return null;
+  }
+  const parts = templatePartId.split("//");
+  if (parts.length !== 2) {
+    return null;
+  }
+  return {
+    theme: parts[0],
+    slug: parts[1]
+  };
+}
+function OverlayTemplatePartSelector({
+  overlay,
+  setAttributes,
+  onNavigateToEntityRecord
+}) {
+  const {
+    records: templateParts,
+    isResolving,
+    hasResolved
+  } = (0, import_core_data.useEntityRecords)("postType", "wp_template_part", {
+    per_page: -1
+  });
+  const overlayTemplateParts = (0, import_element.useMemo)(() => {
+    if (!templateParts) {
+      return [];
+    }
+    return templateParts.filter(
+      (templatePart) => templatePart.area === "overlay"
+    );
+  }, [templateParts]);
+  const options = (0, import_element.useMemo)(() => {
+    const baseOptions = [
+      {
+        label: (0, import_i18n.__)("None (default)"),
+        value: ""
+      }
+    ];
+    if (!hasResolved || isResolving) {
+      return baseOptions;
+    }
+    const templatePartOptions = overlayTemplateParts.map(
+      (templatePart) => {
+        const templatePartId = (0, import_create_template_part_id.createTemplatePartId)(
+          templatePart.theme,
+          templatePart.slug
+        );
+        const label = templatePart.title?.rendered ? (0, import_html_entities.decodeEntities)(templatePart.title.rendered) : templatePart.slug;
+        return {
+          label,
+          value: templatePartId
+        };
+      }
+    );
+    return [...baseOptions, ...templatePartOptions];
+  }, [overlayTemplateParts, hasResolved, isResolving]);
+  const parsedTemplatePart = (0, import_element.useMemo)(() => {
+    return parseTemplatePartId(overlay);
+  }, [overlay]);
+  const selectedTemplatePart = (0, import_element.useMemo)(() => {
+    if (!overlay || !overlayTemplateParts) {
+      return null;
+    }
+    return overlayTemplateParts.find((templatePart) => {
+      const templatePartId = (0, import_create_template_part_id.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 isEditButtonDisabled = !overlay || !parsedTemplatePart || !onNavigateToEntityRecord || isResolving;
+  if (isResolving && !hasResolved) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "wp-block-navigation__overlay-selector", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.__)("Loading overlays\u2026") })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "wp-block-navigation__overlay-selector", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.SelectControl,
+      {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
+        label: (0, import_i18n.__)("Overlay template"),
+        value: overlay || "",
+        options,
+        onChange: handleSelectChange,
+        disabled: isResolving,
+        accessibleWhenDisabled: true,
+        help: overlayTemplateParts.length === 0 && hasResolved ? (0, import_i18n.__)("No overlays found.") : (0, import_i18n.__)("Select an overlay to use for the navigation.")
+      }
+    ),
+    overlay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Button,
+      {
+        __next40pxDefaultSize: true,
+        variant: "secondary",
+        onClick: handleEditClick,
+        disabled: isEditButtonDisabled,
+        accessibleWhenDisabled: true,
+        "aria-label": selectedTemplatePart ? (0, import_i18n.sprintf)(
+          /* translators: %s: Overlay title. */
+          (0, import_i18n.__)("Edit overlay: %s"),
+          selectedTemplatePart.title?.rendered ? (0, import_html_entities.decodeEntities)(
+            selectedTemplatePart.title.rendered
+          ) : selectedTemplatePart.slug
+        ) : (0, import_i18n.__)("Edit overlay"),
+        className: "wp-block-navigation__overlay-edit-button",
+        children: (0, import_i18n.__)("Edit")
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=overlay-template-part-selector.js.map

package/build/navigation/edit/overlay-template-part-selector.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/edit/overlay-template-part-selector.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport { useEntityRecords } from '@wordpress/core-data';\nimport { SelectControl, Spinner, Button } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { decodeEntities } from '@wordpress/html-entities';\n\n/**\n * Internal dependencies\n */\nimport { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';\n\n/**\n * Parses a template part ID into theme and slug components.\n *\n * @param {string} templatePartId Template part ID in format \"theme//slug\".\n * @return {{theme: string, slug: string}|null} Parsed components or null if invalid.\n */\nfunction parseTemplatePartId( templatePartId ) {\n\tif ( ! templatePartId || typeof templatePartId !== 'string' ) {\n\t\treturn null;\n\t}\n\n\tconst parts = templatePartId.split( '//' );\n\tif ( parts.length !== 2 ) {\n\t\treturn null;\n\t}\n\n\treturn {\n\t\ttheme: parts[ 0 ],\n\t\tslug: parts[ 1 ],\n\t};\n}\n\n/**\n * Overlay Template Part Selector component.\n *\n * @param {Object}   props                          Component props.\n * @param {string}   props.overlay                  Currently selected overlay template part ID.\n * @param {Function} props.setAttributes            Function to update block attributes.\n * @param {Function} props.onNavigateToEntityRecord Function to navigate to template part editor.\n * @return {JSX.Element} The overlay template part selector component.\n */\nexport default function OverlayTemplatePartSelector( {\n\toverlay,\n\tsetAttributes,\n\tonNavigateToEntityRecord,\n} ) {\n\tconst {\n\t\trecords: templateParts,\n\t\tisResolving,\n\t\thasResolved,\n\t} = useEntityRecords( 'postType', 'wp_template_part', {\n\t\tper_page: -1,\n\t} );\n\n\t// Filter template parts by overlay area\n\tconst overlayTemplateParts = useMemo( () => {\n\t\tif ( ! templateParts ) {\n\t\t\treturn [];\n\t\t}\n\t\treturn templateParts.filter(\n\t\t\t( templatePart ) => templatePart.area === 'overlay'\n\t\t);\n\t}, [ templateParts ] );\n\n\t// Build options for SelectControl\n\tconst options = useMemo( () => {\n\t\tconst baseOptions = [\n\t\t\t{\n\t\t\t\tlabel: __( 'None (default)' ),\n\t\t\t\tvalue: '',\n\t\t\t},\n\t\t];\n\n\t\tif ( ! hasResolved || isResolving ) {\n\t\t\treturn baseOptions;\n\t\t}\n\n\t\tconst templatePartOptions = overlayTemplateParts.map(\n\t\t\t( templatePart ) => {\n\t\t\t\tconst templatePartId = createTemplatePartId(\n\t\t\t\t\ttemplatePart.theme,\n\t\t\t\t\ttemplatePart.slug\n\t\t\t\t);\n\t\t\t\tconst label = templatePart.title?.rendered\n\t\t\t\t\t? decodeEntities( templatePart.title.rendered )\n\t\t\t\t\t: templatePart.slug;\n\n\t\t\t\treturn {\n\t\t\t\t\tlabel,\n\t\t\t\t\tvalue: templatePartId,\n\t\t\t\t};\n\t\t\t}\n\t\t);\n\n\t\treturn [ ...baseOptions, ...templatePartOptions ];\n\t}, [ overlayTemplateParts, hasResolved, isResolving ] );\n\n\t// Parse selected template part for navigation\n\tconst parsedTemplatePart = useMemo( () => {\n\t\treturn parseTemplatePartId( overlay );\n\t}, [ overlay ] );\n\n\t// Find the selected template part to get its title\n\tconst selectedTemplatePart = useMemo( () => {\n\t\tif ( ! overlay || ! overlayTemplateParts ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn overlayTemplateParts.find( ( templatePart ) => {\n\t\t\tconst templatePartId = createTemplatePartId(\n\t\t\t\ttemplatePart.theme,\n\t\t\t\ttemplatePart.slug\n\t\t\t);\n\t\t\treturn templatePartId === overlay;\n\t\t} );\n\t}, [ overlay, overlayTemplateParts ] );\n\n\tconst handleSelectChange = ( value ) => {\n\t\tsetAttributes( {\n\t\t\toverlay: value || undefined,\n\t\t} );\n\t};\n\n\tconst handleEditClick = () => {\n\t\tif ( ! overlay || ! onNavigateToEntityRecord ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonNavigateToEntityRecord( {\n\t\t\tpostId: overlay,\n\t\t\tpostType: 'wp_template_part',\n\t\t} );\n\t};\n\n\tconst isEditButtonDisabled =\n\t\t! overlay ||\n\t\t! parsedTemplatePart ||\n\t\t! onNavigateToEntityRecord ||\n\t\tisResolving;\n\n\tif ( isResolving && ! hasResolved ) {\n\t\treturn (\n\t\t\t<div className=\"wp-block-navigation__overlay-selector\">\n\t\t\t\t<Spinner />\n\t\t\t\t<p>{ __( 'Loading overlays\u2026' ) }</p>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"wp-block-navigation__overlay-selector\">\n\t\t\t<SelectControl\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tlabel={ __( 'Overlay template' ) }\n\t\t\t\tvalue={ overlay || '' }\n\t\t\t\toptions={ options }\n\t\t\t\tonChange={ handleSelectChange }\n\t\t\t\tdisabled={ isResolving }\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\thelp={\n\t\t\t\t\toverlayTemplateParts.length === 0 && hasResolved\n\t\t\t\t\t\t? __( 'No overlays found.' )\n\t\t\t\t\t\t: __( 'Select an overlay to use for the navigation.' )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ overlay && (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\tonClick={ handleEditClick }\n\t\t\t\t\tdisabled={ isEditButtonDisabled }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\taria-label={\n\t\t\t\t\t\tselectedTemplatePart\n\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t/* translators: %s: Overlay title. */\n\t\t\t\t\t\t\t\t\t__( 'Edit overlay: %s' ),\n\t\t\t\t\t\t\t\t\tselectedTemplatePart.title?.rendered\n\t\t\t\t\t\t\t\t\t\t? decodeEntities(\n\t\t\t\t\t\t\t\t\t\t\t\tselectedTemplatePart.title\n\t\t\t\t\t\t\t\t\t\t\t\t\t.rendered\n\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t: selectedTemplatePart.slug\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: __( 'Edit overlay' )\n\t\t\t\t\t}\n\t\t\t\t\tclassName=\"wp-block-navigation__overlay-edit-button\"\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t</Button>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/navigation/edit/overlay-visibility-control.js

@@ -0,0 +1,54 @@
+"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/overlay-visibility-control.js
+var overlay_visibility_control_exports = {};
+__export(overlay_visibility_control_exports, {
+  default: () => OverlayVisibilityControl
+});
+module.exports = __toCommonJS(overlay_visibility_control_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_jsx_runtime = require("react/jsx-runtime");
+function OverlayVisibilityControl({
+  overlayMenu,
+  setAttributes
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalToggleGroupControl,
+    {
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      label: (0, import_i18n.__)("Overlay Visibility"),
+      "aria-label": (0, import_i18n.__)("Configure overlay visibility"),
+      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") })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=overlay-visibility-control.js.map

package/build/navigation/edit/overlay-visibility-control.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/edit/overlay-visibility-control.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Overlay Visibility Control component.\n *\n * @param {Object}   props               Component props.\n * @param {string}   props.overlayMenu   Overlay menu setting ('never', 'mobile', 'always').\n * @param {Function} props.setAttributes Function to update block attributes.\n * @return {JSX.Element}                 The overlay visibility control.\n */\nexport default function OverlayVisibilityControl( {\n\toverlayMenu,\n\tsetAttributes,\n} ) {\n\treturn (\n\t\t<ToggleGroupControl\n\t\t\t__next40pxDefaultSize\n\t\t\t__nextHasNoMarginBottom\n\t\t\tlabel={ __( 'Overlay Visibility' ) }\n\t\t\taria-label={ __( 'Configure overlay visibility' ) }\n\t\t\tvalue={ overlayMenu }\n\t\t\thelp={ __(\n\t\t\t\t'Collapses the navigation options in a menu icon opening an overlay.'\n\t\t\t) }\n\t\t\tonChange={ ( value ) => setAttributes( { overlayMenu: value } ) }\n\t\t\tisBlock\n\t\t>\n\t\t\t<ToggleGroupControlOption value=\"never\" label={ __( 'Off' ) } />\n\t\t\t<ToggleGroupControlOption value=\"mobile\" label={ __( 'Mobile' ) } />\n\t\t\t<ToggleGroupControlOption value=\"always\" label={ __( 'Always' ) } />\n\t\t</ToggleGroupControl>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAGO;AACP,kBAAmB;AAejB;AALa,SAAR,yBAA2C;AAAA,EACjD;AAAA,EACA;AACD,GAAI;AACH,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB,WAAQ,gBAAI,oBAAqB;AAAA,MACjC,kBAAa,gBAAI,8BAA+B;AAAA,MAChD,OAAQ;AAAA,MACR,UAAO;AAAA,QACN;AAAA,MACD;AAAA,MACA,UAAW,CAAE,UAAW,cAAe,EAAE,aAAa,MAAM,CAAE;AAAA,MAC9D,SAAO;AAAA,MAEP;AAAA,oDAAC,kBAAAC,wCAAA,EAAyB,OAAM,SAAQ,WAAQ,gBAAI,KAAM,GAAI;AAAA,QAC9D,4CAAC,kBAAAA,wCAAA,EAAyB,OAAM,UAAS,WAAQ,gBAAI,QAAS,GAAI;AAAA,QAClE,4CAAC,kBAAAA,wCAAA,EAAyB,OAAM,UAAS,WAAQ,gBAAI,QAAS,GAAI;AAAA;AAAA;AAAA,EACnE;AAEF;",
+  "names": ["ToggleGroupControl", "ToggleGroupControlOption"]
+}

package/build/navigation/edit/responsive-wrapper.js

@@ -50,7 +50,9 @@ function ResponsiveWrapper({
   overlayBackgroundColor,
   overlayTextColor,
   hasIcon,
-  icon
+  icon,
+  overlay,
+  onNavigateToEntityRecord
 }) {
   if (!isResponsive) {
     return children;
@@ -86,6 +88,16 @@ function ResponsiveWrapper({
       "aria-label": (0, import_i18n.__)("Menu")
     }
   };
+  const handleToggleClick = () => {
+    if (overlay && onNavigateToEntityRecord) {
+      onNavigateToEntityRecord({
+        postId: overlay,
+        postType: "wp_template_part"
+      });
+      return;
+    }
+    onToggle(true);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     !isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       import_components.Button,
@@ -94,7 +106,7 @@ function ResponsiveWrapper({
         "aria-haspopup": "true",
         "aria-label": hasIcon && (0, import_i18n.__)("Open menu"),
         className: openButtonClasses,
-        onClick: () => onToggle(true),
+        onClick: handleToggleClick,
         children: [
           hasIcon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_overlay_menu_icon.default, { icon }),
           !hasIcon && (0, import_i18n.__)("Menu")

package/build/navigation/edit/responsive-wrapper.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/navigation/edit/responsive-wrapper.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { close, Icon } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { getColorClassName } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport OverlayMenuIcon from './overlay-menu-icon';\n\nexport default function ResponsiveWrapper( {\n\tchildren,\n\tid,\n\tisOpen,\n\tisResponsive,\n\tonToggle,\n\tisHiddenByDefault,\n\toverlayBackgroundColor,\n\toverlayTextColor,\n\thasIcon,\n\ticon,\n} ) {\n\tif ( ! isResponsive ) {\n\t\treturn children;\n\t}\n\n\tconst responsiveContainerClasses = clsx(\n\t\t'wp-block-navigation__responsive-container',\n\t\t{\n\t\t\t'has-text-color':\n\t\t\t\t!! overlayTextColor.color || !! overlayTextColor?.class,\n\t\t\t[ getColorClassName( 'color', overlayTextColor?.slug ) ]:\n\t\t\t\t!! overlayTextColor?.slug,\n\t\t\t'has-background':\n\t\t\t\t!! overlayBackgroundColor.color ||\n\t\t\t\toverlayBackgroundColor?.class,\n\t\t\t[ getColorClassName(\n\t\t\t\t'background-color',\n\t\t\t\toverlayBackgroundColor?.slug\n\t\t\t) ]: !! overlayBackgroundColor?.slug,\n\t\t\t'is-menu-open': isOpen,\n\t\t\t'hidden-by-default': isHiddenByDefault,\n\t\t}\n\t);\n\n\tconst styles = {\n\t\tcolor: ! overlayTextColor?.slug && overlayTextColor?.color,\n\t\tbackgroundColor:\n\t\t\t! overlayBackgroundColor?.slug &&\n\t\t\toverlayBackgroundColor?.color &&\n\t\t\toverlayBackgroundColor.color,\n\t};\n\n\tconst openButtonClasses = clsx(\n\t\t'wp-block-navigation__responsive-container-open',\n\t\t{ 'always-shown': isHiddenByDefault }\n\t);\n\n\tconst modalId = `${ id }-modal`;\n\n\tconst dialogProps = {\n\t\tclassName: 'wp-block-navigation__responsive-dialog',\n\t\t...( isOpen && {\n\t\t\trole: 'dialog',\n\t\t\t'aria-modal': true,\n\t\t\t'aria-label': __( 'Menu' ),\n\t\t} ),\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isOpen && (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\taria-label={ hasIcon && __( 'Open menu' ) }\n\t\t\t\t\tclassName={ openButtonClasses }\n\t\t\t\t\tonClick={ () => onToggle( true ) }\n\t\t\t\t>\n\t\t\t\t\t{ hasIcon && <OverlayMenuIcon icon={ icon } /> }\n\t\t\t\t\t{ ! hasIcon && __( 'Menu' ) }\n\t\t\t\t</Button>\n\t\t\t) }\n\n\t\t\t<div\n\t\t\t\tclassName={ responsiveContainerClasses }\n\t\t\t\tstyle={ styles }\n\t\t\t\tid={ modalId }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wp-block-navigation__responsive-close\"\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t<div { ...dialogProps }>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__responsive-container-close\"\n\t\t\t\t\t\t\taria-label={ hasIcon && __( 'Close menu' ) }\n\t\t\t\t\t\t\tonClick={ () => onToggle( false ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ hasIcon && <Icon icon={ close } /> }\n\t\t\t\t\t\t\t{ ! hasIcon && __( 'Close' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__responsive-container-content\"\n\t\t\t\t\t\t\tid={ `${ modalId }-content` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,mBAA4B;AAC5B,wBAAuB;AACvB,kBAAmB;AACnB,0BAAkC;AAKlC,+BAA4B;AA8D1B;AA5Da,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,QAAM,iCAA6B,YAAAA;AAAA,IAClC;AAAA,IACA;AAAA,MACC,kBACC,CAAC,CAAE,iBAAiB,SAAS,CAAC,CAAE,kBAAkB;AAAA,MACnD,KAAE,uCAAmB,SAAS,kBAAkB,IAAK,CAAE,GACtD,CAAC,CAAE,kBAAkB;AAAA,MACtB,kBACC,CAAC,CAAE,uBAAuB,SAC1B,wBAAwB;AAAA,MACzB,KAAE;AAAA,QACD;AAAA,QACA,wBAAwB;AAAA,MACzB,CAAE,GAAG,CAAC,CAAE,wBAAwB;AAAA,MAChC,gBAAgB;AAAA,MAChB,qBAAqB;AAAA,IACtB;AAAA,EACD;AAEA,QAAM,SAAS;AAAA,IACd,OAAO,CAAE,kBAAkB,QAAQ,kBAAkB;AAAA,IACrD,iBACC,CAAE,wBAAwB,QAC1B,wBAAwB,SACxB,uBAAuB;AAAA,EACzB;AAEA,QAAM,wBAAoB,YAAAA;AAAA,IACzB;AAAA,IACA,EAAE,gBAAgB,kBAAkB;AAAA,EACrC;AAEA,QAAM,UAAU,GAAI,EAAG;AAEvB,QAAM,cAAc;AAAA,IACnB,WAAW;AAAA,IACX,GAAK,UAAU;AAAA,MACd,MAAM;AAAA,MACN,cAAc;AAAA,MACd,kBAAc,gBAAI,MAAO;AAAA,IAC1B;AAAA,EACD;AAEA,SACC,4EACG;AAAA,KAAE,UACH;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,iBAAc;AAAA,QACd,cAAa,eAAW,gBAAI,WAAY;AAAA,QACxC,WAAY;AAAA,QACZ,SAAU,MAAM,SAAU,IAAK;AAAA,QAE7B;AAAA,qBAAW,4CAAC,yBAAAC,SAAA,EAAgB,MAAc;AAAA,UAC1C,CAAE,eAAW,gBAAI,MAAO;AAAA;AAAA;AAAA,IAC3B;AAAA,IAGD;AAAA,MAAC;AAAA;AAAA,QACA,WAAY;AAAA,QACZ,OAAQ;AAAA,QACR,IAAK;AAAA,QAEL;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,UAAS;AAAA,YAET,uDAAC,SAAM,GAAG,aACT;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,WAAU;AAAA,kBACV,cAAa,eAAW,gBAAI,YAAa;AAAA,kBACzC,SAAU,MAAM,SAAU,KAAM;AAAA,kBAE9B;AAAA,+BAAW,4CAAC,qBAAK,MAAO,oBAAQ;AAAA,oBAChC,CAAE,eAAW,gBAAI,OAAQ;AAAA;AAAA;AAAA,cAC5B;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,WAAU;AAAA,kBACV,IAAK,GAAI,OAAQ;AAAA,kBAEf;AAAA;AAAA,cACH;AAAA,eACD;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { close, Icon } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { getColorClassName } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport OverlayMenuIcon from './overlay-menu-icon';\n\nexport default function ResponsiveWrapper( {\n\tchildren,\n\tid,\n\tisOpen,\n\tisResponsive,\n\tonToggle,\n\tisHiddenByDefault,\n\toverlayBackgroundColor,\n\toverlayTextColor,\n\thasIcon,\n\ticon,\n\toverlay,\n\tonNavigateToEntityRecord,\n} ) {\n\tif ( ! isResponsive ) {\n\t\treturn children;\n\t}\n\n\tconst responsiveContainerClasses = clsx(\n\t\t'wp-block-navigation__responsive-container',\n\t\t{\n\t\t\t'has-text-color':\n\t\t\t\t!! overlayTextColor.color || !! overlayTextColor?.class,\n\t\t\t[ getColorClassName( 'color', overlayTextColor?.slug ) ]:\n\t\t\t\t!! overlayTextColor?.slug,\n\t\t\t'has-background':\n\t\t\t\t!! overlayBackgroundColor.color ||\n\t\t\t\toverlayBackgroundColor?.class,\n\t\t\t[ getColorClassName(\n\t\t\t\t'background-color',\n\t\t\t\toverlayBackgroundColor?.slug\n\t\t\t) ]: !! overlayBackgroundColor?.slug,\n\t\t\t'is-menu-open': isOpen,\n\t\t\t'hidden-by-default': isHiddenByDefault,\n\t\t}\n\t);\n\n\tconst styles = {\n\t\tcolor: ! overlayTextColor?.slug && overlayTextColor?.color,\n\t\tbackgroundColor:\n\t\t\t! overlayBackgroundColor?.slug &&\n\t\t\toverlayBackgroundColor?.color &&\n\t\t\toverlayBackgroundColor.color,\n\t};\n\n\tconst openButtonClasses = clsx(\n\t\t'wp-block-navigation__responsive-container-open',\n\t\t{ 'always-shown': isHiddenByDefault }\n\t);\n\n\tconst modalId = `${ id }-modal`;\n\n\tconst dialogProps = {\n\t\tclassName: 'wp-block-navigation__responsive-dialog',\n\t\t...( isOpen && {\n\t\t\trole: 'dialog',\n\t\t\t'aria-modal': true,\n\t\t\t'aria-label': __( 'Menu' ),\n\t\t} ),\n\t};\n\n\tconst handleToggleClick = () => {\n\t\t// If an overlay template part is selected, navigate to it instead of toggling\n\t\tif ( overlay && onNavigateToEntityRecord ) {\n\t\t\tonNavigateToEntityRecord( {\n\t\t\t\tpostId: overlay,\n\t\t\t\tpostType: 'wp_template_part',\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\t\t// Otherwise, use normal toggle behavior\n\t\tonToggle( true );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t{ ! isOpen && (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\taria-label={ hasIcon && __( 'Open menu' ) }\n\t\t\t\t\tclassName={ openButtonClasses }\n\t\t\t\t\tonClick={ handleToggleClick }\n\t\t\t\t>\n\t\t\t\t\t{ hasIcon && <OverlayMenuIcon icon={ icon } /> }\n\t\t\t\t\t{ ! hasIcon && __( 'Menu' ) }\n\t\t\t\t</Button>\n\t\t\t) }\n\n\t\t\t<div\n\t\t\t\tclassName={ responsiveContainerClasses }\n\t\t\t\tstyle={ styles }\n\t\t\t\tid={ modalId }\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wp-block-navigation__responsive-close\"\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t>\n\t\t\t\t\t<div { ...dialogProps }>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__responsive-container-close\"\n\t\t\t\t\t\t\taria-label={ hasIcon && __( 'Close menu' ) }\n\t\t\t\t\t\t\tonClick={ () => onToggle( false ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ hasIcon && <Icon icon={ close } /> }\n\t\t\t\t\t\t\t{ ! hasIcon && __( 'Close' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__responsive-container-content\"\n\t\t\t\t\t\t\tid={ `${ modalId }-content` }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,mBAA4B;AAC5B,wBAAuB;AACvB,kBAAmB;AACnB,0BAAkC;AAKlC,+BAA4B;AA6E1B;AA3Ea,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAEA,QAAM,iCAA6B,YAAAA;AAAA,IAClC;AAAA,IACA;AAAA,MACC,kBACC,CAAC,CAAE,iBAAiB,SAAS,CAAC,CAAE,kBAAkB;AAAA,MACnD,KAAE,uCAAmB,SAAS,kBAAkB,IAAK,CAAE,GACtD,CAAC,CAAE,kBAAkB;AAAA,MACtB,kBACC,CAAC,CAAE,uBAAuB,SAC1B,wBAAwB;AAAA,MACzB,KAAE;AAAA,QACD;AAAA,QACA,wBAAwB;AAAA,MACzB,CAAE,GAAG,CAAC,CAAE,wBAAwB;AAAA,MAChC,gBAAgB;AAAA,MAChB,qBAAqB;AAAA,IACtB;AAAA,EACD;AAEA,QAAM,SAAS;AAAA,IACd,OAAO,CAAE,kBAAkB,QAAQ,kBAAkB;AAAA,IACrD,iBACC,CAAE,wBAAwB,QAC1B,wBAAwB,SACxB,uBAAuB;AAAA,EACzB;AAEA,QAAM,wBAAoB,YAAAA;AAAA,IACzB;AAAA,IACA,EAAE,gBAAgB,kBAAkB;AAAA,EACrC;AAEA,QAAM,UAAU,GAAI,EAAG;AAEvB,QAAM,cAAc;AAAA,IACnB,WAAW;AAAA,IACX,GAAK,UAAU;AAAA,MACd,MAAM;AAAA,MACN,cAAc;AAAA,MACd,kBAAc,gBAAI,MAAO;AAAA,IAC1B;AAAA,EACD;AAEA,QAAM,oBAAoB,MAAM;AAE/B,QAAK,WAAW,0BAA2B;AAC1C,+BAA0B;AAAA,QACzB,QAAQ;AAAA,QACR,UAAU;AAAA,MACX,CAAE;AACF;AAAA,IACD;AAEA,aAAU,IAAK;AAAA,EAChB;AAEA,SACC,4EACG;AAAA,KAAE,UACH;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,iBAAc;AAAA,QACd,cAAa,eAAW,gBAAI,WAAY;AAAA,QACxC,WAAY;AAAA,QACZ,SAAU;AAAA,QAER;AAAA,qBAAW,4CAAC,yBAAAC,SAAA,EAAgB,MAAc;AAAA,UAC1C,CAAE,eAAW,gBAAI,MAAO;AAAA;AAAA;AAAA,IAC3B;AAAA,IAGD;AAAA,MAAC;AAAA;AAAA,QACA,WAAY;AAAA,QACZ,OAAQ;AAAA,QACR,IAAK;AAAA,QAEL;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,UAAS;AAAA,YAET,uDAAC,SAAM,GAAG,aACT;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,WAAU;AAAA,kBACV,cAAa,eAAW,gBAAI,YAAa;AAAA,kBACzC,SAAU,MAAM,SAAU,KAAM;AAAA,kBAE9B;AAAA,+BAAW,4CAAC,qBAAK,MAAO,oBAAQ;AAAA,oBAChC,CAAE,eAAW,gBAAI,OAAQ;AAAA;AAAA;AAAA,cAC5B;AAAA,cACA;AAAA,gBAAC;AAAA;AAAA,kBACA,WAAU;AAAA,kBACV,IAAK,GAAI,OAAQ;AAAA,kBAEf;AAAA;AAAA,cACH;AAAA,eACD;AAAA;AAAA,QACD;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
   "names": ["clsx", "OverlayMenuIcon"]
 }

package/build/navigation-link/edit.js

@@ -203,15 +203,15 @@ function NavigationLinkEdit({
     [clientId, maxNestingLevel]
   );
   const { getBlocks } = (0, import_data.useSelect)(import_block_editor.store);
-  const {
-    clearBinding,
-    createBinding,
-    hasUrlBinding,
-    isBoundEntityAvailable
-  } = (0, import_shared.useEntityBinding)({
+  const { hasUrlBinding, isBoundEntityAvailable } = (0, import_shared.useEntityBinding)({
     clientId,
     attributes
   });
+  const handleLinkChange = (0, import_shared.useHandleLinkChange)({
+    clientId,
+    attributes,
+    setAttributes
+  });
   const [isInvalid, isDraft] = useIsInvalidLink(
     kind,
     type,
@@ -454,21 +454,7 @@ function NavigationLinkEdit({
             },
             anchor: popoverAnchor,
             onRemove: removeLink,
-            onChange: (updatedValue) => {
-              const {
-                isEntityLink,
-                attributes: updatedAttributes
-              } = (0, import_shared.updateAttributes)(
-                updatedValue,
-                setAttributes,
-                attributes
-              );
-              if (isEntityLink) {
-                createBinding(updatedAttributes);
-              } else {
-                clearBinding();
-              }
-            }
+            onChange: handleLinkChange
           }
         )
       ] }),