@wordpress/block-editor
Version:
72 lines (71 loc) • 2.46 kB
JavaScript
// packages/block-editor/src/components/block-visibility/toolbar.js
import { __ } from "@wordpress/i18n";
import { ToolbarButton, ToolbarGroup } from "@wordpress/components";
import { useRef, useEffect } from "@wordpress/element";
import { seen, unseen } from "@wordpress/icons";
import { useSelect, useDispatch } from "@wordpress/data";
import { hasBlockSupport } from "@wordpress/blocks";
import { store as blockEditorStore } from "../../store";
import { cleanEmptyObject } from "../../hooks/utils";
import { Fragment, jsx } from "react/jsx-runtime";
function BlockVisibilityToolbar({ clientIds }) {
const { blocks, canToggleBlockVisibility } = useSelect(
(select) => {
const { getBlockName, getBlocksByClientId } = select(blockEditorStore);
const _blocks = getBlocksByClientId(clientIds);
return {
blocks: _blocks,
canToggleBlockVisibility: _blocks.every(
({ clientId }) => hasBlockSupport(
getBlockName(clientId),
"visibility",
true
)
)
};
},
[clientIds]
);
const hasHiddenBlock = blocks.some(
(block) => block.attributes.metadata?.blockVisibility === false
);
const hasBlockVisibilityButtonShownRef = useRef(false);
const { updateBlockAttributes } = useDispatch(blockEditorStore);
useEffect(() => {
if (hasHiddenBlock) {
hasBlockVisibilityButtonShownRef.current = true;
}
}, [hasHiddenBlock]);
if (!hasHiddenBlock && !hasBlockVisibilityButtonShownRef.current) {
return null;
}
const toggleBlockVisibility = () => {
const attributesByClientId = Object.fromEntries(
blocks?.map(({ clientId, attributes }) => [
clientId,
{
metadata: cleanEmptyObject({
...attributes?.metadata,
blockVisibility: hasHiddenBlock ? void 0 : false
})
}
])
);
updateBlockAttributes(clientIds, attributesByClientId, {
uniqueByBlock: true
});
};
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(ToolbarGroup, { className: "block-editor-block-lock-toolbar", children: /* @__PURE__ */ jsx(
ToolbarButton,
{
disabled: !canToggleBlockVisibility,
icon: hasHiddenBlock ? unseen : seen,
label: hasHiddenBlock ? __("Hidden") : __("Visible"),
onClick: toggleBlockVisibility
}
) }) });
}
export {
BlockVisibilityToolbar as default
};
//# sourceMappingURL=toolbar.js.map