@wordpress/block-editor
Version:
180 lines (177 loc) • 6.33 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _data = require("@wordpress/data");
var _blocks = require("@wordpress/blocks");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _store = require("../../store");
var _blockPreview = _interopRequireDefault(require("../block-preview"));
var _setupToolbar = _interopRequireDefault(require("./setup-toolbar"));
var _usePatternsSetup = _interopRequireDefault(require("./use-patterns-setup"));
var _constants = require("./constants");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const SetupContent = ({
viewMode,
activeSlide,
patterns,
onBlockPatternSelect,
showTitles
}) => {
const containerClass = 'block-editor-block-pattern-setup__container';
if (viewMode === _constants.VIEWMODES.carousel) {
const slideClass = new Map([[activeSlide, 'active-slide'], [activeSlide - 1, 'previous-slide'], [activeSlide + 1, 'next-slide']]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-pattern-setup__carousel",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: containerClass,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "carousel-container",
children: patterns.map((pattern, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockPatternSlide, {
active: index === activeSlide,
className: slideClass.get(index) || '',
pattern: pattern
}, pattern.name))
})
})
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: "block-editor-block-pattern-setup__grid",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Composite, {
role: "listbox",
className: containerClass,
"aria-label": (0, _i18n.__)('Patterns list'),
children: patterns.map(pattern => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockPattern, {
pattern: pattern,
onSelect: onBlockPatternSelect,
showTitles: 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, _compose.useInstanceId)(BlockPattern, `${baseClassName}__item-description`);
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: `${baseClassName}__list-item`,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Composite.Item, {
render: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"aria-describedby": description ? descriptionId : undefined,
"aria-label": pattern.title,
className: `${baseClassName}__item`
}),
id: `${baseClassName}__pattern__${pattern.name}`,
role: "option",
onClick: () => onSelect(blocks),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreview.default, {
blocks: blocks,
viewportWidth: viewportWidth
}), showTitles && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: `${baseClassName}__item-title`,
children: pattern.title
}), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
id: descriptionId,
children: description
})]
})
});
}
function BlockPatternSlide({
active,
className,
pattern,
minHeight
}) {
const {
blocks,
title,
description
} = pattern;
const descriptionId = (0, _compose.useInstanceId)(BlockPatternSlide, 'block-editor-block-pattern-setup-list__item-description');
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
"aria-hidden": !active,
role: "img",
className: `pattern-slide ${className}`,
"aria-label": title,
"aria-describedby": description ? descriptionId : undefined,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockPreview.default, {
blocks: blocks,
minHeight: minHeight
}), !!description && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.VisuallyHidden, {
id: descriptionId,
children: description
})]
});
}
const BlockPatternSetup = ({
clientId,
blockName,
filterPatternsFn,
onBlockPatternSelect,
initialViewMode = _constants.VIEWMODES.carousel,
showTitles = false
}) => {
const [viewMode, setViewMode] = (0, _element.useState)(initialViewMode);
const [activeSlide, setActiveSlide] = (0, _element.useState)(0);
const {
replaceBlock
} = (0, _data.useDispatch)(_store.store);
const patterns = (0, _usePatternsSetup.default)(clientId, blockName, filterPatternsFn);
if (!patterns?.length) {
return null;
}
const onBlockPatternSelectDefault = blocks => {
const clonedBlocks = blocks.map(block => (0, _blocks.cloneBlock)(block));
replaceBlock(clientId, clonedBlocks);
};
const onPatternSelectCallback = onBlockPatternSelect || onBlockPatternSelectDefault;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: `block-editor-block-pattern-setup view-mode-${viewMode}`,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SetupContent, {
viewMode: viewMode,
activeSlide: activeSlide,
patterns: patterns,
onBlockPatternSelect: onPatternSelectCallback,
showTitles: showTitles
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_setupToolbar.default, {
viewMode: viewMode,
setViewMode: setViewMode,
activeSlide: 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 _default = exports.default = BlockPatternSetup;
//# sourceMappingURL=index.js.map