UNPKG

@wordpress/block-editor

Version:
93 lines (91 loc) 3.63 kB
"use strict"; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; 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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); // packages/block-editor/src/components/block-visibility/toolbar.js var toolbar_exports = {}; __export(toolbar_exports, { default: () => BlockVisibilityToolbar }); module.exports = __toCommonJS(toolbar_exports); var import_i18n = require("@wordpress/i18n"); var import_components = require("@wordpress/components"); var import_element = require("@wordpress/element"); var import_icons = require("@wordpress/icons"); var import_data = require("@wordpress/data"); var import_blocks = require("@wordpress/blocks"); var import_store = require("../../store"); var import_utils = require("../../hooks/utils"); var import_jsx_runtime = require("react/jsx-runtime"); function BlockVisibilityToolbar({ clientIds }) { const { blocks, canToggleBlockVisibility } = (0, import_data.useSelect)( (select) => { const { getBlockName, getBlocksByClientId } = select(import_store.store); const _blocks = getBlocksByClientId(clientIds); return { blocks: _blocks, canToggleBlockVisibility: _blocks.every( ({ clientId }) => (0, import_blocks.hasBlockSupport)( getBlockName(clientId), "visibility", true ) ) }; }, [clientIds] ); const hasHiddenBlock = blocks.some( (block) => block.attributes.metadata?.blockVisibility === false ); const hasBlockVisibilityButtonShownRef = (0, import_element.useRef)(false); const { updateBlockAttributes } = (0, import_data.useDispatch)(import_store.store); (0, import_element.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: (0, import_utils.cleanEmptyObject)({ ...attributes?.metadata, blockVisibility: hasHiddenBlock ? void 0 : false }) } ]) ); updateBlockAttributes(clientIds, attributesByClientId, { uniqueByBlock: true }); }; return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ToolbarGroup, { className: "block-editor-block-lock-toolbar", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)( import_components.ToolbarButton, { disabled: !canToggleBlockVisibility, icon: hasHiddenBlock ? import_icons.unseen : import_icons.seen, label: hasHiddenBlock ? (0, import_i18n.__)("Hidden") : (0, import_i18n.__)("Visible"), onClick: toggleBlockVisibility } ) }) }); } //# sourceMappingURL=toolbar.js.map