@wordpress/block-editor
Version:
159 lines (155 loc) • 6.17 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 _components = require("@wordpress/components");
var _blocks = require("@wordpress/blocks");
var _element = require("@wordpress/element");
var _blockIcon = _interopRequireDefault(require("../block-icon"));
var _previewBlockPopover = _interopRequireDefault(require("./preview-block-popover"));
var _blockVariationTransformations = _interopRequireDefault(require("./block-variation-transformations"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Helper hook to group transformations to display them in a specific order in the UI.
* For now we group only priority content driven transformations(ex. paragraph -> heading).
*
* Later on we could also group 'layout' transformations(ex. paragraph -> group) and
* display them in different sections.
*
* @param {Object[]} possibleBlockTransformations The available block transformations.
* @return {Record<string, Object[]>} The grouped block transformations.
*/function useGroupedTransforms(possibleBlockTransformations) {
const priorityContentTransformationBlocks = {
'core/paragraph': 1,
'core/heading': 2,
'core/list': 3,
'core/quote': 4
};
const transformations = (0, _element.useMemo)(() => {
const priorityTextTransformsNames = Object.keys(priorityContentTransformationBlocks);
const groupedPossibleTransforms = possibleBlockTransformations.reduce((accumulator, item) => {
const {
name
} = item;
if (priorityTextTransformsNames.includes(name)) {
accumulator.priorityTextTransformations.push(item);
} else {
accumulator.restTransformations.push(item);
}
return accumulator;
}, {
priorityTextTransformations: [],
restTransformations: []
});
/**
* If there is only one priority text transformation and it's a Quote,
* is should move to the rest transformations. This is because Quote can
* be a container for any block type, so in multi-block selection it will
* always be suggested, even for non-text blocks.
*/
if (groupedPossibleTransforms.priorityTextTransformations.length === 1 && groupedPossibleTransforms.priorityTextTransformations[0].name === 'core/quote') {
const singleQuote = groupedPossibleTransforms.priorityTextTransformations.pop();
groupedPossibleTransforms.restTransformations.push(singleQuote);
}
return groupedPossibleTransforms;
}, [possibleBlockTransformations]);
// Order the priority text transformations.
transformations.priorityTextTransformations.sort(({
name: currentName
}, {
name: nextName
}) => {
return priorityContentTransformationBlocks[currentName] < priorityContentTransformationBlocks[nextName] ? -1 : 1;
});
return transformations;
}
const BlockTransformationsMenu = ({
className,
possibleBlockTransformations,
possibleBlockVariationTransformations,
onSelect,
onSelectVariation,
blocks
}) => {
const [hoveredTransformItemName, setHoveredTransformItemName] = (0, _element.useState)();
const {
priorityTextTransformations,
restTransformations
} = useGroupedTransforms(possibleBlockTransformations);
// We have to check if both content transformations(priority and rest) are set
// in order to create a separate MenuGroup for them.
const hasBothContentTransformations = priorityTextTransformations.length && restTransformations.length;
const restTransformItems = !!restTransformations.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(RestTransformationItems, {
restTransformations: restTransformations,
onSelect: onSelect,
setHoveredTransformItemName: setHoveredTransformItemName
});
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuGroup, {
label: (0, _i18n.__)('Transform to'),
className: className,
children: [hoveredTransformItemName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_previewBlockPopover.default, {
blocks: (0, _blocks.switchToBlockType)(blocks, hoveredTransformItemName)
}), !!possibleBlockVariationTransformations?.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockVariationTransformations.default, {
transformations: possibleBlockVariationTransformations,
blocks: blocks,
onSelect: onSelectVariation
}), priorityTextTransformations.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockTransformationItem, {
item: item,
onSelect: onSelect,
setHoveredTransformItemName: setHoveredTransformItemName
}, item.name)), !hasBothContentTransformations && restTransformItems]
}), !!hasBothContentTransformations && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.MenuGroup, {
className: className,
children: restTransformItems
})]
});
};
function RestTransformationItems({
restTransformations,
onSelect,
setHoveredTransformItemName
}) {
return restTransformations.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(BlockTransformationItem, {
item: item,
onSelect: onSelect,
setHoveredTransformItemName: setHoveredTransformItemName
}, item.name));
}
function BlockTransformationItem({
item,
onSelect,
setHoveredTransformItemName
}) {
const {
name,
icon,
title,
isDisabled
} = item;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.MenuItem, {
className: (0, _blocks.getBlockMenuDefaultClassName)(name),
onClick: event => {
event.preventDefault();
onSelect(name);
},
disabled: isDisabled,
onMouseLeave: () => setHoveredTransformItemName(null),
onMouseEnter: () => setHoveredTransformItemName(name),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blockIcon.default, {
icon: icon,
showColors: true
}), title]
});
}
var _default = exports.default = BlockTransformationsMenu;
//# sourceMappingURL=block-transformations-menu.js.map