@wordpress/block-library
Version:
Block library for the WordPress editor.
95 lines (91 loc) • 3.08 kB
JavaScript
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = save;
var _clsx = _interopRequireDefault(require("clsx"));
var _removeAccents = _interopRequireDefault(require("remove-accents"));
var _blockEditor = require("@wordpress/block-editor");
var _dom = require("@wordpress/dom");
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Get the name attribute from a content string.
*
* @param {string} content The block content.
*
* @return {string} Returns the slug.
*/const getNameFromLabel = content => {
return (0, _removeAccents.default)((0, _dom.__unstableStripHTML)(content))
// Convert anything that's not a letter or number to a hyphen.
.replace(/[^\p{L}\p{N}]+/gu, '-')
// Convert to lowercase
.toLowerCase()
// Remove any remaining leading or trailing hyphens.
.replace(/(^-+)|(-+$)/g, '');
};
function save({
attributes
}) {
const {
type,
name,
label,
inlineLabel,
required,
placeholder,
value
} = attributes;
const borderProps = (0, _blockEditor.__experimentalGetBorderClassesAndStyles)(attributes);
const colorProps = (0, _blockEditor.__experimentalGetColorClassesAndStyles)(attributes);
const inputStyle = {
...borderProps.style,
...colorProps.style
};
const inputClasses = (0, _clsx.default)('wp-block-form-input__input', colorProps.className, borderProps.className);
const TagName = type === 'textarea' ? 'textarea' : 'input';
const blockProps = _blockEditor.useBlockProps.save();
// Note: radio inputs aren't implemented yet.
const isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
if ('hidden' === type) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
type: type,
name: name,
value: value
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
...blockProps,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
className: (0, _clsx.default)('wp-block-form-input__label', {
'is-label-inline': inlineLabel
}),
children: [!isCheckboxOrRadio && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "wp-block-form-input__label-content",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText.Content, {
value: label
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, {
className: inputClasses,
type: 'textarea' === type ? undefined : type,
name: name || getNameFromLabel(label),
required: required,
"aria-required": required,
placeholder: placeholder || undefined,
style: inputStyle
}), isCheckboxOrRadio && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
className: "wp-block-form-input__label-content",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText.Content, {
value: label
})
})]
})
});
}
//# sourceMappingURL=save.js.map
;