@wordpress/block-library/build-module/query/edit/pattern-selection.js

Block library for the WordPress editor.

// packages/block-library/src/query/edit/pattern-selection.js
import { useState, useMemo } from "@wordpress/element";
import { useDispatch } from "@wordpress/data";
import { Modal, SearchControl } from "@wordpress/components";
import {
  BlockContextProvider,
  store as blockEditorStore,
  __experimentalBlockPatternsList as BlockPatternsList
} from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import {
  useBlockNameForPatterns,
  getTransformedBlocksFromPattern,
  usePatterns
} from "../utils";
import { searchPatterns } from "../../utils/search-patterns";
import { jsx, jsxs } from "react/jsx-runtime";
function PatternSelectionModal({
  clientId,
  attributes,
  setIsPatternSelectionModalOpen
}) {
  return /* @__PURE__ */ jsx(
    Modal,
    {
      overlayClassName: "block-library-query-pattern__selection-modal",
      title: __("Choose a pattern"),
      onRequestClose: () => setIsPatternSelectionModalOpen(false),
      isFullScreen: true,
      children: /* @__PURE__ */ jsx(PatternSelection, { clientId, attributes })
    }
  );
}
function useBlockPatterns(clientId, attributes) {
  const blockNameForPatterns = useBlockNameForPatterns(
    clientId,
    attributes
  );
  const allPatterns = usePatterns(clientId, blockNameForPatterns);
  const rootBlockPatterns = useMemo(() => {
    return allPatterns.filter((pattern) => {
      return pattern.blocks?.[0]?.name === blockNameForPatterns;
    });
  }, [allPatterns, blockNameForPatterns]);
  return rootBlockPatterns;
}
function PatternSelection({
  clientId,
  attributes,
  showTitlesAsTooltip = false,
  showSearch = true
}) {
  const [searchValue, setSearchValue] = useState("");
  const { replaceBlock, selectBlock } = useDispatch(blockEditorStore);
  const blockPatterns = useBlockPatterns(clientId, attributes);
  const blockPreviewContext = useMemo(
    () => ({
      previewPostType: attributes.query.postType
    }),
    [attributes.query.postType]
  );
  const filteredBlockPatterns = useMemo(() => {
    return searchPatterns(blockPatterns, searchValue);
  }, [blockPatterns, searchValue]);
  const onBlockPatternSelect = (pattern, blocks) => {
    const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
      blocks,
      attributes
    );
    replaceBlock(clientId, newBlocks);
    if (queryClientIds[0]) {
      selectBlock(queryClientIds[0]);
    }
  };
  return /* @__PURE__ */ jsxs("div", { className: "block-library-query-pattern__selection-content", children: [
    showSearch && /* @__PURE__ */ jsx("div", { className: "block-library-query-pattern__selection-search", children: /* @__PURE__ */ jsx(
      SearchControl,
      {
        __nextHasNoMarginBottom: true,
        onChange: setSearchValue,
        value: searchValue,
        label: __("Search"),
        placeholder: __("Search")
      }
    ) }),
    /* @__PURE__ */ jsx(BlockContextProvider, { value: blockPreviewContext, children: /* @__PURE__ */ jsx(
      BlockPatternsList,
      {
        blockPatterns: filteredBlockPatterns,
        onClickPattern: onBlockPatternSelect,
        showTitlesAsTooltip
      }
    ) })
  ] });
}
export {
  PatternSelectionModal,
  PatternSelection as default,
  useBlockPatterns
};
//# sourceMappingURL=pattern-selection.js.map