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

Generic block editor.

import { createElement } from "@wordpress/element";

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';
import { useEffect, useState } from '@wordpress/element';
import { Button, CheckboxControl, Flex, FlexItem, Icon, Modal, ToggleControl } from '@wordpress/components';
import { lock as lockIcon, unlock as unlockIcon } from '@wordpress/icons';
import { useInstanceId } from '@wordpress/compose';
import { useDispatch, useSelect } from '@wordpress/data';
import { getBlockType } from '@wordpress/blocks';
/**
 * Internal dependencies
 */

import useBlockLock from './use-block-lock';
import useBlockDisplayInformation from '../use-block-display-information';
import { store as blockEditorStore } from '../../store'; // 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;
}

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