@wordpress/block-library 7.18.0 → 8.0.0

package/build-module/navigation/edit/unsaved-inner-blocks.js

@@ -1,10 +1,10 @@
-import { createElement, Fragment } from "@wordpress/element";
+import { createElement } from "@wordpress/element";
 
 /**
  * WordPress dependencies
  */
 import { useInnerBlocksProps } from '@wordpress/block-editor';
-import { Disabled, Spinner } from '@wordpress/components';
+import { Disabled } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
@@ -13,7 +13,7 @@ import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
  */
 
 import useNavigationMenu from '../use-navigation-menu';
-import useCreateNavigationMenu from './use-create-navigation-menu';
+import { areBlocksDirty } from './are-blocks-dirty';
 const EMPTY_OBJECT = {};
 const DRAFT_MENU_PARAMS = ['postType', 'wp_navigation', {
   status: 'draft',
@@ -26,9 +26,7 @@ const ALLOWED_BLOCKS = ['core/navigation-link', 'core/search', 'core/social-link
 export default function UnsavedInnerBlocks(_ref) {
   let {
     blocks,
-    clientId,
-    hasSavedUnsavedInnerBlocks,
-    onSave,
+    createNavigationMenu,
     hasSelection
   } = _ref;
   const originalBlocks = useRef();
@@ -38,13 +36,15 @@ export default function UnsavedInnerBlocks(_ref) {
     if (!(originalBlocks !== null && originalBlocks !== void 0 && originalBlocks.current)) {
       originalBlocks.current = blocks;
     }
-  }, [blocks]); // If the current inner blocks object is different in any way
-  // from the original inner blocks from the post content then the
-  // user has made changes to the inner blocks. At this point the inner
-  // blocks can be considered "dirty".
-  // We also make sure the current innerBlocks had a chance to be set.
+  }, [blocks]); // If the current inner blocks are different from the original inner blocks
+  // from the post content then the user has made changes to the inner blocks.
+  // At this point the inner blocks can be considered "dirty".
+  // Note: referential equality is not sufficient for comparison as the inner blocks
+  // of the page list are controlled and may be updated async due to syncing with
+  // entity records. As a result we need to perform a deep equality check skipping
+  // the page list's inner blocks.
 
-  const innerBlocksAreDirty = !!originalBlocks.current && blocks !== originalBlocks.current;
+  const innerBlocksAreDirty = areBlocksDirty(originalBlocks === null || originalBlocks === void 0 ? void 0 : originalBlocks.current, blocks);
   const shouldDirectInsert = useMemo(() => blocks.every(_ref2 => {
     let {
       name
@@ -54,7 +54,6 @@ export default function UnsavedInnerBlocks(_ref) {
   // avoiding the side-effects of this component for block previews.
 
   const isDisabled = useContext(Disabled.Context);
-  const savingLock = useRef(false);
   const innerBlocksProps = useInnerBlocksProps({
     className: 'wp-block-navigation__container'
   }, {
@@ -86,10 +85,7 @@ export default function UnsavedInnerBlocks(_ref) {
   const {
     hasResolvedNavigationMenus,
     navigationMenus
-  } = useNavigationMenu();
-  const {
-    create: createNavigationMenu
-  } = useCreateNavigationMenu(clientId); // Automatically save the uncontrolled blocks.
+  } = useNavigationMenu(); // Automatically save the uncontrolled blocks.
 
   useEffect(() => {
     // The block will be disabled when used in a BlockPreview.
@@ -104,19 +100,13 @@ export default function UnsavedInnerBlocks(_ref) {
     //
     // And finally only create the menu when the block is selected,
     // which is an indication they want to start editing.
-    if (isDisabled || hasSavedUnsavedInnerBlocks || isSaving || savingLock.current || !hasResolvedDraftNavigationMenus || !hasResolvedNavigationMenus || !hasSelection || !innerBlocksAreDirty) {
+    if (isDisabled || isSaving || !hasResolvedDraftNavigationMenus || !hasResolvedNavigationMenus || !hasSelection || !innerBlocksAreDirty) {
       return;
     }
 
-    savingLock.current = true;
-    createNavigationMenu(null, blocks).then(menu => {
-      onSave(menu);
-      savingLock.current = false;
-    });
+    createNavigationMenu(null, blocks);
   }, [isDisabled, isSaving, hasResolvedDraftNavigationMenus, hasResolvedNavigationMenus, draftNavigationMenus, navigationMenus, hasSelection, createNavigationMenu, blocks]);
   const Wrapper = isSaving ? Disabled : 'div';
-  return createElement(Fragment, null, isSaving ? createElement(Spinner, {
-    className: 'wp-block-navigation__uncontrolled-inner-blocks-loading-indicator'
-  }) : createElement(Wrapper, innerBlocksProps));
+  return createElement(Wrapper, innerBlocksProps);
 }
 //# sourceMappingURL=unsaved-inner-blocks.js.map

package/build-module/navigation/edit/unsaved-inner-blocks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/unsaved-inner-blocks.js"],"names":["useInnerBlocksProps","Disabled","Spinner","store","coreStore","useSelect","useContext","useEffect","useRef","useMemo","useNavigationMenu","useCreateNavigationMenu","EMPTY_OBJECT","DRAFT_MENU_PARAMS","status","per_page","DEFAULT_BLOCK","name","ALLOWED_BLOCKS","UnsavedInnerBlocks","blocks","clientId","hasSavedUnsavedInnerBlocks","onSave","hasSelection","originalBlocks","current","innerBlocksAreDirty","shouldDirectInsert","every","isDisabled","Context","savingLock","innerBlocksProps","className","renderAppender","undefined","allowedBlocks","__experimentalDefaultBlock","__experimentalDirectInsert","isSaving","draftNavigationMenus","hasResolvedDraftNavigationMenus","select","getEntityRecords","hasFinishedResolution","isSavingEntityRecord","hasResolvedNavigationMenus","navigationMenus","create","createNavigationMenu","then","menu","Wrapper"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInnerBlocksProps } from '@wordpress/block-editor';\nimport { Disabled, Spinner } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useEffect, useRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useNavigationMenu from '../use-navigation-menu';\nimport useCreateNavigationMenu from './use-create-navigation-menu';\n\nconst EMPTY_OBJECT = {};\nconst DRAFT_MENU_PARAMS = [\n\t'postType',\n\t'wp_navigation',\n\t{ status: 'draft', per_page: -1 },\n];\n\nconst DEFAULT_BLOCK = {\n\tname: 'core/navigation-link',\n};\n\nconst ALLOWED_BLOCKS = [\n\t'core/navigation-link',\n\t'core/search',\n\t'core/social-links',\n\t'core/page-list',\n\t'core/spacer',\n\t'core/home-link',\n\t'core/site-title',\n\t'core/site-logo',\n\t'core/navigation-submenu',\n];\n\nexport default function UnsavedInnerBlocks( {\n\tblocks,\n\tclientId,\n\thasSavedUnsavedInnerBlocks,\n\tonSave,\n\thasSelection,\n} ) {\n\tconst originalBlocks = useRef();\n\n\tuseEffect( () => {\n\t\t// Initially store the uncontrolled inner blocks for\n\t\t// dirty state comparison.\n\t\tif ( ! originalBlocks?.current ) {\n\t\t\toriginalBlocks.current = blocks;\n\t\t}\n\t}, [ blocks ] );\n\n\t// If the current inner blocks object is different in any way\n\t// from the original inner blocks from the post content then the\n\t// user has made changes to the inner blocks. At this point the inner\n\t// blocks can be considered \"dirty\".\n\t// We also make sure the current innerBlocks had a chance to be set.\n\tconst innerBlocksAreDirty =\n\t\t!! originalBlocks.current && blocks !== originalBlocks.current;\n\n\tconst shouldDirectInsert = useMemo(\n\t\t() =>\n\t\t\tblocks.every(\n\t\t\t\t( { name } ) =>\n\t\t\t\t\tname === 'core/navigation-link' ||\n\t\t\t\t\tname === 'core/navigation-submenu' ||\n\t\t\t\t\tname === 'core/page-list'\n\t\t\t),\n\t\t[ blocks ]\n\t);\n\n\t// The block will be disabled in a block preview, use this as a way of\n\t// avoiding the side-effects of this component for block previews.\n\tconst isDisabled = useContext( Disabled.Context );\n\tconst savingLock = useRef( false );\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\t{\n\t\t\tclassName: 'wp-block-navigation__container',\n\t\t},\n\t\t{\n\t\t\trenderAppender: hasSelection ? undefined : false,\n\t\t\tallowedBlocks: ALLOWED_BLOCKS,\n\t\t\t__experimentalDefaultBlock: DEFAULT_BLOCK,\n\t\t\t__experimentalDirectInsert: shouldDirectInsert,\n\t\t}\n\t);\n\n\tconst { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tif ( isDisabled ) {\n\t\t\t\t\treturn EMPTY_OBJECT;\n\t\t\t\t}\n\n\t\t\t\tconst {\n\t\t\t\t\tgetEntityRecords,\n\t\t\t\t\thasFinishedResolution,\n\t\t\t\t\tisSavingEntityRecord,\n\t\t\t\t} = select( coreStore );\n\n\t\t\t\treturn {\n\t\t\t\t\tisSaving: isSavingEntityRecord(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'wp_navigation'\n\t\t\t\t\t),\n\t\t\t\t\tdraftNavigationMenus: getEntityRecords(\n\t\t\t\t\t\t...DRAFT_MENU_PARAMS\n\t\t\t\t\t),\n\t\t\t\t\thasResolvedDraftNavigationMenus: hasFinishedResolution(\n\t\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\t\tDRAFT_MENU_PARAMS\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ isDisabled ]\n\t\t);\n\n\tconst { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();\n\n\tconst { create: createNavigationMenu } =\n\t\tuseCreateNavigationMenu( clientId );\n\n\t// Automatically save the uncontrolled blocks.\n\tuseEffect( () => {\n\t\t// The block will be disabled when used in a BlockPreview.\n\t\t// In this case avoid automatic creation of a wp_navigation post.\n\t\t// Otherwise the user will be spammed with lots of menus!\n\t\t//\n\t\t// Also ensure other navigation menus have loaded so an\n\t\t// accurate name can be created.\n\t\t//\n\t\t// Don't try saving when another save is already\n\t\t// in progress.\n\t\t//\n\t\t// And finally only create the menu when the block is selected,\n\t\t// which is an indication they want to start editing.\n\t\tif (\n\t\t\tisDisabled ||\n\t\t\thasSavedUnsavedInnerBlocks ||\n\t\t\tisSaving ||\n\t\t\tsavingLock.current ||\n\t\t\t! hasResolvedDraftNavigationMenus ||\n\t\t\t! hasResolvedNavigationMenus ||\n\t\t\t! hasSelection ||\n\t\t\t! innerBlocksAreDirty\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tsavingLock.current = true;\n\t\tcreateNavigationMenu( null, blocks ).then( ( menu ) => {\n\t\t\tonSave( menu );\n\t\t\tsavingLock.current = false;\n\t\t} );\n\t}, [\n\t\tisDisabled,\n\t\tisSaving,\n\t\thasResolvedDraftNavigationMenus,\n\t\thasResolvedNavigationMenus,\n\t\tdraftNavigationMenus,\n\t\tnavigationMenus,\n\t\thasSelection,\n\t\tcreateNavigationMenu,\n\t\tblocks,\n\t] );\n\n\tconst Wrapper = isSaving ? Disabled : 'div';\n\n\treturn (\n\t\t<>\n\t\t\t{ isSaving ? (\n\t\t\t\t<Spinner\n\t\t\t\t\tclassName={\n\t\t\t\t\t\t'wp-block-navigation__uncontrolled-inner-blocks-loading-indicator'\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Wrapper { ...innerBlocksProps } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/unsaved-inner-blocks.js"],"names":["useInnerBlocksProps","Disabled","store","coreStore","useSelect","useContext","useEffect","useRef","useMemo","useNavigationMenu","areBlocksDirty","EMPTY_OBJECT","DRAFT_MENU_PARAMS","status","per_page","DEFAULT_BLOCK","name","ALLOWED_BLOCKS","UnsavedInnerBlocks","blocks","createNavigationMenu","hasSelection","originalBlocks","current","innerBlocksAreDirty","shouldDirectInsert","every","isDisabled","Context","innerBlocksProps","className","renderAppender","undefined","allowedBlocks","__experimentalDefaultBlock","__experimentalDirectInsert","isSaving","draftNavigationMenus","hasResolvedDraftNavigationMenus","select","getEntityRecords","hasFinishedResolution","isSavingEntityRecord","hasResolvedNavigationMenus","navigationMenus","Wrapper"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useInnerBlocksProps } from '@wordpress/block-editor';\nimport { Disabled } from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useSelect } from '@wordpress/data';\nimport { useContext, useEffect, useRef, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useNavigationMenu from '../use-navigation-menu';\nimport { areBlocksDirty } from './are-blocks-dirty';\n\nconst EMPTY_OBJECT = {};\nconst DRAFT_MENU_PARAMS = [\n\t'postType',\n\t'wp_navigation',\n\t{ status: 'draft', per_page: -1 },\n];\n\nconst DEFAULT_BLOCK = {\n\tname: 'core/navigation-link',\n};\n\nconst ALLOWED_BLOCKS = [\n\t'core/navigation-link',\n\t'core/search',\n\t'core/social-links',\n\t'core/page-list',\n\t'core/spacer',\n\t'core/home-link',\n\t'core/site-title',\n\t'core/site-logo',\n\t'core/navigation-submenu',\n];\n\nexport default function UnsavedInnerBlocks( {\n\tblocks,\n\tcreateNavigationMenu,\n\n\thasSelection,\n} ) {\n\tconst originalBlocks = useRef();\n\n\tuseEffect( () => {\n\t\t// Initially store the uncontrolled inner blocks for\n\t\t// dirty state comparison.\n\t\tif ( ! originalBlocks?.current ) {\n\t\t\toriginalBlocks.current = blocks;\n\t\t}\n\t}, [ blocks ] );\n\n\t// If the current inner blocks are different from the original inner blocks\n\t// from the post content then the user has made changes to the inner blocks.\n\t// At this point the inner blocks can be considered \"dirty\".\n\t// Note: referential equality is not sufficient for comparison as the inner blocks\n\t// of the page list are controlled and may be updated async due to syncing with\n\t// entity records. As a result we need to perform a deep equality check skipping\n\t// the page list's inner blocks.\n\tconst innerBlocksAreDirty = areBlocksDirty(\n\t\toriginalBlocks?.current,\n\t\tblocks\n\t);\n\n\tconst shouldDirectInsert = useMemo(\n\t\t() =>\n\t\t\tblocks.every(\n\t\t\t\t( { name } ) =>\n\t\t\t\t\tname === 'core/navigation-link' ||\n\t\t\t\t\tname === 'core/navigation-submenu' ||\n\t\t\t\t\tname === 'core/page-list'\n\t\t\t),\n\t\t[ blocks ]\n\t);\n\n\t// The block will be disabled in a block preview, use this as a way of\n\t// avoiding the side-effects of this component for block previews.\n\tconst isDisabled = useContext( Disabled.Context );\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\t{\n\t\t\tclassName: 'wp-block-navigation__container',\n\t\t},\n\t\t{\n\t\t\trenderAppender: hasSelection ? undefined : false,\n\t\t\tallowedBlocks: ALLOWED_BLOCKS,\n\t\t\t__experimentalDefaultBlock: DEFAULT_BLOCK,\n\t\t\t__experimentalDirectInsert: shouldDirectInsert,\n\t\t}\n\t);\n\n\tconst { isSaving, draftNavigationMenus, hasResolvedDraftNavigationMenus } =\n\t\tuseSelect(\n\t\t\t( select ) => {\n\t\t\t\tif ( isDisabled ) {\n\t\t\t\t\treturn EMPTY_OBJECT;\n\t\t\t\t}\n\n\t\t\t\tconst {\n\t\t\t\t\tgetEntityRecords,\n\t\t\t\t\thasFinishedResolution,\n\t\t\t\t\tisSavingEntityRecord,\n\t\t\t\t} = select( coreStore );\n\n\t\t\t\treturn {\n\t\t\t\t\tisSaving: isSavingEntityRecord(\n\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t'wp_navigation'\n\t\t\t\t\t),\n\t\t\t\t\tdraftNavigationMenus: getEntityRecords(\n\t\t\t\t\t\t...DRAFT_MENU_PARAMS\n\t\t\t\t\t),\n\t\t\t\t\thasResolvedDraftNavigationMenus: hasFinishedResolution(\n\t\t\t\t\t\t'getEntityRecords',\n\t\t\t\t\t\tDRAFT_MENU_PARAMS\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ isDisabled ]\n\t\t);\n\n\tconst { hasResolvedNavigationMenus, navigationMenus } = useNavigationMenu();\n\n\t// Automatically save the uncontrolled blocks.\n\tuseEffect( () => {\n\t\t// The block will be disabled when used in a BlockPreview.\n\t\t// In this case avoid automatic creation of a wp_navigation post.\n\t\t// Otherwise the user will be spammed with lots of menus!\n\t\t//\n\t\t// Also ensure other navigation menus have loaded so an\n\t\t// accurate name can be created.\n\t\t//\n\t\t// Don't try saving when another save is already\n\t\t// in progress.\n\t\t//\n\t\t// And finally only create the menu when the block is selected,\n\t\t// which is an indication they want to start editing.\n\t\tif (\n\t\t\tisDisabled ||\n\t\t\tisSaving ||\n\t\t\t! hasResolvedDraftNavigationMenus ||\n\t\t\t! hasResolvedNavigationMenus ||\n\t\t\t! hasSelection ||\n\t\t\t! innerBlocksAreDirty\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tcreateNavigationMenu( null, blocks );\n\t}, [\n\t\tisDisabled,\n\t\tisSaving,\n\t\thasResolvedDraftNavigationMenus,\n\t\thasResolvedNavigationMenus,\n\t\tdraftNavigationMenus,\n\t\tnavigationMenus,\n\t\thasSelection,\n\t\tcreateNavigationMenu,\n\t\tblocks,\n\t] );\n\n\tconst Wrapper = isSaving ? Disabled : 'div';\n\n\treturn <Wrapper { ...innerBlocksProps } />;\n}\n"]}

package/build-module/navigation/view-modal.js

@@ -22,6 +22,10 @@ function navigationToggleModal(modal) {
   htmlElement.classList.toggle('has-modal-open');
 }
 
+function isLinkToAnchorOnCurrentPage(node) {
+  return node.hash && node.protocol === window.location.protocol && node.host === window.location.host && node.pathname === window.location.pathname && node.search === window.location.search;
+}
+
 window.addEventListener('load', () => {
   MicroModal.init({
     onShow: navigationToggleModal,
@@ -31,10 +35,10 @@ window.addEventListener('load', () => {
 
   const navigationLinks = document.querySelectorAll('.wp-block-navigation-item__content');
   navigationLinks.forEach(function (link) {
-    var _link$getAttribute, _link$attributes;
+    var _link$attributes;
 
     // Ignore non-anchor links and anchor links which open on a new tab.
-    if (!((_link$getAttribute = link.getAttribute('href')) !== null && _link$getAttribute !== void 0 && _link$getAttribute.startsWith('#')) || ((_link$attributes = link.attributes) === null || _link$attributes === void 0 ? void 0 : _link$attributes.target) === '_blank') {
+    if (!isLinkToAnchorOnCurrentPage(link) || ((_link$attributes = link.attributes) === null || _link$attributes === void 0 ? void 0 : _link$attributes.target) === '_blank') {
       return;
     } // Find the specific parent modal for this link
     // since .close() won't work without an ID if there are

package/build-module/navigation/view-modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/navigation/view-modal.js"],"names":["MicroModal","navigationToggleModal","modal","dialogContainer","querySelector","isHidden","getAttribute","classList","toggle","toggleAttribute","removeAttribute","setAttribute","htmlElement","document","documentElement","window","addEventListener","init","onShow","onClose","openClass","navigationLinks","querySelectorAll","forEach","link","startsWith","attributes","target","closest","modalId","contains","close"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB,C,CAEA;;AACA,SAASC,qBAAT,CAAgCC,KAAhC,EAAwC;AACvC,QAAMC,eAAe,GAAGD,KAAK,CAACE,aAAN,CACtB,yCADsB,CAAxB;AAIA,QAAMC,QAAQ,GAAG,WAAWH,KAAK,CAACI,YAAN,CAAoB,aAApB,CAA5B;AAEAJ,EAAAA,KAAK,CAACK,SAAN,CAAgBC,MAAhB,CAAwB,gBAAxB,EAA0C,CAAEH,QAA5C;AACAF,EAAAA,eAAe,CAACM,eAAhB,CAAiC,YAAjC,EAA+C,CAAEJ,QAAjD;;AAEA,MAAKA,QAAL,EAAgB;AACfF,IAAAA,eAAe,CAACO,eAAhB,CAAiC,MAAjC;AACAP,IAAAA,eAAe,CAACO,eAAhB,CAAiC,YAAjC;AACA,GAHD,MAGO;AACNP,IAAAA,eAAe,CAACQ,YAAhB,CAA8B,MAA9B,EAAsC,QAAtC;AACAR,IAAAA,eAAe,CAACQ,YAAhB,CAA8B,YAA9B,EAA4C,MAA5C;AACA,GAhBsC,CAkBvC;;;AACA,QAAMC,WAAW,GAAGC,QAAQ,CAACC,eAA7B;AACAF,EAAAA,WAAW,CAACL,SAAZ,CAAsBC,MAAtB,CAA8B,gBAA9B;AACA;;AAEDO,MAAM,CAACC,gBAAP,CAAyB,MAAzB,EAAiC,MAAM;AACtChB,EAAAA,UAAU,CAACiB,IAAX,CAAiB;AAChBC,IAAAA,MAAM,EAAEjB,qBADQ;AAEhBkB,IAAAA,OAAO,EAAElB,qBAFO;AAGhBmB,IAAAA,SAAS,EAAE;AAHK,GAAjB,EADsC,CAOtC;;AACA,QAAMC,eAAe,GAAGR,QAAQ,CAACS,gBAAT,CACvB,oCADuB,CAAxB;AAIAD,EAAAA,eAAe,CAACE,OAAhB,CAAyB,UAAWC,IAAX,EAAkB;AAAA;;AAC1C;AACA,QACC,wBAAEA,IAAI,CAAClB,YAAL,CAAmB,MAAnB,CAAF,+CAAE,mBAA6BmB,UAA7B,CAAyC,GAAzC,CAAF,KACA,qBAAAD,IAAI,CAACE,UAAL,sEAAiBC,MAAjB,MAA4B,QAF7B,EAGE;AACD;AACA,KAPyC,CAS1C;AACA;AACA;;;AACA,UAAMzB,KAAK,GAAGsB,IAAI,CAACI,OAAL,CACb,4CADa,CAAd;AAGA,UAAMC,OAAO,GAAG3B,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEI,YAAP,CAAqB,IAArB,CAAhB;AAEAkB,IAAAA,IAAI,CAACR,gBAAL,CAAuB,OAAvB,EAAgC,MAAM;AACrC;AACA;AACA;AACA,UAAKa,OAAO,IAAI3B,KAAK,CAACK,SAAN,CAAgBuB,QAAhB,CAA0B,gBAA1B,CAAhB,EAA+D;AAC9D9B,QAAAA,UAAU,CAAC+B,KAAX,CAAkBF,OAAlB;AACA;AACD,KAPD;AAQA,GAzBD;AA0BA,CAtCD","sourcesContent":["/**\n * External dependencies\n */\nimport MicroModal from 'micromodal';\n\n// Responsive navigation toggle.\nfunction navigationToggleModal( modal ) {\n\tconst dialogContainer = modal.querySelector(\n\t\t`.wp-block-navigation__responsive-dialog`\n\t);\n\n\tconst isHidden = 'true' === modal.getAttribute( 'aria-hidden' );\n\n\tmodal.classList.toggle( 'has-modal-open', ! isHidden );\n\tdialogContainer.toggleAttribute( 'aria-modal', ! isHidden );\n\n\tif ( isHidden ) {\n\t\tdialogContainer.removeAttribute( 'role' );\n\t\tdialogContainer.removeAttribute( 'aria-modal' );\n\t} else {\n\t\tdialogContainer.setAttribute( 'role', 'dialog' );\n\t\tdialogContainer.setAttribute( 'aria-modal', 'true' );\n\t}\n\n\t// Add a class to indicate the modal is open.\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.toggle( 'has-modal-open' );\n}\n\nwindow.addEventListener( 'load', () => {\n\tMicroModal.init( {\n\t\tonShow: navigationToggleModal,\n\t\tonClose: navigationToggleModal,\n\t\topenClass: 'is-menu-open',\n\t} );\n\n\t// Close modal automatically on clicking anchor links inside modal.\n\tconst navigationLinks = document.querySelectorAll(\n\t\t'.wp-block-navigation-item__content'\n\t);\n\n\tnavigationLinks.forEach( function ( link ) {\n\t\t// Ignore non-anchor links and anchor links which open on a new tab.\n\t\tif (\n\t\t\t! link.getAttribute( 'href' )?.startsWith( '#' ) ||\n\t\t\tlink.attributes?.target === '_blank'\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the specific parent modal for this link\n\t\t// since .close() won't work without an ID if there are\n\t\t// multiple navigation menus in a post/page.\n\t\tconst modal = link.closest(\n\t\t\t'.wp-block-navigation__responsive-container'\n\t\t);\n\t\tconst modalId = modal?.getAttribute( 'id' );\n\n\t\tlink.addEventListener( 'click', () => {\n\t\t\t// check if modal exists and is open before trying to close it\n\t\t\t// otherwise Micromodal will toggle the `has-modal-open` class\n\t\t\t// on the html tag which prevents scrolling\n\t\t\tif ( modalId && modal.classList.contains( 'has-modal-open' ) ) {\n\t\t\t\tMicroModal.close( modalId );\n\t\t\t}\n\t\t} );\n\t} );\n} );\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/navigation/view-modal.js"],"names":["MicroModal","navigationToggleModal","modal","dialogContainer","querySelector","isHidden","getAttribute","classList","toggle","toggleAttribute","removeAttribute","setAttribute","htmlElement","document","documentElement","isLinkToAnchorOnCurrentPage","node","hash","protocol","window","location","host","pathname","search","addEventListener","init","onShow","onClose","openClass","navigationLinks","querySelectorAll","forEach","link","attributes","target","closest","modalId","contains","close"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB,C,CAEA;;AACA,SAASC,qBAAT,CAAgCC,KAAhC,EAAwC;AACvC,QAAMC,eAAe,GAAGD,KAAK,CAACE,aAAN,CACtB,yCADsB,CAAxB;AAIA,QAAMC,QAAQ,GAAG,WAAWH,KAAK,CAACI,YAAN,CAAoB,aAApB,CAA5B;AAEAJ,EAAAA,KAAK,CAACK,SAAN,CAAgBC,MAAhB,CAAwB,gBAAxB,EAA0C,CAAEH,QAA5C;AACAF,EAAAA,eAAe,CAACM,eAAhB,CAAiC,YAAjC,EAA+C,CAAEJ,QAAjD;;AAEA,MAAKA,QAAL,EAAgB;AACfF,IAAAA,eAAe,CAACO,eAAhB,CAAiC,MAAjC;AACAP,IAAAA,eAAe,CAACO,eAAhB,CAAiC,YAAjC;AACA,GAHD,MAGO;AACNP,IAAAA,eAAe,CAACQ,YAAhB,CAA8B,MAA9B,EAAsC,QAAtC;AACAR,IAAAA,eAAe,CAACQ,YAAhB,CAA8B,YAA9B,EAA4C,MAA5C;AACA,GAhBsC,CAkBvC;;;AACA,QAAMC,WAAW,GAAGC,QAAQ,CAACC,eAA7B;AACAF,EAAAA,WAAW,CAACL,SAAZ,CAAsBC,MAAtB,CAA8B,gBAA9B;AACA;;AAED,SAASO,2BAAT,CAAsCC,IAAtC,EAA6C;AAC5C,SACCA,IAAI,CAACC,IAAL,IACAD,IAAI,CAACE,QAAL,KAAkBC,MAAM,CAACC,QAAP,CAAgBF,QADlC,IAEAF,IAAI,CAACK,IAAL,KAAcF,MAAM,CAACC,QAAP,CAAgBC,IAF9B,IAGAL,IAAI,CAACM,QAAL,KAAkBH,MAAM,CAACC,QAAP,CAAgBE,QAHlC,IAIAN,IAAI,CAACO,MAAL,KAAgBJ,MAAM,CAACC,QAAP,CAAgBG,MALjC;AAOA;;AAEDJ,MAAM,CAACK,gBAAP,CAAyB,MAAzB,EAAiC,MAAM;AACtCxB,EAAAA,UAAU,CAACyB,IAAX,CAAiB;AAChBC,IAAAA,MAAM,EAAEzB,qBADQ;AAEhB0B,IAAAA,OAAO,EAAE1B,qBAFO;AAGhB2B,IAAAA,SAAS,EAAE;AAHK,GAAjB,EADsC,CAOtC;;AACA,QAAMC,eAAe,GAAGhB,QAAQ,CAACiB,gBAAT,CACvB,oCADuB,CAAxB;AAIAD,EAAAA,eAAe,CAACE,OAAhB,CAAyB,UAAWC,IAAX,EAAkB;AAAA;;AAC1C;AACA,QACC,CAAEjB,2BAA2B,CAAEiB,IAAF,CAA7B,IACA,qBAAAA,IAAI,CAACC,UAAL,sEAAiBC,MAAjB,MAA4B,QAF7B,EAGE;AACD;AACA,KAPyC,CAS1C;AACA;AACA;;;AACA,UAAMhC,KAAK,GAAG8B,IAAI,CAACG,OAAL,CACb,4CADa,CAAd;AAGA,UAAMC,OAAO,GAAGlC,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEI,YAAP,CAAqB,IAArB,CAAhB;AAEA0B,IAAAA,IAAI,CAACR,gBAAL,CAAuB,OAAvB,EAAgC,MAAM;AACrC;AACA;AACA;AACA,UAAKY,OAAO,IAAIlC,KAAK,CAACK,SAAN,CAAgB8B,QAAhB,CAA0B,gBAA1B,CAAhB,EAA+D;AAC9DrC,QAAAA,UAAU,CAACsC,KAAX,CAAkBF,OAAlB;AACA;AACD,KAPD;AAQA,GAzBD;AA0BA,CAtCD","sourcesContent":["/**\n * External dependencies\n */\nimport MicroModal from 'micromodal';\n\n// Responsive navigation toggle.\nfunction navigationToggleModal( modal ) {\n\tconst dialogContainer = modal.querySelector(\n\t\t`.wp-block-navigation__responsive-dialog`\n\t);\n\n\tconst isHidden = 'true' === modal.getAttribute( 'aria-hidden' );\n\n\tmodal.classList.toggle( 'has-modal-open', ! isHidden );\n\tdialogContainer.toggleAttribute( 'aria-modal', ! isHidden );\n\n\tif ( isHidden ) {\n\t\tdialogContainer.removeAttribute( 'role' );\n\t\tdialogContainer.removeAttribute( 'aria-modal' );\n\t} else {\n\t\tdialogContainer.setAttribute( 'role', 'dialog' );\n\t\tdialogContainer.setAttribute( 'aria-modal', 'true' );\n\t}\n\n\t// Add a class to indicate the modal is open.\n\tconst htmlElement = document.documentElement;\n\thtmlElement.classList.toggle( 'has-modal-open' );\n}\n\nfunction isLinkToAnchorOnCurrentPage( node ) {\n\treturn (\n\t\tnode.hash &&\n\t\tnode.protocol === window.location.protocol &&\n\t\tnode.host === window.location.host &&\n\t\tnode.pathname === window.location.pathname &&\n\t\tnode.search === window.location.search\n\t);\n}\n\nwindow.addEventListener( 'load', () => {\n\tMicroModal.init( {\n\t\tonShow: navigationToggleModal,\n\t\tonClose: navigationToggleModal,\n\t\topenClass: 'is-menu-open',\n\t} );\n\n\t// Close modal automatically on clicking anchor links inside modal.\n\tconst navigationLinks = document.querySelectorAll(\n\t\t'.wp-block-navigation-item__content'\n\t);\n\n\tnavigationLinks.forEach( function ( link ) {\n\t\t// Ignore non-anchor links and anchor links which open on a new tab.\n\t\tif (\n\t\t\t! isLinkToAnchorOnCurrentPage( link ) ||\n\t\t\tlink.attributes?.target === '_blank'\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Find the specific parent modal for this link\n\t\t// since .close() won't work without an ID if there are\n\t\t// multiple navigation menus in a post/page.\n\t\tconst modal = link.closest(\n\t\t\t'.wp-block-navigation__responsive-container'\n\t\t);\n\t\tconst modalId = modal?.getAttribute( 'id' );\n\n\t\tlink.addEventListener( 'click', () => {\n\t\t\t// check if modal exists and is open before trying to close it\n\t\t\t// otherwise Micromodal will toggle the `has-modal-open` class\n\t\t\t// on the html tag which prevents scrolling\n\t\t\tif ( modalId && modal.classList.contains( 'has-modal-open' ) ) {\n\t\t\t\tMicroModal.close( modalId );\n\t\t\t}\n\t\t} );\n\t} );\n} );\n"]}

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

@@ -4,24 +4,22 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
-import escapeHtml from 'escape-html';
 import { unescape } from 'lodash';
 /**
  * WordPress dependencies
  */
 
-import { createBlock, switchToBlockType } from '@wordpress/blocks';
+import { createBlock } from '@wordpress/blocks';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { Button, PanelBody, Popover, TextControl, TextareaControl, ToolbarButton, Tooltip, ToolbarGroup, KeyboardShortcuts } from '@wordpress/components';
+import { PanelBody, TextControl, TextareaControl, ToolbarButton, Tooltip, ToolbarGroup, KeyboardShortcuts } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
-import { __, sprintf } from '@wordpress/i18n';
-import { BlockControls, BlockIcon, InspectorControls, RichText, __experimentalLinkControl as LinkControl, useBlockProps, store as blockEditorStore, getColorClassName } from '@wordpress/block-editor';
-import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef, createInterpolateElement } from '@wordpress/element';
-import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
+import { __ } from '@wordpress/i18n';
+import { BlockControls, InspectorControls, RichText, useBlockProps, store as blockEditorStore, getColorClassName, useInnerBlocksProps } from '@wordpress/block-editor';
+import { isURL, prependHTTP } from '@wordpress/url';
+import { Fragment, useState, useEffect, useRef } from '@wordpress/element';
+import { placeCaretAtHorizontalEdge, __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import { store as coreStore, useResourcePermissions } from '@wordpress/core-data';
-import { decodeEntities } from '@wordpress/html-entities';
 import { useMergeRefs } from '@wordpress/compose';
 /**
  * Internal dependencies
@@ -93,6 +91,8 @@ const {
   editorStyle: "wp-block-navigation-link-editor",
   style: "wp-block-navigation-link"
 };
+import { LinkUI } from './link-ui';
+import { updateAttributes } from './update-attributes';
 /**
  * A React hook to determine if it's dragging within the target element.
  *
@@ -143,60 +143,6 @@ const useIsDraggingWithin = elementRef => {
   }, []);
   return isDraggingWithin;
 };
-/**
- * Given the Link block's type attribute, return the query params to give to
- * /wp/v2/search.
- *
- * @param {string} type Link block's type attribute.
- * @param {string} kind Link block's entity of kind (post-type|taxonomy)
- * @return {{ type?: string, subtype?: string }} Search query params.
- */
-
-
-function getSuggestionsQuery(type, kind) {
-  switch (type) {
-    case 'post':
-    case 'page':
-      return {
-        type: 'post',
-        subtype: type
-      };
-
-    case 'category':
-      return {
-        type: 'term',
-        subtype: 'category'
-      };
-
-    case 'tag':
-      return {
-        type: 'term',
-        subtype: 'post_tag'
-      };
-
-    case 'post_format':
-      return {
-        type: 'post-format'
-      };
-
-    default:
-      if (kind === 'taxonomy') {
-        return {
-          type: 'term',
-          subtype: type
-        };
-      }
-
-      if (kind === 'post-type') {
-        return {
-          type: 'post',
-          subtype: type
-        };
-      }
-
-      return {};
-  }
-}
 /**
  * Determine the colors for a menu.
  *
@@ -254,98 +200,6 @@ function getColors(context, isSubMenu) {
 
   return colors;
 }
-/**
- * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
- */
-
-/**
- * Navigation Link Block Attributes
- *
- * @typedef {Object} WPNavigationLinkBlockAttributes
- *
- * @property {string}               [label]         Link text.
- * @property {WPNavigationLinkKind} [kind]          Kind is used to differentiate between term and post ids to check post draft status.
- * @property {string}               [type]          The type such as post, page, tag, category and other custom types.
- * @property {string}               [rel]           The relationship of the linked URL.
- * @property {number}               [id]            A post or term id.
- * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
- * @property {string}               [url]           Link href.
- * @property {string}               [title]         Link title attribute.
- */
-
-/**
- * Link Control onChange handler that updates block attributes when a setting is changed.
- *
- * @param {Object}                          updatedValue    New block attributes to update.
- * @param {Function}                        setAttributes   Block attribute update function.
- * @param {WPNavigationLinkBlockAttributes} blockAttributes Current block attributes.
- *
- */
-
-
-export const updateNavigationLinkBlockAttributes = function () {
-  let updatedValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  let setAttributes = arguments.length > 1 ? arguments[1] : undefined;
-  let blockAttributes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  const {
-    label: originalLabel = '',
-    kind: originalKind = '',
-    type: originalType = ''
-  } = blockAttributes;
-  const {
-    title: newLabel = '',
-    // the title of any provided Post.
-    url: newUrl = '',
-    opensInNewTab,
-    id,
-    kind: newKind = originalKind,
-    type: newType = originalType
-  } = updatedValue;
-  const newLabelWithoutHttp = newLabel.replace(/http(s?):\/\//gi, '');
-  const newUrlWithoutHttp = newUrl.replace(/http(s?):\/\//gi, '');
-  const useNewLabel = newLabel && newLabel !== originalLabel && // LinkControl without the title field relies
-  // on the check below. Specifically, it assumes that
-  // the URL is the same as a title.
-  // This logic a) looks suspicious and b) should really
-  // live in the LinkControl and not here. It's a great
-  // candidate for future refactoring.
-  newLabelWithoutHttp !== newUrlWithoutHttp; // Unfortunately this causes the escaping model to be inverted.
-  // The escaped content is stored in the block attributes (and ultimately in the database),
-  // and then the raw data is "recovered" when outputting into the DOM.
-  // It would be preferable to store the **raw** data in the block attributes and escape it in JS.
-  // Why? Because there isn't one way to escape data. Depending on the context, you need to do
-  // different transforms. It doesn't make sense to me to choose one of them for the purposes of storage.
-  // See also:
-  // - https://github.com/WordPress/gutenberg/pull/41063
-  // - https://github.com/WordPress/gutenberg/pull/18617.
-
-  const label = useNewLabel ? escapeHtml(newLabel) : originalLabel || escapeHtml(newUrlWithoutHttp); // In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
-
-  const type = newType === 'post_tag' ? 'tag' : newType.replace('-', '_');
-  const isBuiltInType = ['post', 'page', 'tag', 'category'].indexOf(type) > -1;
-  const isCustomLink = !newKind && !isBuiltInType || newKind === 'custom';
-  const kind = isCustomLink ? 'custom' : newKind;
-  setAttributes({ // Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
-    ...(newUrl && {
-      url: encodeURI(safeDecodeURI(newUrl))
-    }),
-    ...(label && {
-      label
-    }),
-    ...(undefined !== opensInNewTab && {
-      opensInNewTab
-    }),
-    ...(id && Number.isInteger(id) && {
-      id
-    }),
-    ...(kind && {
-      kind
-    }),
-    ...(type && type !== 'URL' && {
-      type
-    })
-  });
-};
 
 const useIsInvalidLink = (kind, type, id) => {
   const isPostType = kind === 'post-type' || type === 'post' || type === 'page';
@@ -406,74 +260,8 @@ function getMissingText(type) {
 
   return missingText;
 }
-/**
- * Removes HTML from a given string.
- * Note the does not provide XSS protection or otherwise attempt
- * to filter strings with malicious intent.
- *
- * See also: https://github.com/WordPress/gutenberg/pull/35539
- *
- * @param {string} html the string from which HTML should be removed.
- * @return {string} the "cleaned" string.
- */
-
-
-function navStripHTML(html) {
-  const doc = document.implementation.createHTMLDocument('');
-  doc.body.innerHTML = html;
-  return doc.body.textContent || '';
-}
-/**
- * Add transforms to Link Control
- */
-
-
-function LinkControlTransforms(_ref) {
-  let {
-    clientId,
-    replace
-  } = _ref;
-  const {
-    getBlock,
-    blockTransforms
-  } = useSelect(select => {
-    const {
-      getBlock: _getBlock,
-      getBlockRootClientId,
-      getBlockTransformItems
-    } = select(blockEditorStore);
-    return {
-      getBlock: _getBlock,
-      blockTransforms: getBlockTransformItems(_getBlock(clientId), getBlockRootClientId(clientId))
-    };
-  }, [clientId]);
-  const featuredBlocks = ['core/site-logo', 'core/social-links', 'core/search'];
-  const transforms = blockTransforms.filter(item => {
-    return featuredBlocks.includes(item.name);
-  });
-
-  if (!(transforms !== null && transforms !== void 0 && transforms.length)) {
-    return null;
-  }
-
-  return createElement("div", {
-    className: "link-control-transform"
-  }, createElement("h3", {
-    className: "link-control-transform__subheading"
-  }, __('Transform')), createElement("div", {
-    className: "link-control-transform__items"
-  }, transforms.map((item, index) => {
-    return createElement(Button, {
-      key: `transform-${index}`,
-      onClick: () => replace(clientId, switchToBlockType(getBlock(clientId), item.name)),
-      className: "link-control-transform__item"
-    }, createElement(BlockIcon, {
-      icon: item.icon
-    }), item.title);
-  })));
-}
 
-export default function NavigationLinkEdit(_ref2) {
+export default function NavigationLinkEdit(_ref) {
   let {
     attributes,
     isSelected,
@@ -483,12 +271,11 @@ export default function NavigationLinkEdit(_ref2) {
     onReplace,
     context,
     clientId
-  } = _ref2;
+  } = _ref;
   const {
     id,
     label,
     type,
-    opensInNewTab,
     url,
     description,
     rel,
@@ -499,15 +286,6 @@ export default function NavigationLinkEdit(_ref2) {
   const {
     maxNestingLevel
   } = context;
-  const link = {
-    url,
-    opensInNewTab,
-    title: label && navStripHTML(label) // don't allow HTML to display inside the <LinkControl>
-
-  };
-  const {
-    saveEntityRecord
-  } = useDispatch(coreStore);
   const {
     replaceBlock,
     __unstableMarkNextChangeAsNotPersistent
@@ -563,7 +341,7 @@ export default function NavigationLinkEdit(_ref2) {
    */
 
   function transformToSubmenu() {
-    const newSubmenu = createBlock('core/navigation-submenu', attributes, innerBlocks);
+    const newSubmenu = createBlock('core/navigation-submenu', attributes, innerBlocks.length > 0 ? innerBlocks : [createBlock('core/navigation-link')]);
     replaceBlock(clientId, newSubmenu);
   }
 
@@ -574,13 +352,14 @@ export default function NavigationLinkEdit(_ref2) {
     // with the autofocus behavior of the BlockListBlock component.
     if (!url) {
       setIsLinkOpen(true);
-    } // If block has inner blocks, transform to Submenu.
-
-
+    }
+  }, [url]);
+  useEffect(() => {
+    // If block has inner blocks, transform to Submenu.
     if (hasChildren) {
       transformToSubmenu();
     }
-  }, []);
+  }, [hasChildren]);
   /**
    * The hook shouldn't be necessary but due to a focus loss happening
    * when selecting a suggestion in the link popover, we force close on block unselection.
@@ -649,31 +428,6 @@ export default function NavigationLinkEdit(_ref2) {
     userCanCreate = postsPermissions.canCreate;
   }
 
-  async function handleCreate(pageTitle) {
-    const postType = type || 'page';
-    const page = await saveEntityRecord('postType', postType, {
-      title: pageTitle,
-      status: 'draft'
-    });
-    return {
-      id: page.id,
-      type: postType,
-      // Make `title` property consistent with that in `fetchLinkSuggestions` where the `rendered` title (containing HTML entities)
-      // is also being decoded. By being consistent in both locations we avoid having to branch in the rendering output code.
-      // Ideally in the future we will update both APIs to utilise the "raw" form of the title which is better suited to edit contexts.
-      // e.g.
-      // - title.raw = "Yes & No"
-      // - title.rendered = "Yes &#038; No"
-      // - decodeEntities( title.rendered ) = "Yes & No"
-      // See:
-      // - https://github.com/WordPress/gutenberg/pull/41063
-      // - https://github.com/WordPress/gutenberg/blob/a1e1fdc0e6278457e9f4fc0b31ac6d2095f5450b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js#L212-L218
-      title: decodeEntities(page.title.rendered),
-      url: page.link,
-      kind: 'post-type'
-    };
-  }
-
   const {
     textColor,
     customTextColor,
@@ -705,6 +459,16 @@ export default function NavigationLinkEdit(_ref2) {
     },
     onKeyDown
   });
+  const ALLOWED_BLOCKS = ['core/navigation-link', 'core/navigation-submenu', 'core/page-list'];
+  const DEFAULT_BLOCK = {
+    name: 'core/navigation-link'
+  };
+  const innerBlocksProps = useInnerBlocksProps(blockProps, {
+    allowedBlocks: ALLOWED_BLOCKS,
+    __experimentalDefaultBlock: DEFAULT_BLOCK,
+    __experimentalDirectInsert: true,
+    renderAppender: false
+  });
 
   if (!url || isInvalid || isDraft) {
     blockProps.onClick = () => setIsLinkOpen(true);
@@ -731,7 +495,25 @@ export default function NavigationLinkEdit(_ref2) {
     onClick: transformToSubmenu
   }))), createElement(InspectorControls, null, createElement(PanelBody, {
     title: __('Link settings')
-  }, createElement(TextareaControl, {
+  }, createElement(TextControl, {
+    value: label ? stripHTML(label) : '',
+    onChange: labelValue => {
+      setAttributes({
+        label: labelValue
+      });
+    },
+    label: __('Label'),
+    autoComplete: "off"
+  }), createElement(TextControl, {
+    value: url || '',
+    onChange: urlValue => {
+      setAttributes({
+        url: urlValue
+      });
+    },
+    label: __('URL'),
+    autoComplete: "off"
+  }), createElement(TextareaControl, {
     value: description || '',
     onChange: descriptionValue => {
       setAttributes({
@@ -804,46 +586,20 @@ export default function NavigationLinkEdit(_ref2) {
   // Ideally they would be stored in a raw, unescaped form.
   // Unescape is used here to "recover" the escaped characters
   // so they display without encoding.
-  // See `updateNavigationLinkBlockAttributes` for more details.
+  // See `updateAttributes` for more details.
   `${unescape(label)} ${placeholderText}`.trim()), createElement("span", {
     className: "wp-block-navigation-link__missing_text-tooltip"
-  }, tooltipText))))), isLinkOpen && createElement(Popover, {
-    placement: "bottom",
+  }, tooltipText))))), isLinkOpen && createElement(LinkUI, {
+    className: "wp-block-navigation-link__inline-link-input",
+    clientId: clientId,
+    link: attributes,
     onClose: () => setIsLinkOpen(false),
     anchor: popoverAnchor,
-    shift: true
-  }, createElement(LinkControl, {
-    hasTextControl: true,
-    hasRichPreviews: true,
-    className: "wp-block-navigation-link__inline-link-input",
-    value: link,
-    showInitialSuggestions: true,
-    withCreateSuggestion: userCanCreate,
-    createSuggestion: handleCreate,
-    createSuggestionButtonText: searchTerm => {
-      let format;
-
-      if (type === 'post') {
-        /* translators: %s: search term. */
-        format = __('Create draft post: <mark>%s</mark>');
-      } else {
-        /* translators: %s: search term. */
-        format = __('Create draft page: <mark>%s</mark>');
-      }
-
-      return createInterpolateElement(sprintf(format, searchTerm), {
-        mark: createElement("mark", null)
-      });
-    },
-    noDirectEntry: !!type,
-    noURLSuggestion: !!type,
-    suggestionsQuery: getSuggestionsQuery(type, kind),
-    onChange: updatedValue => updateNavigationLinkBlockAttributes(updatedValue, setAttributes, attributes),
+    hasCreateSuggestion: userCanCreate,
     onRemove: removeLink,
-    renderControlBottom: !url ? () => createElement(LinkControlTransforms, {
-      clientId: clientId,
-      replace: replaceBlock
-    }) : null
-  })))));
+    onChange: updatedValue => {
+      updateAttributes(updatedValue, setAttributes, attributes);
+    }
+  })), createElement("div", innerBlocksProps)));
 }
 //# sourceMappingURL=edit.js.map