@wordpress/block-editor
Version:
69 lines (68 loc) • 2.48 kB
JavaScript
// packages/block-editor/src/components/block-visibility/viewport-toolbar.js
import { __ } from "@wordpress/i18n";
import { ToolbarButton, ToolbarGroup } from "@wordpress/components";
import { useRef, useEffect, useState } from "@wordpress/element";
import { seen, unseen } from "@wordpress/icons";
import { hasBlockSupport } from "@wordpress/blocks";
import { useSelect } from "@wordpress/data";
import { store as blockEditorStore } from "../../store/index.mjs";
import { BlockVisibilityModal } from "./index.mjs";
import { unlock } from "../../lock-unlock.mjs";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function BlockVisibilityViewportToolbar({ clientIds }) {
const hasBlockVisibilityButtonShownRef = useRef(false);
const [isModalOpen, setIsModalOpen] = useState(false);
const { canToggleBlockVisibility, areBlocksHiddenAnywhere } = useSelect(
(select) => {
const {
getBlocksByClientId,
getBlockName,
areBlocksHiddenAnywhere: _areBlocksHiddenAnywhere
} = unlock(select(blockEditorStore));
const _blocks = getBlocksByClientId(clientIds);
return {
canToggleBlockVisibility: _blocks.every(
({ clientId }) => hasBlockSupport(
getBlockName(clientId),
"visibility",
true
)
),
areBlocksHiddenAnywhere: _areBlocksHiddenAnywhere(clientIds)
};
},
[clientIds]
);
useEffect(() => {
if (areBlocksHiddenAnywhere) {
hasBlockVisibilityButtonShownRef.current = true;
}
}, [areBlocksHiddenAnywhere]);
if (!areBlocksHiddenAnywhere && !hasBlockVisibilityButtonShownRef.current) {
return null;
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(ToolbarGroup, { className: "block-editor-block-visibility-toolbar", children: /* @__PURE__ */ jsx(
ToolbarButton,
{
disabled: !canToggleBlockVisibility,
icon: areBlocksHiddenAnywhere ? unseen : seen,
label: areBlocksHiddenAnywhere ? __("Hidden") : __("Visible"),
onClick: () => setIsModalOpen(true),
"aria-expanded": isModalOpen,
"aria-haspopup": !isModalOpen ? "dialog" : void 0
}
) }),
isModalOpen && /* @__PURE__ */ jsx(
BlockVisibilityModal,
{
clientIds,
onClose: () => setIsModalOpen(false)
}
)
] });
}
export {
BlockVisibilityViewportToolbar as default
};
//# sourceMappingURL=viewport-toolbar.mjs.map