@wordpress/block-library 7.12.2-next.d6164808d3.0 → 7.14.0

package/build/more/index.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.settings = exports.name = exports.metadata = void 0;
+exports.settings = exports.name = exports.metadata = exports.init = void 0;
 
 var _icons = require("@wordpress/icons");
 
+var _initBlock = _interopRequireDefault(require("../utils/init-block"));
+
 var _edit = _interopRequireDefault(require("./edit"));
 
 var _save = _interopRequireDefault(require("./save"));
@@ -72,4 +74,12 @@ const settings = {
   save: _save.default
 };
 exports.settings = settings;
+
+const init = () => (0, _initBlock.default)({
+  name,
+  metadata,
+  settings
+});
+
+exports.init = init;
 //# sourceMappingURL=index.js.map

package/build/more/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/more/index.js"],"names":["name","metadata","settings","icon","example","__experimentalLabel","attributes","context","customText","transforms","edit","save"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAEA;;AACA;;AAXA;AACA;AACA;;AAGA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAM;AAAEA,EAAAA;AAAF,IAAWC,QAAjB;;AAIO,MAAMC,QAAQ,GAAG;AACvBC,EAAAA,IAAI,EAAJA,WADuB;AAEvBC,EAAAA,OAAO,EAAE,EAFc;;AAGvBC,EAAAA,mBAAmB,CAAEC,UAAF,QAA4B;AAAA,QAAd;AAAEC,MAAAA;AAAF,KAAc;;AAC9C,QAAKA,OAAO,KAAK,eAAjB,EAAmC;AAClC,aAAOD,UAAU,CAACE,UAAlB;AACA;AACD,GAPsB;;AAQvBC,EAAAA,UAAU,EAAVA,mBARuB;AASvBC,EAAAA,IAAI,EAAJA,aATuB;AAUvBC,EAAAA,IAAI,EAAJA;AAVuB,CAAjB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { more as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {},\n\t__experimentalLabel( attributes, { context } ) {\n\t\tif ( context === 'accessibility' ) {\n\t\t\treturn attributes.customText;\n\t\t}\n\t},\n\ttransforms,\n\tedit,\n\tsave,\n};\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/more/index.js"],"names":["name","metadata","settings","icon","example","__experimentalLabel","attributes","context","customText","transforms","edit","save","init"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AAEA;;AACA;;AAZA;AACA;AACA;;AAGA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM;AAAEA,EAAAA;AAAF,IAAWC,QAAjB;;AAIO,MAAMC,QAAQ,GAAG;AACvBC,EAAAA,IAAI,EAAJA,WADuB;AAEvBC,EAAAA,OAAO,EAAE,EAFc;;AAGvBC,EAAAA,mBAAmB,CAAEC,UAAF,QAA4B;AAAA,QAAd;AAAEC,MAAAA;AAAF,KAAc;;AAC9C,QAAKA,OAAO,KAAK,eAAjB,EAAmC;AAClC,aAAOD,UAAU,CAACE,UAAlB;AACA;AACD,GAPsB;;AAQvBC,EAAAA,UAAU,EAAVA,mBARuB;AASvBC,EAAAA,IAAI,EAAJA,aATuB;AAUvBC,EAAAA,IAAI,EAAJA;AAVuB,CAAjB;;;AAaA,MAAMC,IAAI,GAAG,MAAM,wBAAW;AAAEZ,EAAAA,IAAF;AAAQC,EAAAA,QAAR;AAAkBC,EAAAA;AAAlB,CAAX,CAAnB","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { more as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {},\n\t__experimentalLabel( attributes, { context } ) {\n\t\tif ( context === 'accessibility' ) {\n\t\t\treturn attributes.customText;\n\t\t}\n\t},\n\ttransforms,\n\tedit,\n\tsave,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"]}

package/build/more/init.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _ = require("./");
+
+/**
+ * Internal dependencies
+ */
+var _default = (0, _.init)();
+
+exports.default = _default;
+//# sourceMappingURL=init.js.map

package/build/more/init.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/more/init.js"],"names":[],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;eAGe,a","sourcesContent":["/**\n * Internal dependencies\n */\nimport { init } from './';\n\nexport default init();\n"]}

package/build/more/transforms.native.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _transforms = _interopRequireDefault(require("./transforms.js"));
 
-var _transformationCategories = _interopRequireDefault(require("../transformationCategories"));
+var _transformationCategories = _interopRequireDefault(require("../utils/transformation-categories"));
 
 /**
  * Internal dependencies

package/build/more/transforms.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/more/transforms.native.js"],"names":["transforms","webTransforms","supportedMobileTransforms","transformationCategories","other"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,MAAMA,UAAU,GAAG,EAClB,GAAGC,mBADe;AAElBC,EAAAA,yBAAyB,EAAEC,kCAAyBC;AAFlC,CAAnB;eAKeJ,U","sourcesContent":["/**\n * Internal dependencies\n */\nimport webTransforms from './transforms.js';\nimport transformationCategories from '../transformationCategories';\n\nconst transforms = {\n\t...webTransforms,\n\tsupportedMobileTransforms: transformationCategories.other,\n};\n\nexport default transforms;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/more/transforms.native.js"],"names":["transforms","webTransforms","supportedMobileTransforms","transformationCategories","other"],"mappings":";;;;;;;;;AAGA;;AACA;;AAJA;AACA;AACA;AAIA,MAAMA,UAAU,GAAG,EAClB,GAAGC,mBADe;AAElBC,EAAAA,yBAAyB,EAAEC,kCAAyBC;AAFlC,CAAnB;eAKeJ,U","sourcesContent":["/**\n * Internal dependencies\n */\nimport webTransforms from './transforms.js';\nimport transformationCategories from '../utils/transformation-categories';\n\nconst transforms = {\n\t...webTransforms,\n\tsupportedMobileTransforms: transformationCategories.other,\n};\n\nexport default transforms;\n"]}

package/build/navigation/edit/index.js

@@ -11,6 +11,8 @@ var _element = require("@wordpress/element");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _url = require("@wordpress/url");
+
 var _blockEditor = require("@wordpress/block-editor");
 
 var _coreData = require("@wordpress/core-data");
@@ -25,6 +27,8 @@ var _a11y = require("@wordpress/a11y");
 
 var _blocks = require("@wordpress/blocks");
 
+var _icons = require("@wordpress/icons");
+
 var _useNavigationMenu = _interopRequireDefault(require("../use-navigation-menu"));
 
 var _useNavigationEntities = _interopRequireDefault(require("../use-navigation-entities"));
@@ -47,6 +51,8 @@ var _useNavigationNotice = _interopRequireDefault(require("./use-navigation-noti
 
 var _overlayMenuIcon = _interopRequireDefault(require("./overlay-menu-icon"));
 
+var _overlayMenuPreview = _interopRequireDefault(require("./overlay-menu-preview"));
+
 var _useConvertClassicMenuToBlockMenu = _interopRequireWildcard(require("./use-convert-classic-menu-to-block-menu"));
 
 var _useCreateNavigationMenu = _interopRequireDefault(require("./use-create-navigation-menu"));
@@ -102,7 +108,8 @@ function Navigation(_ref) {
       orientation = 'horizontal',
       flexWrap = 'wrap'
     } = {},
-    hasIcon
+    hasIcon,
+    icon = 'handle'
   } = attributes;
   const ref = attributes.ref;
 
@@ -113,7 +120,10 @@ function Navigation(_ref) {
   };
 
   const recursionId = `navigationMenu/${ref}`;
-  const hasAlreadyRendered = (0, _blockEditor.__experimentalUseHasRecursion)(recursionId); // Preload classic menus, so that they don't suddenly pop-in when viewing
+  const hasAlreadyRendered = (0, _blockEditor.__experimentalUseHasRecursion)(recursionId);
+  const {
+    editEntityRecord
+  } = (0, _data.useDispatch)(_coreData.store); // Preload classic menus, so that they don't suddenly pop-in when viewing
   // the Select Menu dropdown.
 
   (0, _useNavigationEntities.default)();
@@ -123,6 +133,9 @@ function Navigation(_ref) {
   const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = (0, _useNavigationNotice.default)({
     name: 'block-library/core/navigation/classic-menu-conversion'
   });
+  const [showMenuAutoPublishDraftNotice, hideMenuAutoPublishDraftNotice] = (0, _useNavigationNotice.default)({
+    name: 'block-library/core/navigation/auto-publish-draft'
+  });
   const [showNavigationMenuPermissionsNotice, hideNavigationMenuPermissionsNotice] = (0, _useNavigationNotice.default)({
     name: 'block-library/core/navigation/permissions/update'
   });
@@ -135,6 +148,11 @@ function Navigation(_ref) {
     isSuccess: createNavigationMenuIsSuccess,
     isError: createNavigationMenuIsError
   } = (0, _useCreateNavigationMenu.default)(clientId);
+
+  const createUntitledEmptyNavigationMenu = () => {
+    createNavigationMenu('');
+  };
+
   (0, _element.useEffect)(() => {
     hideNavigationMenuStatusNotice();
 
@@ -143,15 +161,16 @@ function Navigation(_ref) {
     }
 
     if (createNavigationMenuIsSuccess) {
-      setRef(createNavigationMenuPost.id);
-      selectBlock(clientId);
+      handleUpdateMenu(createNavigationMenuPost.id, {
+        focusNavigationBlock: true
+      });
       showNavigationMenuStatusNotice((0, _i18n.__)(`Navigation Menu successfully created.`));
     }
 
     if (createNavigationMenuIsError) {
       showNavigationMenuStatusNotice((0, _i18n.__)('Failed to create Navigation Menu.'));
     }
-  }, [createNavigationMenu, createNavigationMenuStatus, createNavigationMenuError, createNavigationMenuPost]);
+  }, [createNavigationMenuStatus, createNavigationMenuError, createNavigationMenuPost]);
   const {
     hasUncontrolledInnerBlocks,
     uncontrolledInnerBlocks,
@@ -198,7 +217,10 @@ function Navigation(_ref) {
       const menuADate = new Date(menuA.date);
       const menuBDate = new Date(menuB.date);
       return menuADate.getTime() < menuBDate.getTime();
-    });
+    }); // Only autofallback to published menus.
+
+    const fallbackNavigationMenus = navigationMenus.filter(menu => menu.status === 'publish');
+    if (fallbackNavigationMenus.length === 0) return;
     /**
      *  This fallback displays (both in editor and on front)
      *  a list of pages only if no menu (user assigned or
@@ -209,10 +231,9 @@ function Navigation(_ref) {
 
     __unstableMarkNextChangeAsNotPersistent();
 
-    setRef(navigationMenus[0].id);
+    setRef(fallbackNavigationMenus[0].id);
   }, [navigationMenus]);
   const navRef = (0, _element.useRef)();
-  const isDraftNavigationMenu = (navigationMenu === null || navigationMenu === void 0 ? void 0 : navigationMenu.status) === 'draft';
   const {
     convert: convertClassicMenu,
     status: classicMenuConversionStatus,
@@ -279,9 +300,18 @@ function Navigation(_ref) {
   const [detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor] = (0, _element.useState)();
   const [detectedOverlayColor, setDetectedOverlayColor] = (0, _element.useState)();
 
-  const handleUpdateMenu = menuId => {
+  const handleUpdateMenu = function (menuId) {
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      focusNavigationBlock: false
+    };
+    const {
+      focusNavigationBlock
+    } = options;
     setRef(menuId);
-    selectBlock(clientId);
+
+    if (focusNavigationBlock) {
+      selectBlock(clientId);
+    }
   };
 
   (0, _element.useEffect)(() => {
@@ -339,38 +369,43 @@ function Navigation(_ref) {
       }
     }
   }, [isSelected, isInnerBlockSelected, canUserUpdateNavigationMenu, hasResolvedCanUserUpdateNavigationMenu, canUserCreateNavigationMenu, hasResolvedCanUserCreateNavigationMenu, ref]);
-  const navigationSelectorRef = (0, _element.useRef)();
-  const [shouldFocusNavigationSelector, setShouldFocusNavigationSelector] = (0, _element.useState)(false); // Focus support after menu selection.
-
-  (0, _element.useEffect)(() => {
-    var _navigationSelectorRe;
-
-    if (isDraftNavigationMenu || !isEntityAvailable || !shouldFocusNavigationSelector) {
-      return;
-    }
-
-    navigationSelectorRef === null || navigationSelectorRef === void 0 ? void 0 : (_navigationSelectorRe = navigationSelectorRef.current) === null || _navigationSelectorRe === void 0 ? void 0 : _navigationSelectorRe.focus();
-    setShouldFocusNavigationSelector(false);
-  }, [isDraftNavigationMenu, isEntityAvailable, shouldFocusNavigationSelector]);
+  const hasManagePermissions = canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
   const isResponsive = 'never' !== overlayMenu;
   const overlayMenuPreviewClasses = (0, _classnames.default)('wp-block-navigation__overlay-menu-preview', {
     open: overlayMenuPreview
-  });
+  }); // Prompt the user to publish the menu they have set as a draft
+
+  const isDraftNavigationMenu = (navigationMenu === null || navigationMenu === void 0 ? void 0 : navigationMenu.status) === 'draft';
+  (0, _element.useEffect)(async () => {
+    hideMenuAutoPublishDraftNotice();
+    if (!isDraftNavigationMenu) return;
+
+    try {
+      await editEntityRecord('postType', 'wp_navigation', navigationMenu === null || navigationMenu === void 0 ? void 0 : navigationMenu.id, {
+        status: 'publish'
+      }, {
+        throwOnError: true
+      });
+    } catch {
+      showMenuAutoPublishDraftNotice((0, _i18n.__)('Error ocurred while publishing the navigation menu.'));
+    }
+  }, [isDraftNavigationMenu, navigationMenu]);
   const stylingInspectorControls = (0, _element.createElement)(_blockEditor.InspectorControls, null, hasSubmenuIndicatorSetting && (0, _element.createElement)(_components.PanelBody, {
     title: (0, _i18n.__)('Display')
-  }, isResponsive && (0, _element.createElement)(_components.Button, {
+  }, isResponsive && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.Button, {
     className: overlayMenuPreviewClasses,
     onClick: () => {
       setOverlayMenuPreview(!overlayMenuPreview);
     }
-  }, hasIcon && (0, _element.createElement)(_overlayMenuIcon.default, null), !hasIcon && (0, _element.createElement)("span", null, (0, _i18n.__)('Menu'))), overlayMenuPreview && (0, _element.createElement)(_components.ToggleControl, {
-    label: (0, _i18n.__)('Show icon button'),
-    help: (0, _i18n.__)('Configure the visual appearance of the button opening the overlay menu.'),
-    onChange: value => setAttributes({
-      hasIcon: value
-    }),
-    checked: hasIcon
-  }), (0, _element.createElement)("h3", null, (0, _i18n.__)('Overlay Menu')), (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
+  }, hasIcon && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_overlayMenuIcon.default, {
+    icon: icon
+  }), (0, _element.createElement)(_icons.Icon, {
+    icon: _icons.close
+  })), !hasIcon && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("span", null, (0, _i18n.__)('Menu')), (0, _element.createElement)("span", null, (0, _i18n.__)('Close')))), overlayMenuPreview && (0, _element.createElement)(_overlayMenuPreview.default, {
+    setAttributes: setAttributes,
+    hasIcon: hasIcon,
+    icon: icon
+  })), (0, _element.createElement)("h3", null, (0, _i18n.__)('Overlay Menu')), (0, _element.createElement)(_components.__experimentalToggleGroupControl, {
     label: (0, _i18n.__)('Configure overlay menu'),
     value: overlayMenu,
     help: (0, _i18n.__)('Collapses the navigation options in a menu icon opening an overlay.'),
@@ -447,39 +482,45 @@ function Navigation(_ref) {
   const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable;
 
   if (hasUnsavedBlocks) {
-    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.ToolbarGroup, {
-      className: "wp-block-navigation__toolbar-menu-selector"
+    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
+      title: (0, _i18n.__)('Menu')
     }, (0, _element.createElement)(_navigationMenuSelector.default, {
-      ref: null,
-      currentMenuId: null,
+      currentMenuId: ref,
       clientId: clientId,
       onSelectNavigationMenu: menuId => {
         handleUpdateMenu(menuId);
-        setShouldFocusNavigationSelector(true);
       },
       onSelectClassicMenu: async classicMenu => {
         const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name);
 
         if (navMenu) {
-          handleUpdateMenu(navMenu.id);
-          setShouldFocusNavigationSelector(true);
+          handleUpdateMenu(navMenu.id, {
+            focusNavigationBlock: true
+          });
         }
       },
-      onCreateNew: () => createNavigationMenu('', [])
+      onCreateNew: createUntitledEmptyNavigationMenu,
+      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess
       /* translators: %s: The name of a menu. */
       ,
-      actionLabel: (0, _i18n.__)("Switch to '%s'"),
-      showManageActions: true
-    }))), stylingInspectorControls, (0, _element.createElement)(_responsiveWrapper.default, {
+      actionLabel: (0, _i18n.__)("Switch to '%s'")
+    }), (0, _element.createElement)(_components.Button, {
+      variant: "link",
+      disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
+      href: (0, _url.addQueryArgs)('edit.php', {
+        post_type: 'wp_navigation'
+      })
+    }, (0, _i18n.__)('Manage menus')))), stylingInspectorControls, (0, _element.createElement)(_responsiveWrapper.default, {
       id: clientId,
       onToggle: setResponsiveMenuVisibility,
       isOpen: isResponsiveMenuOpen,
+      hasIcon: hasIcon,
+      icon: icon,
       isResponsive: 'never' !== overlayMenu,
       isHiddenByDefault: 'always' === overlayMenu,
       overlayBackgroundColor: overlayBackgroundColor,
       overlayTextColor: overlayTextColor
     }, (0, _element.createElement)(_unsavedInnerBlocks.default, {
-      blockProps: blockProps,
       blocks: uncontrolledInnerBlocks,
       clientId: clientId,
       navigationMenus: navigationMenus,
@@ -498,31 +539,36 @@ function Navigation(_ref) {
 
 
   if (ref && isNavigationMenuMissing) {
-    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_blockEditor.BlockControls, null, (0, _element.createElement)(_components.ToolbarGroup, {
-      className: "wp-block-navigation__toolbar-menu-selector"
+    return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
+      title: (0, _i18n.__)('Menu')
     }, (0, _element.createElement)(_navigationMenuSelector.default, {
-      ref: navigationSelectorRef,
-      currentMenuId: ref,
+      currentMenuId: null,
       clientId: clientId,
       onSelectNavigationMenu: menuId => {
         handleUpdateMenu(menuId);
-        setShouldFocusNavigationSelector(true);
       },
       onSelectClassicMenu: async classicMenu => {
         const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name);
 
         if (navMenu) {
-          handleUpdateMenu(navMenu.id);
-          setShouldFocusNavigationSelector(true);
+          handleUpdateMenu(navMenu.id, {
+            focusNavigationBlock: true
+          });
         }
       },
-      onCreateNew: () => createNavigationMenu('', [])
+      onCreateNew: createUntitledEmptyNavigationMenu,
+      createNavigationMenuIsSuccess: createNavigationMenuIsSuccess
       /* translators: %s: The name of a menu. */
       ,
-      actionLabel: (0, _i18n.__)("Switch to '%s'"),
-      showManageActions: true
-    }))), (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Navigation menu has been deleted or is unavailable. '), (0, _element.createElement)(_components.Button, {
-      onClick: () => createNavigationMenu('', []),
+      actionLabel: (0, _i18n.__)("Switch to '%s'")
+    }), (0, _element.createElement)(_components.Button, {
+      variant: "link",
+      disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
+      href: (0, _url.addQueryArgs)('edit.php', {
+        post_type: 'wp_navigation'
+      })
+    }, (0, _i18n.__)('Manage menus')))), (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Navigation menu has been deleted or is unavailable. '), (0, _element.createElement)(_components.Button, {
+      onClick: createUntitledEmptyNavigationMenu,
       variant: "link"
     }, (0, _i18n.__)('Create a new menu?'))));
   }
@@ -551,17 +597,17 @@ function Navigation(_ref) {
       isResolvingCanUserCreateNavigationMenu: isResolvingCanUserCreateNavigationMenu,
       onSelectNavigationMenu: menuId => {
         handleUpdateMenu(menuId);
-        setShouldFocusNavigationSelector(true);
       },
       onSelectClassicMenu: async classicMenu => {
         const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name);
 
         if (navMenu) {
-          handleUpdateMenu(navMenu.id);
-          setShouldFocusNavigationSelector(true);
+          handleUpdateMenu(navMenu.id, {
+            focusNavigationBlock: true
+          });
         }
       },
-      onCreateEmpty: () => createNavigationMenu('', [])
+      onCreateEmpty: createUntitledEmptyNavigationMenu
     }));
   }
 
@@ -571,30 +617,36 @@ function Navigation(_ref) {
     id: ref
   }, (0, _element.createElement)(_blockEditor.__experimentalRecursionProvider, {
     uniqueId: recursionId
-  }, (0, _element.createElement)(_blockEditor.BlockControls, null, !isDraftNavigationMenu && isEntityAvailable && (0, _element.createElement)(_components.ToolbarGroup, {
-    className: "wp-block-navigation__toolbar-menu-selector"
+  }, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, {
+    title: (0, _i18n.__)('Menu')
   }, (0, _element.createElement)(_navigationMenuSelector.default, {
-    ref: navigationSelectorRef,
     currentMenuId: ref,
     clientId: clientId,
     onSelectNavigationMenu: menuId => {
       handleUpdateMenu(menuId);
-      setShouldFocusNavigationSelector(true);
     },
     onSelectClassicMenu: async classicMenu => {
       const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name);
 
       if (navMenu) {
-        handleUpdateMenu(navMenu.id);
-        setShouldFocusNavigationSelector(true);
+        handleUpdateMenu(navMenu.id, {
+          focusNavigationBlock: true
+        });
       }
     },
-    onCreateNew: () => createNavigationMenu('', [])
+    onCreateNew: createUntitledEmptyNavigationMenu,
+    createNavigationMenuIsSuccess: createNavigationMenuIsSuccess,
+    createNavigationMenuIsError: createNavigationMenuIsError
     /* translators: %s: The name of a menu. */
     ,
-    actionLabel: (0, _i18n.__)("Switch to '%s'"),
-    showManageActions: true
-  }))), stylingInspectorControls, isEntityAvailable && (0, _element.createElement)(_blockEditor.InspectorControls, {
+    actionLabel: (0, _i18n.__)("Switch to '%s'")
+  }), (0, _element.createElement)(_components.Button, {
+    variant: "link",
+    disabled: !hasManagePermissions || !hasResolvedNavigationMenus,
+    href: (0, _url.addQueryArgs)('edit.php', {
+      post_type: 'wp_navigation'
+    })
+  }, (0, _i18n.__)('Manage menus')))), stylingInspectorControls, isEntityAvailable && (0, _element.createElement)(_blockEditor.InspectorControls, {
     __experimentalGroup: "advanced"
   }, hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && (0, _element.createElement)(_navigationMenuNameControl.default, null), hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && (0, _element.createElement)(_navigationMenuDeleteControl.default, {
     onDelete: function () {
@@ -610,6 +662,7 @@ function Navigation(_ref) {
     onToggle: setResponsiveMenuVisibility,
     label: (0, _i18n.__)('Menu'),
     hasIcon: hasIcon,
+    icon: icon,
     isOpen: isResponsiveMenuOpen,
     isResponsive: isResponsive,
     isHiddenByDefault: 'always' === overlayMenu,