@wordpress/block-editor
Version:
47 lines (46 loc) • 1.54 kB
JavaScript
// packages/block-editor/src/components/block-lock/toolbar.js
import { __ } from "@wordpress/i18n";
import { ToolbarButton, ToolbarGroup } from "@wordpress/components";
import { useReducer, useRef, useEffect } from "@wordpress/element";
import { lock, unlock } from "@wordpress/icons";
import BlockLockModal from "./modal";
import useBlockLock from "./use-block-lock";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function BlockLockToolbar({ clientId }) {
const { canLock, isLocked } = useBlockLock(clientId);
const [isModalOpen, toggleModal] = useReducer(
(isActive) => !isActive,
false
);
const hasLockButtonShownRef = useRef(false);
useEffect(() => {
if (isLocked) {
hasLockButtonShownRef.current = true;
}
}, [isLocked]);
if (!isLocked && !hasLockButtonShownRef.current) {
return null;
}
let label = isLocked ? __("Unlock") : __("Lock");
if (!canLock && isLocked) {
label = __("Locked");
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(ToolbarGroup, { className: "block-editor-block-lock-toolbar", children: /* @__PURE__ */ jsx(
ToolbarButton,
{
disabled: !canLock,
icon: isLocked ? lock : unlock,
label,
onClick: toggleModal,
"aria-expanded": isModalOpen,
"aria-haspopup": "dialog"
}
) }),
isModalOpen && /* @__PURE__ */ jsx(BlockLockModal, { clientId, onClose: toggleModal })
] });
}
export {
BlockLockToolbar as default
};
//# sourceMappingURL=toolbar.js.map