@wordpress/block-editor/build/components/block-lock/modal.js

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockLockModal;

var _element = require("@wordpress/element");

var _i18n = require("@wordpress/i18n");

var _components = require("@wordpress/components");

var _icons = require("@wordpress/icons");

var _compose = require("@wordpress/compose");

var _data = require("@wordpress/data");

var _blocks = require("@wordpress/blocks");

var _useBlockLock = _interopRequireDefault(require("./use-block-lock"));

var _useBlockDisplayInformation = _interopRequireDefault(require("../use-block-display-information"));

var _store = require("../../store");

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */
// Entity based blocks which allow edit locking
const ALLOWS_EDIT_LOCKING = ['core/block', 'core/navigation'];

function getTemplateLockValue(lock) {
  // Prevents all operations.
  if (lock.remove && lock.move) {
    return 'all';
  } // Prevents inserting or removing blocks, but allows moving existing blocks.


  if (lock.remove && !lock.move) {
    return 'insert';
  }

  return false;
}

function BlockLockModal({
  clientId,
  onClose
}) {
  const [lock, setLock] = (0, _element.useState)({
    move: false,
    remove: false
  });
  const {
    canEdit,
    canMove,
    canRemove
  } = (0, _useBlockLock.default)(clientId);
  const {
    allowsEditLocking,
    templateLock,
    hasTemplateLock
  } = (0, _data.useSelect)(select => {
    const {
      getBlockName,
      getBlockAttributes
    } = select(_store.store);
    const blockName = getBlockName(clientId);
    const blockType = (0, _blocks.getBlockType)(blockName);
    return {
      allowsEditLocking: ALLOWS_EDIT_LOCKING.includes(blockName),
      templateLock: getBlockAttributes(clientId)?.templateLock,
      hasTemplateLock: !!blockType?.attributes?.templateLock
    };
  }, [clientId]);
  const [applyTemplateLock, setApplyTemplateLock] = (0, _element.useState)(!!templateLock);
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const blockInformation = (0, _useBlockDisplayInformation.default)(clientId);
  const instanceId = (0, _compose.useInstanceId)(BlockLockModal, 'block-editor-block-lock-modal__options-title');
  (0, _element.useEffect)(() => {
    setLock({
      move: !canMove,
      remove: !canRemove,
      ...(allowsEditLocking ? {
        edit: !canEdit
      } : {})
    });
  }, [canEdit, canMove, canRemove, allowsEditLocking]);
  const isAllChecked = Object.values(lock).every(Boolean);
  const isMixed = Object.values(lock).some(Boolean) && !isAllChecked;
  return (0, _element.createElement)(_components.Modal, {
    title: (0, _i18n.sprintf)(
    /* translators: %s: Name of the block. */
    (0, _i18n.__)('Lock %s'), blockInformation.title),
    overlayClassName: "block-editor-block-lock-modal",
    onRequestClose: onClose
  }, (0, _element.createElement)("p", null, (0, _i18n.__)('Choose specific attributes to restrict or lock all available options.')), (0, _element.createElement)("form", {
    onSubmit: event => {
      event.preventDefault();
      updateBlockAttributes([clientId], {
        lock,
        templateLock: applyTemplateLock ? getTemplateLockValue(lock) : undefined
      });
      onClose();
    }
  }, (0, _element.createElement)("div", {
    role: "group",
    "aria-labelledby": instanceId,
    className: "block-editor-block-lock-modal__options"
  }, (0, _element.createElement)(_components.CheckboxControl, {
    __nextHasNoMarginBottom: true,
    className: "block-editor-block-lock-modal__options-title",
    label: (0, _element.createElement)("span", {
      id: instanceId
    }, (0, _i18n.__)('Lock all')),
    checked: isAllChecked,
    indeterminate: isMixed,
    onChange: newValue => setLock({
      move: newValue,
      remove: newValue,
      ...(allowsEditLocking ? {
        edit: newValue
      } : {})
    })
  }), (0, _element.createElement)("ul", {
    className: "block-editor-block-lock-modal__checklist"
  }, allowsEditLocking && (0, _element.createElement)("li", {
    className: "block-editor-block-lock-modal__checklist-item"
  }, (0, _element.createElement)(_components.CheckboxControl, {
    __nextHasNoMarginBottom: true,
    label: (0, _i18n.__)('Restrict editing'),
    checked: !!lock.edit,
    onChange: edit => setLock(prevLock => ({ ...prevLock,
      edit
    }))
  }), (0, _element.createElement)(_components.Icon, {
    className: "block-editor-block-lock-modal__lock-icon",
    icon: lock.edit ? _icons.lock : _icons.unlock
  })), (0, _element.createElement)("li", {
    className: "block-editor-block-lock-modal__checklist-item"
  }, (0, _element.createElement)(_components.CheckboxControl, {
    __nextHasNoMarginBottom: true,
    label: (0, _i18n.__)('Disable movement'),
    checked: lock.move,
    onChange: move => setLock(prevLock => ({ ...prevLock,
      move
    }))
  }), (0, _element.createElement)(_components.Icon, {
    className: "block-editor-block-lock-modal__lock-icon",
    icon: lock.move ? _icons.lock : _icons.unlock
  })), (0, _element.createElement)("li", {
    className: "block-editor-block-lock-modal__checklist-item"
  }, (0, _element.createElement)(_components.CheckboxControl, {
    __nextHasNoMarginBottom: true,
    label: (0, _i18n.__)('Prevent removal'),
    checked: lock.remove,
    onChange: remove => setLock(prevLock => ({ ...prevLock,
      remove
    }))
  }), (0, _element.createElement)(_components.Icon, {
    className: "block-editor-block-lock-modal__lock-icon",
    icon: lock.remove ? _icons.lock : _icons.unlock
  }))), hasTemplateLock && (0, _element.createElement)(_components.ToggleControl, {
    __nextHasNoMarginBottom: true,
    className: "block-editor-block-lock-modal__template-lock",
    label: (0, _i18n.__)('Apply to all blocks inside'),
    checked: applyTemplateLock,
    disabled: lock.move && !lock.remove,
    onChange: () => setApplyTemplateLock(!applyTemplateLock)
  })), (0, _element.createElement)(_components.Flex, {
    className: "block-editor-block-lock-modal__actions",
    justify: "flex-end",
    expanded: false
  }, (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
    variant: "tertiary",
    onClick: onClose
  }, (0, _i18n.__)('Cancel'))), (0, _element.createElement)(_components.FlexItem, null, (0, _element.createElement)(_components.Button, {
    variant: "primary",
    type: "submit"
  }, (0, _i18n.__)('Apply'))))));
}
//# sourceMappingURL=modal.js.map