UNPKG

@wordpress/block-library

Version:
689 lines (603 loc) 30.3 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; 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"); var _data = require("@wordpress/data"); var _components = require("@wordpress/components"); var _i18n = require("@wordpress/i18n"); 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")); var _placeholder = _interopRequireDefault(require("./placeholder")); var _responsiveWrapper = _interopRequireDefault(require("./responsive-wrapper")); var _innerBlocks = _interopRequireDefault(require("./inner-blocks")); var _navigationMenuSelector = _interopRequireDefault(require("./navigation-menu-selector")); var _navigationMenuNameControl = _interopRequireDefault(require("./navigation-menu-name-control")); var _unsavedInnerBlocks = _interopRequireDefault(require("./unsaved-inner-blocks")); var _navigationMenuDeleteControl = _interopRequireDefault(require("./navigation-menu-delete-control")); var _useNavigationNotice = _interopRequireDefault(require("./use-navigation-notice")); 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")); var _useInnerBlocks = require("./use-inner-blocks"); var _utils = require("./utils"); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /** * External dependencies */ /** * WordPress dependencies */ /** * Internal dependencies */ function Navigation(_ref) { var _attributes$style, _attributes$style$typ; let { attributes, setAttributes, clientId, isSelected, className, backgroundColor, setBackgroundColor, textColor, setTextColor, overlayBackgroundColor, setOverlayBackgroundColor, overlayTextColor, setOverlayTextColor, // These props are used by the navigation editor to override specific // navigation block settings. hasSubmenuIndicatorSetting = true, hasColorSettings = true, customPlaceholder: CustomPlaceholder = null } = _ref; const { openSubmenusOnClick, overlayMenu, showSubmenuIcon, layout: { justifyContent, orientation = 'horizontal', flexWrap = 'wrap' } = {}, hasIcon, icon = 'handle' } = attributes; const ref = attributes.ref; const setRef = postId => { setAttributes({ ref: postId }); }; const recursionId = `navigationMenu/${ref}`; 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)(); const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = (0, _useNavigationNotice.default)({ name: 'block-library/core/navigation/status' }); 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' }); const { create: createNavigationMenu, status: createNavigationMenuStatus, error: createNavigationMenuError, value: createNavigationMenuPost, isPending: isCreatingNavigationMenu, isSuccess: createNavigationMenuIsSuccess, isError: createNavigationMenuIsError } = (0, _useCreateNavigationMenu.default)(clientId); const createUntitledEmptyNavigationMenu = () => { createNavigationMenu(''); }; (0, _element.useEffect)(() => { hideNavigationMenuStatusNotice(); if (isCreatingNavigationMenu) { (0, _a11y.speak)((0, _i18n.__)(`Creating Navigation Menu.`)); } if (createNavigationMenuIsSuccess) { handleUpdateMenu(createNavigationMenuPost.id, { focusNavigationBlock: true }); showNavigationMenuStatusNotice((0, _i18n.__)(`Navigation Menu successfully created.`)); } if (createNavigationMenuIsError) { showNavigationMenuStatusNotice((0, _i18n.__)('Failed to create Navigation Menu.')); } }, [createNavigationMenuStatus, createNavigationMenuError, createNavigationMenuPost]); const { hasUncontrolledInnerBlocks, uncontrolledInnerBlocks, isInnerBlockSelected, innerBlocks } = (0, _useInnerBlocks.useInnerBlocks)(clientId); const hasSubmenus = !!innerBlocks.find(block => block.name === 'core/navigation-submenu'); const { replaceInnerBlocks, selectBlock, __unstableMarkNextChangeAsNotPersistent } = (0, _data.useDispatch)(_blockEditor.store); const [hasSavedUnsavedInnerBlocks, setHasSavedUnsavedInnerBlocks] = (0, _element.useState)(false); const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = (0, _element.useState)(false); const [overlayMenuPreview, setOverlayMenuPreview] = (0, _element.useState)(false); const { hasResolvedNavigationMenus, isNavigationMenuResolved, isNavigationMenuMissing, navigationMenus, navigationMenu, canUserUpdateNavigationMenu, hasResolvedCanUserUpdateNavigationMenu, canUserDeleteNavigationMenu, hasResolvedCanUserDeleteNavigationMenu, canUserCreateNavigationMenu, isResolvingCanUserCreateNavigationMenu, hasResolvedCanUserCreateNavigationMenu } = (0, _useNavigationMenu.default)(ref); const navMenuResolvedButMissing = hasResolvedNavigationMenus && isNavigationMenuMissing; // Attempt to retrieve and prioritize any existing navigation menu unless: // - the are uncontrolled inner blocks already present in the block. // - the user is creating a new menu. // - there are no menus to choose from. // This attempts to pick the first menu if there is a single Navigation Post. If more // than 1 exists then use the most recent. // The aim is for the block to "just work" from a user perspective using existing data. (0, _element.useEffect)(() => { if (hasUncontrolledInnerBlocks || isCreatingNavigationMenu || ref || !(navigationMenus !== null && navigationMenus !== void 0 && navigationMenus.length)) { return; } navigationMenus.sort((menuA, menuB) => { 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 * automatically picked) is available. * The fallback should not request a save (entity dirty state) * nor to be undoable, hence why it is marked as non persistent */ __unstableMarkNextChangeAsNotPersistent(); setRef(fallbackNavigationMenus[0].id); }, [navigationMenus]); const navRef = (0, _element.useRef)(); const { convert: convertClassicMenu, status: classicMenuConversionStatus, error: classicMenuConversionError } = (0, _useConvertClassicMenuToBlockMenu.default)(clientId); const isConvertingClassicMenu = classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_PENDING; // The standard HTML5 tag for the block wrapper. const TagName = 'nav'; // "placeholder" shown if: // - there is no ref attribute pointing to a Navigation Post. // - there is no classic menu conversion process in progress. // - there is no menu creation process in progress. // - there are no uncontrolled blocks. const isPlaceholder = !ref && !isCreatingNavigationMenu && !isConvertingClassicMenu && hasResolvedNavigationMenus && !hasUncontrolledInnerBlocks; if (isPlaceholder && !ref) { /** * this fallback only displays (both in editor and on front) * the list of pages block if no menu is available as a fallback. * We don't want the fallback to request a save, * nor to be undoable, hence we mark it non persistent. */ __unstableMarkNextChangeAsNotPersistent(); replaceInnerBlocks(clientId, [(0, _blocks.createBlock)('core/page-list')]); } const isEntityAvailable = !isNavigationMenuMissing && isNavigationMenuResolved; // "loading" state: // - there is a menu creation process in progress. // - there is a classic menu conversion process in progress. // OR: // - there is a ref attribute pointing to a Navigation Post // - the Navigation Post isn't available (hasn't resolved) yet. const isLoading = !hasResolvedNavigationMenus || isCreatingNavigationMenu || isConvertingClassicMenu || !!(ref && !isEntityAvailable && !isConvertingClassicMenu); const textDecoration = (_attributes$style = attributes.style) === null || _attributes$style === void 0 ? void 0 : (_attributes$style$typ = _attributes$style.typography) === null || _attributes$style$typ === void 0 ? void 0 : _attributes$style$typ.textDecoration; const hasBlockOverlay = (0, _blockEditor.__experimentalUseBlockOverlayActive)(clientId); const blockProps = (0, _blockEditor.useBlockProps)({ ref: navRef, className: (0, _classnames.default)(className, { 'items-justified-right': justifyContent === 'right', 'items-justified-space-between': justifyContent === 'space-between', 'items-justified-left': justifyContent === 'left', 'items-justified-center': justifyContent === 'center', 'is-vertical': orientation === 'vertical', 'no-wrap': flexWrap === 'nowrap', 'is-responsive': 'never' !== overlayMenu, 'has-text-color': !!textColor.color || !!(textColor !== null && textColor !== void 0 && textColor.class), [(0, _blockEditor.getColorClassName)('color', textColor === null || textColor === void 0 ? void 0 : textColor.slug)]: !!(textColor !== null && textColor !== void 0 && textColor.slug), 'has-background': !!backgroundColor.color || backgroundColor.class, [(0, _blockEditor.getColorClassName)('background-color', backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.slug)]: !!(backgroundColor !== null && backgroundColor !== void 0 && backgroundColor.slug), [`has-text-decoration-${textDecoration}`]: textDecoration, 'block-editor-block-content-overlay': hasBlockOverlay }), style: { color: !(textColor !== null && textColor !== void 0 && textColor.slug) && (textColor === null || textColor === void 0 ? void 0 : textColor.color), backgroundColor: !(backgroundColor !== null && backgroundColor !== void 0 && backgroundColor.slug) && (backgroundColor === null || backgroundColor === void 0 ? void 0 : backgroundColor.color) } }); // Turn on contrast checker for web only since it's not supported on mobile yet. const enableContrastChecking = _element.Platform.OS === 'web'; const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, _element.useState)(); const [detectedColor, setDetectedColor] = (0, _element.useState)(); const [detectedOverlayBackgroundColor, setDetectedOverlayBackgroundColor] = (0, _element.useState)(); const [detectedOverlayColor, setDetectedOverlayColor] = (0, _element.useState)(); const handleUpdateMenu = function (menuId) { let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { focusNavigationBlock: false }; const { focusNavigationBlock } = options; setRef(menuId); if (focusNavigationBlock) { selectBlock(clientId); } }; (0, _element.useEffect)(() => { hideClassicMenuConversionNotice(); if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_PENDING) { (0, _a11y.speak)((0, _i18n.__)('Classic menu importing.')); } if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_SUCCESS) { showClassicMenuConversionNotice((0, _i18n.__)('Classic menu imported successfully.')); } if (classicMenuConversionStatus === _useConvertClassicMenuToBlockMenu.CLASSIC_MENU_CONVERSION_ERROR) { showClassicMenuConversionNotice((0, _i18n.__)('Classic menu import failed.')); } }, [classicMenuConversionStatus, classicMenuConversionError]); // Spacer block needs orientation from context. This is a patch until // https://github.com/WordPress/gutenberg/issues/36197 is addressed. (0, _element.useEffect)(() => { if (orientation) { __unstableMarkNextChangeAsNotPersistent(); setAttributes({ orientation }); } }, [orientation]); (0, _element.useEffect)(() => { var _navRef$current; if (!enableContrastChecking) { return; } (0, _utils.detectColors)(navRef.current, setDetectedColor, setDetectedBackgroundColor); const subMenuElement = (_navRef$current = navRef.current) === null || _navRef$current === void 0 ? void 0 : _navRef$current.querySelector('[data-type="core/navigation-link"] [data-type="core/navigation-link"]'); if (subMenuElement) { (0, _utils.detectColors)(subMenuElement, setDetectedOverlayColor, setDetectedOverlayBackgroundColor); } }); (0, _element.useEffect)(() => { if (!isSelected && !isInnerBlockSelected) { hideNavigationMenuPermissionsNotice(); } if (isSelected || isInnerBlockSelected) { if (ref && !navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) { showNavigationMenuPermissionsNotice((0, _i18n.__)('You do not have permission to edit this Menu. Any changes made will not be saved.')); } if (!ref && hasResolvedCanUserCreateNavigationMenu && !canUserCreateNavigationMenu) { showNavigationMenuPermissionsNotice((0, _i18n.__)('You do not have permission to create Navigation Menus.')); } } }, [isSelected, isInnerBlockSelected, canUserUpdateNavigationMenu, hasResolvedCanUserUpdateNavigationMenu, canUserCreateNavigationMenu, hasResolvedCanUserCreateNavigationMenu, ref]); 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)(_element.Fragment, null, (0, _element.createElement)(_components.Button, { className: overlayMenuPreviewClasses, onClick: () => { setOverlayMenuPreview(!overlayMenuPreview); } }, 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.'), onChange: value => setAttributes({ overlayMenu: value }), isBlock: true, hideLabelFromVision: true }, (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, { value: "never", label: (0, _i18n.__)('Off') }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, { value: "mobile", label: (0, _i18n.__)('Mobile') }), (0, _element.createElement)(_components.__experimentalToggleGroupControlOption, { value: "always", label: (0, _i18n.__)('Always') })), hasSubmenus && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("h3", null, (0, _i18n.__)('Submenus')), (0, _element.createElement)(_components.ToggleControl, { checked: openSubmenusOnClick, onChange: value => { setAttributes({ openSubmenusOnClick: value, ...(value && { showSubmenuIcon: true }) // Make sure arrows are shown when we toggle this on. }); }, label: (0, _i18n.__)('Open on click') }), (0, _element.createElement)(_components.ToggleControl, { checked: showSubmenuIcon, onChange: value => { setAttributes({ showSubmenuIcon: value }); }, disabled: attributes.openSubmenusOnClick, label: (0, _i18n.__)('Show arrow') }))), hasColorSettings && (0, _element.createElement)(_blockEditor.PanelColorSettings, { __experimentalHasMultipleOrigins: true, __experimentalIsRenderedInSidebar: true, title: (0, _i18n.__)('Color'), initialOpen: false, colorSettings: [{ value: textColor.color, onChange: setTextColor, label: (0, _i18n.__)('Text') }, { value: backgroundColor.color, onChange: setBackgroundColor, label: (0, _i18n.__)('Background') }, { value: overlayTextColor.color, onChange: setOverlayTextColor, label: (0, _i18n.__)('Submenu & overlay text') }, { value: overlayBackgroundColor.color, onChange: setOverlayBackgroundColor, label: (0, _i18n.__)('Submenu & overlay background') }] }, enableContrastChecking && (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_blockEditor.ContrastChecker, { backgroundColor: detectedBackgroundColor, textColor: detectedColor }), (0, _element.createElement)(_blockEditor.ContrastChecker, { backgroundColor: detectedOverlayBackgroundColor, textColor: detectedOverlayColor })))); // If the block has inner blocks, but no menu id, then these blocks are either: // - inserted via a pattern. // - inserted directly via Code View (or otherwise). // - from an older version of navigation block added before the block used a wp_navigation entity. // Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks, // that automatically saves the menu as an entity when changes are made to the inner blocks. const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable; if (hasUnsavedBlocks) { 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, { currentMenuId: ref, clientId: clientId, onSelectNavigationMenu: menuId => { handleUpdateMenu(menuId); }, onSelectClassicMenu: async classicMenu => { const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name); if (navMenu) { handleUpdateMenu(navMenu.id, { focusNavigationBlock: true }); } }, onCreateNew: createUntitledEmptyNavigationMenu, createNavigationMenuIsSuccess: createNavigationMenuIsSuccess /* translators: %s: The name of a menu. */ , 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, { blocks: uncontrolledInnerBlocks, clientId: clientId, navigationMenus: navigationMenus, hasSelection: isSelected || isInnerBlockSelected, hasSavedUnsavedInnerBlocks: hasSavedUnsavedInnerBlocks, onSave: post => { // Set some state used as a guard to prevent the creation of multiple posts. setHasSavedUnsavedInnerBlocks(true); // Switch to using the wp_navigation entity. setRef(post.id); showNavigationMenuStatusNotice((0, _i18n.__)(`New Navigation Menu created.`)); } }))); } // Show a warning if the selected menu is no longer available. // TODO - the user should be able to select a new one? if (ref && isNavigationMenuMissing) { 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, { currentMenuId: null, clientId: clientId, onSelectNavigationMenu: menuId => { handleUpdateMenu(menuId); }, onSelectClassicMenu: async classicMenu => { const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name); if (navMenu) { handleUpdateMenu(navMenu.id, { focusNavigationBlock: true }); } }, onCreateNew: createUntitledEmptyNavigationMenu, createNavigationMenuIsSuccess: createNavigationMenuIsSuccess /* translators: %s: The name of a menu. */ , 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?')))); } if (isEntityAvailable && hasAlreadyRendered) { return (0, _element.createElement)("div", blockProps, (0, _element.createElement)(_blockEditor.Warning, null, (0, _i18n.__)('Block cannot be rendered inside itself.'))); } const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : _placeholder.default; /** * Historically the navigation block has supported custom placeholders. * Even though the current UX tries as hard as possible not to * end up in a placeholder state, the block continues to support * this extensibility point, via a CustomPlaceholder. * When CustomPlaceholder is present it becomes the default fallback * for an empty navigation block, instead of the default fallbacks. * */ if (isPlaceholder && CustomPlaceholder) { return (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(PlaceholderComponent, { isSelected: isSelected, currentMenuId: ref, clientId: clientId, canUserCreateNavigationMenu: canUserCreateNavigationMenu, isResolvingCanUserCreateNavigationMenu: isResolvingCanUserCreateNavigationMenu, onSelectNavigationMenu: menuId => { handleUpdateMenu(menuId); }, onSelectClassicMenu: async classicMenu => { const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name); if (navMenu) { handleUpdateMenu(navMenu.id, { focusNavigationBlock: true }); } }, onCreateEmpty: createUntitledEmptyNavigationMenu })); } return (0, _element.createElement)(_coreData.EntityProvider, { kind: "postType", type: "wp_navigation", id: ref }, (0, _element.createElement)(_blockEditor.__experimentalRecursionProvider, { uniqueId: recursionId }, (0, _element.createElement)(_blockEditor.InspectorControls, null, (0, _element.createElement)(_components.PanelBody, { title: (0, _i18n.__)('Menu') }, (0, _element.createElement)(_navigationMenuSelector.default, { currentMenuId: ref, clientId: clientId, onSelectNavigationMenu: menuId => { handleUpdateMenu(menuId); }, onSelectClassicMenu: async classicMenu => { const navMenu = await convertClassicMenu(classicMenu.id, classicMenu.name); if (navMenu) { handleUpdateMenu(navMenu.id, { focusNavigationBlock: true }); } }, onCreateNew: createUntitledEmptyNavigationMenu, createNavigationMenuIsSuccess: createNavigationMenuIsSuccess, createNavigationMenuIsError: createNavigationMenuIsError /* translators: %s: The name of a menu. */ , 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 () { let deletedMenuTitle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; replaceInnerBlocks(clientId, []); showNavigationMenuStatusNotice((0, _i18n.sprintf)( // translators: %s: the name of a menu (e.g. Header navigation). (0, _i18n.__)('Navigation menu %s successfully deleted.'), deletedMenuTitle)); } })), isLoading && (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_components.Spinner, { className: "wp-block-navigation__loading-indicator" })), !isLoading && (0, _element.createElement)(TagName, blockProps, (0, _element.createElement)(_responsiveWrapper.default, { id: clientId, onToggle: setResponsiveMenuVisibility, label: (0, _i18n.__)('Menu'), hasIcon: hasIcon, icon: icon, isOpen: isResponsiveMenuOpen, isResponsive: isResponsive, isHiddenByDefault: 'always' === overlayMenu, overlayBackgroundColor: overlayBackgroundColor, overlayTextColor: overlayTextColor }, isEntityAvailable && (0, _element.createElement)(_innerBlocks.default, { clientId: clientId, hasCustomPlaceholder: !!CustomPlaceholder, orientation: orientation }))))); } var _default = (0, _blockEditor.withColors)({ textColor: 'color' }, { backgroundColor: 'color' }, { overlayBackgroundColor: 'color' }, { overlayTextColor: 'color' })(Navigation); exports.default = _default; //# sourceMappingURL=index.js.map