@wordpress/block-editor
Version:
214 lines (213 loc) • 7.34 kB
JavaScript
// packages/block-editor/src/components/block-patterns-list/index.js
import clsx from "clsx";
import { cloneBlock } from "@wordpress/blocks";
import { useEffect, useState, forwardRef, useMemo } from "@wordpress/element";
import {
Composite,
VisuallyHidden,
Tooltip,
__experimentalHStack as HStack
} from "@wordpress/components";
import { useInstanceId } from "@wordpress/compose";
import { __ } from "@wordpress/i18n";
import { Icon, symbol } from "@wordpress/icons";
import BlockPreview from "../block-preview";
import InserterDraggableBlocks from "../inserter-draggable-blocks";
import BlockPatternsPaging from "../block-patterns-paging";
import { INSERTER_PATTERN_TYPES } from "../inserter/block-patterns-tab/utils";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var WithToolTip = ({ showTooltip, title, children }) => {
if (showTooltip) {
return /* @__PURE__ */ jsx(Tooltip, { text: title, children });
}
return /* @__PURE__ */ jsx(Fragment, { children });
};
function BlockPattern({
id,
isDraggable,
pattern,
onClick,
onHover,
showTitlesAsTooltip,
category,
isSelected
}) {
const [isDragging, setIsDragging] = useState(false);
const { blocks, viewportWidth } = pattern;
const instanceId = useInstanceId(BlockPattern);
const descriptionId = `block-editor-block-patterns-list__item-description-${instanceId}`;
const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user;
const patternBlocks = useMemo(() => {
if (!category || !isDraggable) {
return blocks;
}
return (blocks ?? []).map((block) => {
const clonedBlock = cloneBlock(block);
if (clonedBlock.attributes.metadata?.categories?.includes(
category
)) {
clonedBlock.attributes.metadata.categories = [category];
}
return clonedBlock;
});
}, [blocks, isDraggable, category]);
return /* @__PURE__ */ jsx(
InserterDraggableBlocks,
{
isEnabled: isDraggable,
blocks: patternBlocks,
pattern,
children: ({ draggable, onDragStart, onDragEnd }) => /* @__PURE__ */ jsx(
"div",
{
className: "block-editor-block-patterns-list__list-item",
draggable,
onDragStart: (event) => {
setIsDragging(true);
if (onDragStart) {
onHover?.(null);
onDragStart(event);
}
},
onDragEnd: (event) => {
setIsDragging(false);
if (onDragEnd) {
onDragEnd(event);
}
},
children: /* @__PURE__ */ jsx(
WithToolTip,
{
showTooltip: showTitlesAsTooltip && !isUserPattern,
title: pattern.title,
children: /* @__PURE__ */ jsxs(
Composite.Item,
{
render: /* @__PURE__ */ jsx(
"div",
{
role: "option",
"aria-label": pattern.title,
"aria-describedby": pattern.description ? descriptionId : void 0,
className: clsx(
"block-editor-block-patterns-list__item",
{
"block-editor-block-patterns-list__list-item-synced": pattern.type === INSERTER_PATTERN_TYPES.user && !pattern.syncStatus,
"is-selected": isSelected
}
)
}
),
id,
onClick: () => {
onClick(pattern, blocks);
onHover?.(null);
},
onMouseEnter: () => {
if (isDragging) {
return;
}
onHover?.(pattern);
},
onMouseLeave: () => onHover?.(null),
children: [
/* @__PURE__ */ jsx(
BlockPreview.Async,
{
placeholder: /* @__PURE__ */ jsx(BlockPatternPlaceholder, {}),
children: /* @__PURE__ */ jsx(
BlockPreview,
{
blocks,
viewportWidth
}
)
}
),
(!showTitlesAsTooltip || isUserPattern) && /* @__PURE__ */ jsxs(
HStack,
{
className: "block-editor-patterns__pattern-details",
spacing: 2,
children: [
isUserPattern && !pattern.syncStatus && /* @__PURE__ */ jsx("div", { className: "block-editor-patterns__pattern-icon-wrapper", children: /* @__PURE__ */ jsx(
Icon,
{
className: "block-editor-patterns__pattern-icon",
icon: symbol
}
) }),
/* @__PURE__ */ jsx("div", { className: "block-editor-block-patterns-list__item-title", children: pattern.title })
]
}
),
!!pattern.description && /* @__PURE__ */ jsx(VisuallyHidden, { id: descriptionId, children: pattern.description })
]
}
)
}
)
}
)
}
);
}
function BlockPatternPlaceholder() {
return /* @__PURE__ */ jsx("div", { className: "block-editor-block-patterns-list__item is-placeholder" });
}
function BlockPatternsList({
isDraggable,
blockPatterns,
onHover,
onClickPattern,
orientation,
label = __("Block patterns"),
category,
showTitlesAsTooltip,
pagingProps
}, ref) {
const [activeCompositeId, setActiveCompositeId] = useState(void 0);
const [activePattern, setActivePattern] = useState(null);
useEffect(() => {
const firstCompositeItemId = blockPatterns[0]?.name;
setActiveCompositeId(firstCompositeItemId);
}, [blockPatterns]);
const handleClickPattern = (pattern, blocks) => {
setActivePattern(pattern.name);
onClickPattern(pattern, blocks);
};
return /* @__PURE__ */ jsxs(
Composite,
{
orientation,
activeId: activeCompositeId,
setActiveId: setActiveCompositeId,
role: "listbox",
className: "block-editor-block-patterns-list",
"aria-label": label,
ref,
children: [
blockPatterns.map((pattern) => /* @__PURE__ */ jsx(
BlockPattern,
{
id: pattern.name,
pattern,
onClick: handleClickPattern,
onHover,
isDraggable,
showTitlesAsTooltip,
category,
isSelected: !!activePattern && activePattern === pattern.name
},
pattern.name
)),
pagingProps && /* @__PURE__ */ jsx(BlockPatternsPaging, { ...pagingProps })
]
}
);
}
var block_patterns_list_default = forwardRef(BlockPatternsList);
export {
block_patterns_list_default as default
};
//# sourceMappingURL=index.js.map