@wordpress/block-editor/build-module/autocompleters/block.js

Generic block editor.

// packages/block-editor/src/autocompleters/block.js
import { useSelect } from "@wordpress/data";
import {
  cloneBlock,
  createBlock,
  createBlocksFromInnerBlocksTemplate,
  store as blocksStore
} from "@wordpress/blocks";
import { useMemo } from "@wordpress/element";
import { searchBlockItems } from "../components/inserter/search-items";
import useBlockTypesState from "../components/inserter/hooks/use-block-types-state";
import BlockIcon from "../components/block-icon";
import { store as blockEditorStore } from "../store";
import { orderBy } from "../utils/sorting";
import { orderInserterBlockItems } from "../utils/order-inserter-block-items";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var noop = () => {
};
var SHOWN_BLOCK_TYPES = 9;
function createBlockCompleter() {
  return {
    name: "blocks",
    className: "block-editor-autocompleters__block",
    triggerPrefix: "/",
    useItems(filterValue) {
      const { rootClientId, selectedBlockId, prioritizedBlocks } = useSelect((select) => {
        const {
          getSelectedBlockClientId,
          getBlock,
          getBlockListSettings,
          getBlockRootClientId
        } = select(blockEditorStore);
        const { getActiveBlockVariation } = select(blocksStore);
        const selectedBlockClientId = getSelectedBlockClientId();
        const { name: blockName, attributes } = getBlock(
          selectedBlockClientId
        );
        const activeBlockVariation = getActiveBlockVariation(
          blockName,
          attributes
        );
        const _rootClientId = getBlockRootClientId(
          selectedBlockClientId
        );
        return {
          selectedBlockId: activeBlockVariation ? `${blockName}/${activeBlockVariation.name}` : blockName,
          rootClientId: _rootClientId,
          prioritizedBlocks: getBlockListSettings(_rootClientId)?.prioritizedInserterBlocks
        };
      }, []);
      const [items, categories, collections] = useBlockTypesState(
        rootClientId,
        noop,
        true
      );
      const filteredItems = useMemo(() => {
        const initialFilteredItems = !!filterValue.trim() ? searchBlockItems(
          items,
          categories,
          collections,
          filterValue
        ) : orderInserterBlockItems(
          orderBy(items, "frecency", "desc"),
          prioritizedBlocks
        );
        return initialFilteredItems.filter((item) => item.id !== selectedBlockId).slice(0, SHOWN_BLOCK_TYPES);
      }, [
        filterValue,
        selectedBlockId,
        items,
        categories,
        collections,
        prioritizedBlocks
      ]);
      const options = useMemo(
        () => filteredItems.map((blockItem) => {
          const { title, icon, isDisabled } = blockItem;
          return {
            key: `block-${blockItem.id}`,
            value: blockItem,
            label: /* @__PURE__ */ jsxs(Fragment, { children: [
              /* @__PURE__ */ jsx(
                BlockIcon,
                {
                  icon,
                  showColors: true
                },
                "icon"
              ),
              title
            ] }),
            isDisabled
          };
        }),
        [filteredItems]
      );
      return [options];
    },
    allowContext(before, after) {
      return !(/\S/.test(before) || /\S/.test(after));
    },
    getOptionCompletion(inserterItem) {
      const { name, initialAttributes, innerBlocks, syncStatus, blocks } = inserterItem;
      return {
        action: "replace",
        value: syncStatus === "unsynced" ? (blocks ?? []).map(
          (block) => cloneBlock(block)
        ) : createBlock(
          name,
          initialAttributes,
          createBlocksFromInnerBlocksTemplate(
            innerBlocks
          )
        )
      };
    }
  };
}
var block_default = createBlockCompleter();
export {
  block_default as default
};
//# sourceMappingURL=block.js.map