1 | "use strict";
|
2 |
|
3 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4 |
|
5 | Object.defineProperty(exports, "__esModule", {
|
6 | value: true
|
7 | });
|
8 | exports.stripFirstImage = stripFirstImage;
|
9 | exports.settings = exports.name = void 0;
|
10 |
|
11 | var _element = require("@wordpress/element");
|
12 |
|
13 | var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
14 |
|
15 | var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
16 |
|
17 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
|
18 |
|
19 | var _classnames3 = _interopRequireDefault(require("classnames"));
|
20 |
|
21 | var _blob = require("@wordpress/blob");
|
22 |
|
23 | var _blocks = require("@wordpress/blocks");
|
24 |
|
25 | var _blockEditor = require("@wordpress/block-editor");
|
26 |
|
27 | var _i18n = require("@wordpress/i18n");
|
28 |
|
29 | var _edit = _interopRequireDefault(require("./edit"));
|
30 |
|
31 | var _icon = _interopRequireDefault(require("./icon"));
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 | var name = 'core/image';
|
45 | exports.name = name;
|
46 | var blockAttributes = {
|
47 | url: {
|
48 | type: 'string',
|
49 | source: 'attribute',
|
50 | selector: 'img',
|
51 | attribute: 'src'
|
52 | },
|
53 | alt: {
|
54 | type: 'string',
|
55 | source: 'attribute',
|
56 | selector: 'img',
|
57 | attribute: 'alt',
|
58 | default: ''
|
59 | },
|
60 | caption: {
|
61 | type: 'string',
|
62 | source: 'html',
|
63 | selector: 'figcaption'
|
64 | },
|
65 | href: {
|
66 | type: 'string',
|
67 | source: 'attribute',
|
68 | selector: 'figure > a',
|
69 | attribute: 'href'
|
70 | },
|
71 | rel: {
|
72 | type: 'string',
|
73 | source: 'attribute',
|
74 | selector: 'figure > a',
|
75 | attribute: 'rel'
|
76 | },
|
77 | linkClass: {
|
78 | type: 'string',
|
79 | source: 'attribute',
|
80 | selector: 'figure > a',
|
81 | attribute: 'class'
|
82 | },
|
83 | id: {
|
84 | type: 'number'
|
85 | },
|
86 | align: {
|
87 | type: 'string'
|
88 | },
|
89 | width: {
|
90 | type: 'number'
|
91 | },
|
92 | height: {
|
93 | type: 'number'
|
94 | },
|
95 | linkDestination: {
|
96 | type: 'string',
|
97 | default: 'none'
|
98 | },
|
99 | linkTarget: {
|
100 | type: 'string',
|
101 | source: 'attribute',
|
102 | selector: 'figure > a',
|
103 | attribute: 'target'
|
104 | }
|
105 | };
|
106 | var imageSchema = {
|
107 | img: {
|
108 | attributes: ['src', 'alt'],
|
109 | classes: ['alignleft', 'aligncenter', 'alignright', 'alignnone', /^wp-image-\d+$/]
|
110 | }
|
111 | };
|
112 | var schema = {
|
113 | figure: {
|
114 | require: ['img'],
|
115 | children: (0, _objectSpread2.default)({}, imageSchema, {
|
116 | a: {
|
117 | attributes: ['href', 'rel', 'target'],
|
118 | children: imageSchema
|
119 | },
|
120 | figcaption: {
|
121 | children: (0, _blocks.getPhrasingContentSchema)()
|
122 | }
|
123 | })
|
124 | }
|
125 | };
|
126 |
|
127 | function getFirstAnchorAttributeFormHTML(html, attributeName) {
|
128 | var _document$implementat = document.implementation.createHTMLDocument(''),
|
129 | body = _document$implementat.body;
|
130 |
|
131 | body.innerHTML = html;
|
132 | var firstElementChild = body.firstElementChild;
|
133 |
|
134 | if (firstElementChild && firstElementChild.nodeName === 'A') {
|
135 | return firstElementChild.getAttribute(attributeName) || undefined;
|
136 | }
|
137 | }
|
138 |
|
139 | function stripFirstImage(attributes, _ref) {
|
140 | var shortcode = _ref.shortcode;
|
141 |
|
142 | var _document$implementat2 = document.implementation.createHTMLDocument(''),
|
143 | body = _document$implementat2.body;
|
144 |
|
145 | body.innerHTML = shortcode.content;
|
146 | var nodeToRemove = body.querySelector('img');
|
147 |
|
148 | while (nodeToRemove && nodeToRemove.parentNode && nodeToRemove.parentNode !== body) {
|
149 | nodeToRemove = nodeToRemove.parentNode;
|
150 | }
|
151 |
|
152 | if (nodeToRemove) {
|
153 | nodeToRemove.parentNode.removeChild(nodeToRemove);
|
154 | }
|
155 |
|
156 | return body.innerHTML.trim();
|
157 | }
|
158 |
|
159 | var settings = {
|
160 | title: (0, _i18n.__)('Image'),
|
161 | description: (0, _i18n.__)('Insert an image to make a visual statement.'),
|
162 | icon: _icon.default,
|
163 | category: 'common',
|
164 | keywords: ['img',
|
165 | (0, _i18n.__)('photo')],
|
166 | attributes: blockAttributes,
|
167 | transforms: {
|
168 | from: [{
|
169 | type: 'raw',
|
170 | isMatch: function isMatch(node) {
|
171 | return node.nodeName === 'FIGURE' && !!node.querySelector('img');
|
172 | },
|
173 | schema: schema,
|
174 | transform: function transform(node) {
|
175 |
|
176 |
|
177 | var className = node.className + ' ' + node.querySelector('img').className;
|
178 | var alignMatches = /(?:^|\s)align(left|center|right)(?:$|\s)/.exec(className);
|
179 | var align = alignMatches ? alignMatches[1] : undefined;
|
180 | var idMatches = /(?:^|\s)wp-image-(\d+)(?:$|\s)/.exec(className);
|
181 | var id = idMatches ? Number(idMatches[1]) : undefined;
|
182 | var anchorElement = node.querySelector('a');
|
183 | var linkDestination = anchorElement && anchorElement.href ? 'custom' : undefined;
|
184 | var href = anchorElement && anchorElement.href ? anchorElement.href : undefined;
|
185 | var rel = anchorElement && anchorElement.rel ? anchorElement.rel : undefined;
|
186 | var linkClass = anchorElement && anchorElement.className ? anchorElement.className : undefined;
|
187 | var attributes = (0, _blocks.getBlockAttributes)('core/image', node.outerHTML, {
|
188 | align: align,
|
189 | id: id,
|
190 | linkDestination: linkDestination,
|
191 | href: href,
|
192 | rel: rel,
|
193 | linkClass: linkClass
|
194 | });
|
195 | return (0, _blocks.createBlock)('core/image', attributes);
|
196 | }
|
197 | }, {
|
198 | type: 'files',
|
199 | isMatch: function isMatch(files) {
|
200 | return files.length === 1 && files[0].type.indexOf('image/') === 0;
|
201 | },
|
202 | transform: function transform(files) {
|
203 | var file = files[0];
|
204 |
|
205 |
|
206 |
|
207 | var block = (0, _blocks.createBlock)('core/image', {
|
208 | url: (0, _blob.createBlobURL)(file)
|
209 | });
|
210 | return block;
|
211 | }
|
212 | }, {
|
213 | type: 'shortcode',
|
214 | tag: 'caption',
|
215 | attributes: {
|
216 | url: {
|
217 | type: 'string',
|
218 | source: 'attribute',
|
219 | attribute: 'src',
|
220 | selector: 'img'
|
221 | },
|
222 | alt: {
|
223 | type: 'string',
|
224 | source: 'attribute',
|
225 | attribute: 'alt',
|
226 | selector: 'img'
|
227 | },
|
228 | caption: {
|
229 | shortcode: stripFirstImage
|
230 | },
|
231 | href: {
|
232 | shortcode: function shortcode(attributes, _ref2) {
|
233 | var _shortcode = _ref2.shortcode;
|
234 | return getFirstAnchorAttributeFormHTML(_shortcode.content, 'href');
|
235 | }
|
236 | },
|
237 | rel: {
|
238 | shortcode: function shortcode(attributes, _ref3) {
|
239 | var _shortcode2 = _ref3.shortcode;
|
240 | return getFirstAnchorAttributeFormHTML(_shortcode2.content, 'rel');
|
241 | }
|
242 | },
|
243 | linkClass: {
|
244 | shortcode: function shortcode(attributes, _ref4) {
|
245 | var _shortcode3 = _ref4.shortcode;
|
246 | return getFirstAnchorAttributeFormHTML(_shortcode3.content, 'class');
|
247 | }
|
248 | },
|
249 | id: {
|
250 | type: 'number',
|
251 | shortcode: function shortcode(_ref5) {
|
252 | var id = _ref5.named.id;
|
253 |
|
254 | if (!id) {
|
255 | return;
|
256 | }
|
257 |
|
258 | return parseInt(id.replace('attachment_', ''), 10);
|
259 | }
|
260 | },
|
261 | align: {
|
262 | type: 'string',
|
263 | shortcode: function shortcode(_ref6) {
|
264 | var _ref6$named$align = _ref6.named.align,
|
265 | align = _ref6$named$align === void 0 ? 'alignnone' : _ref6$named$align;
|
266 | return align.replace('align', '');
|
267 | }
|
268 | }
|
269 | }
|
270 | }]
|
271 | },
|
272 | getEditWrapperProps: function getEditWrapperProps(attributes) {
|
273 | var align = attributes.align,
|
274 | width = attributes.width;
|
275 |
|
276 | if ('left' === align || 'center' === align || 'right' === align || 'wide' === align || 'full' === align) {
|
277 | return {
|
278 | 'data-align': align,
|
279 | 'data-resized': !!width
|
280 | };
|
281 | }
|
282 | },
|
283 | edit: _edit.default,
|
284 | save: function save(_ref7) {
|
285 | var _classnames;
|
286 |
|
287 | var attributes = _ref7.attributes;
|
288 | var url = attributes.url,
|
289 | alt = attributes.alt,
|
290 | caption = attributes.caption,
|
291 | align = attributes.align,
|
292 | href = attributes.href,
|
293 | rel = attributes.rel,
|
294 | linkClass = attributes.linkClass,
|
295 | width = attributes.width,
|
296 | height = attributes.height,
|
297 | id = attributes.id,
|
298 | linkTarget = attributes.linkTarget;
|
299 | var classes = (0, _classnames3.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "align".concat(align), align), (0, _defineProperty2.default)(_classnames, 'is-resized', width || height), _classnames));
|
300 | var image = (0, _element.createElement)("img", {
|
301 | src: url,
|
302 | alt: alt,
|
303 | className: id ? "wp-image-".concat(id) : null,
|
304 | width: width,
|
305 | height: height
|
306 | });
|
307 | var figure = (0, _element.createElement)(_element.Fragment, null, href ? (0, _element.createElement)("a", {
|
308 | className: linkClass,
|
309 | href: href,
|
310 | target: linkTarget,
|
311 | rel: rel
|
312 | }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
|
313 | tagName: "figcaption",
|
314 | value: caption
|
315 | }));
|
316 |
|
317 | if ('left' === align || 'right' === align || 'center' === align) {
|
318 | return (0, _element.createElement)("div", null, (0, _element.createElement)("figure", {
|
319 | className: classes
|
320 | }, figure));
|
321 | }
|
322 |
|
323 | return (0, _element.createElement)("figure", {
|
324 | className: classes
|
325 | }, figure);
|
326 | },
|
327 | deprecated: [{
|
328 | attributes: blockAttributes,
|
329 | save: function save(_ref8) {
|
330 | var _classnames2;
|
331 |
|
332 | var attributes = _ref8.attributes;
|
333 | var url = attributes.url,
|
334 | alt = attributes.alt,
|
335 | caption = attributes.caption,
|
336 | align = attributes.align,
|
337 | href = attributes.href,
|
338 | width = attributes.width,
|
339 | height = attributes.height,
|
340 | id = attributes.id;
|
341 | var classes = (0, _classnames3.default)((_classnames2 = {}, (0, _defineProperty2.default)(_classnames2, "align".concat(align), align), (0, _defineProperty2.default)(_classnames2, 'is-resized', width || height), _classnames2));
|
342 | var image = (0, _element.createElement)("img", {
|
343 | src: url,
|
344 | alt: alt,
|
345 | className: id ? "wp-image-".concat(id) : null,
|
346 | width: width,
|
347 | height: height
|
348 | });
|
349 | return (0, _element.createElement)("figure", {
|
350 | className: classes
|
351 | }, href ? (0, _element.createElement)("a", {
|
352 | href: href
|
353 | }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
|
354 | tagName: "figcaption",
|
355 | value: caption
|
356 | }));
|
357 | }
|
358 | }, {
|
359 | attributes: blockAttributes,
|
360 | save: function save(_ref9) {
|
361 | var attributes = _ref9.attributes;
|
362 | var url = attributes.url,
|
363 | alt = attributes.alt,
|
364 | caption = attributes.caption,
|
365 | align = attributes.align,
|
366 | href = attributes.href,
|
367 | width = attributes.width,
|
368 | height = attributes.height,
|
369 | id = attributes.id;
|
370 | var image = (0, _element.createElement)("img", {
|
371 | src: url,
|
372 | alt: alt,
|
373 | className: id ? "wp-image-".concat(id) : null,
|
374 | width: width,
|
375 | height: height
|
376 | });
|
377 | return (0, _element.createElement)("figure", {
|
378 | className: align ? "align".concat(align) : null
|
379 | }, href ? (0, _element.createElement)("a", {
|
380 | href: href
|
381 | }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
|
382 | tagName: "figcaption",
|
383 | value: caption
|
384 | }));
|
385 | }
|
386 | }, {
|
387 | attributes: blockAttributes,
|
388 | save: function save(_ref10) {
|
389 | var attributes = _ref10.attributes;
|
390 | var url = attributes.url,
|
391 | alt = attributes.alt,
|
392 | caption = attributes.caption,
|
393 | align = attributes.align,
|
394 | href = attributes.href,
|
395 | width = attributes.width,
|
396 | height = attributes.height;
|
397 | var extraImageProps = width || height ? {
|
398 | width: width,
|
399 | height: height
|
400 | } : {};
|
401 | var image = (0, _element.createElement)("img", (0, _extends2.default)({
|
402 | src: url,
|
403 | alt: alt
|
404 | }, extraImageProps));
|
405 | var figureStyle = {};
|
406 |
|
407 | if (width) {
|
408 | figureStyle = {
|
409 | width: width
|
410 | };
|
411 | } else if (align === 'left' || align === 'right') {
|
412 | figureStyle = {
|
413 | maxWidth: '50%'
|
414 | };
|
415 | }
|
416 |
|
417 | return (0, _element.createElement)("figure", {
|
418 | className: align ? "align".concat(align) : null,
|
419 | style: figureStyle
|
420 | }, href ? (0, _element.createElement)("a", {
|
421 | href: href
|
422 | }, image) : image, !_blockEditor.RichText.isEmpty(caption) && (0, _element.createElement)(_blockEditor.RichText.Content, {
|
423 | tagName: "figcaption",
|
424 | value: caption
|
425 | }));
|
426 | }
|
427 | }]
|
428 | };
|
429 | exports.settings = settings;
|
430 |
|
\ | No newline at end of file |