@wordpress/block-editor
Version:
351 lines (349 loc) • 11.8 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/block-editor/src/components/inserter/index.js
var inserter_exports = {};
__export(inserter_exports, {
default: () => inserter_default
});
module.exports = __toCommonJS(inserter_exports);
var import_clsx = __toESM(require("clsx"));
var import_a11y = require("@wordpress/a11y");
var import_i18n = require("@wordpress/i18n");
var import_components = require("@wordpress/components");
var import_element = require("@wordpress/element");
var import_data = require("@wordpress/data");
var import_compose = require("@wordpress/compose");
var import_blocks = require("@wordpress/blocks");
var import_icons = require("@wordpress/icons");
var import_menu = __toESM(require("./menu"));
var import_quick_inserter = __toESM(require("./quick-inserter"));
var import_store = require("../../store");
var import_jsx_runtime = require("react/jsx-runtime");
var defaultRenderToggle = ({
onToggle,
disabled,
isOpen,
blockTitle,
hasSingleBlockType,
toggleProps = {}
}) => {
const {
as: Wrapper = import_components.Button,
label: labelProp,
onClick,
...rest
} = toggleProps;
let label = labelProp;
if (!label && hasSingleBlockType) {
label = (0, import_i18n.sprintf)(
// translators: %s: the name of the block when there is only one
(0, import_i18n._x)("Add %s", "directly add the only allowed block"),
blockTitle
);
} else if (!label) {
label = (0, import_i18n._x)("Add block", "Generic label for block inserter button");
}
function handleClick(event) {
if (onToggle) {
onToggle(event);
}
if (onClick) {
onClick(event);
}
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Wrapper,
{
__next40pxDefaultSize: toggleProps.as ? void 0 : true,
icon: import_icons.plus,
label,
tooltipPosition: "bottom",
onClick: handleClick,
className: "block-editor-inserter__toggle",
"aria-haspopup": !hasSingleBlockType ? "true" : false,
"aria-expanded": !hasSingleBlockType ? isOpen : false,
disabled,
...rest
}
);
};
var Inserter = class extends import_element.Component {
constructor() {
super(...arguments);
this.onToggle = this.onToggle.bind(this);
this.renderToggle = this.renderToggle.bind(this);
this.renderContent = this.renderContent.bind(this);
}
onToggle(isOpen) {
const { onToggle } = this.props;
if (onToggle) {
onToggle(isOpen);
}
}
/**
* Render callback to display Dropdown toggle element.
*
* @param {Object} options
* @param {Function} options.onToggle Callback to invoke when toggle is
* pressed.
* @param {boolean} options.isOpen Whether dropdown is currently open.
*
* @return {Element} Dropdown toggle element.
*/
renderToggle({ onToggle, isOpen }) {
const {
disabled,
blockTitle,
hasSingleBlockType,
directInsertBlock,
toggleProps,
hasItems,
renderToggle = defaultRenderToggle
} = this.props;
return renderToggle({
onToggle,
isOpen,
disabled: disabled || !hasItems,
blockTitle,
hasSingleBlockType,
directInsertBlock,
toggleProps
});
}
/**
* Render callback to display Dropdown content element.
*
* @param {Object} options
* @param {Function} options.onClose Callback to invoke when dropdown is
* closed.
*
* @return {Element} Dropdown content element.
*/
renderContent({ onClose }) {
const {
rootClientId,
clientId,
isAppender,
showInserterHelpPanel,
// This prop is experimental to give some time for the quick inserter to mature
// Feel free to make them stable after a few releases.
__experimentalIsQuick: isQuick,
onSelectOrClose,
selectBlockOnInsert
} = this.props;
if (isQuick) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_quick_inserter.default,
{
onSelect: (blocks) => {
const firstBlock = Array.isArray(blocks) && blocks?.length ? blocks[0] : blocks;
if (onSelectOrClose && typeof onSelectOrClose === "function") {
onSelectOrClose(firstBlock);
}
onClose();
},
rootClientId,
clientId,
isAppender,
selectBlockOnInsert
}
);
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_menu.default,
{
onSelect: () => {
onClose();
},
rootClientId,
clientId,
isAppender,
showInserterHelpPanel
}
);
}
render() {
const {
position,
hasSingleBlockType,
directInsertBlock,
insertOnlyAllowedBlock,
__experimentalIsQuick: isQuick,
onSelectOrClose
} = this.props;
if (hasSingleBlockType || directInsertBlock) {
return this.renderToggle({ onToggle: insertOnlyAllowedBlock });
}
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.Dropdown,
{
className: "block-editor-inserter",
contentClassName: (0, import_clsx.default)("block-editor-inserter__popover", {
"is-quick": isQuick
}),
popoverProps: { position, shift: true },
onToggle: this.onToggle,
expandOnMobile: true,
headerTitle: (0, import_i18n.__)("Add a block"),
renderToggle: this.renderToggle,
renderContent: this.renderContent,
onClose: onSelectOrClose
}
);
}
};
var inserter_default = (0, import_compose.compose)([
(0, import_data.withSelect)(
(select, { clientId, rootClientId, shouldDirectInsert = true }) => {
const {
getBlockRootClientId,
hasInserterItems,
getAllowedBlocks,
getDirectInsertBlock
} = select(import_store.store);
const { getBlockVariations } = select(import_blocks.store);
rootClientId = rootClientId || getBlockRootClientId(clientId) || void 0;
const allowedBlocks = getAllowedBlocks(rootClientId);
const directInsertBlock = shouldDirectInsert && getDirectInsertBlock(rootClientId);
const hasSingleBlockType = allowedBlocks?.length === 1 && getBlockVariations(allowedBlocks[0].name, "inserter")?.length === 0;
let allowedBlockType = false;
if (hasSingleBlockType) {
allowedBlockType = allowedBlocks[0];
}
return {
hasItems: hasInserterItems(rootClientId),
hasSingleBlockType,
blockTitle: allowedBlockType ? allowedBlockType.title : "",
allowedBlockType,
directInsertBlock,
rootClientId
};
}
),
(0, import_data.withDispatch)((dispatch, ownProps, { select }) => {
return {
insertOnlyAllowedBlock() {
const {
rootClientId,
clientId,
isAppender,
hasSingleBlockType,
allowedBlockType,
directInsertBlock,
onSelectOrClose,
selectBlockOnInsert
} = ownProps;
if (!hasSingleBlockType && !directInsertBlock) {
return;
}
function getAdjacentBlockAttributes(attributesToCopy) {
const { getBlock, getPreviousBlockClientId } = select(import_store.store);
if (!attributesToCopy || !clientId && !rootClientId) {
return {};
}
const result = {};
let adjacentAttributes = {};
if (!clientId) {
const parentBlock = getBlock(rootClientId);
if (parentBlock?.innerBlocks?.length) {
const lastInnerBlock = parentBlock.innerBlocks[parentBlock.innerBlocks.length - 1];
if (directInsertBlock && directInsertBlock?.name === lastInnerBlock.name) {
adjacentAttributes = lastInnerBlock.attributes;
}
}
} else {
const currentBlock = getBlock(clientId);
const previousBlock = getBlock(
getPreviousBlockClientId(clientId)
);
if (currentBlock?.name === previousBlock?.name) {
adjacentAttributes = previousBlock?.attributes || {};
}
}
attributesToCopy.forEach((attribute) => {
if (adjacentAttributes.hasOwnProperty(attribute)) {
result[attribute] = adjacentAttributes[attribute];
}
});
return result;
}
function getInsertionIndex() {
const {
getBlockIndex,
getBlockSelectionEnd,
getBlockOrder,
getBlockRootClientId
} = select(import_store.store);
if (clientId) {
return getBlockIndex(clientId);
}
const end = getBlockSelectionEnd();
if (!isAppender && end && getBlockRootClientId(end) === rootClientId) {
return getBlockIndex(end) + 1;
}
return getBlockOrder(rootClientId).length;
}
const { insertBlock } = dispatch(import_store.store);
let blockToInsert;
if (directInsertBlock) {
const newAttributes = getAdjacentBlockAttributes(
directInsertBlock.attributesToCopy
);
blockToInsert = (0, import_blocks.createBlock)(directInsertBlock.name, {
...directInsertBlock.attributes || {},
...newAttributes
});
} else {
blockToInsert = (0, import_blocks.createBlock)(allowedBlockType.name);
}
insertBlock(
blockToInsert,
getInsertionIndex(),
rootClientId,
selectBlockOnInsert
);
if (onSelectOrClose) {
onSelectOrClose(blockToInsert);
}
const message = (0, import_i18n.sprintf)(
// translators: %s: the name of the block that has been added
(0, import_i18n.__)("%s block added"),
allowedBlockType.title
);
(0, import_a11y.speak)(message);
}
};
}),
// The global inserter should always be visible, we are using ( ! isAppender && ! rootClientId && ! clientId ) as
// a way to detect the global Inserter.
(0, import_compose.ifCondition)(
({ hasItems, isAppender, rootClientId, clientId }) => hasItems || !isAppender && !rootClientId && !clientId
)
])(Inserter);
//# sourceMappingURL=index.js.map