@wordpress/block-editor
Version:
211 lines (209 loc) • 8.27 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/block-pattern-setup/index.js
var block_pattern_setup_exports = {};
__export(block_pattern_setup_exports, {
default: () => block_pattern_setup_default
});
module.exports = __toCommonJS(block_pattern_setup_exports);
var import_data = require("@wordpress/data");
var import_blocks = require("@wordpress/blocks");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_compose = require("@wordpress/compose");
var import_i18n = require("@wordpress/i18n");
var import_store = require("../../store");
var import_block_preview = __toESM(require("../block-preview"));
var import_setup_toolbar = __toESM(require("./setup-toolbar"));
var import_use_patterns_setup = __toESM(require("./use-patterns-setup"));
var import_constants = require("./constants");
var import_jsx_runtime = require("react/jsx-runtime");
var SetupContent = ({
viewMode,
activeSlide,
patterns,
onBlockPatternSelect,
showTitles
}) => {
const containerClass = "block-editor-block-pattern-setup__container";
if (viewMode === import_constants.VIEWMODES.carousel) {
const slideClass = /* @__PURE__ */ new Map([
[activeSlide, "active-slide"],
[activeSlide - 1, "previous-slide"],
[activeSlide + 1, "next-slide"]
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-block-pattern-setup__carousel", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: containerClass, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "carousel-container", children: patterns.map((pattern, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
BlockPatternSlide,
{
active: index === activeSlide,
className: slideClass.get(index) || "",
pattern
},
pattern.name
)) }) }) });
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-block-pattern-setup__grid", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Composite,
{
role: "listbox",
className: containerClass,
"aria-label": (0, import_i18n.__)("Patterns list"),
children: patterns.map((pattern) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
BlockPattern,
{
pattern,
onSelect: onBlockPatternSelect,
showTitles
},
pattern.name
))
}
) });
};
function BlockPattern({ pattern, onSelect, showTitles }) {
const baseClassName = "block-editor-block-pattern-setup-list";
const { blocks, description, viewportWidth = 700 } = pattern;
const descriptionId = (0, import_compose.useInstanceId)(
BlockPattern,
`${baseClassName}__item-description`
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${baseClassName}__list-item`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.Composite.Item,
{
render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
"aria-describedby": description ? descriptionId : void 0,
"aria-label": pattern.title,
className: `${baseClassName}__item`
}
),
id: `${baseClassName}__pattern__${pattern.name}`,
role: "option",
onClick: () => onSelect(blocks),
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_block_preview.default,
{
blocks,
viewportWidth
}
),
showTitles && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `${baseClassName}__item-title`, children: pattern.title }),
!!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { id: descriptionId, children: description })
]
}
) });
}
function BlockPatternSlide({ active, className, pattern, minHeight }) {
const { blocks, title, description } = pattern;
const descriptionId = (0, import_compose.useInstanceId)(
BlockPatternSlide,
"block-editor-block-pattern-setup-list__item-description"
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
"aria-hidden": !active,
role: "img",
className: `pattern-slide ${className}`,
"aria-label": title,
"aria-describedby": description ? descriptionId : void 0,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_preview.default, { blocks, minHeight }),
!!description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.VisuallyHidden, { id: descriptionId, children: description })
]
}
);
}
var BlockPatternSetup = ({
clientId,
blockName,
filterPatternsFn,
onBlockPatternSelect,
initialViewMode = import_constants.VIEWMODES.carousel,
showTitles = false
}) => {
const [viewMode, setViewMode] = (0, import_element.useState)(initialViewMode);
const [activeSlide, setActiveSlide] = (0, import_element.useState)(0);
const { replaceBlock } = (0, import_data.useDispatch)(import_store.store);
const patterns = (0, import_use_patterns_setup.default)(clientId, blockName, filterPatternsFn);
if (!patterns?.length) {
return null;
}
const onBlockPatternSelectDefault = (blocks) => {
const clonedBlocks = blocks.map((block) => (0, import_blocks.cloneBlock)(block));
replaceBlock(clientId, clonedBlocks);
};
const onPatternSelectCallback = onBlockPatternSelect || onBlockPatternSelectDefault;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
className: `block-editor-block-pattern-setup view-mode-${viewMode}`,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
SetupContent,
{
viewMode,
activeSlide,
patterns,
onBlockPatternSelect: onPatternSelectCallback,
showTitles
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_setup_toolbar.default,
{
viewMode,
setViewMode,
activeSlide,
totalSlides: patterns.length,
handleNext: () => {
setActiveSlide(
(active) => Math.min(active + 1, patterns.length - 1)
);
},
handlePrevious: () => {
setActiveSlide(
(active) => Math.max(active - 1, 0)
);
},
onBlockPatternSelect: () => {
onPatternSelectCallback(
patterns[activeSlide].blocks
);
}
}
)
]
}
) });
};
var block_pattern_setup_default = BlockPatternSetup;
//# sourceMappingURL=index.js.map