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

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.PatternSelectionModal = PatternSelectionModal;
exports.default = PatternSelection;
exports.useBlockPatterns = useBlockPatterns;
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _components = require("@wordpress/components");
var _blockEditor = require("@wordpress/block-editor");
var _i18n = require("@wordpress/i18n");
var _utils = require("../utils");
var _searchPatterns = require("../../utils/search-patterns");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function PatternSelectionModal({
  clientId,
  attributes,
  setIsPatternSelectionModalOpen
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
    overlayClassName: "block-library-query-pattern__selection-modal",
    title: (0, _i18n.__)('Choose a pattern'),
    onRequestClose: () => setIsPatternSelectionModalOpen(false),
    isFullScreen: true,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PatternSelection, {
      clientId: clientId,
      attributes: attributes
    })
  });
}
function useBlockPatterns(clientId, attributes) {
  const blockNameForPatterns = (0, _utils.useBlockNameForPatterns)(clientId, attributes);
  return (0, _utils.usePatterns)(clientId, blockNameForPatterns);
}
function PatternSelection({
  clientId,
  attributes,
  showTitlesAsTooltip = false,
  showSearch = true
}) {
  const [searchValue, setSearchValue] = (0, _element.useState)('');
  const {
    replaceBlock,
    selectBlock
  } = (0, _data.useDispatch)(_blockEditor.store);
  const blockPatterns = useBlockPatterns(clientId, attributes);
  /*
   * When we preview Query Loop blocks we should prefer the current
   * block's postType, which is passed through block context.
   */
  const blockPreviewContext = (0, _element.useMemo)(() => ({
    previewPostType: attributes.query.postType
  }), [attributes.query.postType]);
  const filteredBlockPatterns = (0, _element.useMemo)(() => {
    return (0, _searchPatterns.searchPatterns)(blockPatterns, searchValue);
  }, [blockPatterns, searchValue]);
  const onBlockPatternSelect = (pattern, blocks) => {
    const {
      newBlocks,
      queryClientIds
    } = (0, _utils.getTransformedBlocksFromPattern)(blocks, attributes);
    replaceBlock(clientId, newBlocks);
    if (queryClientIds[0]) {
      selectBlock(queryClientIds[0]);
    }
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "block-library-query-pattern__selection-content",
    children: [showSearch && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-library-query-pattern__selection-search",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchControl, {
        __nextHasNoMarginBottom: true,
        onChange: setSearchValue,
        value: searchValue,
        label: (0, _i18n.__)('Search'),
        placeholder: (0, _i18n.__)('Search')
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.BlockContextProvider, {
      value: blockPreviewContext,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalBlockPatternsList, {
        blockPatterns: filteredBlockPatterns,
        onClickPattern: onBlockPatternSelect,
        showTitlesAsTooltip: showTitlesAsTooltip
      })
    })]
  });
}
//# sourceMappingURL=pattern-selection.js.map