@wordpress/block-editor
Version:
377 lines (375 loc) • 14 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-editor/src/components/inserter/menu.js
var menu_exports = {};
__export(menu_exports, {
PrivateInserterMenu: () => PrivateInserterMenu,
default: () => menu_default
});
module.exports = __toCommonJS(menu_exports);
var import_clsx = __toESM(require("clsx"));
var import_element = require("@wordpress/element");
var import_components = require("@wordpress/components");
var import_i18n = require("@wordpress/i18n");
var import_compose = require("@wordpress/compose");
var import_data = require("@wordpress/data");
var import_tips = __toESM(require("./tips.cjs"));
var import_preview_panel = __toESM(require("./preview-panel.cjs"));
var import_block_types_tab = __toESM(require("./block-types-tab.cjs"));
var import_block_patterns_tab = __toESM(require("./block-patterns-tab/index.cjs"));
var import_pattern_category_previews = require("./block-patterns-tab/pattern-category-previews.cjs");
var import_media_tab = require("./media-tab/index.cjs");
var import_search_results = __toESM(require("./search-results.cjs"));
var import_use_insertion_point = __toESM(require("./hooks/use-insertion-point.cjs"));
var import_store = require("../../store/index.cjs");
var import_tabbed_sidebar = __toESM(require("../tabbed-sidebar/index.cjs"));
var import_use_zoom_out = require("../../hooks/use-zoom-out.cjs");
var import_lock_unlock = require("../../lock-unlock.cjs");
var import_jsx_runtime = require("react/jsx-runtime");
var NOOP = () => {
};
function InserterMenu({
rootClientId,
clientId,
isAppender,
__experimentalInsertionIndex,
onSelect,
showInserterHelpPanel,
showMostUsedBlocks,
__experimentalFilterValue = "",
shouldFocusBlock = true,
onPatternCategorySelection,
onClose,
__experimentalInitialTab,
__experimentalInitialCategory
}, ref) {
const { isZoomOutMode, hasSectionRootClientId } = (0, import_data.useSelect)((select) => {
const { isZoomOut, getSectionRootClientId } = (0, import_lock_unlock.unlock)(
select(import_store.store)
);
return {
isZoomOutMode: isZoomOut(),
hasSectionRootClientId: !!getSectionRootClientId()
};
}, []);
const [filterValue, setFilterValue, delayedFilterValue] = (0, import_compose.useDebouncedInput)(__experimentalFilterValue);
const [hoveredItem, setHoveredItem] = (0, import_element.useState)(null);
const [selectedPatternCategory, setSelectedPatternCategory] = (0, import_element.useState)(
__experimentalInitialCategory
);
const [patternFilter, setPatternFilter] = (0, import_element.useState)("all");
const [selectedMediaCategory, setSelectedMediaCategory] = (0, import_element.useState)(null);
const isLargeViewport = (0, import_compose.useViewportMatch)("large");
const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
const maybeCloseInserter = isMobileViewport ? onClose : NOOP;
function getInitialTab() {
if (__experimentalInitialTab) {
return __experimentalInitialTab;
}
if (isZoomOutMode) {
return "patterns";
}
return "blocks";
}
const [selectedTab, setSelectedTab] = (0, import_element.useState)(getInitialTab());
const shouldUseZoomOut = hasSectionRootClientId && (selectedTab === "patterns" || selectedTab === "media");
(0, import_use_zoom_out.useZoomOut)(shouldUseZoomOut && isLargeViewport);
const [destinationRootClientId, onInsertBlocks, onToggleInsertionPoint] = (0, import_use_insertion_point.default)({
rootClientId,
clientId,
isAppender,
insertionIndex: __experimentalInsertionIndex,
shouldFocusBlock
});
const blockTypesTabRef = (0, import_element.useRef)();
const onInsert = (0, import_element.useCallback)(
(blocks, meta, shouldForceFocusBlock, _rootClientId) => {
onInsertBlocks(
blocks,
meta,
shouldForceFocusBlock,
_rootClientId
);
onSelect(blocks);
maybeCloseInserter();
window.requestAnimationFrame(() => {
if (!shouldFocusBlock && !blockTypesTabRef.current?.contains(
ref.current.ownerDocument.activeElement
)) {
blockTypesTabRef.current?.querySelector("button").focus();
}
});
},
[onInsertBlocks, maybeCloseInserter, onSelect, ref, shouldFocusBlock]
);
const onInsertPattern = (0, import_element.useCallback)(
(blocks, patternName, ...args) => {
onToggleInsertionPoint(false);
onInsertBlocks(blocks, { patternName }, ...args);
onSelect();
maybeCloseInserter();
},
[onInsertBlocks, maybeCloseInserter, onSelect, onToggleInsertionPoint]
);
const onHover = (0, import_element.useCallback)(
(item) => {
onToggleInsertionPoint(item);
setHoveredItem(item);
},
[onToggleInsertionPoint, setHoveredItem]
);
const onClickPatternCategory = (0, import_element.useCallback)(
(patternCategory, filter) => {
setSelectedPatternCategory(patternCategory);
setPatternFilter(filter);
onPatternCategorySelection?.();
},
[setSelectedPatternCategory, onPatternCategorySelection]
);
const showPatternPanel = selectedTab === "patterns" && !delayedFilterValue && !!selectedPatternCategory;
const showMediaPanel = selectedTab === "media" && !!selectedMediaCategory;
const inserterSearch = (0, import_element.useMemo)(() => {
if (selectedTab === "media") {
return null;
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.SearchControl,
{
className: "block-editor-inserter__search",
onChange: (value) => {
if (hoveredItem) {
setHoveredItem(null);
}
setFilterValue(value);
},
value: filterValue,
label: (0, import_i18n.__)("Search"),
placeholder: (0, import_i18n.__)("Search")
}
),
!!delayedFilterValue && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_search_results.default,
{
filterValue: delayedFilterValue,
onSelect,
onHover,
rootClientId,
clientId,
isAppender,
__experimentalInsertionIndex,
showBlockDirectory: true,
shouldFocusBlock,
prioritizePatterns: selectedTab === "patterns"
}
)
] });
}, [
selectedTab,
hoveredItem,
setHoveredItem,
setFilterValue,
filterValue,
delayedFilterValue,
onSelect,
onHover,
shouldFocusBlock,
clientId,
rootClientId,
__experimentalInsertionIndex,
isAppender
]);
const blocksTab = (0, import_element.useMemo)(() => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-inserter__block-list", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_types_tab.default,
{
ref: blockTypesTabRef,
rootClientId: destinationRootClientId,
onInsert,
onHover,
showMostUsedBlocks
}
) }),
showInserterHelpPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-editor-inserter__tips", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { as: "h2", children: (0, import_i18n.__)("A tip for using the block editor") }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tips.default, {})
] })
] });
}, [
destinationRootClientId,
onInsert,
onHover,
showMostUsedBlocks,
showInserterHelpPanel
]);
const patternsTab = (0, import_element.useMemo)(() => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_patterns_tab.default,
{
rootClientId: destinationRootClientId,
onInsert: onInsertPattern,
onSelectCategory: onClickPatternCategory,
selectedCategory: selectedPatternCategory,
children: showPatternPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_pattern_category_previews.PatternCategoryPreviews,
{
rootClientId: destinationRootClientId,
onInsert: onInsertPattern,
category: selectedPatternCategory,
patternFilter,
showTitlesAsTooltip: true
}
)
}
);
}, [
destinationRootClientId,
onInsertPattern,
onClickPatternCategory,
patternFilter,
selectedPatternCategory,
showPatternPanel
]);
const mediaTab = (0, import_element.useMemo)(() => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_media_tab.MediaTab,
{
rootClientId: destinationRootClientId,
selectedCategory: selectedMediaCategory,
onSelectCategory: setSelectedMediaCategory,
onInsert,
children: showMediaPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_media_tab.MediaCategoryPanel,
{
rootClientId: destinationRootClientId,
onInsert,
category: selectedMediaCategory
}
)
}
);
}, [
destinationRootClientId,
onInsert,
selectedMediaCategory,
setSelectedMediaCategory,
showMediaPanel
]);
const handleSetSelectedTab = (value) => {
if (value !== "patterns") {
setSelectedPatternCategory(null);
}
setSelectedTab(value);
};
const tabsRef = (0, import_element.useRef)();
(0, import_element.useLayoutEffect)(() => {
if (tabsRef.current) {
window.requestAnimationFrame(() => {
tabsRef.current.querySelector('[role="tab"][aria-selected="true"]')?.focus();
});
}
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: (0, import_clsx.default)("block-editor-inserter__menu", {
"show-panel": showPatternPanel || showMediaPanel,
"is-zoom-out": isZoomOutMode
}),
ref,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-inserter__main-area", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_tabbed_sidebar.default,
{
ref: tabsRef,
onSelect: handleSetSelectedTab,
onClose,
selectedTab,
closeButtonLabel: (0, import_i18n.__)("Close Block Inserter"),
tabs: [
{
name: "blocks",
title: (0, import_i18n.__)("Blocks"),
panel: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
inserterSearch,
selectedTab === "blocks" && !delayedFilterValue && blocksTab
] })
},
{
name: "patterns",
title: (0, import_i18n.__)("Patterns"),
panel: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
inserterSearch,
selectedTab === "patterns" && !delayedFilterValue && patternsTab
] })
},
{
name: "media",
title: (0, import_i18n.__)("Media"),
panel: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
inserterSearch,
mediaTab
] })
}
]
}
) }),
showInserterHelpPanel && hoveredItem && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Popover,
{
className: "block-editor-inserter__preview-container__popover",
placement: "right-start",
offset: 16,
focusOnMount: false,
animate: false,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_preview_panel.default, { item: hoveredItem })
}
)
]
}
);
}
var PrivateInserterMenu = (0, import_element.forwardRef)(InserterMenu);
function PublicInserterMenu(props, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
PrivateInserterMenu,
{
...props,
onPatternCategorySelection: NOOP,
ref
}
);
}
var menu_default = (0, import_element.forwardRef)(PublicInserterMenu);
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
PrivateInserterMenu
});
//# sourceMappingURL=menu.cjs.map