@wordpress/block-editor
Version:
117 lines (112 loc) • 4.59 kB
JavaScript
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
;