@wordpress/block-library 6.0.2 → 6.0.3

package/build/navigation/edit/navigation-menu-name-modal.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavigationMenuNameModal;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _i18n = require("@wordpress/i18n");
+
+/**
+ * WordPress dependencies
+ */
+function NavigationMenuNameModal({
+  title,
+  finishButtonText = (0, _i18n.__)('Create'),
+  onFinish,
+  onRequestClose,
+  value = ''
+}) {
+  const [name, setName] = (0, _element.useState)(value);
+  return (0, _element.createElement)(_components.Modal, {
+    title: title,
+    closeLabel: (0, _i18n.__)('Cancel'),
+    onRequestClose: onRequestClose,
+    overlayClassName: "wp-block-template-part__placeholder-create-new__title-form"
+  }, (0, _element.createElement)("form", {
+    onSubmit: event => {
+      event.preventDefault();
+      onFinish(name);
+    }
+  }, (0, _element.createElement)(_components.TextControl, {
+    label: (0, _i18n.__)('Name'),
+    value: name,
+    onChange: setName
+  }), (0, _element.createElement)(_components.Flex, {
+    className: "wp-block-template-part__placeholder-create-new__title-form-actions",
+    justify: "flex-end"
+  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
+    variant: "secondary",
+    onClick: () => {
+      onRequestClose();
+    }
+  }, (0, _i18n.__)('Cancel'))), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
+    variant: "primary",
+    type: "submit",
+    disabled: !name.length,
+    "aria-disabled": !name.length
+  }, finishButtonText)))));
+}
+//# sourceMappingURL=navigation-menu-name-modal.js.map

package/build/navigation/edit/navigation-menu-name-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/navigation-menu-name-modal.js"],"names":["NavigationMenuNameModal","title","finishButtonText","onFinish","onRequestClose","value","name","setName","event","preventDefault","length"],"mappings":";;;;;;;AAUA;;AAPA;;AAQA;;AAXA;AACA;AACA;AAWe,SAASA,uBAAT,CAAkC;AAChDC,EAAAA,KADgD;AAEhDC,EAAAA,gBAAgB,GAAG,cAAI,QAAJ,CAF6B;AAGhDC,EAAAA,QAHgD;AAIhDC,EAAAA,cAJgD;AAKhDC,EAAAA,KAAK,GAAG;AALwC,CAAlC,EAMX;AACH,QAAM,CAAEC,IAAF,EAAQC,OAAR,IAAoB,uBAAUF,KAAV,CAA1B;AAEA,SACC,4BAAC,iBAAD;AACC,IAAA,KAAK,EAAGJ,KADT;AAEC,IAAA,UAAU,EAAG,cAAI,QAAJ,CAFd;AAGC,IAAA,cAAc,EAAGG,cAHlB;AAIC,IAAA,gBAAgB,EAAC;AAJlB,KAMC;AACC,IAAA,QAAQ,EAAKI,KAAF,IAAa;AACvBA,MAAAA,KAAK,CAACC,cAAN;AACAN,MAAAA,QAAQ,CAAEG,IAAF,CAAR;AACA;AAJF,KAMC,4BAAC,uBAAD;AACC,IAAA,KAAK,EAAG,cAAI,MAAJ,CADT;AAEC,IAAA,KAAK,EAAGA,IAFT;AAGC,IAAA,QAAQ,EAAGC;AAHZ,IAND,EAWC,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAC,oEADX;AAEC,IAAA,OAAO,EAAC;AAFT,KAIC,4BAAC,oBAAD,QACC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,WADT;AAEC,IAAA,OAAO,EAAG,MAAM;AACfH,MAAAA,cAAc;AACd;AAJF,KAMG,cAAI,QAAJ,CANH,CADD,CAJD,EAcC,4BAAC,oBAAD,QACC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,SADT;AAEC,IAAA,IAAI,EAAC,QAFN;AAGC,IAAA,QAAQ,EAAG,CAAEE,IAAI,CAACI,MAHnB;AAIC,qBAAgB,CAAEJ,IAAI,CAACI;AAJxB,KAMGR,gBANH,CADD,CAdD,CAXD,CAND,CADD;AA8CA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tFlex,\n\tFlexItem,\n\tModal,\n\tTextControl,\n} from '@wordpress/components';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\nexport default function NavigationMenuNameModal( {\n\ttitle,\n\tfinishButtonText = __( 'Create' ),\n\tonFinish,\n\tonRequestClose,\n\tvalue = '',\n} ) {\n\tconst [ name, setName ] = useState( value );\n\n\treturn (\n\t\t<Modal\n\t\t\ttitle={ title }\n\t\t\tcloseLabel={ __( 'Cancel' ) }\n\t\t\tonRequestClose={ onRequestClose }\n\t\t\toverlayClassName=\"wp-block-template-part__placeholder-create-new__title-form\"\n\t\t>\n\t\t\t<form\n\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tonFinish( name );\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<TextControl\n\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\tvalue={ name }\n\t\t\t\t\tonChange={ setName }\n\t\t\t\t/>\n\t\t\t\t<Flex\n\t\t\t\t\tclassName=\"wp-block-template-part__placeholder-create-new__title-form-actions\"\n\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonRequestClose();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\t\tdisabled={ ! name.length }\n\t\t\t\t\t\t\taria-disabled={ ! name.length }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ finishButtonText }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</Flex>\n\t\t\t</form>\n\t\t</Modal>\n\t);\n}\n"]}

package/build/navigation/edit/navigation-menu-publish-button.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavigationMenuPublishButton;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _coreData = require("@wordpress/core-data");
+
+var _data = require("@wordpress/data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _navigationMenuNameModal = _interopRequireDefault(require("./navigation-menu-name-modal"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function NavigationMenuPublishButton() {
+  const [isNameModalVisible, setIsNameModalVisible] = (0, _element.useState)(false);
+  const id = (0, _coreData.useEntityId)('postType', 'wp_navigation');
+  const [navigationMenuTitle] = (0, _coreData.useEntityProp)('postType', 'wp_navigation', 'title');
+  const {
+    editEntityRecord,
+    saveEditedEntityRecord
+  } = (0, _data.useDispatch)(_coreData.store);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.ToolbarButton, {
+    onClick: () => setIsNameModalVisible(true)
+  }, (0, _i18n.__)('Save as')), isNameModalVisible && (0, _element.createElement)(_navigationMenuNameModal.default, {
+    title: (0, _i18n.__)('Save your new navigation menu'),
+    value: navigationMenuTitle,
+    onRequestClose: () => setIsNameModalVisible(false),
+    finishButtonText: (0, _i18n.__)('Save'),
+    onFinish: updatedTitle => {
+      editEntityRecord('postType', 'wp_navigation', id, {
+        title: updatedTitle,
+        status: 'publish'
+      });
+      saveEditedEntityRecord('postType', 'wp_navigation', id);
+    }
+  }));
+}
+//# sourceMappingURL=navigation-menu-publish-button.js.map

package/build/navigation/edit/navigation-menu-publish-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/navigation-menu-publish-button.js"],"names":["NavigationMenuPublishButton","isNameModalVisible","setIsNameModalVisible","id","navigationMenuTitle","editEntityRecord","saveEditedEntityRecord","coreStore","updatedTitle","title","status"],"mappings":";;;;;;;;;AAUA;;AAPA;;AACA;;AAKA;;AAEA;;AAKA;;AAhBA;AACA;AACA;;AAWA;AACA;AACA;AAGe,SAASA,2BAAT,GAAuC;AACrD,QAAM,CAAEC,kBAAF,EAAsBC,qBAAtB,IAAgD,uBAAU,KAAV,CAAtD;AACA,QAAMC,EAAE,GAAG,2BAAa,UAAb,EAAyB,eAAzB,CAAX;AACA,QAAM,CAAEC,mBAAF,IAA0B,6BAC/B,UAD+B,EAE/B,eAF+B,EAG/B,OAH+B,CAAhC;AAKA,QAAM;AAAEC,IAAAA,gBAAF;AAAoBC,IAAAA;AAApB,MAA+C,uBACpDC,eADoD,CAArD;AAIA,SACC,qDACC,4BAAC,yBAAD;AAAe,IAAA,OAAO,EAAG,MAAML,qBAAqB,CAAE,IAAF;AAApD,KACG,cAAI,SAAJ,CADH,CADD,EAIGD,kBAAkB,IACnB,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAG,cAAI,+BAAJ,CADT;AAEC,IAAA,KAAK,EAAGG,mBAFT;AAGC,IAAA,cAAc,EAAG,MAAMF,qBAAqB,CAAE,KAAF,CAH7C;AAIC,IAAA,gBAAgB,EAAG,cAAI,MAAJ,CAJpB;AAKC,IAAA,QAAQ,EAAKM,YAAF,IAAoB;AAC9BH,MAAAA,gBAAgB,CAAE,UAAF,EAAc,eAAd,EAA+BF,EAA/B,EAAmC;AAClDM,QAAAA,KAAK,EAAED,YAD2C;AAElDE,QAAAA,MAAM,EAAE;AAF0C,OAAnC,CAAhB;AAIAJ,MAAAA,sBAAsB,CACrB,UADqB,EAErB,eAFqB,EAGrBH,EAHqB,CAAtB;AAKA;AAfF,IALF,CADD;AA0BA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToolbarButton } from '@wordpress/components';\nimport {\n\tuseEntityId,\n\tuseEntityProp,\n\tstore as coreStore,\n} from '@wordpress/core-data';\nimport { useDispatch } from '@wordpress/data';\nimport { useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport NavigationMenuNameModal from './navigation-menu-name-modal';\n\nexport default function NavigationMenuPublishButton() {\n\tconst [ isNameModalVisible, setIsNameModalVisible ] = useState( false );\n\tconst id = useEntityId( 'postType', 'wp_navigation' );\n\tconst [ navigationMenuTitle ] = useEntityProp(\n\t\t'postType',\n\t\t'wp_navigation',\n\t\t'title'\n\t);\n\tconst { editEntityRecord, saveEditedEntityRecord } = useDispatch(\n\t\tcoreStore\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ToolbarButton onClick={ () => setIsNameModalVisible( true ) }>\n\t\t\t\t{ __( 'Save as' ) }\n\t\t\t</ToolbarButton>\n\t\t\t{ isNameModalVisible && (\n\t\t\t\t<NavigationMenuNameModal\n\t\t\t\t\ttitle={ __( 'Save your new navigation menu' ) }\n\t\t\t\t\tvalue={ navigationMenuTitle }\n\t\t\t\t\tonRequestClose={ () => setIsNameModalVisible( false ) }\n\t\t\t\t\tfinishButtonText={ __( 'Save' ) }\n\t\t\t\t\tonFinish={ ( updatedTitle ) => {\n\t\t\t\t\t\teditEntityRecord( 'postType', 'wp_navigation', id, {\n\t\t\t\t\t\t\ttitle: updatedTitle,\n\t\t\t\t\t\t\tstatus: 'publish',\n\t\t\t\t\t\t} );\n\t\t\t\t\t\tsaveEditedEntityRecord(\n\t\t\t\t\t\t\t'postType',\n\t\t\t\t\t\t\t'wp_navigation',\n\t\t\t\t\t\t\tid\n\t\t\t\t\t\t);\n\t\t\t\t\t} }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build/navigation/edit/navigation-menu-selector.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavigationMenuSelector;
+
+var _element = require("@wordpress/element");
+
+var _components = require("@wordpress/components");
+
+var _coreData = require("@wordpress/core-data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _useNavigationMenu = _interopRequireDefault(require("../use-navigation-menu"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function NavigationMenuSelector({
+  onSelect,
+  onCreateNew
+}) {
+  const {
+    navigationMenus
+  } = (0, _useNavigationMenu.default)();
+  const navigationMenuId = (0, _coreData.useEntityId)('postType', 'wp_navigation');
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItemsChoice, {
+    value: navigationMenuId,
+    onSelect: selectedId => onSelect(navigationMenus.find(post => post.id === selectedId)),
+    choices: navigationMenus.map(({
+      id,
+      title
+    }) => ({
+      value: id,
+      label: title.rendered
+    }))
+  })), (0, _element.createElement)(_components.MenuGroup, null, (0, _element.createElement)(_components.MenuItem, {
+    onClick: onCreateNew
+  }, (0, _i18n.__)('Create new menu'))));
+}
+//# sourceMappingURL=navigation-menu-selector.js.map

package/build/navigation/edit/navigation-menu-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/navigation-menu-selector.js"],"names":["NavigationMenuSelector","onSelect","onCreateNew","navigationMenus","navigationMenuId","selectedId","find","post","id","map","title","value","label","rendered"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AAVA;AACA;AACA;;AAKA;AACA;AACA;AAGe,SAASA,sBAAT,CAAiC;AAAEC,EAAAA,QAAF;AAAYC,EAAAA;AAAZ,CAAjC,EAA6D;AAC3E,QAAM;AAAEC,IAAAA;AAAF,MAAsB,iCAA5B;AACA,QAAMC,gBAAgB,GAAG,2BAAa,UAAb,EAAyB,eAAzB,CAAzB;AAEA,SACC,qDACC,4BAAC,qBAAD,QACC,4BAAC,2BAAD;AACC,IAAA,KAAK,EAAGA,gBADT;AAEC,IAAA,QAAQ,EAAKC,UAAF,IACVJ,QAAQ,CACPE,eAAe,CAACG,IAAhB,CACGC,IAAF,IAAYA,IAAI,CAACC,EAAL,KAAYH,UADzB,CADO,CAHV;AASC,IAAA,OAAO,EAAGF,eAAe,CAACM,GAAhB,CAAqB,CAAE;AAAED,MAAAA,EAAF;AAAME,MAAAA;AAAN,KAAF,MAAuB;AACrDC,MAAAA,KAAK,EAAEH,EAD8C;AAErDI,MAAAA,KAAK,EAAEF,KAAK,CAACG;AAFwC,KAAvB,CAArB;AATX,IADD,CADD,EAiBC,4BAAC,qBAAD,QACC,4BAAC,oBAAD;AAAU,IAAA,OAAO,EAAGX;AAApB,KACG,cAAI,iBAAJ,CADH,CADD,CAjBD,CADD;AAyBA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { MenuGroup, MenuItem, MenuItemsChoice } from '@wordpress/components';\nimport { useEntityId } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport useNavigationMenu from '../use-navigation-menu';\n\nexport default function NavigationMenuSelector( { onSelect, onCreateNew } ) {\n\tconst { navigationMenus } = useNavigationMenu();\n\tconst navigationMenuId = useEntityId( 'postType', 'wp_navigation' );\n\n\treturn (\n\t\t<>\n\t\t\t<MenuGroup>\n\t\t\t\t<MenuItemsChoice\n\t\t\t\t\tvalue={ navigationMenuId }\n\t\t\t\t\tonSelect={ ( selectedId ) =>\n\t\t\t\t\t\tonSelect(\n\t\t\t\t\t\t\tnavigationMenus.find(\n\t\t\t\t\t\t\t\t( post ) => post.id === selectedId\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tchoices={ navigationMenus.map( ( { id, title } ) => ( {\n\t\t\t\t\t\tvalue: id,\n\t\t\t\t\t\tlabel: title.rendered,\n\t\t\t\t\t} ) ) }\n\t\t\t\t/>\n\t\t\t</MenuGroup>\n\t\t\t<MenuGroup>\n\t\t\t\t<MenuItem onClick={ onCreateNew }>\n\t\t\t\t\t{ __( 'Create new menu' ) }\n\t\t\t\t</MenuItem>\n\t\t\t</MenuGroup>\n\t\t</>\n\t);\n}\n"]}

package/build/navigation/edit/placeholder/index.js

@@ -0,0 +1,207 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = NavigationPlaceholder;
+
+var _element = require("@wordpress/element");
+
+var _blocks = require("@wordpress/blocks");
+
+var _components = require("@wordpress/components");
+
+var _coreData = require("@wordpress/core-data");
+
+var _data = require("@wordpress/data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _icons = require("@wordpress/icons");
+
+var _useNavigationEntities = _interopRequireDefault(require("../../use-navigation-entities"));
+
+var _placeholderPreview = _interopRequireDefault(require("./placeholder-preview"));
+
+var _menuItemsToBlocks = _interopRequireDefault(require("../../menu-items-to-blocks"));
+
+var _navigationMenuNameModal = _interopRequireDefault(require("../navigation-menu-name-modal"));
+
+var _useNavigationMenu = _interopRequireDefault(require("../../use-navigation-menu"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const ExistingMenusDropdown = ({
+  canSwitchNavigationMenu,
+  navigationMenus,
+  setSelectedMenu,
+  onFinish,
+  menus,
+  onCreateFromMenu
+}) => {
+  const toggleProps = {
+    variant: 'primary',
+    className: 'wp-block-navigation-placeholder__actions__dropdown'
+  };
+  return (0, _element.createElement)(_components.DropdownMenu, {
+    text: (0, _i18n.__)('Select existing menu'),
+    icon: _icons.chevronDown,
+    toggleProps: toggleProps,
+    popoverProps: {
+      isAlternate: true
+    }
+  }, ({
+    onClose
+  }) => (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.MenuGroup, {
+    label: "Menus"
+  }, canSwitchNavigationMenu && navigationMenus.map(menu => {
+    return (0, _element.createElement)(_components.MenuItem, {
+      onClick: () => {
+        setSelectedMenu(menu.id);
+        onFinish(menu);
+      },
+      onClose: onClose,
+      key: menu.id
+    }, menu.title.rendered);
+  })), (0, _element.createElement)(_components.MenuGroup, {
+    label: "Classic Menus"
+  }, menus.map(menu => {
+    return (0, _element.createElement)(_components.MenuItem, {
+      onClick: () => {
+        setSelectedMenu(menu.id);
+        onCreateFromMenu(menu.name);
+      },
+      onClose: onClose,
+      key: menu.id
+    }, menu.name);
+  }))));
+};
+
+function NavigationPlaceholder({
+  onFinish,
+  canSwitchNavigationMenu,
+  hasResolvedNavigationMenus
+}) {
+  const [selectedMenu, setSelectedMenu] = (0, _element.useState)();
+  const [isCreatingFromMenu, setIsCreatingFromMenu] = (0, _element.useState)(false);
+  const [menuName, setMenuName] = (0, _element.useState)('');
+  const [isNewMenuModalVisible, setIsNewMenuModalVisible] = (0, _element.useState)(false);
+  const [createEmpty, setCreateEmpty] = (0, _element.useState)(false);
+  const {
+    saveEntityRecord
+  } = (0, _data.useDispatch)(_coreData.store); // This callback uses data from the two placeholder steps and only creates
+  // a new navigation menu when the user completes the final step.
+
+  const createNavigationMenu = (0, _element.useCallback)(async (title = (0, _i18n.__)('Untitled Navigation Menu'), blocks = []) => {
+    const record = {
+      title,
+      content: (0, _blocks.serialize)(blocks),
+      status: 'publish'
+    };
+    const navigationMenu = await saveEntityRecord('postType', 'wp_navigation', record);
+    return navigationMenu;
+  }, [_blocks.serialize, saveEntityRecord]);
+
+  const onFinishMenuCreation = async (navigationMenuTitle, blocks) => {
+    const navigationMenu = await createNavigationMenu(navigationMenuTitle, blocks);
+    onFinish(navigationMenu);
+  };
+
+  const {
+    isResolvingPages,
+    menus,
+    isResolvingMenus,
+    menuItems,
+    hasResolvedMenuItems,
+    hasPages,
+    hasMenus
+  } = (0, _useNavigationEntities.default)(selectedMenu);
+  const isStillLoading = isResolvingPages || isResolvingMenus;
+  const createFromMenu = (0, _element.useCallback)(name => {
+    const {
+      innerBlocks: blocks
+    } = (0, _menuItemsToBlocks.default)(menuItems);
+    onFinishMenuCreation(name, blocks);
+  }, [menuItems, _menuItemsToBlocks.default, onFinish]);
+
+  const onCreateFromMenu = name => {
+    // If we have menu items, create the block right away.
+    if (hasResolvedMenuItems) {
+      createFromMenu(name);
+      return;
+    } // Otherwise, create the block when resolution finishes.
+
+
+    setIsCreatingFromMenu(true); // Store the name to use later.
+
+    setMenuName(name);
+  };
+
+  const onCreateEmptyMenu = name => {
+    onFinishMenuCreation(name, []);
+  };
+
+  const onCreateAllPages = name => {
+    const block = [(0, _blocks.createBlock)('core/page-list')];
+    onFinishMenuCreation(name, block);
+    setIsNewMenuModalVisible(true);
+  };
+
+  (0, _element.useEffect)(() => {
+    // If the user selected a menu but we had to wait for menu items to
+    // finish resolving, then create the block once resolution finishes.
+    if (isCreatingFromMenu && hasResolvedMenuItems) {
+      createFromMenu(menuName);
+      setIsCreatingFromMenu(false);
+    }
+  }, [isCreatingFromMenu, hasResolvedMenuItems, menuName]);
+  const {
+    navigationMenus
+  } = (0, _useNavigationMenu.default)();
+  return (0, _element.createElement)(_element.Fragment, null, (!hasResolvedNavigationMenus || isStillLoading) && (0, _element.createElement)(_placeholderPreview.default, {
+    isLoading: true
+  }), hasResolvedNavigationMenus && !isStillLoading && (0, _element.createElement)(_components.Placeholder, {
+    className: "wp-block-navigation-placeholder"
+  }, (0, _element.createElement)(_placeholderPreview.default, null), (0, _element.createElement)("div", {
+    className: "wp-block-navigation-placeholder__controls"
+  }, (0, _element.createElement)("div", {
+    className: "wp-block-navigation-placeholder__actions"
+  }, (0, _element.createElement)("div", {
+    className: "wp-block-navigation-placeholder__actions__indicator"
+  }, (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.navigation
+  }), ' ', (0, _i18n.__)('Navigation')), hasMenus || navigationMenus.length ? (0, _element.createElement)(ExistingMenusDropdown, {
+    canSwitchNavigationMenu: canSwitchNavigationMenu,
+    navigationMenus: navigationMenus,
+    setSelectedMenu: setSelectedMenu,
+    onFinish: onFinish,
+    menus: menus,
+    onCreateFromMenu: onCreateFromMenu
+  }) : undefined, hasPages ? (0, _element.createElement)(_components.Button, {
+    variant: hasMenus || canSwitchNavigationMenu ? 'tertiary' : 'primary',
+    onClick: () => {
+      setIsNewMenuModalVisible(true);
+      setCreateEmpty(false);
+    }
+  }, (0, _i18n.__)('Add all pages')) : undefined, (0, _element.createElement)(_components.Button, {
+    variant: "tertiary",
+    onClick: () => {
+      setIsNewMenuModalVisible(true);
+      setCreateEmpty(true);
+    }
+  }, (0, _i18n.__)('Start empty'))))), isNewMenuModalVisible && (0, _element.createElement)(_navigationMenuNameModal.default, {
+    title: (0, _i18n.__)('Create your new navigation menu'),
+    onRequestClose: () => {
+      setIsNewMenuModalVisible(false);
+    },
+    onFinish: createEmpty ? onCreateEmptyMenu : onCreateAllPages
+  }));
+}
+//# sourceMappingURL=index.js.map

package/build/navigation/edit/placeholder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/placeholder/index.js"],"names":["ExistingMenusDropdown","canSwitchNavigationMenu","navigationMenus","setSelectedMenu","onFinish","menus","onCreateFromMenu","toggleProps","variant","className","chevronDown","isAlternate","onClose","map","menu","id","title","rendered","name","NavigationPlaceholder","hasResolvedNavigationMenus","selectedMenu","isCreatingFromMenu","setIsCreatingFromMenu","menuName","setMenuName","isNewMenuModalVisible","setIsNewMenuModalVisible","createEmpty","setCreateEmpty","saveEntityRecord","coreStore","createNavigationMenu","blocks","record","content","status","navigationMenu","serialize","onFinishMenuCreation","navigationMenuTitle","isResolvingPages","isResolvingMenus","menuItems","hasResolvedMenuItems","hasPages","hasMenus","isStillLoading","createFromMenu","innerBlocks","menuItemsToBlocks","onCreateEmptyMenu","onCreateAllPages","block","navigation","length","undefined"],"mappings":";;;;;;;;;AAaA;;AAVA;;AACA;;AAOA;;AACA;;AAEA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AAzBA;AACA;AACA;;AAeA;AACA;AACA;AAQA,MAAMA,qBAAqB,GAAG,CAAE;AAC/BC,EAAAA,uBAD+B;AAE/BC,EAAAA,eAF+B;AAG/BC,EAAAA,eAH+B;AAI/BC,EAAAA,QAJ+B;AAK/BC,EAAAA,KAL+B;AAM/BC,EAAAA;AAN+B,CAAF,KAOvB;AACN,QAAMC,WAAW,GAAG;AACnBC,IAAAA,OAAO,EAAE,SADU;AAEnBC,IAAAA,SAAS,EAAE;AAFQ,GAApB;AAIA,SACC,4BAAC,wBAAD;AACC,IAAA,IAAI,EAAG,cAAI,sBAAJ,CADR;AAEC,IAAA,IAAI,EAAGC,kBAFR;AAGC,IAAA,WAAW,EAAGH,WAHf;AAIC,IAAA,YAAY,EAAG;AAAEI,MAAAA,WAAW,EAAE;AAAf;AAJhB,KAMG,CAAE;AAAEC,IAAAA;AAAF,GAAF,KACD,qDACC,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAC;AAAjB,KACGX,uBAAuB,IACxBC,eAAe,CAACW,GAAhB,CAAuBC,IAAF,IAAY;AAChC,WACC,4BAAC,oBAAD;AACC,MAAA,OAAO,EAAG,MAAM;AACfX,QAAAA,eAAe,CAAEW,IAAI,CAACC,EAAP,CAAf;AACAX,QAAAA,QAAQ,CAAEU,IAAF,CAAR;AACA,OAJF;AAKC,MAAA,OAAO,EAAGF,OALX;AAMC,MAAA,GAAG,EAAGE,IAAI,CAACC;AANZ,OAQGD,IAAI,CAACE,KAAL,CAAWC,QARd,CADD;AAYA,GAbD,CAFF,CADD,EAkBC,4BAAC,qBAAD;AAAW,IAAA,KAAK,EAAC;AAAjB,KACGZ,KAAK,CAACQ,GAAN,CAAaC,IAAF,IAAY;AACxB,WACC,4BAAC,oBAAD;AACC,MAAA,OAAO,EAAG,MAAM;AACfX,QAAAA,eAAe,CAAEW,IAAI,CAACC,EAAP,CAAf;AACAT,QAAAA,gBAAgB,CAAEQ,IAAI,CAACI,IAAP,CAAhB;AACA,OAJF;AAKC,MAAA,OAAO,EAAGN,OALX;AAMC,MAAA,GAAG,EAAGE,IAAI,CAACC;AANZ,OAQGD,IAAI,CAACI,IARR,CADD;AAYA,GAbC,CADH,CAlBD,CAPF,CADD;AA8CA,CA1DD;;AA4De,SAASC,qBAAT,CAAgC;AAC9Cf,EAAAA,QAD8C;AAE9CH,EAAAA,uBAF8C;AAG9CmB,EAAAA;AAH8C,CAAhC,EAIX;AACH,QAAM,CAAEC,YAAF,EAAgBlB,eAAhB,IAAoC,wBAA1C;AAEA,QAAM,CAAEmB,kBAAF,EAAsBC,qBAAtB,IAAgD,uBAAU,KAAV,CAAtD;AAEA,QAAM,CAAEC,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,EAAV,CAAlC;AAEA,QAAM,CAAEC,qBAAF,EAAyBC,wBAAzB,IAAsD,uBAC3D,KAD2D,CAA5D;AAIA,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AAEA,QAAM;AAAEC,IAAAA;AAAF,MAAuB,uBAAaC,eAAb,CAA7B,CAbG,CAeH;AACA;;AACA,QAAMC,oBAAoB,GAAG,0BAC5B,OAAQhB,KAAK,GAAG,cAAI,0BAAJ,CAAhB,EAAkDiB,MAAM,GAAG,EAA3D,KAAmE;AAClE,UAAMC,MAAM,GAAG;AACdlB,MAAAA,KADc;AAEdmB,MAAAA,OAAO,EAAE,uBAAWF,MAAX,CAFK;AAGdG,MAAAA,MAAM,EAAE;AAHM,KAAf;AAMA,UAAMC,cAAc,GAAG,MAAMP,gBAAgB,CAC5C,UAD4C,EAE5C,eAF4C,EAG5CI,MAH4C,CAA7C;AAMA,WAAOG,cAAP;AACA,GAf2B,EAgB5B,CAAEC,iBAAF,EAAaR,gBAAb,CAhB4B,CAA7B;;AAmBA,QAAMS,oBAAoB,GAAG,OAAQC,mBAAR,EAA6BP,MAA7B,KAAyC;AACrE,UAAMI,cAAc,GAAG,MAAML,oBAAoB,CAChDQ,mBADgD,EAEhDP,MAFgD,CAAjD;AAIA7B,IAAAA,QAAQ,CAAEiC,cAAF,CAAR;AACA,GAND;;AAQA,QAAM;AACLI,IAAAA,gBADK;AAELpC,IAAAA,KAFK;AAGLqC,IAAAA,gBAHK;AAILC,IAAAA,SAJK;AAKLC,IAAAA,oBALK;AAMLC,IAAAA,QANK;AAOLC,IAAAA;AAPK,MAQF,oCAAuBzB,YAAvB,CARJ;AAUA,QAAM0B,cAAc,GAAGN,gBAAgB,IAAIC,gBAA3C;AAEA,QAAMM,cAAc,GAAG,0BACpB9B,IAAF,IAAY;AACX,UAAM;AAAE+B,MAAAA,WAAW,EAAEhB;AAAf,QAA0B,gCAAmBU,SAAnB,CAAhC;AACAJ,IAAAA,oBAAoB,CAAErB,IAAF,EAAQe,MAAR,CAApB;AACA,GAJqB,EAKtB,CAAEU,SAAF,EAAaO,0BAAb,EAAgC9C,QAAhC,CALsB,CAAvB;;AAQA,QAAME,gBAAgB,GAAKY,IAAF,IAAY;AACpC;AACA,QAAK0B,oBAAL,EAA4B;AAC3BI,MAAAA,cAAc,CAAE9B,IAAF,CAAd;AACA;AACA,KALmC,CAOpC;;;AACAK,IAAAA,qBAAqB,CAAE,IAAF,CAArB,CARoC,CASpC;;AACAE,IAAAA,WAAW,CAAEP,IAAF,CAAX;AACA,GAXD;;AAaA,QAAMiC,iBAAiB,GAAKjC,IAAF,IAAY;AACrCqB,IAAAA,oBAAoB,CAAErB,IAAF,EAAQ,EAAR,CAApB;AACA,GAFD;;AAIA,QAAMkC,gBAAgB,GAAKlC,IAAF,IAAY;AACpC,UAAMmC,KAAK,GAAG,CAAE,yBAAa,gBAAb,CAAF,CAAd;AACAd,IAAAA,oBAAoB,CAAErB,IAAF,EAAQmC,KAAR,CAApB;AACA1B,IAAAA,wBAAwB,CAAE,IAAF,CAAxB;AACA,GAJD;;AAMA,0BAAW,MAAM;AAChB;AACA;AACA,QAAKL,kBAAkB,IAAIsB,oBAA3B,EAAkD;AACjDI,MAAAA,cAAc,CAAExB,QAAF,CAAd;AACAD,MAAAA,qBAAqB,CAAE,KAAF,CAArB;AACA;AACD,GAPD,EAOG,CAAED,kBAAF,EAAsBsB,oBAAtB,EAA4CpB,QAA5C,CAPH;AASA,QAAM;AAAEtB,IAAAA;AAAF,MAAsB,iCAA5B;AAEA,SACC,qDACG,CAAE,CAAEkB,0BAAF,IAAgC2B,cAAlC,KACD,4BAAC,2BAAD;AAAoB,IAAA,SAAS;AAA7B,IAFF,EAIG3B,0BAA0B,IAAI,CAAE2B,cAAhC,IACD,4BAAC,uBAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACC,4BAAC,2BAAD,OADD,EAEC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGO;AAAb,IADD,EAC+B,GAD/B,EAEG,cAAI,YAAJ,CAFH,CADD,EAKGR,QAAQ,IAAI5C,eAAe,CAACqD,MAA5B,GACD,4BAAC,qBAAD;AACC,IAAA,uBAAuB,EACtBtD,uBAFF;AAIC,IAAA,eAAe,EAAGC,eAJnB;AAKC,IAAA,eAAe,EAAGC,eALnB;AAMC,IAAA,QAAQ,EAAGC,QANZ;AAOC,IAAA,KAAK,EAAGC,KAPT;AAQC,IAAA,gBAAgB,EAAGC;AARpB,IADC,GAWEkD,SAhBL,EAiBGX,QAAQ,GACT,4BAAC,kBAAD;AACC,IAAA,OAAO,EACNC,QAAQ,IAAI7C,uBAAZ,GACG,UADH,GAEG,SAJL;AAMC,IAAA,OAAO,EAAG,MAAM;AACf0B,MAAAA,wBAAwB,CAAE,IAAF,CAAxB;AACAE,MAAAA,cAAc,CAAE,KAAF,CAAd;AACA;AATF,KAWG,cAAI,eAAJ,CAXH,CADS,GAcN2B,SA/BL,EAgCC,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,UADT;AAEC,IAAA,OAAO,EAAG,MAAM;AACf7B,MAAAA,wBAAwB,CAAE,IAAF,CAAxB;AACAE,MAAAA,cAAc,CAAE,IAAF,CAAd;AACA;AALF,KAOG,cAAI,aAAJ,CAPH,CAhCD,CADD,CAFD,CALF,EAqDGH,qBAAqB,IACtB,4BAAC,gCAAD;AACC,IAAA,KAAK,EAAG,cAAI,iCAAJ,CADT;AAEC,IAAA,cAAc,EAAG,MAAM;AACtBC,MAAAA,wBAAwB,CAAE,KAAF,CAAxB;AACA,KAJF;AAKC,IAAA,QAAQ,EACPC,WAAW,GAAGuB,iBAAH,GAAuBC;AANpC,IAtDF,CADD;AAmEA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { serialize, createBlock } from '@wordpress/blocks';\nimport {\n\tPlaceholder,\n\tButton,\n\tDropdownMenu,\n\tMenuGroup,\n\tMenuItem,\n} from '@wordpress/components';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { useDispatch } from '@wordpress/data';\nimport { useCallback, useState, useEffect } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { navigation, chevronDown, Icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\n\nimport useNavigationEntities from '../../use-navigation-entities';\nimport PlaceholderPreview from './placeholder-preview';\nimport menuItemsToBlocks from '../../menu-items-to-blocks';\nimport NavigationMenuNameModal from '../navigation-menu-name-modal';\nimport useNavigationMenu from '../../use-navigation-menu';\n\nconst ExistingMenusDropdown = ( {\n\tcanSwitchNavigationMenu,\n\tnavigationMenus,\n\tsetSelectedMenu,\n\tonFinish,\n\tmenus,\n\tonCreateFromMenu,\n} ) => {\n\tconst toggleProps = {\n\t\tvariant: 'primary',\n\t\tclassName: 'wp-block-navigation-placeholder__actions__dropdown',\n\t};\n\treturn (\n\t\t<DropdownMenu\n\t\t\ttext={ __( 'Select existing menu' ) }\n\t\t\ticon={ chevronDown }\n\t\t\ttoggleProps={ toggleProps }\n\t\t\tpopoverProps={ { isAlternate: true } }\n\t\t>\n\t\t\t{ ( { onClose } ) => (\n\t\t\t\t<>\n\t\t\t\t\t<MenuGroup label=\"Menus\">\n\t\t\t\t\t\t{ canSwitchNavigationMenu &&\n\t\t\t\t\t\t\tnavigationMenus.map( ( menu ) => {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedMenu( menu.id );\n\t\t\t\t\t\t\t\t\t\t\tonFinish( menu );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t\t\tkey={ menu.id }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ menu.title.rendered }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t<MenuGroup label=\"Classic Menus\">\n\t\t\t\t\t\t{ menus.map( ( menu ) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetSelectedMenu( menu.id );\n\t\t\t\t\t\t\t\t\t\tonCreateFromMenu( menu.name );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tonClose={ onClose }\n\t\t\t\t\t\t\t\t\tkey={ menu.id }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ menu.name }\n\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</MenuGroup>\n\t\t\t\t</>\n\t\t\t) }\n\t\t</DropdownMenu>\n\t);\n};\n\nexport default function NavigationPlaceholder( {\n\tonFinish,\n\tcanSwitchNavigationMenu,\n\thasResolvedNavigationMenus,\n} ) {\n\tconst [ selectedMenu, setSelectedMenu ] = useState();\n\n\tconst [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );\n\n\tconst [ menuName, setMenuName ] = useState( '' );\n\n\tconst [ isNewMenuModalVisible, setIsNewMenuModalVisible ] = useState(\n\t\tfalse\n\t);\n\n\tconst [ createEmpty, setCreateEmpty ] = useState( false );\n\n\tconst { saveEntityRecord } = useDispatch( coreStore );\n\n\t// This callback uses data from the two placeholder steps and only creates\n\t// a new navigation menu when the user completes the final step.\n\tconst createNavigationMenu = useCallback(\n\t\tasync ( title = __( 'Untitled Navigation Menu' ), blocks = [] ) => {\n\t\t\tconst record = {\n\t\t\t\ttitle,\n\t\t\t\tcontent: serialize( blocks ),\n\t\t\t\tstatus: 'publish',\n\t\t\t};\n\n\t\t\tconst navigationMenu = await saveEntityRecord(\n\t\t\t\t'postType',\n\t\t\t\t'wp_navigation',\n\t\t\t\trecord\n\t\t\t);\n\n\t\t\treturn navigationMenu;\n\t\t},\n\t\t[ serialize, saveEntityRecord ]\n\t);\n\n\tconst onFinishMenuCreation = async ( navigationMenuTitle, blocks ) => {\n\t\tconst navigationMenu = await createNavigationMenu(\n\t\t\tnavigationMenuTitle,\n\t\t\tblocks\n\t\t);\n\t\tonFinish( navigationMenu );\n\t};\n\n\tconst {\n\t\tisResolvingPages,\n\t\tmenus,\n\t\tisResolvingMenus,\n\t\tmenuItems,\n\t\thasResolvedMenuItems,\n\t\thasPages,\n\t\thasMenus,\n\t} = useNavigationEntities( selectedMenu );\n\n\tconst isStillLoading = isResolvingPages || isResolvingMenus;\n\n\tconst createFromMenu = useCallback(\n\t\t( name ) => {\n\t\t\tconst { innerBlocks: blocks } = menuItemsToBlocks( menuItems );\n\t\t\tonFinishMenuCreation( name, blocks );\n\t\t},\n\t\t[ menuItems, menuItemsToBlocks, onFinish ]\n\t);\n\n\tconst onCreateFromMenu = ( name ) => {\n\t\t// If we have menu items, create the block right away.\n\t\tif ( hasResolvedMenuItems ) {\n\t\t\tcreateFromMenu( name );\n\t\t\treturn;\n\t\t}\n\n\t\t// Otherwise, create the block when resolution finishes.\n\t\tsetIsCreatingFromMenu( true );\n\t\t// Store the name to use later.\n\t\tsetMenuName( name );\n\t};\n\n\tconst onCreateEmptyMenu = ( name ) => {\n\t\tonFinishMenuCreation( name, [] );\n\t};\n\n\tconst onCreateAllPages = ( name ) => {\n\t\tconst block = [ createBlock( 'core/page-list' ) ];\n\t\tonFinishMenuCreation( name, block );\n\t\tsetIsNewMenuModalVisible( true );\n\t};\n\n\tuseEffect( () => {\n\t\t// If the user selected a menu but we had to wait for menu items to\n\t\t// finish resolving, then create the block once resolution finishes.\n\t\tif ( isCreatingFromMenu && hasResolvedMenuItems ) {\n\t\t\tcreateFromMenu( menuName );\n\t\t\tsetIsCreatingFromMenu( false );\n\t\t}\n\t}, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] );\n\n\tconst { navigationMenus } = useNavigationMenu();\n\n\treturn (\n\t\t<>\n\t\t\t{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (\n\t\t\t\t<PlaceholderPreview isLoading />\n\t\t\t) }\n\t\t\t{ hasResolvedNavigationMenus && ! isStillLoading && (\n\t\t\t\t<Placeholder className=\"wp-block-navigation-placeholder\">\n\t\t\t\t\t<PlaceholderPreview />\n\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__controls\">\n\t\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__actions\">\n\t\t\t\t\t\t\t<div className=\"wp-block-navigation-placeholder__actions__indicator\">\n\t\t\t\t\t\t\t\t<Icon icon={ navigation } />{ ' ' }\n\t\t\t\t\t\t\t\t{ __( 'Navigation' ) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t{ hasMenus || navigationMenus.length ? (\n\t\t\t\t\t\t\t\t<ExistingMenusDropdown\n\t\t\t\t\t\t\t\t\tcanSwitchNavigationMenu={\n\t\t\t\t\t\t\t\t\t\tcanSwitchNavigationMenu\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tnavigationMenus={ navigationMenus }\n\t\t\t\t\t\t\t\t\tsetSelectedMenu={ setSelectedMenu }\n\t\t\t\t\t\t\t\t\tonFinish={ onFinish }\n\t\t\t\t\t\t\t\t\tmenus={ menus }\n\t\t\t\t\t\t\t\t\tonCreateFromMenu={ onCreateFromMenu }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : undefined }\n\t\t\t\t\t\t\t{ hasPages ? (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\thasMenus || canSwitchNavigationMenu\n\t\t\t\t\t\t\t\t\t\t\t? 'tertiary'\n\t\t\t\t\t\t\t\t\t\t\t: 'primary'\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetIsNewMenuModalVisible( true );\n\t\t\t\t\t\t\t\t\t\tsetCreateEmpty( false );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Add all pages' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t) : undefined }\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\tsetIsNewMenuModalVisible( true );\n\t\t\t\t\t\t\t\t\tsetCreateEmpty( true );\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Start empty' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</Placeholder>\n\t\t\t) }\n\t\t\t{ isNewMenuModalVisible && (\n\t\t\t\t<NavigationMenuNameModal\n\t\t\t\t\ttitle={ __( 'Create your new navigation menu' ) }\n\t\t\t\t\tonRequestClose={ () => {\n\t\t\t\t\t\tsetIsNewMenuModalVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonFinish={\n\t\t\t\t\t\tcreateEmpty ? onCreateEmptyMenu : onCreateAllPages\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"]}

package/build/navigation/{placeholder-preview.js → edit/placeholder/placeholder-preview.js}

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -7,14 +9,24 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _icons = require("@wordpress/icons");
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
-const PlaceholderPreview = () => {
+const PlaceholderPreview = ({
+  isLoading
+}) => {
   return (0, _element.createElement)("ul", {
-    className: "wp-block-navigation-placeholder__preview wp-block-navigation__container"
+    className: (0, _classnames.default)('wp-block-navigation-placeholder__preview', 'wp-block-navigation__container', {
+      'is-loading': isLoading
+    })
   }, (0, _element.createElement)("li", {
     className: "wp-block-navigation-item"
   }, "\u200B"), (0, _element.createElement)("li", {

package/build/navigation/edit/placeholder/placeholder-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/placeholder/placeholder-preview.js"],"names":["PlaceholderPreview","isLoading","search"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGA,MAAMA,kBAAkB,GAAG,CAAE;AAAEC,EAAAA;AAAF,CAAF,KAAqB;AAC/C,SACC;AACC,IAAA,SAAS,EAAG,yBACX,0CADW,EAEX,gCAFW,EAGX;AAAE,oBAAcA;AAAhB,KAHW;AADb,KAOC;AAAI,IAAA,SAAS,EAAC;AAAd,cAPD,EAQC;AAAI,IAAA,SAAS,EAAC;AAAd,cARD,EASC;AAAI,IAAA,SAAS,EAAC;AAAd,cATD,EAUC;AAAI,IAAA,SAAS,EAAC;AAAd,KACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGC;AAAb,IADD,CAVD,CADD;AAgBA,CAjBD;;eAmBeF,kB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, search } from '@wordpress/icons';\n\nconst PlaceholderPreview = ( { isLoading } ) => {\n\treturn (\n\t\t<ul\n\t\t\tclassName={ classnames(\n\t\t\t\t'wp-block-navigation-placeholder__preview',\n\t\t\t\t'wp-block-navigation__container',\n\t\t\t\t{ 'is-loading': isLoading }\n\t\t\t) }\n\t\t>\n\t\t\t<li className=\"wp-block-navigation-item\">&#8203;</li>\n\t\t\t<li className=\"wp-block-navigation-item\">&#8203;</li>\n\t\t\t<li className=\"wp-block-navigation-item\">&#8203;</li>\n\t\t\t<li className=\"wp-block-navigation-placeholder__preview-search-icon\">\n\t\t\t\t<Icon icon={ search } />\n\t\t\t</li>\n\t\t</ul>\n\t);\n};\n\nexport default PlaceholderPreview;\n"]}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/navigation/edit/responsive-wrapper.js"],"names":["ResponsiveWrapper","children","id","isOpen","isResponsive","onToggle","isHiddenByDefault","responsiveContainerClasses","openButtonClasses","modalId","close"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMe,SAASA,iBAAT,CAA4B;AAC1CC,EAAAA,QAD0C;AAE1CC,EAAAA,EAF0C;AAG1CC,EAAAA,MAH0C;AAI1CC,EAAAA,YAJ0C;AAK1CC,EAAAA,QAL0C;AAM1CC,EAAAA;AAN0C,CAA5B,EAOX;AACH,MAAK,CAAEF,YAAP,EAAsB;AACrB,WAAOH,QAAP;AACA;;AACD,QAAMM,0BAA0B,GAAG,yBAClC,2CADkC,EAElC;AACC,oBAAgBJ,MADjB;AAEC,yBAAqBG;AAFtB,GAFkC,CAAnC;AAOA,QAAME,iBAAiB,GAAG,yBACzB,gDADyB,EAEzB;AAAE,oBAAgBF;AAAlB,GAFyB,CAA1B;AAKA,QAAMG,OAAO,GAAI,GAAGP,EAAI,QAAxB;AAEA,SACC,qDACG,CAAEC,MAAF,IACD,4BAAC,kBAAD;AACC,qBAAc,MADf;AAEC,qBAAgBA,MAFjB;AAGC,kBAAa,cAAI,WAAJ,CAHd;AAIC,IAAA,SAAS,EAAGK,iBAJb;AAKC,IAAA,OAAO,EAAG,MAAMH,QAAQ,CAAE,IAAF;AALzB,KAOC,4BAAC,eAAD;AACC,IAAA,KAAK,EAAC,4BADP;AAEC,IAAA,OAAO,EAAC,WAFT;AAGC,IAAA,KAAK,EAAC,IAHP;AAIC,IAAA,MAAM,EAAC,IAJR;AAKC,IAAA,IAAI,EAAC,KALN;AAMC,mBAAY,MANb;AAOC,IAAA,SAAS,EAAC;AAPX,KASC,4BAAC,gBAAD;AAAM,IAAA,CAAC,EAAC,GAAR;AAAY,IAAA,CAAC,EAAC,KAAd;AAAoB,IAAA,KAAK,EAAC,IAA1B;AAA+B,IAAA,MAAM,EAAC;AAAtC,IATD,EAUC,4BAAC,gBAAD;AAAM,IAAA,CAAC,EAAC,GAAR;AAAY,IAAA,CAAC,EAAC,IAAd;AAAmB,IAAA,KAAK,EAAC,IAAzB;AAA8B,IAAA,MAAM,EAAC;AAArC,IAVD,CAPD,CAFF,EAwBC;AACC,IAAA,SAAS,EAAGE,0BADb;AAEC,IAAA,EAAE,EAAGE,OAFN;AAGC,mBAAc,CAAEN;AAHjB,KAKC;AACC,IAAA,SAAS,EAAC,uCADX;AAEC,IAAA,QAAQ,EAAC;AAFV,KAIC;AACC,IAAA,SAAS,EAAC,wCADX;AAEC,IAAA,IAAI,EAAC,QAFN;AAGC,kBAAW,MAHZ;AAIC,uBAAmB,GAAGM,OAAS;AAJhC,KAMC,4BAAC,kBAAD;AACC,IAAA,SAAS,EAAC,iDADX;AAEC,kBAAa,cAAI,YAAJ,CAFd;AAGC,IAAA,OAAO,EAAG,MAAMJ,QAAQ,CAAE,KAAF;AAHzB,KAKC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGK;AAAb,IALD,CAND,EAaC;AACC,IAAA,SAAS,EAAC,mDADX;AAEC,IAAA,EAAE,EAAI,GAAGD,OAAS;AAFnB,KAIGR,QAJH,CAbD,CAJD,CALD,CAxBD,CADD;AA0DA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { close, Icon } from '@wordpress/icons';\nimport { Button } from '@wordpress/components';\nimport { SVG, Rect } from '@wordpress/primitives';\nimport { __ } from '@wordpress/i18n';\n\nexport default function ResponsiveWrapper( {\n\tchildren,\n\tid,\n\tisOpen,\n\tisResponsive,\n\tonToggle,\n\tisHiddenByDefault,\n} ) {\n\tif ( ! isResponsive ) {\n\t\treturn children;\n\t}\n\tconst responsiveContainerClasses = classnames(\n\t\t'wp-block-navigation__responsive-container',\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\tconst openButtonClasses = classnames(\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\treturn (\n\t\t<>\n\t\t\t{ ! isOpen && (\n\t\t\t\t<Button\n\t\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ __( 'Open menu' ) }\n\t\t\t\t\tclassName={ openButtonClasses }\n\t\t\t\t\tonClick={ () => onToggle( true ) }\n\t\t\t\t>\n\t\t\t\t\t<SVG\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\twidth=\"24\"\n\t\t\t\t\t\theight=\"24\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Rect x=\"4\" y=\"7.5\" width=\"16\" height=\"1.5\" />\n\t\t\t\t\t\t<Rect x=\"4\" y=\"15\" width=\"16\" height=\"1.5\" />\n\t\t\t\t\t</SVG>\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\tid={ modalId }\n\t\t\t\taria-hidden={ ! isOpen }\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\n\t\t\t\t\t\tclassName=\"wp-block-navigation__responsive-dialog\"\n\t\t\t\t\t\trole=\"dialog\"\n\t\t\t\t\t\taria-modal=\"true\"\n\t\t\t\t\t\taria-labelledby={ `${ modalId }-title` }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"wp-block-navigation__responsive-container-close\"\n\t\t\t\t\t\t\taria-label={ __( '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<Icon icon={ 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"]}

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

@@ -0,0 +1,153 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = UnsavedInnerBlocks;
+
+var _element = require("@wordpress/element");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _blocks = require("@wordpress/blocks");
+
+var _components = require("@wordpress/components");
+
+var _coreData = require("@wordpress/core-data");
+
+var _data = require("@wordpress/data");
+
+var _i18n = require("@wordpress/i18n");
+
+var _useNavigationMenu = _interopRequireDefault(require("../use-navigation-menu"));
+
+var _useTemplatePartAreaLabel = _interopRequireDefault(require("../use-template-part-area-label"));
+
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const NOOP = () => {};
+
+const EMPTY_OBJECT = {};
+const DRAFT_MENU_PARAMS = ['postType', 'wp_navigation', {
+  status: 'draft',
+  per_page: -1
+}];
+
+function UnsavedInnerBlocks({
+  blockProps,
+  blocks,
+  clientId,
+  hasSavedUnsavedInnerBlocks,
+  onSave,
+  hasSelection
+}) {
+  // The block will be disabled in a block preview, use this as a way of
+  // avoiding the side-effects of this component for block previews.
+  const isDisabled = (0, _element.useContext)(_components.Disabled.Context);
+  const savingLock = (0, _element.useRef)(false);
+  const innerBlocksProps = (0, _blockEditor.useInnerBlocksProps)(blockProps, {
+    renderAppender: hasSelection ? undefined : false,
+    // Make the inner blocks 'controlled'. This allows the block to always
+    // work with controlled inner blocks, smoothing out the switch to using
+    // an entity.
+    value: blocks,
+    onChange: NOOP,
+    onInput: NOOP
+  });
+  const {
+    saveEntityRecord
+  } = (0, _data.useDispatch)(_coreData.store);
+  const {
+    isSaving,
+    draftNavigationMenus,
+    hasResolvedDraftNavigationMenus
+  } = (0, _data.useSelect)(select => {
+    if (isDisabled) {
+      return EMPTY_OBJECT;
+    }
+
+    const {
+      getEntityRecords,
+      hasFinishedResolution,
+      isSavingEntityRecord
+    } = select(_coreData.store);
+    return {
+      isSaving: isSavingEntityRecord('postType', 'wp_navigation'),
+      draftNavigationMenus: getEntityRecords(...DRAFT_MENU_PARAMS),
+      hasResolvedDraftNavigationMenus: hasFinishedResolution('getEntityRecords', DRAFT_MENU_PARAMS)
+    };
+  }, [isDisabled]);
+  const {
+    hasResolvedNavigationMenus,
+    navigationMenus
+  } = (0, _useNavigationMenu.default)();
+  const createNavigationMenu = (0, _element.useCallback)(async title => {
+    const record = {
+      title,
+      content: (0, _blocks.serialize)(blocks),
+      status: 'draft'
+    };
+    const navigationMenu = await saveEntityRecord('postType', 'wp_navigation', record);
+    return navigationMenu;
+  }, [blocks, _blocks.serialize, saveEntityRecord]); // Because we can't conditionally call hooks, pass an undefined client id
+  // arg to bypass the expensive `useTemplateArea` code. The hook will return
+  // early.
+
+  const area = (0, _useTemplatePartAreaLabel.default)(isDisabled ? undefined : clientId); // Automatically save the uncontrolled blocks.
+
+  (0, _element.useEffect)(async () => {
+    // The block will be disabled when used in a BlockPreview.
+    // In this case avoid automatic creation of a wp_navigation post.
+    // Otherwise the user will be spammed with lots of menus!
+    //
+    // Also ensure other navigation menus have loaded so an
+    // accurate name can be created.
+    //
+    // Don't try saving when another save is already
+    // in progress.
+    //
+    // 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) {
+      return;
+    }
+
+    savingLock.current = true;
+    const title = area ? (0, _i18n.sprintf)( // translators: %s: the name of a menu (e.g. Header navigation).
+    (0, _i18n.__)('%s navigation'), area) : // translators: 'navigation' as in website navigation.
+    (0, _i18n.__)('Navigation'); // Determine how many menus start with the automatic title.
+
+    const matchingMenuTitleCount = [...draftNavigationMenus, ...navigationMenus].reduce((count, menu) => {
+      var _menu$title, _menu$title$raw;
+
+      return menu !== null && menu !== void 0 && (_menu$title = menu.title) !== null && _menu$title !== void 0 && (_menu$title$raw = _menu$title.raw) !== null && _menu$title$raw !== void 0 && _menu$title$raw.startsWith(title) ? count + 1 : count;
+    }, 0); // Append a number to the end of the title if a menu with
+    // the same name exists.
+
+    const titleWithCount = matchingMenuTitleCount > 0 ? `${title} ${matchingMenuTitleCount + 1}` : title;
+    const menu = await createNavigationMenu(titleWithCount);
+    onSave(menu);
+    savingLock.current = false;
+  }, [isDisabled, isSaving, hasResolvedDraftNavigationMenus, hasResolvedNavigationMenus, draftNavigationMenus, navigationMenus, hasSelection, createNavigationMenu, area]);
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("nav", blockProps, (0, _element.createElement)("div", {
+    className: "wp-block-navigation__unsaved-changes"
+  }, (0, _element.createElement)(_components.Disabled, {
+    className: (0, _classnames.default)('wp-block-navigation__unsaved-changes-overlay', {
+      'is-saving': hasSelection
+    })
+  }, (0, _element.createElement)("div", innerBlocksProps)), hasSelection && (0, _element.createElement)(_components.Spinner, null))));
+}
+//# sourceMappingURL=unsaved-inner-blocks.js.map