@wordpress/block-library
Version:
Block library for the WordPress editor.
689 lines (603 loc) • 30.3 kB
JavaScript
"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