1 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
2 | import _objectSpread from "@babel/runtime/helpers/esm/objectSpread";
|
3 | import { createElement } from "@wordpress/element";
|
4 |
|
5 |
|
6 |
|
7 |
|
8 | import classnames from 'classnames';
|
9 | import { isFinite, omit } from 'lodash';
|
10 |
|
11 |
|
12 |
|
13 |
|
14 | import { __ } from '@wordpress/i18n';
|
15 | import { RawHTML } from '@wordpress/element';
|
16 | import { getColorClassName, getFontSizeClass, RichText } from '@wordpress/block-editor';
|
17 | import { getPhrasingContentSchema } from '@wordpress/blocks';
|
18 | import { Path, SVG } from '@wordpress/components';
|
19 |
|
20 |
|
21 |
|
22 |
|
23 | import edit from './edit';
|
24 | var supports = {
|
25 | className: false
|
26 | };
|
27 | var 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 | };
|
67 | export var name = 'core/paragraph';
|
68 | export 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 |
|
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 |
|
\ | No newline at end of file |