@wordpress/block-editor
Version:
199 lines (197 loc) • 7.55 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js
var pattern_category_previews_exports = {};
__export(pattern_category_previews_exports, {
PatternCategoryPreviews: () => PatternCategoryPreviews
});
module.exports = __toCommonJS(pattern_category_previews_exports);
var import_element = require("@wordpress/element");
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_use_patterns_state = __toESM(require("../hooks/use-patterns-state"));
var import_block_patterns_list = __toESM(require("../../block-patterns-list"));
var import_use_patterns_paging = __toESM(require("../hooks/use-patterns-paging"));
var import_patterns_filter = require("./patterns-filter");
var import_use_pattern_categories = require("./use-pattern-categories");
var import_utils = require("./utils");
var import_jsx_runtime = require("react/jsx-runtime");
var noop = () => {
};
function PatternCategoryPreviews({
rootClientId,
onInsert,
onHover = noop,
category,
showTitlesAsTooltip
}) {
const [allPatterns, , onClickPattern] = (0, import_use_patterns_state.default)(
onInsert,
rootClientId,
category?.name
);
const [patternSyncFilter, setPatternSyncFilter] = (0, import_element.useState)("all");
const [patternSourceFilter, setPatternSourceFilter] = (0, import_element.useState)("all");
const availableCategories = (0, import_use_pattern_categories.usePatternCategories)(
rootClientId,
patternSourceFilter
);
const scrollContainerRef = (0, import_element.useRef)();
const currentCategoryPatterns = (0, import_element.useMemo)(
() => allPatterns.filter((pattern) => {
if ((0, import_utils.isPatternFiltered)(
pattern,
patternSourceFilter,
patternSyncFilter
)) {
return false;
}
if (category.name === import_utils.allPatternsCategory.name) {
return true;
}
if (category.name === import_utils.myPatternsCategory.name && pattern.type === import_utils.INSERTER_PATTERN_TYPES.user) {
return true;
}
if (category.name === import_utils.starterPatternsCategory.name && pattern.blockTypes?.includes("core/post-content")) {
return true;
}
if (category.name === "uncategorized") {
if (!pattern.categories) {
return true;
}
return !pattern.categories.some(
(catName) => availableCategories.some((c) => c.name === catName)
);
}
return pattern.categories?.includes(category.name);
}),
[
allPatterns,
availableCategories,
category.name,
patternSourceFilter,
patternSyncFilter
]
);
const pagingProps = (0, import_use_patterns_paging.default)(
currentCategoryPatterns,
category,
scrollContainerRef
);
const { changePage } = pagingProps;
(0, import_element.useEffect)(() => () => onHover(null), []);
const onSetPatternSyncFilter = (0, import_element.useCallback)(
(value) => {
setPatternSyncFilter(value);
changePage(1);
},
[setPatternSyncFilter, changePage]
);
const onSetPatternSourceFilter = (0, import_element.useCallback)(
(value) => {
setPatternSourceFilter(value);
changePage(1);
},
[setPatternSourceFilter, changePage]
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__experimentalVStack,
{
spacing: 2,
className: "block-editor-inserter__patterns-category-panel-header",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexBlock, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalHeading,
{
className: "block-editor-inserter__patterns-category-panel-title",
size: 13,
level: 4,
as: "div",
children: category.label
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_patterns_filter.PatternsFilter,
{
patternSyncFilter,
patternSourceFilter,
setPatternSyncFilter: onSetPatternSyncFilter,
setPatternSourceFilter: onSetPatternSourceFilter,
scrollContainerRef,
category
}
)
] }),
!currentCategoryPatterns.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalText,
{
variant: "muted",
className: "block-editor-inserter__patterns-category-no-results",
children: (0, import_i18n.__)("No results found")
}
)
]
}
),
currentCategoryPatterns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__experimentalText,
{
size: "12",
as: "p",
className: "block-editor-inserter__help-text",
children: (0, import_i18n.__)("Drag and drop patterns into the canvas.")
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_patterns_list.default,
{
ref: scrollContainerRef,
blockPatterns: pagingProps.categoryPatterns,
onClickPattern,
onHover,
label: category.label,
orientation: "vertical",
category: category.name,
isDraggable: true,
showTitlesAsTooltip,
patternFilter: patternSourceFilter,
pagingProps
}
)
] })
] });
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
PatternCategoryPreviews
});
//# sourceMappingURL=pattern-category-previews.js.map