@wordpress/block-editor
Version:
103 lines (100 loc) • 3.34 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
exports.useBlockVariationTransforms = useBlockVariationTransforms;
var _components = require("@wordpress/components");
var _blocks = require("@wordpress/blocks");
var _data = require("@wordpress/data");
var _element = require("@wordpress/element");
var _store = require("../../store");
var _blockIcon = _interopRequireDefault(require("../block-icon"));
var _previewBlockPopover = _interopRequireDefault(require("./preview-block-popover"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const EMPTY_OBJECT = {};
function useBlockVariationTransforms({
clientIds,
blocks
}) {
const {
activeBlockVariation,
blockVariationTransformations
} = (0, _data.useSelect)(select => {
const {
getBlockAttributes,
canRemoveBlocks
} = select(_store.store);
const {
getActiveBlockVariation,
getBlockVariations
} = select(_blocks.store);
const canRemove = canRemoveBlocks(clientIds);
// Only handle single selected blocks for now.
if (blocks.length !== 1 || !canRemove) {
return EMPTY_OBJECT;
}
const [firstBlock] = blocks;
return {
blockVariationTransformations: getBlockVariations(firstBlock.name, 'transform'),
activeBlockVariation: getActiveBlockVariation(firstBlock.name, getBlockAttributes(firstBlock.clientId))
};
}, [clientIds, blocks]);
const transformations = (0, _element.useMemo)(() => {
return blockVariationTransformations?.filter(({
name
}) => name !== activeBlockVariation?.name);
}, [blockVariationTransformations, activeBlockVariation]);
return transformations;
}
const BlockVariationTransformations = ({
transformations,
onSelect,
blocks
}) => {
const [hoveredTransformItemName, setHoveredTransformItemName] = (0, _element.useState)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [hoveredTransformItemName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewBlockPopover.default, {
blocks: (0, _blocks.cloneBlock)(blocks[0], transformations.find(({
name
}) => name === hoveredTransformItemName).attributes)
}), transformations?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockVariationTransformationItem, {
item: item,
onSelect: onSelect,
setHoveredTransformItemName: setHoveredTransformItemName
}, item.name))]
});
};
function BlockVariationTransformationItem({
item,
onSelect,
setHoveredTransformItemName
}) {
const {
name,
icon,
title
} = item;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuItem, {
className: (0, _blocks.getBlockMenuDefaultClassName)(name),
onClick: event => {
event.preventDefault();
onSelect(name);
},
onMouseLeave: () => setHoveredTransformItemName(null),
onMouseEnter: () => setHoveredTransformItemName(name),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
icon: icon,
showColors: true
}), title]
});
}
var _default = exports.default = BlockVariationTransformations;
//# sourceMappingURL=block-variation-transformations.js.map