@wordpress/block-library
Version:
Block library for the WordPress editor.
852 lines (850 loc) • 34.4 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-library/src/navigation/edit/index.js
var edit_exports = {};
__export(edit_exports, {
default: () => edit_default
});
module.exports = __toCommonJS(edit_exports);
var import_clsx = __toESM(require("clsx"));
var import_element = require("@wordpress/element");
var import_block_editor = require("@wordpress/block-editor");
var import_core_data = require("@wordpress/core-data");
var import_data = require("@wordpress/data");
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_a11y = require("@wordpress/a11y");
var import_icons = require("@wordpress/icons");
var import_blocks = require("@wordpress/blocks");
var import_compose = require("@wordpress/compose");
var import_use_navigation_menu = __toESM(require("../use-navigation-menu"));
var import_use_navigation_entities = __toESM(require("../use-navigation-entities"));
var import_placeholder = __toESM(require("./placeholder"));
var import_responsive_wrapper = __toESM(require("./responsive-wrapper"));
var import_inner_blocks = __toESM(require("./inner-blocks"));
var import_navigation_menu_name_control = __toESM(require("./navigation-menu-name-control"));
var import_unsaved_inner_blocks = __toESM(require("./unsaved-inner-blocks"));
var import_navigation_menu_delete_control = __toESM(require("./navigation-menu-delete-control"));
var import_use_navigation_notice = __toESM(require("./use-navigation-notice"));
var import_overlay_menu_preview = __toESM(require("./overlay-menu-preview"));
var import_overlay_panel = __toESM(require("./overlay-panel"));
var import_overlay_visibility_control = __toESM(require("./overlay-visibility-control"));
var import_overlay_menu_preview_button = __toESM(require("./overlay-menu-preview-button"));
var import_use_convert_classic_menu_to_block_menu = __toESM(require("./use-convert-classic-menu-to-block-menu"));
var import_use_create_navigation_menu = __toESM(require("./use-create-navigation-menu"));
var import_use_inner_blocks = require("./use-inner-blocks");
var import_utils = require("./utils");
var import_manage_menus_button = __toESM(require("./manage-menus-button"));
var import_menu_inspector_controls = __toESM(require("./menu-inspector-controls"));
var import_deleted_navigation_warning = __toESM(require("./deleted-navigation-warning"));
var import_accessible_description = __toESM(require("./accessible-description"));
var import_accessible_menu_description = __toESM(require("./accessible-menu-description"));
var import_lock_unlock = require("../../lock-unlock");
var import_hooks = require("../../utils/hooks");
var import_constants = require("../constants");
var import_jsx_runtime = require("react/jsx-runtime");
function NavigationAddPageButton({ clientId }) {
const { insertBlock } = (0, import_data.useDispatch)(import_block_editor.store);
const { getBlockCount } = (0, import_data.useSelect)(import_block_editor.store);
const onAddPage = (0, import_element.useCallback)(() => {
const blockCount = getBlockCount(clientId);
const newBlock = (0, import_blocks.createBlock)(import_constants.DEFAULT_BLOCK.name, {
kind: import_constants.DEFAULT_BLOCK.attributes.kind,
type: import_constants.DEFAULT_BLOCK.attributes.type
});
insertBlock(newBlock, blockCount, clientId);
}, [clientId, insertBlock, getBlockCount]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.ToolbarButton,
{
name: "add-page",
icon: import_icons.page,
onClick: onAddPage,
children: (0, import_i18n.__)("Add page")
}
) }) });
}
function ColorTools({
textColor,
setTextColor,
backgroundColor,
setBackgroundColor,
overlayTextColor,
setOverlayTextColor,
overlayBackgroundColor,
setOverlayBackgroundColor,
clientId,
navRef
}) {
const [detectedBackgroundColor, setDetectedBackgroundColor] = (0, import_element.useState)();
const [detectedColor, setDetectedColor] = (0, import_element.useState)();
const [
detectedOverlayBackgroundColor,
setDetectedOverlayBackgroundColor
] = (0, import_element.useState)();
const [detectedOverlayColor, setDetectedOverlayColor] = (0, import_element.useState)();
const enableContrastChecking = import_element.Platform.OS === "web";
(0, import_element.useEffect)(() => {
if (!enableContrastChecking) {
return;
}
(0, import_utils.detectColors)(
navRef.current,
setDetectedColor,
setDetectedBackgroundColor
);
const subMenuElement = navRef.current?.querySelector(
'[data-type="core/navigation-submenu"] [data-type="core/navigation-link"]'
);
if (!subMenuElement) {
return;
}
if (overlayTextColor.color || overlayBackgroundColor.color) {
(0, import_utils.detectColors)(
subMenuElement,
setDetectedOverlayColor,
setDetectedOverlayBackgroundColor
);
}
}, [
enableContrastChecking,
overlayTextColor.color,
overlayBackgroundColor.color,
navRef
]);
const colorGradientSettings = (0, import_block_editor.__experimentalUseMultipleOriginColorsAndGradients)();
if (!colorGradientSettings.hasColorsOrGradients) {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_editor.__experimentalColorGradientSettingsDropdown,
{
__experimentalIsRenderedInSidebar: true,
settings: [
{
colorValue: textColor.color,
label: (0, import_i18n.__)("Text"),
onColorChange: setTextColor,
resetAllFilter: () => setTextColor(),
clearable: true,
enableAlpha: true
},
{
colorValue: backgroundColor.color,
label: (0, import_i18n.__)("Background"),
onColorChange: setBackgroundColor,
resetAllFilter: () => setBackgroundColor(),
clearable: true,
enableAlpha: true
},
{
colorValue: overlayTextColor.color,
label: (0, import_i18n.__)("Submenu & overlay text"),
onColorChange: setOverlayTextColor,
resetAllFilter: () => setOverlayTextColor(),
clearable: true,
enableAlpha: true
},
{
colorValue: overlayBackgroundColor.color,
label: (0, import_i18n.__)("Submenu & overlay background"),
onColorChange: setOverlayBackgroundColor,
resetAllFilter: () => setOverlayBackgroundColor(),
clearable: true,
enableAlpha: true
}
],
panelId: clientId,
...colorGradientSettings,
gradients: [],
disableCustomGradients: true
}
),
enableContrastChecking && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_editor.ContrastChecker,
{
backgroundColor: detectedBackgroundColor,
textColor: detectedColor
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_editor.ContrastChecker,
{
backgroundColor: detectedOverlayBackgroundColor,
textColor: detectedOverlayColor
}
)
] })
] });
}
function Navigation({
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,
customPlaceholder: CustomPlaceholder = null,
__unstableLayoutClassNames: layoutClassNames
}) {
const {
openSubmenusOnClick,
overlayMenu,
overlay,
showSubmenuIcon,
templateLock,
layout: {
justifyContent,
orientation = "horizontal",
flexWrap = "wrap"
} = {},
hasIcon,
icon = "handle"
} = attributes;
const ref = attributes.ref;
const setRef = (0, import_element.useCallback)(
(postId) => {
setAttributes({ ref: postId });
},
[setAttributes]
);
const recursionId = `navigationMenu/${ref}`;
const hasAlreadyRendered = (0, import_block_editor.useHasRecursion)(recursionId);
const blockEditingMode = (0, import_block_editor.useBlockEditingMode)();
const { onNavigateToEntityRecord } = (0, import_data.useSelect)((select) => {
const { getSettings } = select(import_block_editor.store);
const settings = getSettings();
return {
onNavigateToEntityRecord: settings?.onNavigateToEntityRecord
};
}, []);
const isOverlayExperimentEnabled = typeof window !== "undefined" && window.__experimentalNavigationOverlays === true;
const { menus: classicMenus } = (0, import_use_navigation_entities.default)();
const [showNavigationMenuStatusNotice, hideNavigationMenuStatusNotice] = (0, import_use_navigation_notice.default)({
name: "block-library/core/navigation/status"
});
const [showClassicMenuConversionNotice, hideClassicMenuConversionNotice] = (0, import_use_navigation_notice.default)({
name: "block-library/core/navigation/classic-menu-conversion"
});
const [
showNavigationMenuPermissionsNotice,
hideNavigationMenuPermissionsNotice
] = (0, import_use_navigation_notice.default)({
name: "block-library/core/navigation/permissions/update"
});
const {
create: createNavigationMenu,
status: createNavigationMenuStatus,
error: createNavigationMenuError,
value: createNavigationMenuPost,
isPending: isCreatingNavigationMenu,
isSuccess: createNavigationMenuIsSuccess,
isError: createNavigationMenuIsError
} = (0, import_use_create_navigation_menu.default)(clientId);
const createUntitledEmptyNavigationMenu = async () => {
await createNavigationMenu("");
};
const {
hasUncontrolledInnerBlocks,
uncontrolledInnerBlocks,
isInnerBlockSelected,
innerBlocks
} = (0, import_use_inner_blocks.useInnerBlocks)(clientId);
const hasSubmenus = !!innerBlocks.find(
(block) => block.name === "core/navigation-submenu"
);
const {
replaceInnerBlocks,
selectBlock,
__unstableMarkNextChangeAsNotPersistent
} = (0, import_data.useDispatch)(import_block_editor.store);
const [isResponsiveMenuOpen, setResponsiveMenuVisibility] = (0, import_element.useState)(false);
const [overlayMenuPreview, setOverlayMenuPreview] = (0, import_element.useState)(false);
const {
hasResolvedNavigationMenus,
isNavigationMenuResolved,
isNavigationMenuMissing,
canUserUpdateNavigationMenu,
hasResolvedCanUserUpdateNavigationMenu,
canUserDeleteNavigationMenu,
hasResolvedCanUserDeleteNavigationMenu,
canUserCreateNavigationMenus,
isResolvingCanUserCreateNavigationMenus,
hasResolvedCanUserCreateNavigationMenus
} = (0, import_use_navigation_menu.default)(ref);
const navMenuResolvedButMissing = hasResolvedNavigationMenus && isNavigationMenuMissing;
const {
convert: convertClassicMenu,
status: classicMenuConversionStatus,
error: classicMenuConversionError
} = (0, import_use_convert_classic_menu_to_block_menu.default)(createNavigationMenu);
const isConvertingClassicMenu = classicMenuConversionStatus === import_use_convert_classic_menu_to_block_menu.CLASSIC_MENU_CONVERSION_PENDING;
const handleUpdateMenu = (0, import_element.useCallback)(
(menuId, options = { focusNavigationBlock: false }) => {
const { focusNavigationBlock } = options;
setRef(menuId);
if (focusNavigationBlock) {
selectBlock(clientId);
}
},
[selectBlock, clientId, setRef]
);
const isEntityAvailable = !isNavigationMenuMissing && isNavigationMenuResolved;
const hasUnsavedBlocks = hasUncontrolledInnerBlocks && !isEntityAvailable;
const { getNavigationFallbackId } = (0, import_lock_unlock.unlock)((0, import_data.useSelect)(import_core_data.store));
const navigationFallbackId = !(ref || hasUnsavedBlocks) ? getNavigationFallbackId() : null;
(0, import_element.useEffect)(() => {
if (ref || hasUnsavedBlocks || !navigationFallbackId) {
return;
}
__unstableMarkNextChangeAsNotPersistent();
setRef(navigationFallbackId);
}, [
ref,
setRef,
hasUnsavedBlocks,
navigationFallbackId,
__unstableMarkNextChangeAsNotPersistent
]);
const navRef = (0, import_element.useRef)();
const TagName = "nav";
const isPlaceholder = !ref && !isCreatingNavigationMenu && !isConvertingClassicMenu && hasResolvedNavigationMenus && classicMenus?.length === 0 && !hasUncontrolledInnerBlocks;
const isLoading = !hasResolvedNavigationMenus || isCreatingNavigationMenu || isConvertingClassicMenu || !!(ref && !isEntityAvailable && !isConvertingClassicMenu);
const textDecoration = attributes.style?.typography?.textDecoration;
const hasBlockOverlay = (0, import_data.useSelect)(
(select) => select(import_block_editor.store).__unstableHasActiveBlockOverlayActive(
clientId
),
[clientId]
);
const isResponsive = "never" !== overlayMenu;
const blockProps = (0, import_block_editor.useBlockProps)({
ref: navRef,
className: (0, import_clsx.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": isResponsive,
"has-text-color": !!textColor.color || !!textColor?.class,
[(0, import_block_editor.getColorClassName)("color", textColor?.slug)]: !!textColor?.slug,
"has-background": !!backgroundColor.color || backgroundColor.class,
[(0, import_block_editor.getColorClassName)(
"background-color",
backgroundColor?.slug
)]: !!backgroundColor?.slug,
[`has-text-decoration-${textDecoration}`]: textDecoration,
"block-editor-block-content-overlay": hasBlockOverlay
},
layoutClassNames
),
style: {
color: !textColor?.slug && textColor?.color,
backgroundColor: !backgroundColor?.slug && backgroundColor?.color
}
});
const onSelectClassicMenu = async (classicMenu) => {
return convertClassicMenu(classicMenu.id, classicMenu.name, "draft");
};
const onSelectNavigationMenu = (menuId) => {
handleUpdateMenu(menuId);
};
(0, import_element.useEffect)(() => {
hideNavigationMenuStatusNotice();
if (isCreatingNavigationMenu) {
(0, import_a11y.speak)((0, import_i18n.__)(`Creating Navigation Menu.`));
}
if (createNavigationMenuIsSuccess) {
handleUpdateMenu(createNavigationMenuPost?.id, {
focusNavigationBlock: true
});
showNavigationMenuStatusNotice(
(0, import_i18n.__)(`Navigation Menu successfully created.`)
);
}
if (createNavigationMenuIsError) {
showNavigationMenuStatusNotice(
(0, import_i18n.__)("Failed to create Navigation Menu.")
);
}
}, [
createNavigationMenuStatus,
createNavigationMenuError,
createNavigationMenuPost?.id,
createNavigationMenuIsError,
createNavigationMenuIsSuccess,
isCreatingNavigationMenu,
handleUpdateMenu,
hideNavigationMenuStatusNotice,
showNavigationMenuStatusNotice
]);
(0, import_element.useEffect)(() => {
hideClassicMenuConversionNotice();
if (classicMenuConversionStatus === import_use_convert_classic_menu_to_block_menu.CLASSIC_MENU_CONVERSION_PENDING) {
(0, import_a11y.speak)((0, import_i18n.__)("Classic menu importing."));
}
if (classicMenuConversionStatus === import_use_convert_classic_menu_to_block_menu.CLASSIC_MENU_CONVERSION_SUCCESS) {
showClassicMenuConversionNotice(
(0, import_i18n.__)("Classic menu imported successfully.")
);
handleUpdateMenu(createNavigationMenuPost?.id, {
focusNavigationBlock: true
});
}
if (classicMenuConversionStatus === import_use_convert_classic_menu_to_block_menu.CLASSIC_MENU_CONVERSION_ERROR) {
showClassicMenuConversionNotice(
(0, import_i18n.__)("Classic menu import failed.")
);
}
}, [
classicMenuConversionStatus,
classicMenuConversionError,
hideClassicMenuConversionNotice,
showClassicMenuConversionNotice,
createNavigationMenuPost?.id,
handleUpdateMenu
]);
(0, import_element.useEffect)(() => {
if (!isSelected && !isInnerBlockSelected) {
hideNavigationMenuPermissionsNotice();
}
if (isSelected || isInnerBlockSelected) {
if (ref && !navMenuResolvedButMissing && hasResolvedCanUserUpdateNavigationMenu && !canUserUpdateNavigationMenu) {
showNavigationMenuPermissionsNotice(
(0, import_i18n.__)(
"You do not have permission to edit this Menu. Any changes made will not be saved."
)
);
}
if (!ref && hasResolvedCanUserCreateNavigationMenus && !canUserCreateNavigationMenus) {
showNavigationMenuPermissionsNotice(
(0, import_i18n.__)(
"You do not have permission to create Navigation Menus."
)
);
}
}
}, [
isSelected,
isInnerBlockSelected,
canUserUpdateNavigationMenu,
hasResolvedCanUserUpdateNavigationMenu,
canUserCreateNavigationMenus,
hasResolvedCanUserCreateNavigationMenus,
ref,
hideNavigationMenuPermissionsNotice,
showNavigationMenuPermissionsNotice,
navMenuResolvedButMissing
]);
const hasManagePermissions = canUserCreateNavigationMenus || canUserUpdateNavigationMenu;
const overlayMenuPreviewClasses = (0, import_clsx.default)(
"wp-block-navigation__overlay-menu-preview",
{ open: overlayMenuPreview }
);
const submenuAccessibilityNotice = !showSubmenuIcon && !openSubmenusOnClick ? (0, import_i18n.__)(
'The current menu options offer reduced accessibility for users and are not recommended. Enabling either "Open on Click" or "Show arrow" offers enhanced accessibility by allowing keyboard users to browse submenus selectively.'
) : "";
const isFirstRender = (0, import_element.useRef)(true);
(0, import_element.useEffect)(() => {
if (!isFirstRender.current && submenuAccessibilityNotice) {
(0, import_a11y.speak)(submenuAccessibilityNotice);
}
isFirstRender.current = false;
}, [submenuAccessibilityNotice]);
const overlayMenuPreviewId = (0, import_compose.useInstanceId)(
import_overlay_menu_preview.default,
`overlay-menu-preview`
);
const dropdownMenuProps = (0, import_hooks.useToolsPanelDropdownMenuProps)();
const stylingInspectorControls = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: hasSubmenuIndicatorSetting && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalToolsPanel,
{
label: (0, import_i18n.__)("Display"),
resetAll: () => {
setAttributes({
showSubmenuIcon: true,
openSubmenusOnClick: false,
overlayMenu: "mobile",
hasIcon: true,
icon: "handle"
});
},
dropdownMenuProps,
children: [
!isOverlayExperimentEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
isResponsive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_overlay_menu_preview_button.default,
{
isResponsive,
overlayMenuPreview,
setOverlayMenuPreview,
hasIcon,
icon,
setAttributes,
overlayMenuPreviewClasses,
overlayMenuPreviewId,
containerStyle: {
gridColumn: "span 2"
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToolsPanelItem,
{
hasValue: () => overlayMenu !== "mobile",
label: (0, import_i18n.__)("Overlay Visibility"),
onDeselect: () => setAttributes({
overlayMenu: "mobile"
}),
isShownByDefault: true,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_overlay_visibility_control.default,
{
overlayMenu,
setAttributes
}
)
}
)
] }),
hasSubmenus && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "wp-block-navigation__submenu-header", children: (0, import_i18n.__)("Submenus") }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToolsPanelItem,
{
hasValue: () => openSubmenusOnClick,
label: (0, import_i18n.__)("Open on click"),
onDeselect: () => setAttributes({
openSubmenusOnClick: false,
showSubmenuIcon: true
}),
isShownByDefault: true,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.ToggleControl,
{
__nextHasNoMarginBottom: true,
checked: openSubmenusOnClick,
onChange: (value) => {
setAttributes({
openSubmenusOnClick: value,
...value && {
showSubmenuIcon: true
}
// Make sure arrows are shown when we toggle this on.
});
},
label: (0, import_i18n.__)("Open on click")
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalToolsPanelItem,
{
hasValue: () => !showSubmenuIcon,
label: (0, import_i18n.__)("Show arrow"),
onDeselect: () => setAttributes({
showSubmenuIcon: true
}),
isDisabled: attributes.openSubmenusOnClick,
isShownByDefault: true,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.ToggleControl,
{
__nextHasNoMarginBottom: true,
checked: showSubmenuIcon,
onChange: (value) => {
setAttributes({
showSubmenuIcon: value
});
},
disabled: attributes.openSubmenusOnClick,
label: (0, import_i18n.__)("Show arrow")
}
)
}
),
submenuAccessibilityNotice && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Notice,
{
spokenMessage: null,
status: "warning",
isDismissible: false,
className: "wp-block-navigation__submenu-accessibility-notice",
children: submenuAccessibilityNotice
}
)
] })
]
}
) }),
isOverlayExperimentEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_overlay_panel.default,
{
overlayMenu,
overlay,
setAttributes,
onNavigateToEntityRecord,
overlayMenuPreview,
setOverlayMenuPreview,
hasIcon,
icon,
overlayMenuPreviewClasses,
overlayMenuPreviewId,
isResponsive
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.InspectorControls, { group: "color", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ColorTools,
{
textColor,
setTextColor,
backgroundColor,
setBackgroundColor,
overlayTextColor,
setOverlayTextColor,
overlayBackgroundColor,
setOverlayBackgroundColor,
clientId,
navRef
}
) })
] });
const accessibleDescriptionId = `${clientId}-desc`;
const isHiddenByDefault = "always" === overlayMenu;
const isManageMenusButtonDisabled = !hasManagePermissions || !hasResolvedNavigationMenus;
if (hasUnsavedBlocks && !isCreatingNavigationMenu) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
TagName,
{
...blockProps,
"aria-describedby": !isPlaceholder ? accessibleDescriptionId : void 0,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_accessible_description.default, { id: accessibleDescriptionId, children: (0, import_i18n.__)("Unsaved Navigation Menu.") }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_menu_inspector_controls.default,
{
clientId,
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId: ref,
isNavigationMenuMissing,
isManageMenusButtonDisabled,
onCreateNew: createUntitledEmptyNavigationMenu,
onSelectClassicMenu,
onSelectNavigationMenu,
isLoading,
blockEditingMode
}
),
blockEditingMode === "default" && stylingInspectorControls,
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_responsive_wrapper.default,
{
id: clientId,
onToggle: setResponsiveMenuVisibility,
isOpen: isResponsiveMenuOpen,
hasIcon,
icon,
isResponsive,
isHiddenByDefault,
overlayBackgroundColor,
overlayTextColor,
overlay,
onNavigateToEntityRecord,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_unsaved_inner_blocks.default,
{
createNavigationMenu,
blocks: uncontrolledInnerBlocks,
hasSelection: isSelected || isInnerBlockSelected
}
)
}
)
]
}
);
}
if (ref && isNavigationMenuMissing) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TagName, { ...blockProps, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_menu_inspector_controls.default,
{
clientId,
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId: ref,
isNavigationMenuMissing,
isManageMenusButtonDisabled,
onCreateNew: createUntitledEmptyNavigationMenu,
onSelectClassicMenu,
onSelectNavigationMenu,
isLoading,
blockEditingMode
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_deleted_navigation_warning.default,
{
onCreateNew: createUntitledEmptyNavigationMenu
}
)
] });
}
if (isEntityAvailable && hasAlreadyRendered) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.Warning, { children: (0, import_i18n.__)("Block cannot be rendered inside itself.") }) });
}
const PlaceholderComponent = CustomPlaceholder ? CustomPlaceholder : import_placeholder.default;
if (isPlaceholder && CustomPlaceholder) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TagName, { ...blockProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
PlaceholderComponent,
{
isSelected,
currentMenuId: ref,
clientId,
canUserCreateNavigationMenus,
isResolvingCanUserCreateNavigationMenus,
onSelectNavigationMenu,
onSelectClassicMenu,
onCreateEmpty: createUntitledEmptyNavigationMenu
}
) });
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core_data.EntityProvider, { kind: "postType", type: "wp_navigation", id: ref, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.RecursionProvider, { uniqueId: recursionId, children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_menu_inspector_controls.default,
{
clientId,
createNavigationMenuIsSuccess,
createNavigationMenuIsError,
currentMenuId: ref,
isNavigationMenuMissing,
isManageMenusButtonDisabled,
onCreateNew: createUntitledEmptyNavigationMenu,
onSelectClassicMenu,
onSelectNavigationMenu,
isLoading,
blockEditingMode
}
),
blockEditingMode === "default" && stylingInspectorControls,
blockEditingMode === "contentOnly" && isEntityAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationAddPageButton, { clientId }),
blockEditingMode === "default" && isEntityAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_block_editor.InspectorControls, { group: "advanced", children: [
hasResolvedCanUserUpdateNavigationMenu && canUserUpdateNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_navigation_menu_name_control.default, {}),
hasResolvedCanUserDeleteNavigationMenu && canUserDeleteNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_navigation_menu_delete_control.default,
{
onDelete: () => {
replaceInnerBlocks(clientId, []);
showNavigationMenuStatusNotice(
(0, import_i18n.__)(
"Navigation Menu successfully deleted."
)
);
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_manage_menus_button.default,
{
disabled: isManageMenusButtonDisabled,
className: "wp-block-navigation-manage-menus-button"
}
)
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
TagName,
{
...blockProps,
"aria-describedby": !isPlaceholder && !isLoading ? accessibleDescriptionId : void 0,
children: [
isLoading && !isHiddenByDefault && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "wp-block-navigation__loading-indicator-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, { className: "wp-block-navigation__loading-indicator" }) }),
(!isLoading || isHiddenByDefault) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_accessible_menu_description.default,
{
id: accessibleDescriptionId
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_responsive_wrapper.default,
{
id: clientId,
onToggle: setResponsiveMenuVisibility,
hasIcon,
icon,
isOpen: isResponsiveMenuOpen,
isResponsive,
isHiddenByDefault,
overlayBackgroundColor,
overlayTextColor,
overlay,
onNavigateToEntityRecord,
children: isEntityAvailable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_inner_blocks.default,
{
clientId,
hasCustomPlaceholder: !!CustomPlaceholder,
templateLock,
orientation
}
)
}
)
] })
]
}
)
] }) });
}
var edit_default = (0, import_block_editor.withColors)(
{ textColor: "color" },
{ backgroundColor: "color" },
{ overlayBackgroundColor: "color" },
{ overlayTextColor: "color" }
)(Navigation);
//# sourceMappingURL=index.js.map