@wordpress/block-editor
Version:
212 lines (206 loc) • 7.73 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _components = require("@wordpress/components");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _icons = require("@wordpress/icons");
var _blockPreview = _interopRequireDefault(require("../block-preview"));
var _inserterDraggableBlocks = _interopRequireDefault(require("../inserter-draggable-blocks"));
var _blockPatternsPaging = _interopRequireDefault(require("../block-patterns-paging"));
var _utils = require("../inserter/block-patterns-tab/utils");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const WithToolTip = ({
showTooltip,
title,
children
}) => {
if (showTooltip) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Tooltip, {
text: title,
children: children
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: children
});
};
function BlockPattern({
id,
isDraggable,
pattern,
onClick,
onHover,
showTitlesAsTooltip,
category,
isSelected
}) {
const [isDragging, setIsDragging] = (0, _element.useState)(false);
const {
blocks,
viewportWidth
} = pattern;
const instanceId = (0, _compose.useInstanceId)(BlockPattern);
const descriptionId = `block-editor-block-patterns-list__item-description-${instanceId}`;
const isUserPattern = pattern.type === _utils.INSERTER_PATTERN_TYPES.user;
// When we have a selected category and the pattern is draggable, we need to update the
// pattern's categories in metadata to only contain the selected category, and pass this to
// InserterDraggableBlocks component. We do that because we use this information for pattern
// shuffling and it makes more sense to show only the ones from the initially selected category during insertion.
const patternBlocks = (0, _element.useMemo)(() => {
if (!category || !isDraggable) {
return blocks;
}
return (blocks !== null && blocks !== void 0 ? blocks : []).map(block => {
const clonedBlock = (0, _blocks.cloneBlock)(block);
if (clonedBlock.attributes.metadata?.categories?.includes(category)) {
clonedBlock.attributes.metadata.categories = [category];
}
return clonedBlock;
});
}, [blocks, isDraggable, category]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_inserterDraggableBlocks.default, {
isEnabled: isDraggable,
blocks: patternBlocks,
pattern: pattern,
children: ({
draggable,
onDragStart,
onDragEnd
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-patterns-list__list-item",
draggable: draggable,
onDragStart: event => {
setIsDragging(true);
if (onDragStart) {
onHover?.(null);
onDragStart(event);
}
},
onDragEnd: event => {
setIsDragging(false);
if (onDragEnd) {
onDragEnd(event);
}
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(WithToolTip, {
showTooltip: showTitlesAsTooltip && !isUserPattern,
title: pattern.title,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Composite.Item, {
render: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
role: "option",
"aria-label": pattern.title,
"aria-describedby": pattern.description ? descriptionId : undefined,
className: (0, _clsx.default)('block-editor-block-patterns-list__item', {
'block-editor-block-patterns-list__list-item-synced': pattern.type === _utils.INSERTER_PATTERN_TYPES.user && !pattern.syncStatus,
'is-selected': isSelected
})
}),
id: id,
onClick: () => {
onClick(pattern, blocks);
onHover?.(null);
},
onMouseEnter: () => {
if (isDragging) {
return;
}
onHover?.(pattern);
},
onMouseLeave: () => onHover?.(null),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreview.default.Async, {
placeholder: /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockPatternPlaceholder, {}),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreview.default, {
blocks: blocks,
viewportWidth: viewportWidth
})
}), (!showTitlesAsTooltip || isUserPattern) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
className: "block-editor-patterns__pattern-details",
spacing: 2,
children: [isUserPattern && !pattern.syncStatus && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-patterns__pattern-icon-wrapper",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
className: "block-editor-patterns__pattern-icon",
icon: _icons.symbol
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-patterns-list__item-title",
children: pattern.title
})]
}), !!pattern.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
id: descriptionId,
children: pattern.description
})]
})
})
})
});
}
function BlockPatternPlaceholder() {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-patterns-list__item is-placeholder"
});
}
function BlockPatternsList({
isDraggable,
blockPatterns,
onHover,
onClickPattern,
orientation,
label = (0, _i18n.__)('Block patterns'),
category,
showTitlesAsTooltip,
pagingProps
}, ref) {
const [activeCompositeId, setActiveCompositeId] = (0, _element.useState)(undefined);
const [activePattern, setActivePattern] = (0, _element.useState)(null); // State to track active pattern
(0, _element.useEffect)(() => {
// Reset the active composite item whenever the available patterns change,
// to make sure that Composite widget can receive focus correctly when its
// composite items change. The first composite item will receive focus.
const firstCompositeItemId = blockPatterns[0]?.name;
setActiveCompositeId(firstCompositeItemId);
}, [blockPatterns]);
const handleClickPattern = (pattern, blocks) => {
setActivePattern(pattern.name);
onClickPattern(pattern, blocks);
};
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Composite, {
orientation: orientation,
activeId: activeCompositeId,
setActiveId: setActiveCompositeId,
role: "listbox",
className: "block-editor-block-patterns-list",
"aria-label": label,
ref: ref,
children: [blockPatterns.map(pattern => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockPattern, {
id: pattern.name,
pattern: pattern,
onClick: handleClickPattern,
onHover: onHover,
isDraggable: isDraggable,
showTitlesAsTooltip: showTitlesAsTooltip,
category: category,
isSelected: !!activePattern && activePattern === pattern.name
}, pattern.name)), pagingProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPatternsPaging.default, {
...pagingProps
})]
});
}
var _default = exports.default = (0, _element.forwardRef)(BlockPatternsList);
//# sourceMappingURL=index.js.map