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

Generic block editor.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = BlockRenameModal;
var _components = require("@wordpress/components");
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _a11y = require("@wordpress/a11y");
var _data = require("@wordpress/data");
var _store = require("../../store");
var _ = require("..");
var _isEmptyString = _interopRequireDefault(require("./is-empty-string"));
var _jsxRuntime = require("react/jsx-runtime");
/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

function BlockRenameModal({
  clientId,
  onClose
}) {
  const [editedBlockName, setEditedBlockName] = (0, _element.useState)();
  const blockInformation = (0, _.useBlockDisplayInformation)(clientId);
  const {
    metadata
  } = (0, _data.useSelect)(select => {
    const {
      getBlockAttributes
    } = select(_store.store);
    return {
      metadata: getBlockAttributes(clientId)?.metadata
    };
  }, [clientId]);
  const {
    updateBlockAttributes
  } = (0, _data.useDispatch)(_store.store);
  const blockName = metadata?.name || '';
  const originalBlockName = blockInformation?.title;
  // Pattern Overrides is a WordPress-only feature but it also uses the Block Binding API.
  // Ideally this should not be inside the block editor package, but we keep it here for simplicity.
  const hasOverridesWarning = !!blockName && !!metadata?.bindings && Object.values(metadata.bindings).some(binding => binding.source === 'core/pattern-overrides');
  const nameHasChanged = editedBlockName !== undefined && editedBlockName !== blockName;
  const nameIsOriginal = editedBlockName === originalBlockName;
  const nameIsEmpty = (0, _isEmptyString.default)(editedBlockName);
  const isNameValid = nameHasChanged || nameIsOriginal;
  const autoSelectInputText = event => event.target.select();
  const handleSubmit = () => {
    const newName = nameIsOriginal || nameIsEmpty ? undefined : editedBlockName;
    const message = nameIsOriginal || nameIsEmpty ? (0, _i18n.sprintf)(/* translators: %s: new name/label for the block */
    (0, _i18n.__)('Block name reset to: "%s".'), editedBlockName) : (0, _i18n.sprintf)(/* translators: %s: new name/label for the block */
    (0, _i18n.__)('Block name changed to: "%s".'), editedBlockName);

    // Must be assertive to immediately announce change.
    (0, _a11y.speak)(message, 'assertive');
    updateBlockAttributes([clientId], {
      metadata: {
        ...metadata,
        name: newName
      }
    });

    // Immediate close avoids ability to hit save multiple times.
    onClose();
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
    title: (0, _i18n.__)('Rename'),
    onRequestClose: onClose,
    overlayClassName: "block-editor-block-rename-modal",
    focusOnMount: "firstContentElement",
    size: "small",
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("form", {
      onSubmit: e => {
        e.preventDefault();
        if (!isNameValid) {
          return;
        }
        handleSubmit();
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
        spacing: "3",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.TextControl, {
          __nextHasNoMarginBottom: true,
          __next40pxDefaultSize: true,
          value: editedBlockName !== null && editedBlockName !== void 0 ? editedBlockName : blockName,
          label: (0, _i18n.__)('Name'),
          help: hasOverridesWarning ? (0, _i18n.__)('This block allows overrides. Changing the name can cause problems with content entered into instances of this pattern.') : undefined,
          placeholder: originalBlockName,
          onChange: setEditedBlockName,
          onFocus: autoSelectInputText
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
          justify: "right",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            variant: "tertiary",
            onClick: onClose,
            children: (0, _i18n.__)('Cancel')
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
            __next40pxDefaultSize: true,
            accessibleWhenDisabled: true,
            disabled: !isNameValid,
            variant: "primary",
            type: "submit",
            children: (0, _i18n.__)('Save')
          })]
        })]
      })
    })
  });
}
//# sourceMappingURL=modal.js.map