UNPKG

@wordpress/block-library

Version:
314 lines (310 loc) 7.06 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 _blockEditor = require("@wordpress/block-editor"); var _jsxRuntime = require("react/jsx-runtime"); /** * External dependencies */ /** * WordPress dependencies */ const blockSupports = { className: false, anchor: true }; const blockAttributes = { align: { type: 'string' }, content: { type: 'string', source: 'html', selector: 'h1,h2,h3,h4,h5,h6', default: '' }, level: { type: 'number', default: 2 }, placeholder: { type: 'string' } }; const migrateCustomColors = attributes => { if (!attributes.customTextColor) { return attributes; } const style = { color: { text: attributes.customTextColor } }; const { customTextColor, ...restAttributes } = attributes; return { ...restAttributes, style }; }; const TEXT_ALIGN_OPTIONS = ['left', 'right', 'center']; const migrateTextAlign = attributes => { const { align, ...rest } = attributes; return TEXT_ALIGN_OPTIONS.includes(align) ? { ...rest, textAlign: align } : attributes; }; const v1 = { supports: blockSupports, attributes: { ...blockAttributes, customTextColor: { type: 'string' }, textColor: { type: 'string' } }, migrate: attributes => migrateCustomColors(migrateTextAlign(attributes)), save({ attributes }) { const { align, level, content, textColor, customTextColor } = attributes; const tagName = 'h' + level; const textClass = (0, _blockEditor.getColorClassName)('color', textColor); const className = (0, _clsx.default)({ [textClass]: textClass }); return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText.Content, { className: className ? className : undefined, tagName: tagName, style: { textAlign: align, color: textClass ? undefined : customTextColor }, value: content }); } }; const v2 = { attributes: { ...blockAttributes, customTextColor: { type: 'string' }, textColor: { type: 'string' } }, migrate: attributes => migrateCustomColors(migrateTextAlign(attributes)), save({ attributes }) { const { align, content, customTextColor, level, textColor } = attributes; const tagName = 'h' + level; const textClass = (0, _blockEditor.getColorClassName)('color', textColor); const className = (0, _clsx.default)({ [textClass]: textClass, [`has-text-align-${align}`]: align }); return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText.Content, { className: className ? className : undefined, tagName: tagName, style: { color: textClass ? undefined : customTextColor }, value: content }); }, supports: blockSupports }; const v3 = { supports: blockSupports, attributes: { ...blockAttributes, customTextColor: { type: 'string' }, textColor: { type: 'string' } }, migrate: attributes => migrateCustomColors(migrateTextAlign(attributes)), save({ attributes }) { const { align, content, customTextColor, level, textColor } = attributes; const tagName = 'h' + level; const textClass = (0, _blockEditor.getColorClassName)('color', textColor); const className = (0, _clsx.default)({ [textClass]: textClass, 'has-text-color': textColor || customTextColor, [`has-text-align-${align}`]: align }); return /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText.Content, { className: className ? className : undefined, tagName: tagName, style: { color: textClass ? undefined : customTextColor }, value: content }); } }; const v4 = { supports: { align: ['wide', 'full'], anchor: true, className: false, color: { link: true }, fontSize: true, lineHeight: true, __experimentalSelector: { 'core/heading/h1': 'h1', 'core/heading/h2': 'h2', 'core/heading/h3': 'h3', 'core/heading/h4': 'h4', 'core/heading/h5': 'h5', 'core/heading/h6': 'h6' }, __unstablePasteTextInline: true }, attributes: blockAttributes, isEligible: ({ align }) => TEXT_ALIGN_OPTIONS.includes(align), migrate: migrateTextAlign, save({ attributes }) { const { align, content, level } = attributes; const TagName = 'h' + level; const className = (0, _clsx.default)({ [`has-text-align-${align}`]: align }); return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, { ..._blockEditor.useBlockProps.save({ className }), children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText.Content, { value: content }) }); } }; // This deprecation covers the serialization of the `wp-block-heading` class // into the block's markup after className support was enabled. const v5 = { supports: { align: ['wide', 'full'], anchor: true, className: false, color: { gradients: true, link: true, __experimentalDefaultControls: { background: true, text: true } }, spacing: { margin: true, padding: true }, typography: { fontSize: true, lineHeight: true, __experimentalFontFamily: true, __experimentalFontStyle: true, __experimentalFontWeight: true, __experimentalLetterSpacing: true, __experimentalTextTransform: true, __experimentalTextDecoration: true, __experimentalDefaultControls: { fontSize: true, fontAppearance: true, textTransform: true } }, __experimentalSelector: 'h1,h2,h3,h4,h5,h6', __unstablePasteTextInline: true, __experimentalSlashInserter: true }, attributes: { textAlign: { type: 'string' }, content: { type: 'string', source: 'html', selector: 'h1,h2,h3,h4,h5,h6', default: '', role: 'content' }, level: { type: 'number', default: 2 }, placeholder: { type: 'string' } }, save({ attributes }) { const { textAlign, content, level } = attributes; const TagName = 'h' + level; const className = (0, _clsx.default)({ [`has-text-align-${textAlign}`]: textAlign }); return /*#__PURE__*/(0, _jsxRuntime.jsx)(TagName, { ..._blockEditor.useBlockProps.save({ className }), children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blockEditor.RichText.Content, { value: content }) }); } }; const deprecated = [v5, v4, v3, v2, v1]; var _default = exports.default = deprecated; //# sourceMappingURL=deprecated.js.map