@wordpress/block-editor
Version:
274 lines (272 loc) • 9.53 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/block-tools/insertion-point.js
var insertion_point_exports = {};
__export(insertion_point_exports, {
InsertionPointOpenRef: () => InsertionPointOpenRef,
default: () => InsertionPoint
});
module.exports = __toCommonJS(insertion_point_exports);
var import_clsx = __toESM(require("clsx"));
var import_data = require("@wordpress/data");
var import_element = require("@wordpress/element");
var import_components = require("@wordpress/components");
var import_compose = require("@wordpress/compose");
var import_inserter = __toESM(require("../inserter"));
var import_store = require("../../store");
var import_inbetween = __toESM(require("../block-popover/inbetween"));
var import_drop_zone = __toESM(require("../block-popover/drop-zone"));
var import_lock_unlock = require("../../lock-unlock");
var import_jsx_runtime = require("react/jsx-runtime");
var InsertionPointOpenRef = (0, import_element.createContext)();
InsertionPointOpenRef.displayName = "InsertionPointOpenRefContext";
function InbetweenInsertionPointPopover({
__unstablePopoverSlot,
__unstableContentRef,
operation = "insert",
nearestSide = "right"
}) {
const { selectBlock, hideInsertionPoint } = (0, import_data.useDispatch)(import_store.store);
const openRef = (0, import_element.useContext)(InsertionPointOpenRef);
const ref = (0, import_element.useRef)();
const {
orientation,
previousClientId,
nextClientId,
rootClientId,
isInserterShown,
isDistractionFree,
isZoomOutMode
} = (0, import_data.useSelect)((select) => {
const {
getBlockOrder,
getBlockListSettings,
getBlockInsertionPoint,
isBlockBeingDragged,
getPreviousBlockClientId,
getNextBlockClientId,
getSettings,
isZoomOut
} = (0, import_lock_unlock.unlock)(select(import_store.store));
const insertionPoint = getBlockInsertionPoint();
const order = getBlockOrder(insertionPoint.rootClientId);
if (!order.length) {
return {};
}
let _previousClientId = order[insertionPoint.index - 1];
let _nextClientId = order[insertionPoint.index];
while (isBlockBeingDragged(_previousClientId)) {
_previousClientId = getPreviousBlockClientId(_previousClientId);
}
while (isBlockBeingDragged(_nextClientId)) {
_nextClientId = getNextBlockClientId(_nextClientId);
}
const settings = getSettings();
return {
previousClientId: _previousClientId,
nextClientId: _nextClientId,
orientation: getBlockListSettings(insertionPoint.rootClientId)?.orientation || "vertical",
rootClientId: insertionPoint.rootClientId,
isDistractionFree: settings.isDistractionFree,
isInserterShown: insertionPoint?.__unstableWithInserter,
isZoomOutMode: isZoomOut()
};
}, []);
const { getBlockEditingMode } = (0, import_data.useSelect)(import_store.store);
const disableMotion = (0, import_compose.useReducedMotion)();
function onClick(event) {
if (event.target === ref.current && nextClientId && getBlockEditingMode(nextClientId) !== "disabled") {
selectBlock(nextClientId, -1);
}
}
function maybeHideInserterPoint(event) {
if (event.target === ref.current && !openRef.current) {
hideInsertionPoint();
}
}
function onFocus(event) {
if (event.target !== ref.current) {
openRef.current = true;
}
}
const maybeResetOpenRef = (0, import_element.useCallback)(
(node) => {
if (!node && openRef.current) {
openRef.current = false;
}
},
[openRef]
);
const lineVariants = {
// Initial position starts from the center and invisible.
start: {
opacity: 0,
scale: 0
},
// The line expands to fill the container. If the inserter is visible it
// is delayed so it appears orchestrated.
rest: {
opacity: 1,
scale: 1,
transition: { delay: isInserterShown ? 0.5 : 0, type: "tween" }
},
hover: {
opacity: 1,
scale: 1,
transition: { delay: 0.5, type: "tween" }
}
};
const inserterVariants = {
start: {
scale: disableMotion ? 1 : 0
},
rest: {
scale: 1,
transition: { delay: 0.4, type: "tween" }
}
};
if (isDistractionFree) {
return null;
}
if (isZoomOutMode && operation !== "insert") {
return null;
}
const orientationClassname = orientation === "horizontal" || operation === "group" ? "is-horizontal" : "is-vertical";
const className = (0, import_clsx.default)(
"block-editor-block-list__insertion-point",
orientationClassname
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_inbetween.default,
{
previousClientId,
nextClientId,
__unstablePopoverSlot,
__unstableContentRef,
operation,
nearestSide,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_components.__unstableMotion.div,
{
layout: !disableMotion,
initial: disableMotion ? "rest" : "start",
animate: "rest",
whileHover: "hover",
whileTap: "pressed",
exit: "start",
ref,
tabIndex: -1,
onClick,
onFocus,
className: (0, import_clsx.default)(className, {
"is-with-inserter": isInserterShown
}),
onHoverEnd: maybeHideInserterPoint,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__unstableMotion.div,
{
variants: lineVariants,
className: "block-editor-block-list__insertion-point-indicator",
"data-testid": "block-list-insertion-point-indicator"
}
),
isInserterShown && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_components.__unstableMotion.div,
{
variants: inserterVariants,
className: (0, import_clsx.default)(
"block-editor-block-list__insertion-point-inserter"
),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_inserter.default,
{
ref: maybeResetOpenRef,
position: "bottom center",
clientId: nextClientId,
rootClientId,
__experimentalIsQuick: true,
onToggle: (isOpen) => {
openRef.current = isOpen;
},
onSelectOrClose: () => {
openRef.current = false;
}
}
)
}
)
]
}
)
}
);
}
function InsertionPoint(props) {
const { insertionPoint, isVisible, isBlockListEmpty } = (0, import_data.useSelect)(
(select) => {
const {
getBlockInsertionPoint,
isBlockInsertionPointVisible,
getBlockCount
} = select(import_store.store);
const blockInsertionPoint = getBlockInsertionPoint();
return {
insertionPoint: blockInsertionPoint,
isVisible: isBlockInsertionPointVisible(),
isBlockListEmpty: getBlockCount(blockInsertionPoint?.rootClientId) === 0
};
},
[]
);
if (!isVisible || // Don't render the insertion point if the block list is empty.
// The insertion point will be represented by the appender instead.
isBlockListEmpty) {
return null;
}
return insertionPoint.operation === "replace" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_drop_zone.default,
{
...props
},
`${insertionPoint.rootClientId}-${insertionPoint.index}`
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
InbetweenInsertionPointPopover,
{
operation: insertionPoint.operation,
nearestSide: insertionPoint.nearestSide,
...props
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
InsertionPointOpenRef
});
//# sourceMappingURL=insertion-point.js.map