UNPKG

@wordpress/block-editor

Version:
117 lines (112 loc) 4.59 kB
"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