@wordpress/block-editor
Version:
102 lines (101 loc) • 3.44 kB
JavaScript
// packages/block-editor/src/components/block-mover/index.js
import clsx from "clsx";
import { dragHandle } from "@wordpress/icons";
import { ToolbarGroup, ToolbarItem, Button } from "@wordpress/components";
import { useSelect } from "@wordpress/data";
import { __ } from "@wordpress/i18n";
import BlockDraggable from "../block-draggable";
import { BlockMoverUpButton, BlockMoverDownButton } from "./button";
import { store as blockEditorStore } from "../../store";
import { jsx, jsxs } from "react/jsx-runtime";
function BlockMover({
clientIds,
hideDragHandle,
isBlockMoverUpButtonDisabled,
isBlockMoverDownButtonDisabled
}) {
const {
canMove,
rootClientId,
isFirst,
isLast,
orientation,
isManualGrid
} = useSelect(
(select) => {
const {
getBlockIndex,
getBlockListSettings,
canMoveBlocks,
getBlockOrder,
getBlockRootClientId,
getBlockAttributes
} = select(blockEditorStore);
const normalizedClientIds = Array.isArray(clientIds) ? clientIds : [clientIds];
const firstClientId = normalizedClientIds[0];
const _rootClientId = getBlockRootClientId(firstClientId);
const firstIndex = getBlockIndex(firstClientId);
const lastIndex = getBlockIndex(
normalizedClientIds[normalizedClientIds.length - 1]
);
const blockOrder = getBlockOrder(_rootClientId);
const { layout = {} } = getBlockAttributes(_rootClientId) ?? {};
return {
canMove: canMoveBlocks(clientIds),
rootClientId: _rootClientId,
isFirst: firstIndex === 0,
isLast: lastIndex === blockOrder.length - 1,
orientation: getBlockListSettings(_rootClientId)?.orientation,
isManualGrid: layout.type === "grid" && layout.isManualPlacement && window.__experimentalEnableGridInteractivity
};
},
[clientIds]
);
if (!canMove || isFirst && isLast && !rootClientId || hideDragHandle && isManualGrid) {
return null;
}
return /* @__PURE__ */ jsxs(
ToolbarGroup,
{
className: clsx("block-editor-block-mover", {
"is-horizontal": orientation === "horizontal"
}),
children: [
!hideDragHandle && /* @__PURE__ */ jsx(BlockDraggable, { clientIds, fadeWhenDisabled: true, children: (draggableProps) => /* @__PURE__ */ jsx(
Button,
{
__next40pxDefaultSize: true,
icon: dragHandle,
className: "block-editor-block-mover__drag-handle",
label: __("Drag"),
tabIndex: "-1",
...draggableProps
}
) }),
!isManualGrid && /* @__PURE__ */ jsxs("div", { className: "block-editor-block-mover__move-button-container", children: [
/* @__PURE__ */ jsx(ToolbarItem, { children: (itemProps) => /* @__PURE__ */ jsx(
BlockMoverUpButton,
{
disabled: isBlockMoverUpButtonDisabled,
clientIds,
...itemProps
}
) }),
/* @__PURE__ */ jsx(ToolbarItem, { children: (itemProps) => /* @__PURE__ */ jsx(
BlockMoverDownButton,
{
disabled: isBlockMoverDownButtonDisabled,
clientIds,
...itemProps
}
) })
] })
]
}
);
}
var block_mover_default = BlockMover;
export {
block_mover_default as default
};
//# sourceMappingURL=index.js.map