@wordpress/block-library 9.38.0 → 9.39.0

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

@@ -1,7 +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;",
+  "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';\nimport OverlayPreview from './overlay-preview';\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 * @param {string}   props.currentTheme              Current theme stylesheet name.\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\tcurrentTheme,\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\n\t\t\t\t{ overlayMenu !== 'never' && overlay && (\n\t\t\t\t\t<OverlayPreview\n\t\t\t\t\t\toverlay={ overlay }\n\t\t\t\t\t\tcurrentTheme={ currentTheme }\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;AACrC,OAAO,oBAAoB;AAoCxB,SACC,KADD;AAhBY,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;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,IAGC,gBAAgB,WAAW,WAC5B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA;AAAA,IACD;AAAA,KAEF,GACD;AAEF;",
   "names": []
 }

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

@@ -0,0 +1,99 @@
+// packages/block-library/src/navigation/edit/overlay-preview.js
+import { useSelect } from "@wordpress/data";
+import { store as coreStore } from "@wordpress/core-data";
+import { useMemo } from "@wordpress/element";
+import { parse } from "@wordpress/blocks";
+import { Spinner } from "@wordpress/components";
+import { __ } from "@wordpress/i18n";
+import { BlockPreview } from "@wordpress/block-editor";
+import { createTemplatePartId } from "../../template-part/edit/utils/create-template-part-id.mjs";
+import { jsx } from "react/jsx-runtime";
+function OverlayPreview({ overlay, currentTheme }) {
+  const templatePartId = useMemo(() => {
+    if (!overlay || !currentTheme) {
+      return null;
+    }
+    return createTemplatePartId(currentTheme, overlay);
+  }, [currentTheme, overlay]);
+  const { content, editedBlocks, hasResolved, recordExists } = useSelect(
+    (select) => {
+      if (!templatePartId) {
+        return {
+          content: null,
+          editedBlocks: null,
+          hasResolved: true,
+          recordExists: false
+        };
+      }
+      const { getEditedEntityRecord, hasFinishedResolution } = select(coreStore);
+      const editedRecord = getEditedEntityRecord(
+        "postType",
+        "wp_template_part",
+        templatePartId,
+        { context: "view" }
+      );
+      return {
+        content: editedRecord?.content,
+        editedBlocks: editedRecord?.blocks,
+        hasResolved: hasFinishedResolution("getEditedEntityRecord", [
+          "postType",
+          "wp_template_part",
+          templatePartId,
+          { context: "view" }
+        ]),
+        recordExists: !!editedRecord
+      };
+    },
+    [templatePartId]
+  );
+  const blocks = useMemo(() => {
+    if (!templatePartId) {
+      return null;
+    }
+    if (editedBlocks && editedBlocks.length > 0) {
+      return editedBlocks;
+    }
+    if (content && typeof content === "string") {
+      return parse(content);
+    }
+    return [];
+  }, [templatePartId, editedBlocks, content]);
+  if (!overlay) {
+    return null;
+  }
+  if (!hasResolved) {
+    return /* @__PURE__ */ jsx("div", { className: "wp-block-navigation__overlay-preview-loading", children: /* @__PURE__ */ jsx(Spinner, {}) });
+  }
+  if (hasResolved && !recordExists) {
+    return /* @__PURE__ */ jsx("div", { className: "wp-block-navigation__overlay-preview-empty", children: __("This overlay template part no longer exists.") });
+  }
+  if (!blocks || blocks.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "wp-block-navigation__overlay-preview-empty", children: __("This overlay is empty.") });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "wp-block-navigation__overlay-preview",
+      "aria-label": __("Navigation Overlay template part preview"),
+      role: "region",
+      children: /* @__PURE__ */ jsx(
+        BlockPreview.Async,
+        {
+          placeholder: /* @__PURE__ */ jsx("div", { className: "wp-block-navigation__overlay-preview-placeholder" }),
+          children: /* @__PURE__ */ jsx(
+            BlockPreview,
+            {
+              blocks,
+              viewportWidth: 400,
+              minHeight: 200
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  OverlayPreview as default
+};
+//# sourceMappingURL=overlay-preview.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/edit/overlay-preview.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useMemo } from '@wordpress/element';\nimport { parse } from '@wordpress/blocks';\nimport { Spinner } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { BlockPreview } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';\n\n/**\n * Component that displays a read-only visual preview of the selected overlay template part.\n *\n * @param {Object} props              Component props.\n * @param {string} props.overlay      The overlay template part slug.\n * @param {string} props.currentTheme The current theme stylesheet name.\n * @return {JSX.Element|null} The overlay preview component or null if no overlay is selected.\n */\nexport default function OverlayPreview( { overlay, currentTheme } ) {\n\tconst templatePartId = useMemo( () => {\n\t\tif ( ! overlay || ! currentTheme ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn createTemplatePartId( currentTheme, overlay );\n\t}, [ currentTheme, overlay ] );\n\n\tconst { content, editedBlocks, hasResolved, recordExists } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! templatePartId ) {\n\t\t\t\treturn {\n\t\t\t\t\tcontent: null,\n\t\t\t\t\teditedBlocks: null,\n\t\t\t\t\thasResolved: true,\n\t\t\t\t\trecordExists: false,\n\t\t\t\t};\n\t\t\t}\n\n\t\t\tconst { getEditedEntityRecord, hasFinishedResolution } =\n\t\t\t\tselect( coreStore );\n\n\t\t\tconst editedRecord = getEditedEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template_part',\n\t\t\t\ttemplatePartId,\n\t\t\t\t{ context: 'view' }\n\t\t\t);\n\n\t\t\treturn {\n\t\t\t\tcontent: editedRecord?.content,\n\t\t\t\teditedBlocks: editedRecord?.blocks,\n\t\t\t\thasResolved: hasFinishedResolution( 'getEditedEntityRecord', [\n\t\t\t\t\t'postType',\n\t\t\t\t\t'wp_template_part',\n\t\t\t\t\ttemplatePartId,\n\t\t\t\t\t{ context: 'view' },\n\t\t\t\t] ),\n\t\t\t\trecordExists: !! editedRecord,\n\t\t\t};\n\t\t},\n\t\t[ templatePartId ]\n\t);\n\n\tconst blocks = useMemo( () => {\n\t\tif ( ! templatePartId ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tif ( editedBlocks && editedBlocks.length > 0 ) {\n\t\t\treturn editedBlocks;\n\t\t}\n\n\t\tif ( content && typeof content === 'string' ) {\n\t\t\treturn parse( content );\n\t\t}\n\n\t\treturn [];\n\t}, [ templatePartId, editedBlocks, content ] );\n\n\tif ( ! overlay ) {\n\t\treturn null;\n\t}\n\n\tif ( ! hasResolved ) {\n\t\treturn (\n\t\t\t<div className=\"wp-block-navigation__overlay-preview-loading\">\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Show message if the overlay template part has been deleted.\n\tif ( hasResolved && ! recordExists ) {\n\t\treturn (\n\t\t\t<div className=\"wp-block-navigation__overlay-preview-empty\">\n\t\t\t\t{ __( 'This overlay template part no longer exists.' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif ( ! blocks || blocks.length === 0 ) {\n\t\treturn (\n\t\t\t<div className=\"wp-block-navigation__overlay-preview-empty\">\n\t\t\t\t{ __( 'This overlay is empty.' ) }\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"wp-block-navigation__overlay-preview\"\n\t\t\taria-label={ __( 'Navigation Overlay template part preview' ) }\n\t\t\trole=\"region\"\n\t\t>\n\t\t\t<BlockPreview.Async\n\t\t\t\tplaceholder={\n\t\t\t\t\t<div className=\"wp-block-navigation__overlay-preview-placeholder\" />\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<BlockPreview\n\t\t\t\t\tblocks={ blocks }\n\t\t\t\t\tviewportWidth={ 400 }\n\t\t\t\t\tminHeight={ 200 }\n\t\t\t\t/>\n\t\t\t</BlockPreview.Async>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC,SAAS,eAAe;AACxB,SAAS,aAAa;AACtB,SAAS,eAAe;AACxB,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAK7B,SAAS,4BAA4B;AA6EjC;AAnEW,SAAR,eAAiC,EAAE,SAAS,aAAa,GAAI;AACnE,QAAM,iBAAiB,QAAS,MAAM;AACrC,QAAK,CAAE,WAAW,CAAE,cAAe;AAClC,aAAO;AAAA,IACR;AACA,WAAO,qBAAsB,cAAc,OAAQ;AAAA,EACpD,GAAG,CAAE,cAAc,OAAQ,CAAE;AAE7B,QAAM,EAAE,SAAS,cAAc,aAAa,aAAa,IAAI;AAAA,IAC5D,CAAE,WAAY;AACb,UAAK,CAAE,gBAAiB;AACvB,eAAO;AAAA,UACN,SAAS;AAAA,UACT,cAAc;AAAA,UACd,aAAa;AAAA,UACb,cAAc;AAAA,QACf;AAAA,MACD;AAEA,YAAM,EAAE,uBAAuB,sBAAsB,IACpD,OAAQ,SAAU;AAEnB,YAAM,eAAe;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,QACA,EAAE,SAAS,OAAO;AAAA,MACnB;AAEA,aAAO;AAAA,QACN,SAAS,cAAc;AAAA,QACvB,cAAc,cAAc;AAAA,QAC5B,aAAa,sBAAuB,yBAAyB;AAAA,UAC5D;AAAA,UACA;AAAA,UACA;AAAA,UACA,EAAE,SAAS,OAAO;AAAA,QACnB,CAAE;AAAA,QACF,cAAc,CAAC,CAAE;AAAA,MAClB;AAAA,IACD;AAAA,IACA,CAAE,cAAe;AAAA,EAClB;AAEA,QAAM,SAAS,QAAS,MAAM;AAC7B,QAAK,CAAE,gBAAiB;AACvB,aAAO;AAAA,IACR;AAEA,QAAK,gBAAgB,aAAa,SAAS,GAAI;AAC9C,aAAO;AAAA,IACR;AAEA,QAAK,WAAW,OAAO,YAAY,UAAW;AAC7C,aAAO,MAAO,OAAQ;AAAA,IACvB;AAEA,WAAO,CAAC;AAAA,EACT,GAAG,CAAE,gBAAgB,cAAc,OAAQ,CAAE;AAE7C,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,MAAK,CAAE,aAAc;AACpB,WACC,oBAAC,SAAI,WAAU,gDACd,8BAAC,WAAQ,GACV;AAAA,EAEF;AAGA,MAAK,eAAe,CAAE,cAAe;AACpC,WACC,oBAAC,SAAI,WAAU,8CACZ,aAAI,8CAA+C,GACtD;AAAA,EAEF;AAEA,MAAK,CAAE,UAAU,OAAO,WAAW,GAAI;AACtC,WACC,oBAAC,SAAI,WAAU,8CACZ,aAAI,wBAAyB,GAChC;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,cAAa,GAAI,0CAA2C;AAAA,MAC5D,MAAK;AAAA,MAEL;AAAA,QAAC,aAAa;AAAA,QAAb;AAAA,UACA,aACC,oBAAC,SAAI,WAAU,oDAAmD;AAAA,UAGnE;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,eAAgB;AAAA,cAChB,WAAY;AAAA;AAAA,UACb;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

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

@@ -1,7 +1,7 @@
 // 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 { useEntityRecords, store as coreStore } from "@wordpress/core-data";
+import { useDispatch, useSelect } from "@wordpress/data";
 import {
   SelectControl,
   Button,
@@ -15,6 +15,7 @@ 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 DeletedOverlayWarning from "./deleted-overlay-warning.mjs";
 import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from "../constants.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 function OverlayTemplatePartSelector({
@@ -30,6 +31,10 @@ function OverlayTemplatePartSelector({
     per_page: -1
   });
   const { createErrorNotice } = useDispatch(noticesStore);
+  const currentTheme = useSelect(
+    (select) => select(coreStore).getCurrentTheme()?.stylesheet,
+    []
+  );
   const [isCreating, setIsCreating] = useState(false);
   const overlayTemplateParts = useMemo(() => {
     if (!templateParts) {
@@ -40,6 +45,14 @@ function OverlayTemplatePartSelector({
     );
   }, [templateParts]);
   const createOverlayTemplatePart = useCreateOverlayTemplatePart(overlayTemplateParts);
+  const selectedTemplatePart = useMemo(() => {
+    if (!overlay || !overlayTemplateParts) {
+      return null;
+    }
+    return overlayTemplateParts.find(
+      (templatePart) => templatePart.slug === overlay
+    );
+  }, [overlay, overlayTemplateParts]);
   const options = useMemo(() => {
     const baseOptions = [
       {
@@ -52,42 +65,44 @@ function OverlayTemplatePartSelector({
     }
     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
+          value: templatePart.slug
         };
       }
     );
-    return [...baseOptions, ...templatePartOptions];
-  }, [overlayTemplateParts, hasResolved, isResolving]);
-  const selectedTemplatePart = useMemo(() => {
-    if (!overlay || !overlayTemplateParts) {
-      return null;
+    if (overlay && !selectedTemplatePart) {
+      templatePartOptions.unshift({
+        label: sprintf(
+          /* translators: %s: Overlay slug. */
+          __("%s (missing)"),
+          overlay
+        ),
+        value: overlay
+      });
     }
-    return overlayTemplateParts.find((templatePart) => {
-      const templatePartId = createTemplatePartId(
-        templatePart.theme,
-        templatePart.slug
-      );
-      return templatePartId === overlay;
-    });
-  }, [overlay, overlayTemplateParts]);
+    return [...baseOptions, ...templatePartOptions];
+  }, [
+    overlayTemplateParts,
+    hasResolved,
+    isResolving,
+    overlay,
+    selectedTemplatePart
+  ]);
   const handleSelectChange = (value) => {
     setAttributes({
       overlay: value || void 0
     });
   };
   const handleEditClick = () => {
-    if (!overlay || !onNavigateToEntityRecord) {
+    if (!overlay || !selectedTemplatePart || !onNavigateToEntityRecord) {
       return;
     }
+    const theme = selectedTemplatePart.theme || currentTheme;
+    const templatePartId = createTemplatePartId(theme, overlay);
     onNavigateToEntityRecord({
-      postId: overlay,
+      postId: templatePartId,
       postType: "wp_template_part"
     });
   };
@@ -96,11 +111,16 @@ function OverlayTemplatePartSelector({
       setIsCreating(true);
       const templatePart = await createOverlayTemplatePart();
       setAttributes({
-        overlay: templatePart.id
+        overlay: templatePart.slug
       });
       if (onNavigateToEntityRecord) {
+        const theme = templatePart.theme || currentTheme;
+        const templatePartId = createTemplatePartId(
+          theme,
+          templatePart.slug
+        );
         onNavigateToEntityRecord({
-          postId: templatePart.id,
+          postId: templatePartId,
           postType: "wp_template_part"
         });
       }
@@ -114,9 +134,16 @@ function OverlayTemplatePartSelector({
     createOverlayTemplatePart,
     setAttributes,
     onNavigateToEntityRecord,
-    createErrorNotice
+    createErrorNotice,
+    currentTheme
   ]);
+  const handleClearOverlay = useCallback(() => {
+    setAttributes({ overlay: void 0 });
+  }, [setAttributes]);
   const isCreateButtonDisabled = isResolving || isCreating;
+  const isOverlayMissing = useMemo(() => {
+    return overlay && hasResolved && !isResolving && !selectedTemplatePart;
+  }, [overlay, hasResolved, isResolving, selectedTemplatePart]);
   const helpText = useMemo(() => {
     if (overlayTemplateParts.length === 0 && hasResolved) {
       return __("No overlays found.");
@@ -174,7 +201,15 @@ function OverlayTemplatePartSelector({
           children: __("Edit")
         }
       ) })
-    ] })
+    ] }),
+    isOverlayMissing && /* @__PURE__ */ jsx(
+      DeletedOverlayWarning,
+      {
+        onClear: handleClearOverlay,
+        onCreate: handleCreateOverlay,
+        isCreating
+      }
+    )
   ] });
 }
 export {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/navigation/edit/overlay-template-part-selector.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useState, useCallback } from '@wordpress/element';\nimport { useEntityRecords } from '@wordpress/core-data';\nimport { useDispatch } from '@wordpress/data';\nimport {\n\tSelectControl,\n\tButton,\n\tFlexBlock,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';\nimport useCreateOverlayTemplatePart from './use-create-overlay';\nimport { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';\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\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\t// Track if we're currently creating a new overlay\n\tconst [ isCreating, setIsCreating ] = useState( false );\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 ) =>\n\t\t\t\ttemplatePart.area === NAVIGATION_OVERLAY_TEMPLATE_PART_AREA\n\t\t);\n\t}, [ templateParts ] );\n\n\t// Hook to create overlay template part\n\tconst createOverlayTemplatePart =\n\t\tuseCreateOverlayTemplatePart( overlayTemplateParts );\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// 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 handleCreateOverlay = useCallback( async () => {\n\t\ttry {\n\t\t\tsetIsCreating( true );\n\n\t\t\tconst templatePart = await createOverlayTemplatePart();\n\n\t\t\tsetAttributes( {\n\t\t\t\toverlay: templatePart.id,\n\t\t\t} );\n\n\t\t\t// Navigate to the new overlay for editing\n\t\t\tif ( onNavigateToEntityRecord ) {\n\t\t\t\tonNavigateToEntityRecord( {\n\t\t\t\t\tpostId: templatePart.id,\n\t\t\t\t\tpostType: 'wp_template_part',\n\t\t\t\t} );\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\t// Error handling pattern matches CreateTemplatePartModalContents.\n\t\t\t// See: packages/fields/src/components/create-template-part-modal/index.tsx\n\t\t\t// The 'unknown_error' code check ensures generic error codes don't show\n\t\t\t// potentially confusing technical messages, instead showing a user-friendly fallback.\n\t\t\tconst errorMessage =\n\t\t\t\terror instanceof Error &&\n\t\t\t\t'code' in error &&\n\t\t\t\terror.message &&\n\t\t\t\terror.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __( 'An error occurred while creating the overlay.' );\n\n\t\t\tcreateErrorNotice( errorMessage, { type: 'snackbar' } );\n\t\t} finally {\n\t\t\tsetIsCreating( false );\n\t\t}\n\t}, [\n\t\tcreateOverlayTemplatePart,\n\t\tsetAttributes,\n\t\tonNavigateToEntityRecord,\n\t\tcreateErrorNotice,\n\t] );\n\n\tconst isCreateButtonDisabled = isResolving || isCreating;\n\n\t// Build help text\n\tconst helpText = useMemo( () => {\n\t\tif ( overlayTemplateParts.length === 0 && hasResolved ) {\n\t\t\treturn __( 'No overlays found.' );\n\t\t}\n\t\treturn __( 'Select an overlay for navigation.' );\n\t}, [ overlayTemplateParts.length, hasResolved ] );\n\n\t// Tooltip/aria-label text for the edit button\n\tconst editButtonLabel = useMemo( () => {\n\t\treturn selectedTemplatePart\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %s: Overlay title. */\n\t\t\t\t\t__( 'Edit overlay: %s' ),\n\t\t\t\t\tselectedTemplatePart.title?.rendered\n\t\t\t\t\t\t? decodeEntities( selectedTemplatePart.title.rendered )\n\t\t\t\t\t\t: selectedTemplatePart.slug\n\t\t\t  )\n\t\t\t: __( 'Edit overlay' );\n\t}, [ selectedTemplatePart ] );\n\n\treturn (\n\t\t<div className=\"wp-block-navigation__overlay-selector\">\n\t\t\t<Button\n\t\t\t\tsize=\"small\"\n\t\t\t\ticon={ plus }\n\t\t\t\tonClick={ handleCreateOverlay }\n\t\t\t\tdisabled={ isCreateButtonDisabled }\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\tisBusy={ isCreating }\n\t\t\t\tlabel={ __( 'Create new overlay template' ) }\n\t\t\t\tshowTooltip\n\t\t\t\tclassName=\"wp-block-navigation__overlay-create-button\"\n\t\t\t/>\n\t\t\t<HStack alignment=\"flex-start\">\n\t\t\t\t<FlexBlock>\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Overlay template' ) }\n\t\t\t\t\t\tvalue={ overlay || '' }\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tonChange={ handleSelectChange }\n\t\t\t\t\t\tdisabled={ isResolving }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\thelp={ helpText }\n\t\t\t\t\t/>\n\t\t\t\t</FlexBlock>\n\t\t\t\t{ overlay && hasResolved && selectedTemplatePart && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={ handleEditClick }\n\t\t\t\t\t\t\tdisabled={ ! onNavigateToEntityRecord }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tlabel={ editButtonLabel }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__overlay-edit-button\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t</div>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useState, useCallback } from '@wordpress/element';\nimport { useEntityRecords, store as coreStore } from '@wordpress/core-data';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tSelectControl,\n\tButton,\n\tFlexBlock,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { plus } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';\nimport useCreateOverlayTemplatePart from './use-create-overlay';\nimport DeletedOverlayWarning from './deleted-overlay-warning';\nimport { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';\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\tconst { createErrorNotice } = useDispatch( noticesStore );\n\n\tconst currentTheme = useSelect(\n\t\t( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,\n\t\t[]\n\t);\n\n\t// Track if we're currently creating a new overlay\n\tconst [ isCreating, setIsCreating ] = useState( false );\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 ) =>\n\t\t\t\ttemplatePart.area === NAVIGATION_OVERLAY_TEMPLATE_PART_AREA\n\t\t);\n\t}, [ templateParts ] );\n\n\t// Hook to create overlay template part\n\tconst createOverlayTemplatePart =\n\t\tuseCreateOverlayTemplatePart( overlayTemplateParts );\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(\n\t\t\t( templatePart ) => templatePart.slug === overlay\n\t\t);\n\t}, [ overlay, overlayTemplateParts ] );\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 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: templatePart.slug,\n\t\t\t\t};\n\t\t\t}\n\t\t);\n\n\t\t// If an overlay is selected but not found in the list, add it as a \"missing\" option\n\t\tif ( overlay && ! selectedTemplatePart ) {\n\t\t\ttemplatePartOptions.unshift( {\n\t\t\t\tlabel: sprintf(\n\t\t\t\t\t/* translators: %s: Overlay slug. */\n\t\t\t\t\t__( '%s (missing)' ),\n\t\t\t\t\toverlay\n\t\t\t\t),\n\t\t\t\tvalue: overlay,\n\t\t\t} );\n\t\t}\n\n\t\treturn [ ...baseOptions, ...templatePartOptions ];\n\t}, [\n\t\toverlayTemplateParts,\n\t\thasResolved,\n\t\tisResolving,\n\t\toverlay,\n\t\tselectedTemplatePart,\n\t] );\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 (\n\t\t\t! overlay ||\n\t\t\t! selectedTemplatePart ||\n\t\t\t! onNavigateToEntityRecord\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Resolve the full template part ID using theme\n\t\t// Default to current theme if not set\n\t\tconst theme = selectedTemplatePart.theme || currentTheme;\n\t\tconst templatePartId = createTemplatePartId( theme, overlay );\n\n\t\tonNavigateToEntityRecord( {\n\t\t\tpostId: templatePartId,\n\t\t\tpostType: 'wp_template_part',\n\t\t} );\n\t};\n\n\tconst handleCreateOverlay = useCallback( async () => {\n\t\ttry {\n\t\t\tsetIsCreating( true );\n\n\t\t\tconst templatePart = await createOverlayTemplatePart();\n\n\t\t\tsetAttributes( {\n\t\t\t\toverlay: templatePart.slug,\n\t\t\t} );\n\n\t\t\t// Navigate to the new overlay for editing\n\t\t\t// Create the full ID using theme and slug\n\t\t\tif ( onNavigateToEntityRecord ) {\n\t\t\t\tconst theme = templatePart.theme || currentTheme;\n\t\t\t\tconst templatePartId = createTemplatePartId(\n\t\t\t\t\ttheme,\n\t\t\t\t\ttemplatePart.slug\n\t\t\t\t);\n\t\t\t\tonNavigateToEntityRecord( {\n\t\t\t\t\tpostId: templatePartId,\n\t\t\t\t\tpostType: 'wp_template_part',\n\t\t\t\t} );\n\t\t\t}\n\t\t} catch ( error ) {\n\t\t\t// Error handling pattern matches CreateTemplatePartModalContents.\n\t\t\t// See: packages/fields/src/components/create-template-part-modal/index.tsx\n\t\t\t// The 'unknown_error' code check ensures generic error codes don't show\n\t\t\t// potentially confusing technical messages, instead showing a user-friendly fallback.\n\t\t\tconst errorMessage =\n\t\t\t\terror instanceof Error &&\n\t\t\t\t'code' in error &&\n\t\t\t\terror.message &&\n\t\t\t\terror.code !== 'unknown_error'\n\t\t\t\t\t? error.message\n\t\t\t\t\t: __( 'An error occurred while creating the overlay.' );\n\n\t\t\tcreateErrorNotice( errorMessage, { type: 'snackbar' } );\n\t\t} finally {\n\t\t\tsetIsCreating( false );\n\t\t}\n\t}, [\n\t\tcreateOverlayTemplatePart,\n\t\tsetAttributes,\n\t\tonNavigateToEntityRecord,\n\t\tcreateErrorNotice,\n\t\tcurrentTheme,\n\t] );\n\n\tconst handleClearOverlay = useCallback( () => {\n\t\tsetAttributes( { overlay: undefined } );\n\t}, [ setAttributes ] );\n\n\tconst isCreateButtonDisabled = isResolving || isCreating;\n\n\t// Check if the selected overlay is missing (deleted)\n\tconst isOverlayMissing = useMemo( () => {\n\t\treturn (\n\t\t\toverlay && hasResolved && ! isResolving && ! selectedTemplatePart\n\t\t);\n\t}, [ overlay, hasResolved, isResolving, selectedTemplatePart ] );\n\n\t// Build help text\n\tconst helpText = useMemo( () => {\n\t\tif ( overlayTemplateParts.length === 0 && hasResolved ) {\n\t\t\treturn __( 'No overlays found.' );\n\t\t}\n\t\treturn __( 'Select an overlay for navigation.' );\n\t}, [ overlayTemplateParts.length, hasResolved ] );\n\n\t// Tooltip/aria-label text for the edit button\n\tconst editButtonLabel = useMemo( () => {\n\t\treturn selectedTemplatePart\n\t\t\t? sprintf(\n\t\t\t\t\t/* translators: %s: Overlay title. */\n\t\t\t\t\t__( 'Edit overlay: %s' ),\n\t\t\t\t\tselectedTemplatePart.title?.rendered\n\t\t\t\t\t\t? decodeEntities( selectedTemplatePart.title.rendered )\n\t\t\t\t\t\t: selectedTemplatePart.slug\n\t\t\t  )\n\t\t\t: __( 'Edit overlay' );\n\t}, [ selectedTemplatePart ] );\n\n\treturn (\n\t\t<div className=\"wp-block-navigation__overlay-selector\">\n\t\t\t<Button\n\t\t\t\tsize=\"small\"\n\t\t\t\ticon={ plus }\n\t\t\t\tonClick={ handleCreateOverlay }\n\t\t\t\tdisabled={ isCreateButtonDisabled }\n\t\t\t\taccessibleWhenDisabled\n\t\t\t\tisBusy={ isCreating }\n\t\t\t\tlabel={ __( 'Create new overlay template' ) }\n\t\t\t\tshowTooltip\n\t\t\t\tclassName=\"wp-block-navigation__overlay-create-button\"\n\t\t\t/>\n\t\t\t<HStack alignment=\"flex-start\">\n\t\t\t\t<FlexBlock>\n\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\t\tlabel={ __( 'Overlay template' ) }\n\t\t\t\t\t\tvalue={ overlay || '' }\n\t\t\t\t\t\toptions={ options }\n\t\t\t\t\t\tonChange={ handleSelectChange }\n\t\t\t\t\t\tdisabled={ isResolving }\n\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\thelp={ helpText }\n\t\t\t\t\t/>\n\t\t\t\t</FlexBlock>\n\t\t\t\t{ overlay && hasResolved && selectedTemplatePart && (\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={ handleEditClick }\n\t\t\t\t\t\t\tdisabled={ ! onNavigateToEntityRecord }\n\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\tlabel={ editButtonLabel }\n\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__overlay-edit-button\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Edit' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t) }\n\t\t\t</HStack>\n\t\t\t{ isOverlayMissing && (\n\t\t\t\t<DeletedOverlayWarning\n\t\t\t\t\tonClear={ handleClearOverlay }\n\t\t\t\t\tonCreate={ handleCreateOverlay }\n\t\t\t\t\tisCreating={ isCreating }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -4,7 +4,10 @@ import { close, Icon } from "@wordpress/icons";
 import { Button } from "@wordpress/components";
 import { __ } from "@wordpress/i18n";
 import { getColorClassName } from "@wordpress/block-editor";
+import { useSelect } from "@wordpress/data";
+import { store as coreStore } from "@wordpress/core-data";
 import OverlayMenuIcon from "./overlay-menu-icon.mjs";
+import { createTemplatePartId } from "../../template-part/edit/utils/create-template-part-id.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ResponsiveWrapper({
   children,
@@ -20,6 +23,10 @@ function ResponsiveWrapper({
   overlay,
   onNavigateToEntityRecord
 }) {
+  const currentTheme = useSelect(
+    (select) => select(coreStore).getCurrentTheme()?.stylesheet,
+    []
+  );
   if (!isResponsive) {
     return children;
   }
@@ -59,8 +66,12 @@ function ResponsiveWrapper({
   };
   const handleToggleClick = () => {
     if (overlay && onNavigateToEntityRecord) {
+      const templatePartId = createTemplatePartId(
+        currentTheme,
+        overlay
+      );
       onNavigateToEntityRecord({
-        postId: overlay,
+        postId: templatePartId,
         postType: "wp_template_part"
       });
       return;

package/build-module/navigation/edit/responsive-wrapper.mjs.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\toverlay,\n\tonNavigateToEntityRecord,\n} ) {\n\tif ( ! isResponsive ) {\n\t\treturn children;\n\t}\n\n\t// Only apply overlay colors if there's no custom overlay template part.\n\tconst hasCustomOverlay = !! overlay;\n\n\tconst responsiveContainerClasses = clsx(\n\t\t'wp-block-navigation__responsive-container',\n\t\t! hasCustomOverlay && {\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},\n\t\t{\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 = ! hasCustomOverlay\n\t\t? {\n\t\t\t\tcolor: ! overlayTextColor?.slug && overlayTextColor?.color,\n\t\t\t\tbackgroundColor:\n\t\t\t\t\t! overlayBackgroundColor?.slug &&\n\t\t\t\t\toverlayBackgroundColor?.color &&\n\t\t\t\t\toverlayBackgroundColor.color,\n\t\t  }\n\t\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;AAoF1B,mBASgB,KAPd,YAFF;AAlFa,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;AAGA,QAAM,mBAAmB,CAAC,CAAE;AAE5B,QAAM,6BAA6B;AAAA,IAClC;AAAA,IACA,CAAE,oBAAoB;AAAA,MACrB,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,IACjC;AAAA,IACA;AAAA,MACC,gBAAgB;AAAA,MAChB,qBAAqB;AAAA,IACtB;AAAA,EACD;AAEA,QAAM,SAAS,CAAE,mBACd;AAAA,IACA,OAAO,CAAE,kBAAkB,QAAQ,kBAAkB;AAAA,IACrD,iBACC,CAAE,wBAAwB,QAC1B,wBAAwB,SACxB,uBAAuB;AAAA,EACxB,IACA,CAAC;AAEJ,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;",
+  "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';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport OverlayMenuIcon from './overlay-menu-icon';\nimport { createTemplatePartId } from '../../template-part/edit/utils/create-template-part-id';\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\tconst currentTheme = useSelect(\n\t\t( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,\n\t\t[]\n\t);\n\n\tif ( ! isResponsive ) {\n\t\treturn children;\n\t}\n\n\t// Only apply overlay colors if there's no custom overlay template part.\n\tconst hasCustomOverlay = !! overlay;\n\n\tconst responsiveContainerClasses = clsx(\n\t\t'wp-block-navigation__responsive-container',\n\t\t! hasCustomOverlay && {\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},\n\t\t{\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 = ! hasCustomOverlay\n\t\t? {\n\t\t\t\tcolor: ! overlayTextColor?.slug && overlayTextColor?.color,\n\t\t\t\tbackgroundColor:\n\t\t\t\t\t! overlayBackgroundColor?.slug &&\n\t\t\t\t\toverlayBackgroundColor?.color &&\n\t\t\t\t\toverlayBackgroundColor.color,\n\t\t  }\n\t\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\tconst templatePartId = createTemplatePartId(\n\t\t\t\tcurrentTheme,\n\t\t\t\toverlay\n\t\t\t);\n\n\t\t\tonNavigateToEntityRecord( {\n\t\t\t\tpostId: templatePartId,\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": "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",
   "names": []
 }

package/build-module/navigation/edit/use-create-overlay.mjs

@@ -1,13 +1,21 @@
 // packages/block-library/src/navigation/edit/use-create-overlay.js
 import { useCallback } from "@wordpress/element";
-import { useDispatch } from "@wordpress/data";
+import { useDispatch, useSelect } from "@wordpress/data";
 import { store as coreStore } from "@wordpress/core-data";
+import { store as blockEditorStore } from "@wordpress/block-editor";
 import { __ } from "@wordpress/i18n";
-import { serialize, createBlock } from "@wordpress/blocks";
+import { parse, serialize, createBlock } from "@wordpress/blocks";
 import { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from "./utils.mjs";
 import { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from "../constants.mjs";
+import { unlock } from "../../lock-unlock.mjs";
 function useCreateOverlayTemplatePart(overlayTemplateParts) {
   const { saveEntityRecord } = useDispatch(coreStore);
+  const pattern = useSelect(
+    (select) => unlock(select(blockEditorStore)).getPatternBySlug(
+      "gutenberg/navigation-overlay"
+    ),
+    []
+  );
   const createOverlayTemplatePart = useCallback(async () => {
     const templatePartsWithTitles = overlayTemplateParts.filter(
       (templatePart2) => templatePart2.title?.rendered
@@ -17,19 +25,28 @@ function useCreateOverlayTemplatePart(overlayTemplateParts) {
       templatePartsWithTitles
     );
     const cleanSlug = getCleanTemplatePartSlug(uniqueTitle);
+    let initialContent = "";
+    if (pattern?.content) {
+      const blocks = parse(pattern.content, {
+        __unstableSkipMigrationLogs: true
+      });
+      initialContent = serialize(blocks);
+    } else {
+      initialContent = serialize([createBlock("core/paragraph")]);
+    }
     const templatePart = await saveEntityRecord(
       "postType",
       "wp_template_part",
       {
         slug: cleanSlug,
         title: uniqueTitle,
-        content: serialize([createBlock("core/paragraph")]),
+        content: initialContent,
         area: NAVIGATION_OVERLAY_TEMPLATE_PART_AREA
       },
       { throwOnError: true }
     );
     return templatePart;
-  }, [overlayTemplateParts, saveEntityRecord]);
+  }, [overlayTemplateParts, saveEntityRecord, pattern]);
   return createOverlayTemplatePart;
 }
 export {

package/build-module/navigation/edit/use-create-overlay.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/navigation/edit/use-create-overlay.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { useDispatch } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\nimport { serialize, createBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from './utils';\nimport { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';\n\n/**\n * Hook to create a new overlay template part.\n *\n * @param {Array} overlayTemplateParts Array of existing overlay template parts.\n * @return {function(): Promise<Object>} Function to create a new overlay template part.\n *                                      The function returns a Promise that resolves to the created template part object.\n */\nexport default function useCreateOverlayTemplatePart( overlayTemplateParts ) {\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\n\tconst createOverlayTemplatePart = useCallback( async () => {\n\t\t// Generate unique name using only overlay area template parts\n\t\t// Filter to only include template parts with titles for uniqueness check\n\t\tconst templatePartsWithTitles = overlayTemplateParts.filter(\n\t\t\t( templatePart ) => templatePart.title?.rendered\n\t\t);\n\t\tconst uniqueTitle = getUniqueTemplatePartTitle(\n\t\t\t__( 'Overlay' ),\n\t\t\ttemplatePartsWithTitles\n\t\t);\n\t\tconst cleanSlug = getCleanTemplatePartSlug( uniqueTitle );\n\n\t\t// Create the template part\n\t\tconst templatePart = await saveEntityRecord(\n\t\t\t'postType',\n\t\t\t'wp_template_part',\n\t\t\t{\n\t\t\t\tslug: cleanSlug,\n\t\t\t\ttitle: uniqueTitle,\n\t\t\t\tcontent: serialize( [ createBlock( 'core/paragraph' ) ] ),\n\t\t\t\tarea: NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,\n\t\t\t},\n\t\t\t{ throwOnError: true }\n\t\t);\n\n\t\treturn templatePart;\n\t}, [ overlayTemplateParts, saveEntityRecord ] );\n\n\treturn createOverlayTemplatePart;\n}\n"],
-  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,SAAS,iBAAiB;AACnC,SAAS,UAAU;AACnB,SAAS,WAAW,mBAAmB;AAKvC,SAAS,4BAA4B,gCAAgC;AACrE,SAAS,6CAA6C;AASvC,SAAR,6BAA+C,sBAAuB;AAC5E,QAAM,EAAE,iBAAiB,IAAI,YAAa,SAAU;AAEpD,QAAM,4BAA4B,YAAa,YAAY;AAG1D,UAAM,0BAA0B,qBAAqB;AAAA,MACpD,CAAEA,kBAAkBA,cAAa,OAAO;AAAA,IACzC;AACA,UAAM,cAAc;AAAA,MACnB,GAAI,SAAU;AAAA,MACd;AAAA,IACD;AACA,UAAM,YAAY,yBAA0B,WAAY;AAGxD,UAAM,eAAe,MAAM;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,QACC,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS,UAAW,CAAE,YAAa,gBAAiB,CAAE,CAAE;AAAA,QACxD,MAAM;AAAA,MACP;AAAA,MACA,EAAE,cAAc,KAAK;AAAA,IACtB;AAEA,WAAO;AAAA,EACR,GAAG,CAAE,sBAAsB,gBAAiB,CAAE;AAE9C,SAAO;AACR;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { store as blockEditorStore } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { parse, serialize, createBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { getUniqueTemplatePartTitle, getCleanTemplatePartSlug } from './utils';\nimport { NAVIGATION_OVERLAY_TEMPLATE_PART_AREA } from '../constants';\nimport { unlock } from '../../lock-unlock';\n\n/**\n * Hook to create a new overlay template part.\n *\n * @param {Array} overlayTemplateParts Array of existing overlay template parts.\n * @return {function(): Promise<Object>} Function to create a new overlay template part.\n *                                      The function returns a Promise that resolves to the created template part object.\n */\nexport default function useCreateOverlayTemplatePart( overlayTemplateParts ) {\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\tconst pattern = useSelect(\n\t\t( select ) =>\n\t\t\tunlock( select( blockEditorStore ) ).getPatternBySlug(\n\t\t\t\t'gutenberg/navigation-overlay'\n\t\t\t),\n\t\t[]\n\t);\n\n\tconst createOverlayTemplatePart = useCallback( async () => {\n\t\t// Generate unique name using only overlay area template parts\n\t\t// Filter to only include template parts with titles for uniqueness check\n\t\tconst templatePartsWithTitles = overlayTemplateParts.filter(\n\t\t\t( templatePart ) => templatePart.title?.rendered\n\t\t);\n\t\tconst uniqueTitle = getUniqueTemplatePartTitle(\n\t\t\t__( 'Overlay' ),\n\t\t\ttemplatePartsWithTitles\n\t\t);\n\t\tconst cleanSlug = getCleanTemplatePartSlug( uniqueTitle );\n\n\t\tlet initialContent = '';\n\n\t\tif ( pattern?.content ) {\n\t\t\t// Parse the pattern content into blocks and serialize it\n\t\t\tconst blocks = parse( pattern.content, {\n\t\t\t\t__unstableSkipMigrationLogs: true,\n\t\t\t} );\n\t\t\tinitialContent = serialize( blocks );\n\t\t} else {\n\t\t\t// Fallback to empty paragraph if pattern is not found\n\t\t\tinitialContent = serialize( [ createBlock( 'core/paragraph' ) ] );\n\t\t}\n\n\t\t// Create the template part\n\t\tconst templatePart = await saveEntityRecord(\n\t\t\t'postType',\n\t\t\t'wp_template_part',\n\t\t\t{\n\t\t\t\tslug: cleanSlug,\n\t\t\t\ttitle: uniqueTitle,\n\t\t\t\tcontent: initialContent,\n\t\t\t\tarea: NAVIGATION_OVERLAY_TEMPLATE_PART_AREA,\n\t\t\t},\n\t\t\t{ throwOnError: true }\n\t\t);\n\n\t\treturn templatePart;\n\t}, [ overlayTemplateParts, saveEntityRecord, pattern ] );\n\n\treturn createOverlayTemplatePart;\n}\n"],
+  "mappings": ";AAGA,SAAS,mBAAmB;AAC5B,SAAS,aAAa,iBAAiB;AACvC,SAAS,SAAS,iBAAiB;AACnC,SAAS,SAAS,wBAAwB;AAC1C,SAAS,UAAU;AACnB,SAAS,OAAO,WAAW,mBAAmB;AAK9C,SAAS,4BAA4B,gCAAgC;AACrE,SAAS,6CAA6C;AACtD,SAAS,cAAc;AASR,SAAR,6BAA+C,sBAAuB;AAC5E,QAAM,EAAE,iBAAiB,IAAI,YAAa,SAAU;AACpD,QAAM,UAAU;AAAA,IACf,CAAE,WACD,OAAQ,OAAQ,gBAAiB,CAAE,EAAE;AAAA,MACpC;AAAA,IACD;AAAA,IACD,CAAC;AAAA,EACF;AAEA,QAAM,4BAA4B,YAAa,YAAY;AAG1D,UAAM,0BAA0B,qBAAqB;AAAA,MACpD,CAAEA,kBAAkBA,cAAa,OAAO;AAAA,IACzC;AACA,UAAM,cAAc;AAAA,MACnB,GAAI,SAAU;AAAA,MACd;AAAA,IACD;AACA,UAAM,YAAY,yBAA0B,WAAY;AAExD,QAAI,iBAAiB;AAErB,QAAK,SAAS,SAAU;AAEvB,YAAM,SAAS,MAAO,QAAQ,SAAS;AAAA,QACtC,6BAA6B;AAAA,MAC9B,CAAE;AACF,uBAAiB,UAAW,MAAO;AAAA,IACpC,OAAO;AAEN,uBAAiB,UAAW,CAAE,YAAa,gBAAiB,CAAE,CAAE;AAAA,IACjE;AAGA,UAAM,eAAe,MAAM;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,QACC,MAAM;AAAA,QACN,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACP;AAAA,MACA,EAAE,cAAc,KAAK;AAAA,IACtB;AAEA,WAAO;AAAA,EACR,GAAG,CAAE,sBAAsB,kBAAkB,OAAQ,CAAE;AAEvD,SAAO;AACR;",
   "names": ["templatePart"]
 }

package/build-module/navigation/utils/get-submenu-visibility.mjs

@@ -0,0 +1,12 @@
+// packages/block-library/src/navigation/utils/get-submenu-visibility.js
+function getSubmenuVisibility(attributes) {
+  const { submenuVisibility, openSubmenusOnClick } = attributes;
+  if (submenuVisibility) {
+    return submenuVisibility;
+  }
+  return openSubmenusOnClick ? "click" : "hover";
+}
+export {
+  getSubmenuVisibility
+};
+//# sourceMappingURL=get-submenu-visibility.mjs.map

package/build-module/navigation/utils/get-submenu-visibility.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/navigation/utils/get-submenu-visibility.js"],
+  "sourcesContent": ["/**\n * Returns the submenu visibility value with backward compatibility\n * for the deprecated openSubmenusOnClick attribute.\n *\n * This function centralizes the migration logic from the boolean\n * openSubmenusOnClick to the new submenuVisibility enum.\n *\n * NOTE: Keep this function in sync with block_core_navigation_get_submenu_visibility\n * in packages/block-library/src/navigation/index.php\n *\n * @param {Object} attributes Block attributes containing submenuVisibility and/or openSubmenusOnClick.\n * @return {string} The visibility mode: 'hover', 'click', or 'always'.\n */\nexport function getSubmenuVisibility( attributes ) {\n\tconst { submenuVisibility, openSubmenusOnClick } = attributes;\n\n\t// If new attribute is set, use it\n\tif ( submenuVisibility ) {\n\t\treturn submenuVisibility;\n\t}\n\n\t// Fall back to old attribute for backward compatibility\n\t// openSubmenusOnClick: true  -> 'click'\n\t// openSubmenusOnClick: false -> 'hover'\n\t// openSubmenusOnClick: undefined -> 'hover' (default)\n\treturn openSubmenusOnClick ? 'click' : 'hover';\n}\n"],
+  "mappings": ";AAaO,SAAS,qBAAsB,YAAa;AAClD,QAAM,EAAE,mBAAmB,oBAAoB,IAAI;AAGnD,MAAK,mBAAoB;AACxB,WAAO;AAAA,EACR;AAMA,SAAO,sBAAsB,UAAU;AACxC;",
+  "names": []
+}

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

@@ -31,7 +31,9 @@ import {
   useHandleLinkChange,
   useIsInvalidLink,
   InvalidDraftDisplay,
-  useEnableLinkStatusValidation
+  useEnableLinkStatusValidation,
+  useIsDraggingWithin,
+  selectLabelText
 } from "./shared/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var DEFAULT_BLOCK = { name: "core/navigation-link" };
@@ -39,34 +41,6 @@ var NESTING_BLOCK_NAMES = [
   "core/navigation-link",
   "core/navigation-submenu"
 ];
-var useIsDraggingWithin = (elementRef) => {
-  const [isDraggingWithin, setIsDraggingWithin] = useState(false);
-  useEffect(() => {
-    const { ownerDocument } = elementRef.current;
-    function handleDragStart(event) {
-      handleDragEnter(event);
-    }
-    function handleDragEnd() {
-      setIsDraggingWithin(false);
-    }
-    function handleDragEnter(event) {
-      if (elementRef.current.contains(event.target)) {
-        setIsDraggingWithin(true);
-      } else {
-        setIsDraggingWithin(false);
-      }
-    }
-    ownerDocument.addEventListener("dragstart", handleDragStart);
-    ownerDocument.addEventListener("dragend", handleDragEnd);
-    ownerDocument.addEventListener("dragenter", handleDragEnter);
-    return () => {
-      ownerDocument.removeEventListener("dragstart", handleDragStart);
-      ownerDocument.removeEventListener("dragend", handleDragEnd);
-      ownerDocument.removeEventListener("dragenter", handleDragEnter);
-    };
-  }, [elementRef]);
-  return isDraggingWithin;
-};
 function getMissingText(type) {
   let missingText = "";
   switch (type) {
@@ -202,7 +176,7 @@ function NavigationLinkEdit({
     }
     isNewLink.current = false;
     if (isURL(prependHTTP(label)) && /^.+\.[a-z]+/.test(label)) {
-      selectLabelText();
+      selectLabelText(ref);
     } else {
       selectBlock(clientId, null);
       if (isSubmenu) {
@@ -213,16 +187,6 @@ function NavigationLinkEdit({
       }
     }
   }, [url, isLinkOpen, isNewLink, label]);
-  function selectLabelText() {
-    ref.current.focus();
-    const { ownerDocument } = ref.current;
-    const { defaultView } = ownerDocument;
-    const selection = defaultView.getSelection();
-    const range = ownerDocument.createRange();
-    range.selectNodeContents(ref.current);
-    selection.removeAllRanges();
-    selection.addRange(range);
-  }
   function removeLink() {
     setAttributes({
       url: void 0,