@wordpress/block-editor
Version:
115 lines (112 loc) • 4.16 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _icons = require("@wordpress/icons");
var _components = require("@wordpress/components");
var _blockPreview = _interopRequireDefault(require("../block-preview"));
var _useTransformedPatterns = _interopRequireDefault(require("./use-transformed-patterns"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
function PatternTransformationsMenu({
blocks,
patterns: statePatterns,
onSelect
}) {
const [showTransforms, setShowTransforms] = (0, _element.useState)(false);
const patterns = (0, _useTransformedPatterns.default)(statePatterns, blocks);
if (!patterns.length) {
return null;
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuGroup, {
className: "block-editor-block-switcher__pattern__transforms__menugroup",
children: [showTransforms && /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewPatternsPopover, {
patterns: patterns,
onSelect: onSelect
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuItem, {
onClick: event => {
event.preventDefault();
setShowTransforms(!showTransforms);
},
icon: _icons.chevronRight,
children: (0, _i18n.__)('Patterns')
})]
});
}
function PreviewPatternsPopover({
patterns,
onSelect
}) {
const isMobile = (0, _compose.useViewportMatch)('medium', '<');
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-switcher__popover-preview-container",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Popover, {
className: "block-editor-block-switcher__popover-preview",
placement: isMobile ? 'bottom' : 'right-start',
offset: 16,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-switcher__preview is-pattern-list-preview",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockPatternsList, {
patterns: patterns,
onSelect: onSelect
})
})
})
});
}
function BlockPatternsList({
patterns,
onSelect
}) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite, {
role: "listbox",
className: "block-editor-block-switcher__preview-patterns-container",
"aria-label": (0, _i18n.__)('Patterns list'),
children: patterns.map(pattern => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockPattern, {
pattern: pattern,
onSelect: onSelect
}, pattern.name))
});
}
function BlockPattern({
pattern,
onSelect
}) {
// TODO check pattern/preview width...
const baseClassName = 'block-editor-block-switcher__preview-patterns-container';
const descriptionId = (0, _compose.useInstanceId)(BlockPattern, `${baseClassName}-list__item-description`);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: `${baseClassName}-list__list-item`,
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: `${baseClassName}-list__item`
}),
onClick: () => onSelect(pattern.transformedBlocks),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreview.default, {
blocks: pattern.transformedBlocks,
viewportWidth: pattern.viewportWidth || 500
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: `${baseClassName}-list__item-title`,
children: pattern.title
})]
}), !!pattern.description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
id: descriptionId,
children: pattern.description
})]
});
}
var _default = exports.default = PatternTransformationsMenu;
//# sourceMappingURL=pattern-transformations-menu.js.map