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

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

@@ -0,0 +1,64 @@
+// 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";
+import { jsx, jsxs } from "react/jsx-runtime";
+function OverlayMenuPreviewControls({
+  hasIcon,
+  icon,
+  setAttributes
+}) {
+  return /* @__PURE__ */ jsxs(VStack, { spacing: 4, children: [
+    /* @__PURE__ */ jsx(
+      ToggleControl,
+      {
+        __nextHasNoMarginBottom: true,
+        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,
+        __nextHasNoMarginBottom: 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.js.map

package/build-module/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": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,oCAAoC;AAAA,EACpC,0CAA0C;AAAA,EAC1C;AAAA,OACM;AACP,SAAS,UAAU;AAKnB,OAAO,qBAAqB;AAmBzB,cASA,YATA;AAPY,SAAR,2BAA6C;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,SACC,qBAAC,UAAO,SAAU,GACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,yBAAuB;AAAA,QACvB,OAAQ,GAAI,kBAAmB;AAAA,QAC/B,MAAO;AAAA,UACN;AAAA,QACD;AAAA,QACA,UAAW,CAAE,UAAW,cAAe,EAAE,SAAS,MAAM,CAAE;AAAA,QAC1D,SAAU;AAAA;AAAA,IACX;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,yBAAuB;AAAA,QACvB,WAAU;AAAA,QACV,OAAQ,GAAI,MAAO;AAAA,QACnB,OAAQ;AAAA,QACR,UAAW,CAAE,UAAW,cAAe,EAAE,MAAM,MAAM,CAAE;AAAA,QACvD,SAAO;AAAA,QAEP;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,OAAM;AAAA,cACN,cAAa,GAAI,QAAS;AAAA,cAC1B,OAAQ,oBAAC,mBAAgB,MAAK,UAAS;AAAA;AAAA,UACxC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA,OAAM;AAAA,cACN,cAAa,GAAI,MAAO;AAAA,cACxB,OAAQ,oBAAC,mBAAgB,MAAK,QAAO;AAAA;AAAA,UACtC;AAAA;AAAA;AAAA,IACD;AAAA,KACD;AAEF;",
+  "names": []
+}

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

@@ -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";
+import OverlayVisibilityControl from "./overlay-visibility-control";
+import OverlayMenuPreviewButton from "./overlay-menu-preview-button";
+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.js.map

package/build-module/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": ";AAGA;AAAA,EACC;AAAA,EACA,wBAAwB;AAAA,OAClB;AACP,SAAS,UAAU;AAKnB,OAAO,iCAAiC;AACxC,OAAO,8BAA8B;AACrC,OAAO,8BAA8B;AAkClC,SACC,KADD;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,oBAAC,aAAU,OAAQ,GAAI,SAAU,GAAI,aAAW,MAC/C,+BAAC,UAAO,SAAU,GACjB;AAAA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,IAEE,gBAAgB,WACjB;AAAA,MAAC;AAAA;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;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KAEF,GACD;AAEF;",
+  "names": []
+}

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

@@ -0,0 +1,142 @@
+// packages/block-library/src/navigation/edit/overlay-template-part-selector.js
+import { useMemo } from "@wordpress/element";
+import { useEntityRecords } from "@wordpress/core-data";
+import { SelectControl, Spinner, Button } from "@wordpress/components";
+import { __, sprintf } from "@wordpress/i18n";
+import { decodeEntities } from "@wordpress/html-entities";
+import { createTemplatePartId } from "../../template-part/edit/utils/create-template-part-id";
+import { jsx, jsxs } from "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
+  } = useEntityRecords("postType", "wp_template_part", {
+    per_page: -1
+  });
+  const overlayTemplateParts = useMemo(() => {
+    if (!templateParts) {
+      return [];
+    }
+    return templateParts.filter(
+      (templatePart) => templatePart.area === "overlay"
+    );
+  }, [templateParts]);
+  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 parsedTemplatePart = useMemo(() => {
+    return parseTemplatePartId(overlay);
+  }, [overlay]);
+  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 isEditButtonDisabled = !overlay || !parsedTemplatePart || !onNavigateToEntityRecord || isResolving;
+  if (isResolving && !hasResolved) {
+    return /* @__PURE__ */ jsxs("div", { className: "wp-block-navigation__overlay-selector", children: [
+      /* @__PURE__ */ jsx(Spinner, {}),
+      /* @__PURE__ */ jsx("p", { children: __("Loading overlays\u2026") })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "wp-block-navigation__overlay-selector", children: [
+    /* @__PURE__ */ jsx(
+      SelectControl,
+      {
+        __next40pxDefaultSize: true,
+        __nextHasNoMarginBottom: true,
+        label: __("Overlay template"),
+        value: overlay || "",
+        options,
+        onChange: handleSelectChange,
+        disabled: isResolving,
+        accessibleWhenDisabled: true,
+        help: overlayTemplateParts.length === 0 && hasResolved ? __("No overlays found.") : __("Select an overlay to use for the navigation.")
+      }
+    ),
+    overlay && /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        variant: "secondary",
+        onClick: handleEditClick,
+        disabled: isEditButtonDisabled,
+        accessibleWhenDisabled: true,
+        "aria-label": selectedTemplatePart ? sprintf(
+          /* translators: %s: Overlay title. */
+          __("Edit overlay: %s"),
+          selectedTemplatePart.title?.rendered ? decodeEntities(
+            selectedTemplatePart.title.rendered
+          ) : selectedTemplatePart.slug
+        ) : __("Edit overlay"),
+        className: "wp-block-navigation__overlay-edit-button",
+        children: __("Edit")
+      }
+    )
+  ] });
+}
+export {
+  OverlayTemplatePartSelector as default
+};
+//# sourceMappingURL=overlay-template-part-selector.js.map

package/build-module/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-module/navigation/edit/overlay-visibility-control.js

@@ -0,0 +1,36 @@
+// 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,
+      __nextHasNoMarginBottom: 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.js.map

package/build-module/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": ";AAGA;AAAA,EACC,oCAAoC;AAAA,EACpC,0CAA0C;AAAA,OACpC;AACP,SAAS,UAAU;AAejB,SAYC,KAZD;AALa,SAAR,yBAA2C;AAAA,EACjD;AAAA,EACA;AACD,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,uBAAqB;AAAA,MACrB,yBAAuB;AAAA,MACvB,OAAQ,GAAI,oBAAqB;AAAA,MACjC,cAAa,GAAI,8BAA+B;AAAA,MAChD,OAAQ;AAAA,MACR,MAAO;AAAA,QACN;AAAA,MACD;AAAA,MACA,UAAW,CAAE,UAAW,cAAe,EAAE,aAAa,MAAM,CAAE;AAAA,MAC9D,SAAO;AAAA,MAEP;AAAA,4BAAC,4BAAyB,OAAM,SAAQ,OAAQ,GAAI,KAAM,GAAI;AAAA,QAC9D,oBAAC,4BAAyB,OAAM,UAAS,OAAQ,GAAI,QAAS,GAAI;AAAA,QAClE,oBAAC,4BAAyB,OAAM,UAAS,OAAQ,GAAI,QAAS,GAAI;AAAA;AAAA;AAAA,EACnE;AAEF;",
+  "names": []
+}

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

@@ -16,7 +16,9 @@ function ResponsiveWrapper({
   overlayBackgroundColor,
   overlayTextColor,
   hasIcon,
-  icon
+  icon,
+  overlay,
+  onNavigateToEntityRecord
 }) {
   if (!isResponsive) {
     return children;
@@ -52,6 +54,16 @@ function ResponsiveWrapper({
       "aria-label": __("Menu")
     }
   };
+  const handleToggleClick = () => {
+    if (overlay && onNavigateToEntityRecord) {
+      onNavigateToEntityRecord({
+        postId: overlay,
+        postType: "wp_template_part"
+      });
+      return;
+    }
+    onToggle(true);
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     !isOpen && /* @__PURE__ */ jsxs(
       Button,
@@ -60,7 +72,7 @@ function ResponsiveWrapper({
         "aria-haspopup": "true",
         "aria-label": hasIcon && __("Open menu"),
         className: openButtonClasses,
-        onClick: () => onToggle(true),
+        onClick: handleToggleClick,
         children: [
           hasIcon && /* @__PURE__ */ jsx(OverlayMenuIcon, { icon }),
           !hasIcon && __("Menu")

package/build-module/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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,OAAO,YAAY;AAC5B,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,yBAAyB;AAKlC,OAAO,qBAAqB;AA8D1B,mBASgB,KAPd,YAFF;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,6BAA6B;AAAA,IAClC;AAAA,IACA;AAAA,MACC,kBACC,CAAC,CAAE,iBAAiB,SAAS,CAAC,CAAE,kBAAkB;AAAA,MACnD,CAAE,kBAAmB,SAAS,kBAAkB,IAAK,CAAE,GACtD,CAAC,CAAE,kBAAkB;AAAA,MACtB,kBACC,CAAC,CAAE,uBAAuB,SAC1B,wBAAwB;AAAA,MACzB,CAAE;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,oBAAoB;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,cAAc,GAAI,MAAO;AAAA,IAC1B;AAAA,EACD;AAEA,SACC,iCACG;AAAA,KAAE,UACH;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,iBAAc;AAAA,QACd,cAAa,WAAW,GAAI,WAAY;AAAA,QACxC,WAAY;AAAA,QACZ,SAAU,MAAM,SAAU,IAAK;AAAA,QAE7B;AAAA,qBAAW,oBAAC,mBAAgB,MAAc;AAAA,UAC1C,CAAE,WAAW,GAAI,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,+BAAC,SAAM,GAAG,aACT;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,WAAU;AAAA,kBACV,cAAa,WAAW,GAAI,YAAa;AAAA,kBACzC,SAAU,MAAM,SAAU,KAAM;AAAA,kBAE9B;AAAA,+BAAW,oBAAC,QAAK,MAAO,OAAQ;AAAA,oBAChC,CAAE,WAAW,GAAI,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": ";AAGA,OAAO,UAAU;AAKjB,SAAS,OAAO,YAAY;AAC5B,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,yBAAyB;AAKlC,OAAO,qBAAqB;AA6E1B,mBASgB,KAPd,YAFF;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,6BAA6B;AAAA,IAClC;AAAA,IACA;AAAA,MACC,kBACC,CAAC,CAAE,iBAAiB,SAAS,CAAC,CAAE,kBAAkB;AAAA,MACnD,CAAE,kBAAmB,SAAS,kBAAkB,IAAK,CAAE,GACtD,CAAC,CAAE,kBAAkB;AAAA,MACtB,kBACC,CAAC,CAAE,uBAAuB,SAC1B,wBAAwB;AAAA,MACzB,CAAE;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,oBAAoB;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,cAAc,GAAI,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,iCACG;AAAA,KAAE,UACH;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,iBAAc;AAAA,QACd,cAAa,WAAW,GAAI,WAAY;AAAA,QACxC,WAAY;AAAA,QACZ,SAAU;AAAA,QAER;AAAA,qBAAW,oBAAC,mBAAgB,MAAc;AAAA,UAC1C,CAAE,WAAW,GAAI,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,+BAAC,SAAM,GAAG,aACT;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACA,uBAAqB;AAAA,kBACrB,WAAU;AAAA,kBACV,cAAa,WAAW,GAAI,YAAa;AAAA,kBACzC,SAAU,MAAM,SAAU,KAAM;AAAA,kBAE9B;AAAA,+BAAW,oBAAC,QAAK,MAAO,OAAQ;AAAA,oBAChC,CAAE,WAAW,GAAI,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": []
 }

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

@@ -29,9 +29,9 @@ import { getColors } from "../navigation/edit/utils";
 import {
   Controls,
   LinkUI,
-  updateAttributes,
   useEntityBinding,
-  MissingEntityHelpText
+  MissingEntityHelpText,
+  useHandleLinkChange
 } from "./shared";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_BLOCK = { name: "core/navigation-link" };
@@ -188,15 +188,15 @@ function NavigationLinkEdit({
     [clientId, maxNestingLevel]
   );
   const { getBlocks } = useSelect(blockEditorStore);
-  const {
-    clearBinding,
-    createBinding,
-    hasUrlBinding,
-    isBoundEntityAvailable
-  } = useEntityBinding({
+  const { hasUrlBinding, isBoundEntityAvailable } = useEntityBinding({
     clientId,
     attributes
   });
+  const handleLinkChange = useHandleLinkChange({
+    clientId,
+    attributes,
+    setAttributes
+  });
   const [isInvalid, isDraft] = useIsInvalidLink(
     kind,
     type,
@@ -439,21 +439,7 @@ function NavigationLinkEdit({
             },
             anchor: popoverAnchor,
             onRemove: removeLink,
-            onChange: (updatedValue) => {
-              const {
-                isEntityLink,
-                attributes: updatedAttributes
-              } = updateAttributes(
-                updatedValue,
-                setAttributes,
-                attributes
-              );
-              if (isEntityLink) {
-                createBinding(updatedAttributes);
-              } else {
-                clearBinding();
-              }
-            }
+            onChange: handleLinkChange
           }
         )
       ] }),