@wordpress/block-library/build/template-part/edit/selection-modal.js

Block library for the WordPress editor.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = TemplatePartSelectionModal;
var _element = require("@wordpress/element");
var _i18n = require("@wordpress/i18n");
var _notices = require("@wordpress/notices");
var _data = require("@wordpress/data");
var _blockEditor = require("@wordpress/block-editor");
var _components = require("@wordpress/components");
var _hooks = require("./utils/hooks");
var _mapTemplatePartToBlockPattern = require("./utils/map-template-part-to-block-pattern");
var _searchPatterns = require("../../utils/search-patterns");
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function TemplatePartSelectionModal({
  setAttributes,
  onClose,
  templatePartId = null,
  area,
  clientId
}) {
  const [searchValue, setSearchValue] = (0, _element.useState)('');
  const {
    templateParts
  } = (0, _hooks.useAlternativeTemplateParts)(area, templatePartId);

  // We can map template parts to block patters to reuse the BlockPatternsList UI
  const filteredTemplateParts = (0, _element.useMemo)(() => {
    const partsAsPatterns = templateParts.map(templatePart => (0, _mapTemplatePartToBlockPattern.mapTemplatePartToBlockPattern)(templatePart));
    return (0, _searchPatterns.searchPatterns)(partsAsPatterns, searchValue);
  }, [templateParts, searchValue]);
  const blockPatterns = (0, _hooks.useAlternativeBlockPatterns)(area, clientId);
  const filteredBlockPatterns = (0, _element.useMemo)(() => {
    return (0, _searchPatterns.searchPatterns)(blockPatterns, searchValue);
  }, [blockPatterns, searchValue]);
  const {
    createSuccessNotice
  } = (0, _data.useDispatch)(_notices.store);
  const onTemplatePartSelect = templatePart => {
    setAttributes({
      slug: templatePart.slug,
      theme: templatePart.theme,
      area: undefined
    });
    createSuccessNotice((0, _i18n.sprintf)(/* translators: %s: template part title. */
    (0, _i18n.__)('Template Part "%s" inserted.'), templatePart.title?.rendered || templatePart.slug), {
      type: 'snackbar'
    });
    onClose();
  };
  const hasTemplateParts = !!filteredTemplateParts.length;
  const hasBlockPatterns = !!filteredBlockPatterns.length;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    className: "block-library-template-part__selection-content",
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "block-library-template-part__selection-search",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.SearchControl, {
        __nextHasNoMarginBottom: true,
        onChange: setSearchValue,
        value: searchValue,
        label: (0, _i18n.__)('Search'),
        placeholder: (0, _i18n.__)('Search')
      })
    }), hasTemplateParts && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
        children: (0, _i18n.__)('Existing template parts')
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.__experimentalBlockPatternsList, {
        blockPatterns: filteredTemplateParts,
        onClickPattern: pattern => {
          onTemplatePartSelect(pattern.templatePart);
        }
      })]
    }), !hasTemplateParts && !hasBlockPatterns && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
      alignment: "center",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
        children: (0, _i18n.__)('No results found.')
      })
    })]
  });
}
//# sourceMappingURL=selection-modal.js.map