UNPKG

7.91 kBJavaScriptView Raw
1import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
3import { createElement } from "@wordpress/element";
4
5/**
6 * External dependencies
7 */
8import classnames from 'classnames';
9import { isFinite, omit } from 'lodash';
10/**
11 * WordPress dependencies
12 */
13
14import { __ } from '@wordpress/i18n';
15import { RawHTML } from '@wordpress/element';
16import { getColorClassName, getFontSizeClass, RichText } from '@wordpress/block-editor';
17import { getPhrasingContentSchema } from '@wordpress/blocks';
18import { Path, SVG } from '@wordpress/components';
19/**
20 * Internal dependencies
21 */
22
23import edit from './edit';
24var supports = {
25 className: false
26};
27var schema = {
28 content: {
29 type: 'string',
30 source: 'html',
31 selector: 'p',
32 default: ''
33 },
34 align: {
35 type: 'string'
36 },
37 dropCap: {
38 type: 'boolean',
39 default: false
40 },
41 placeholder: {
42 type: 'string'
43 },
44 textColor: {
45 type: 'string'
46 },
47 customTextColor: {
48 type: 'string'
49 },
50 backgroundColor: {
51 type: 'string'
52 },
53 customBackgroundColor: {
54 type: 'string'
55 },
56 fontSize: {
57 type: 'string'
58 },
59 customFontSize: {
60 type: 'number'
61 },
62 direction: {
63 type: 'string',
64 enum: ['ltr', 'rtl']
65 }
66};
67export var name = 'core/paragraph';
68export var settings = {
69 title: __('Paragraph'),
70 description: __('Start with the building block of all narrative.'),
71 icon: createElement(SVG, {
72 xmlns: "http://www.w3.org/2000/svg",
73 viewBox: "0 0 24 24"
74 }, createElement(Path, {
75 d: "M11 5v7H9.5C7.6 12 6 10.4 6 8.5S7.6 5 9.5 5H11m8-2H9.5C6.5 3 4 5.5 4 8.5S6.5 14 9.5 14H11v7h2V5h2v16h2V5h2V3z"
76 })),
77 category: 'common',
78 keywords: [__('text')],
79 supports: supports,
80 attributes: schema,
81 transforms: {
82 from: [{
83 type: 'raw',
84 // Paragraph is a fallback and should be matched last.
85 priority: 20,
86 selector: 'p',
87 schema: {
88 p: {
89 children: getPhrasingContentSchema()
90 }
91 }
92 }]
93 },
94 deprecated: [{
95 supports: supports,
96 attributes: _objectSpread({}, schema, {
97 width: {
98 type: 'string'
99 }
100 }),
101 save: function save(_ref) {
102 var _classnames;
103
104 var attributes = _ref.attributes;
105 var width = attributes.width,
106 align = attributes.align,
107 content = attributes.content,
108 dropCap = attributes.dropCap,
109 backgroundColor = attributes.backgroundColor,
110 textColor = attributes.textColor,
111 customBackgroundColor = attributes.customBackgroundColor,
112 customTextColor = attributes.customTextColor,
113 fontSize = attributes.fontSize,
114 customFontSize = attributes.customFontSize;
115 var textClass = getColorClassName('color', textColor);
116 var backgroundClass = getColorClassName('background-color', backgroundColor);
117 var fontSizeClass = fontSize && "is-".concat(fontSize, "-text");
118 var className = classnames((_classnames = {}, _defineProperty(_classnames, "align".concat(width), width), _defineProperty(_classnames, 'has-background', backgroundColor || customBackgroundColor), _defineProperty(_classnames, 'has-drop-cap', dropCap), _defineProperty(_classnames, fontSizeClass, fontSizeClass), _defineProperty(_classnames, textClass, textClass), _defineProperty(_classnames, backgroundClass, backgroundClass), _classnames));
119 var styles = {
120 backgroundColor: backgroundClass ? undefined : customBackgroundColor,
121 color: textClass ? undefined : customTextColor,
122 fontSize: fontSizeClass ? undefined : customFontSize,
123 textAlign: align
124 };
125 return createElement(RichText.Content, {
126 tagName: "p",
127 style: styles,
128 className: className ? className : undefined,
129 value: content
130 });
131 }
132 }, {
133 supports: supports,
134 attributes: omit(_objectSpread({}, schema, {
135 fontSize: {
136 type: 'number'
137 }
138 }), 'customFontSize', 'customTextColor', 'customBackgroundColor'),
139 save: function save(_ref2) {
140 var _classnames2;
141
142 var attributes = _ref2.attributes;
143 var width = attributes.width,
144 align = attributes.align,
145 content = attributes.content,
146 dropCap = attributes.dropCap,
147 backgroundColor = attributes.backgroundColor,
148 textColor = attributes.textColor,
149 fontSize = attributes.fontSize;
150 var className = classnames((_classnames2 = {}, _defineProperty(_classnames2, "align".concat(width), width), _defineProperty(_classnames2, 'has-background', backgroundColor), _defineProperty(_classnames2, 'has-drop-cap', dropCap), _classnames2));
151 var styles = {
152 backgroundColor: backgroundColor,
153 color: textColor,
154 fontSize: fontSize,
155 textAlign: align
156 };
157 return createElement("p", {
158 style: styles,
159 className: className ? className : undefined
160 }, content);
161 },
162 migrate: function migrate(attributes) {
163 return omit(_objectSpread({}, attributes, {
164 customFontSize: isFinite(attributes.fontSize) ? attributes.fontSize : undefined,
165 customTextColor: attributes.textColor && '#' === attributes.textColor[0] ? attributes.textColor : undefined,
166 customBackgroundColor: attributes.backgroundColor && '#' === attributes.backgroundColor[0] ? attributes.backgroundColor : undefined
167 }), ['fontSize', 'textColor', 'backgroundColor']);
168 }
169 }, {
170 supports: supports,
171 attributes: _objectSpread({}, schema, {
172 content: {
173 type: 'string',
174 source: 'html',
175 default: ''
176 }
177 }),
178 save: function save(_ref3) {
179 var attributes = _ref3.attributes;
180 return createElement(RawHTML, null, attributes.content);
181 },
182 migrate: function migrate(attributes) {
183 return attributes;
184 }
185 }],
186 merge: function merge(attributes, attributesToMerge) {
187 return {
188 content: (attributes.content || '') + (attributesToMerge.content || '')
189 };
190 },
191 getEditWrapperProps: function getEditWrapperProps(attributes) {
192 var width = attributes.width;
193
194 if (['wide', 'full', 'left', 'right'].indexOf(width) !== -1) {
195 return {
196 'data-align': width
197 };
198 }
199 },
200 edit: edit,
201 save: function save(_ref4) {
202 var _classnames3;
203
204 var attributes = _ref4.attributes;
205 var align = attributes.align,
206 content = attributes.content,
207 dropCap = attributes.dropCap,
208 backgroundColor = attributes.backgroundColor,
209 textColor = attributes.textColor,
210 customBackgroundColor = attributes.customBackgroundColor,
211 customTextColor = attributes.customTextColor,
212 fontSize = attributes.fontSize,
213 customFontSize = attributes.customFontSize,
214 direction = attributes.direction;
215 var textClass = getColorClassName('color', textColor);
216 var backgroundClass = getColorClassName('background-color', backgroundColor);
217 var fontSizeClass = getFontSizeClass(fontSize);
218 var className = classnames((_classnames3 = {
219 'has-text-color': textColor || customTextColor,
220 'has-background': backgroundColor || customBackgroundColor,
221 'has-drop-cap': dropCap
222 }, _defineProperty(_classnames3, fontSizeClass, fontSizeClass), _defineProperty(_classnames3, textClass, textClass), _defineProperty(_classnames3, backgroundClass, backgroundClass), _classnames3));
223 var styles = {
224 backgroundColor: backgroundClass ? undefined : customBackgroundColor,
225 color: textClass ? undefined : customTextColor,
226 fontSize: fontSizeClass ? undefined : customFontSize,
227 textAlign: align
228 };
229 return createElement(RichText.Content, {
230 tagName: "p",
231 style: styles,
232 className: className ? className : undefined,
233 value: content,
234 dir: direction
235 });
236 }
237};
238//# sourceMappingURL=index.js.map
\No newline at end of file