UNPKG

@wordpress/block-library

Version:
259 lines (254 loc) 6.95 kB
"use strict"; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; 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 */ const getNameFromLabelV1 = 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, ''); }; const v2 = { attributes: { type: { type: 'string', default: 'text' }, name: { type: 'string' }, label: { type: 'string', default: 'Label', selector: '.wp-block-form-input__label-content', source: 'html', role: 'content' }, inlineLabel: { type: 'boolean', default: false }, required: { type: 'boolean', default: false, selector: '.wp-block-form-input__input', source: 'attribute', attribute: 'required' }, placeholder: { type: 'string', selector: '.wp-block-form-input__input', source: 'attribute', attribute: 'placeholder', role: 'content' }, value: { type: 'string', default: '', selector: 'input', source: 'attribute', attribute: 'value' }, visibilityPermissions: { type: 'string', default: 'all' } }, supports: { anchor: true, reusable: false, spacing: { margin: ['top', 'bottom'] }, __experimentalBorder: { radius: true, __experimentalSkipSerialization: true, __experimentalDefaultControls: { radius: true } } }, 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(); 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: [/*#__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 || getNameFromLabelV1(label), required: required, "aria-required": required, placeholder: placeholder || undefined, style: inputStyle })] }) }); } }; // Version without wrapper div in saved markup // See: https://github.com/WordPress/gutenberg/pull/56507 const v1 = { attributes: { type: { type: 'string', default: 'text' }, name: { type: 'string' }, label: { type: 'string', default: 'Label', selector: '.wp-block-form-input__label-content', source: 'html', role: 'content' }, inlineLabel: { type: 'boolean', default: false }, required: { type: 'boolean', default: false, selector: '.wp-block-form-input__input', source: 'attribute', attribute: 'required' }, placeholder: { type: 'string', selector: '.wp-block-form-input__input', source: 'attribute', attribute: 'placeholder', role: 'content' }, value: { type: 'string', default: '', selector: 'input', source: 'attribute', attribute: 'value' }, visibilityPermissions: { type: 'string', default: 'all' } }, supports: { className: false, anchor: true, reusable: false, spacing: { margin: ['top', 'bottom'] }, __experimentalBorder: { radius: true, __experimentalSkipSerialization: true, __experimentalDefaultControls: { radius: true } } }, 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'; if ('hidden' === type) { return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", { type: type, name: name, value: value }); } /* eslint-disable jsx-a11y/label-has-associated-control */ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", { className: (0, _clsx.default)('wp-block-form-input__label', { 'is-label-inline': inlineLabel }), children: [/*#__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 || getNameFromLabelV1(label), required: required, "aria-required": required, placeholder: placeholder || undefined, style: inputStyle })] }); /* eslint-enable jsx-a11y/label-has-associated-control */ } }; const deprecated = [v2, v1]; var _default = exports.default = deprecated; //# sourceMappingURL=deprecated.js.map