@wordpress/block-editor
Version:
357 lines (343 loc) • 10.9 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _a11y = require("@wordpress/a11y");
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _element = require("@wordpress/element");
var _data = require("@wordpress/data");
var _compose = require("@wordpress/compose");
var _blocks = require("@wordpress/blocks");
var _icons = require("@wordpress/icons");
var _menu = _interopRequireDefault(require("./menu"));
var _quickInserter = _interopRequireDefault(require("./quick-inserter"));
var _store = require("../../store");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const defaultRenderToggle = ({
onToggle,
disabled,
isOpen,
blockTitle,
hasSingleBlockType,
toggleProps = {}
}) => {
const {
as: Wrapper = _components.Button,
label: labelProp,
onClick,
...rest
} = toggleProps;
let label = labelProp;
if (!label && hasSingleBlockType) {
label = (0, _i18n.sprintf)(
// translators: %s: the name of the block when there is only one
(0, _i18n._x)('Add %s', 'directly add the only allowed block'), blockTitle);
} else if (!label) {
label = (0, _i18n._x)('Add block', 'Generic label for block inserter button');
}
// Handle both onClick functions from the toggle and the parent component.
function handleClick(event) {
if (onToggle) {
onToggle(event);
}
if (onClick) {
onClick(event);
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
__next40pxDefaultSize: toggleProps.as ? undefined : true,
icon: _icons.plus,
label: label,
tooltipPosition: "bottom",
onClick: handleClick,
className: "block-editor-inserter__toggle",
"aria-haspopup": !hasSingleBlockType ? 'true' : false,
"aria-expanded": !hasSingleBlockType ? isOpen : false,
disabled: disabled,
...rest
});
};
class Inserter extends _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;
// Surface toggle callback to parent component.
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, _jsxRuntime.jsx)(_quickInserter.default, {
onSelect: blocks => {
const firstBlock = Array.isArray(blocks) && blocks?.length ? blocks[0] : blocks;
if (onSelectOrClose && typeof onSelectOrClose === 'function') {
onSelectOrClose(firstBlock);
}
onClose();
},
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
selectBlockOnInsert: selectBlockOnInsert
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_menu.default, {
onSelect: () => {
onClose();
},
rootClientId: rootClientId,
clientId: clientId,
isAppender: isAppender,
showInserterHelpPanel: showInserterHelpPanel
});
}
render() {
const {
position,
hasSingleBlockType,
directInsertBlock,
insertOnlyAllowedBlock,
__experimentalIsQuick: isQuick,
onSelectOrClose
} = this.props;
if (hasSingleBlockType || directInsertBlock) {
return this.renderToggle({
onToggle: insertOnlyAllowedBlock
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
className: "block-editor-inserter",
contentClassName: (0, _clsx.default)('block-editor-inserter__popover', {
'is-quick': isQuick
}),
popoverProps: {
position,
shift: true
},
onToggle: this.onToggle,
expandOnMobile: true,
headerTitle: (0, _i18n.__)('Add a block'),
renderToggle: this.renderToggle,
renderContent: this.renderContent,
onClose: onSelectOrClose
});
}
}
var _default = exports.default = (0, _compose.compose)([(0, _data.withSelect)((select, {
clientId,
rootClientId,
shouldDirectInsert = true
}) => {
const {
getBlockRootClientId,
hasInserterItems,
getAllowedBlocks,
getDirectInsertBlock
} = select(_store.store);
const {
getBlockVariations
} = select(_blocks.store);
rootClientId = rootClientId || getBlockRootClientId(clientId) || undefined;
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, _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(_store.store);
if (!attributesToCopy || !clientId && !rootClientId) {
return {};
}
const result = {};
let adjacentAttributes = {};
// If there is no clientId, then attempt to get attributes
// from the last block within innerBlocks of the root block.
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 {
// Otherwise, attempt to get attributes from the
// previous block relative to the current clientId.
const currentBlock = getBlock(clientId);
const previousBlock = getBlock(getPreviousBlockClientId(clientId));
if (currentBlock?.name === previousBlock?.name) {
adjacentAttributes = previousBlock?.attributes || {};
}
}
// Copy over only those attributes flagged to be copied.
attributesToCopy.forEach(attribute => {
if (adjacentAttributes.hasOwnProperty(attribute)) {
result[attribute] = adjacentAttributes[attribute];
}
});
return result;
}
function getInsertionIndex() {
const {
getBlockIndex,
getBlockSelectionEnd,
getBlockOrder,
getBlockRootClientId
} = select(_store.store);
// If the clientId is defined, we insert at the position of the block.
if (clientId) {
return getBlockIndex(clientId);
}
// If there a selected block, we insert after the selected block.
const end = getBlockSelectionEnd();
if (!isAppender && end && getBlockRootClientId(end) === rootClientId) {
return getBlockIndex(end) + 1;
}
// Otherwise, we insert at the end of the current rootClientId.
return getBlockOrder(rootClientId).length;
}
const {
insertBlock
} = dispatch(_store.store);
let blockToInsert;
// Attempt to augment the directInsertBlock with attributes from an adjacent block.
// This ensures styling from nearby blocks is preserved in the newly inserted block.
// See: https://github.com/WordPress/gutenberg/issues/37904
if (directInsertBlock) {
const newAttributes = getAdjacentBlockAttributes(directInsertBlock.attributesToCopy);
blockToInsert = (0, _blocks.createBlock)(directInsertBlock.name, {
...(directInsertBlock.attributes || {}),
...newAttributes
});
} else {
blockToInsert = (0, _blocks.createBlock)(allowedBlockType.name);
}
insertBlock(blockToInsert, getInsertionIndex(), rootClientId, selectBlockOnInsert);
if (onSelectOrClose) {
onSelectOrClose({
clientId: blockToInsert?.clientId
});
}
const message = (0, _i18n.sprintf)(
// translators: %s: the name of the block that has been added
(0, _i18n.__)('%s block added'), allowedBlockType.title);
(0, _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, _compose.ifCondition)(({
hasItems,
isAppender,
rootClientId,
clientId
}) => hasItems || !isAppender && !rootClientId && !clientId)])(Inserter);
//# sourceMappingURL=index.js.map