@wordpress/block-editor
Version:
119 lines (118 loc) • 3.58 kB
JavaScript
// packages/block-editor/src/components/inserter/quick-inserter.js
import clsx from "clsx";
import { useState, useEffect } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import { Button, SearchControl } from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import InserterSearchResults from "./search-results";
import useInsertionPoint from "./hooks/use-insertion-point";
import useBlockTypesState from "./hooks/use-block-types-state";
import { store as blockEditorStore } from "../../store";
import { jsx, jsxs } from "react/jsx-runtime";
var SEARCH_THRESHOLD = 6;
var SHOWN_BLOCK_TYPES = 6;
var SHOWN_BLOCK_PATTERNS = 2;
function QuickInserter({
onSelect,
rootClientId,
clientId,
isAppender,
selectBlockOnInsert,
hasSearch = true
}) {
const [filterValue, setFilterValue] = useState("");
const [destinationRootClientId, onInsertBlocks] = useInsertionPoint({
onSelect,
rootClientId,
clientId,
isAppender,
selectBlockOnInsert
});
const [blockTypes] = useBlockTypesState(
destinationRootClientId,
onInsertBlocks,
true
);
const { setInserterIsOpened, insertionIndex } = useSelect(
(select) => {
const { getSettings, getBlockIndex, getBlockCount } = select(blockEditorStore);
const settings = getSettings();
const index = getBlockIndex(clientId);
const blockCount = getBlockCount();
return {
setInserterIsOpened: settings.__experimentalSetIsInserterOpened,
insertionIndex: index === -1 ? blockCount : index
};
},
[clientId]
);
const showSearch = hasSearch && blockTypes.length > SEARCH_THRESHOLD;
useEffect(() => {
if (setInserterIsOpened) {
setInserterIsOpened(false);
}
}, [setInserterIsOpened]);
const onBrowseAll = () => {
setInserterIsOpened({
filterValue,
onSelect,
rootClientId,
insertionIndex
});
};
return /* @__PURE__ */ jsxs(
"div",
{
className: clsx("block-editor-inserter__quick-inserter", {
"has-search": showSearch,
"has-expand": setInserterIsOpened
}),
children: [
showSearch && /* @__PURE__ */ jsx(
SearchControl,
{
__nextHasNoMarginBottom: true,
className: "block-editor-inserter__search",
value: filterValue,
onChange: (value) => {
setFilterValue(value);
},
label: __("Search"),
placeholder: __("Search")
}
),
/* @__PURE__ */ jsx("div", { className: "block-editor-inserter__quick-inserter-results", children: /* @__PURE__ */ jsx(
InserterSearchResults,
{
filterValue,
onSelect,
rootClientId,
clientId,
isAppender,
maxBlockPatterns: !!filterValue ? SHOWN_BLOCK_PATTERNS : 0,
maxBlockTypes: SHOWN_BLOCK_TYPES,
isDraggable: false,
selectBlockOnInsert,
isQuick: true
}
) }),
setInserterIsOpened && /* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
className: "block-editor-inserter__quick-inserter-expand",
onClick: onBrowseAll,
"aria-label": __(
"Browse all. This will open the main inserter panel in the editor toolbar."
),
children: __("Browse all")
}
)
]
}
);
}
export {
QuickInserter as default
};
//# sourceMappingURL=quick-inserter.js.map