1 | "use strict";
|
2 |
|
3 | var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
|
4 |
|
5 | var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
6 |
|
7 | Object.defineProperty(exports, "__esModule", {
|
8 | value: true
|
9 | });
|
10 | exports.settings = exports.name = void 0;
|
11 |
|
12 | var _element = require("@wordpress/element");
|
13 |
|
14 | var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
|
15 |
|
16 | var _lodash = require("lodash");
|
17 |
|
18 | var _i18n = require("@wordpress/i18n");
|
19 |
|
20 | var _blocks = require("@wordpress/blocks");
|
21 |
|
22 | var _blockEditor = require("@wordpress/block-editor");
|
23 |
|
24 | var _editor = require("@wordpress/editor");
|
25 |
|
26 | var _blob = require("@wordpress/blob");
|
27 |
|
28 | var _edit = _interopRequireWildcard(require("./edit"));
|
29 |
|
30 | var _icon = _interopRequireDefault(require("./icon"));
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 | var blockAttributes = {
|
44 | images: {
|
45 | type: 'array',
|
46 | default: [],
|
47 | source: 'query',
|
48 | selector: 'ul.wp-block-gallery .blocks-gallery-item',
|
49 | query: {
|
50 | url: {
|
51 | source: 'attribute',
|
52 | selector: 'img',
|
53 | attribute: 'src'
|
54 | },
|
55 | link: {
|
56 | source: 'attribute',
|
57 | selector: 'img',
|
58 | attribute: 'data-link'
|
59 | },
|
60 | alt: {
|
61 | source: 'attribute',
|
62 | selector: 'img',
|
63 | attribute: 'alt',
|
64 | default: ''
|
65 | },
|
66 | id: {
|
67 | source: 'attribute',
|
68 | selector: 'img',
|
69 | attribute: 'data-id'
|
70 | },
|
71 | caption: {
|
72 | type: 'string',
|
73 | source: 'html',
|
74 | selector: 'figcaption'
|
75 | }
|
76 | }
|
77 | },
|
78 | ids: {
|
79 | type: 'array',
|
80 | default: []
|
81 | },
|
82 | columns: {
|
83 | type: 'number'
|
84 | },
|
85 | imageCrop: {
|
86 | type: 'boolean',
|
87 | default: true
|
88 | },
|
89 | linkTo: {
|
90 | type: 'string',
|
91 | default: 'none'
|
92 | }
|
93 | };
|
94 | var name = 'core/gallery';
|
95 | exports.name = name;
|
96 |
|
97 | var parseShortcodeIds = function parseShortcodeIds(ids) {
|
98 | if (!ids) {
|
99 | return [];
|
100 | }
|
101 |
|
102 | return ids.split(',').map(function (id) {
|
103 | return parseInt(id, 10);
|
104 | });
|
105 | };
|
106 |
|
107 | var settings = {
|
108 | title: (0, _i18n.__)('Gallery'),
|
109 | description: (0, _i18n.__)('Display multiple images in a rich gallery.'),
|
110 | icon: _icon.default,
|
111 | category: 'common',
|
112 | keywords: [(0, _i18n.__)('images'), (0, _i18n.__)('photos')],
|
113 | attributes: blockAttributes,
|
114 | supports: {
|
115 | align: true
|
116 | },
|
117 | transforms: {
|
118 | from: [{
|
119 | type: 'block',
|
120 | isMultiBlock: true,
|
121 | blocks: ['core/image'],
|
122 | transform: function transform(attributes) {
|
123 |
|
124 | var align = attributes[0].align;
|
125 |
|
126 | align = (0, _lodash.every)(attributes, ['align', align]) ? align : undefined;
|
127 | var validImages = (0, _lodash.filter)(attributes, function (_ref) {
|
128 | var id = _ref.id,
|
129 | url = _ref.url;
|
130 | return id && url;
|
131 | });
|
132 | return (0, _blocks.createBlock)('core/gallery', {
|
133 | images: validImages.map(function (_ref2) {
|
134 | var id = _ref2.id,
|
135 | url = _ref2.url,
|
136 | alt = _ref2.alt,
|
137 | caption = _ref2.caption;
|
138 | return {
|
139 | id: id,
|
140 | url: url,
|
141 | alt: alt,
|
142 | caption: caption
|
143 | };
|
144 | }),
|
145 | ids: validImages.map(function (_ref3) {
|
146 | var id = _ref3.id;
|
147 | return id;
|
148 | }),
|
149 | align: align
|
150 | });
|
151 | }
|
152 | }, {
|
153 | type: 'shortcode',
|
154 | tag: 'gallery',
|
155 | attributes: {
|
156 | images: {
|
157 | type: 'array',
|
158 | shortcode: function shortcode(_ref4) {
|
159 | var ids = _ref4.named.ids;
|
160 | return parseShortcodeIds(ids).map(function (id) {
|
161 | return {
|
162 | id: id
|
163 | };
|
164 | });
|
165 | }
|
166 | },
|
167 | ids: {
|
168 | type: 'array',
|
169 | shortcode: function shortcode(_ref5) {
|
170 | var ids = _ref5.named.ids;
|
171 | return parseShortcodeIds(ids);
|
172 | }
|
173 | },
|
174 | columns: {
|
175 | type: 'number',
|
176 | shortcode: function shortcode(_ref6) {
|
177 | var _ref6$named$columns = _ref6.named.columns,
|
178 | columns = _ref6$named$columns === void 0 ? '3' : _ref6$named$columns;
|
179 | return parseInt(columns, 10);
|
180 | }
|
181 | },
|
182 | linkTo: {
|
183 | type: 'string',
|
184 | shortcode: function shortcode(_ref7) {
|
185 | var _ref7$named$link = _ref7.named.link,
|
186 | link = _ref7$named$link === void 0 ? 'attachment' : _ref7$named$link;
|
187 | return link === 'file' ? 'media' : link;
|
188 | }
|
189 | }
|
190 | }
|
191 | }, {
|
192 |
|
193 | type: 'files',
|
194 | isMatch: function isMatch(files) {
|
195 | return files.length !== 1 && (0, _lodash.every)(files, function (file) {
|
196 | return file.type.indexOf('image/') === 0;
|
197 | });
|
198 | },
|
199 | transform: function transform(files, onChange) {
|
200 | var block = (0, _blocks.createBlock)('core/gallery', {
|
201 | images: files.map(function (file) {
|
202 | return (0, _edit.pickRelevantMediaFiles)({
|
203 | url: (0, _blob.createBlobURL)(file)
|
204 | });
|
205 | })
|
206 | });
|
207 | (0, _editor.mediaUpload)({
|
208 | filesList: files,
|
209 | onFileChange: function onFileChange(images) {
|
210 | var imagesAttr = images.map(_edit.pickRelevantMediaFiles);
|
211 | onChange(block.clientId, {
|
212 | ids: (0, _lodash.map)(imagesAttr, 'id'),
|
213 | images: imagesAttr
|
214 | });
|
215 | },
|
216 | allowedTypes: ['image']
|
217 | });
|
218 | return block;
|
219 | }
|
220 | }],
|
221 | to: [{
|
222 | type: 'block',
|
223 | blocks: ['core/image'],
|
224 | transform: function transform(_ref8) {
|
225 | var images = _ref8.images,
|
226 | align = _ref8.align;
|
227 |
|
228 | if (images.length > 0) {
|
229 | return images.map(function (_ref9) {
|
230 | var id = _ref9.id,
|
231 | url = _ref9.url,
|
232 | alt = _ref9.alt,
|
233 | caption = _ref9.caption;
|
234 | return (0, _blocks.createBlock)('core/image', {
|
235 | id: id,
|
236 | url: url,
|
237 | alt: alt,
|
238 | caption: caption,
|
239 | align: align
|
240 | });
|
241 | });
|
242 | }
|
243 |
|
244 | return (0, _blocks.createBlock)('core/image', {
|
245 | align: align
|
246 | });
|
247 | }
|
248 | }]
|
249 | },
|
250 | edit: _edit.default,
|
251 | save: function save(_ref10) {
|
252 | var attributes = _ref10.attributes;
|
253 | var images = attributes.images,
|
254 | _attributes$columns = attributes.columns,
|
255 | columns = _attributes$columns === void 0 ? (0, _edit.defaultColumnsNumber)(attributes) : _attributes$columns,
|
256 | imageCrop = attributes.imageCrop,
|
257 | linkTo = attributes.linkTo;
|
258 | return (0, _element.createElement)("ul", {
|
259 | className: "columns-".concat(columns, " ").concat(imageCrop ? 'is-cropped' : '')
|
260 | }, images.map(function (image) {
|
261 | var href;
|
262 |
|
263 | switch (linkTo) {
|
264 | case 'media':
|
265 | href = image.url;
|
266 | break;
|
267 |
|
268 | case 'attachment':
|
269 | href = image.link;
|
270 | break;
|
271 | }
|
272 |
|
273 | var img = (0, _element.createElement)("img", {
|
274 | src: image.url,
|
275 | alt: image.alt,
|
276 | "data-id": image.id,
|
277 | "data-link": image.link,
|
278 | className: image.id ? "wp-image-".concat(image.id) : null
|
279 | });
|
280 | return (0, _element.createElement)("li", {
|
281 | key: image.id || image.url,
|
282 | className: "blocks-gallery-item"
|
283 | }, (0, _element.createElement)("figure", null, href ? (0, _element.createElement)("a", {
|
284 | href: href
|
285 | }, img) : img, image.caption && image.caption.length > 0 && (0, _element.createElement)(_blockEditor.RichText.Content, {
|
286 | tagName: "figcaption",
|
287 | value: image.caption
|
288 | })));
|
289 | }));
|
290 | },
|
291 | deprecated: [{
|
292 | attributes: blockAttributes,
|
293 | isEligible: function isEligible(_ref11) {
|
294 | var images = _ref11.images,
|
295 | ids = _ref11.ids;
|
296 | return images && images.length > 0 && (!ids && images || ids && images && ids.length !== images.length || (0, _lodash.some)(images, function (id, index) {
|
297 | if (!id && ids[index] !== null) {
|
298 | return true;
|
299 | }
|
300 |
|
301 | return parseInt(id, 10) !== ids[index];
|
302 | }));
|
303 | },
|
304 | migrate: function migrate(attributes) {
|
305 | return (0, _objectSpread2.default)({}, attributes, {
|
306 | ids: (0, _lodash.map)(attributes.images, function (_ref12) {
|
307 | var id = _ref12.id;
|
308 |
|
309 | if (!id) {
|
310 | return null;
|
311 | }
|
312 |
|
313 | return parseInt(id, 10);
|
314 | })
|
315 | });
|
316 | },
|
317 | save: function save(_ref13) {
|
318 | var attributes = _ref13.attributes;
|
319 | var images = attributes.images,
|
320 | _attributes$columns2 = attributes.columns,
|
321 | columns = _attributes$columns2 === void 0 ? (0, _edit.defaultColumnsNumber)(attributes) : _attributes$columns2,
|
322 | imageCrop = attributes.imageCrop,
|
323 | linkTo = attributes.linkTo;
|
324 | return (0, _element.createElement)("ul", {
|
325 | className: "columns-".concat(columns, " ").concat(imageCrop ? 'is-cropped' : '')
|
326 | }, images.map(function (image) {
|
327 | var href;
|
328 |
|
329 | switch (linkTo) {
|
330 | case 'media':
|
331 | href = image.url;
|
332 | break;
|
333 |
|
334 | case 'attachment':
|
335 | href = image.link;
|
336 | break;
|
337 | }
|
338 |
|
339 | var img = (0, _element.createElement)("img", {
|
340 | src: image.url,
|
341 | alt: image.alt,
|
342 | "data-id": image.id,
|
343 | "data-link": image.link,
|
344 | className: image.id ? "wp-image-".concat(image.id) : null
|
345 | });
|
346 | return (0, _element.createElement)("li", {
|
347 | key: image.id || image.url,
|
348 | className: "blocks-gallery-item"
|
349 | }, (0, _element.createElement)("figure", null, href ? (0, _element.createElement)("a", {
|
350 | href: href
|
351 | }, img) : img, image.caption && image.caption.length > 0 && (0, _element.createElement)(_blockEditor.RichText.Content, {
|
352 | tagName: "figcaption",
|
353 | value: image.caption
|
354 | })));
|
355 | }));
|
356 | }
|
357 | }, {
|
358 | attributes: blockAttributes,
|
359 | save: function save(_ref14) {
|
360 | var attributes = _ref14.attributes;
|
361 | var images = attributes.images,
|
362 | _attributes$columns3 = attributes.columns,
|
363 | columns = _attributes$columns3 === void 0 ? (0, _edit.defaultColumnsNumber)(attributes) : _attributes$columns3,
|
364 | imageCrop = attributes.imageCrop,
|
365 | linkTo = attributes.linkTo;
|
366 | return (0, _element.createElement)("ul", {
|
367 | className: "columns-".concat(columns, " ").concat(imageCrop ? 'is-cropped' : '')
|
368 | }, images.map(function (image) {
|
369 | var href;
|
370 |
|
371 | switch (linkTo) {
|
372 | case 'media':
|
373 | href = image.url;
|
374 | break;
|
375 |
|
376 | case 'attachment':
|
377 | href = image.link;
|
378 | break;
|
379 | }
|
380 |
|
381 | var img = (0, _element.createElement)("img", {
|
382 | src: image.url,
|
383 | alt: image.alt,
|
384 | "data-id": image.id,
|
385 | "data-link": image.link
|
386 | });
|
387 | return (0, _element.createElement)("li", {
|
388 | key: image.id || image.url,
|
389 | className: "blocks-gallery-item"
|
390 | }, (0, _element.createElement)("figure", null, href ? (0, _element.createElement)("a", {
|
391 | href: href
|
392 | }, img) : img, image.caption && image.caption.length > 0 && (0, _element.createElement)(_blockEditor.RichText.Content, {
|
393 | tagName: "figcaption",
|
394 | value: image.caption
|
395 | })));
|
396 | }));
|
397 | }
|
398 | }, {
|
399 | attributes: (0, _objectSpread2.default)({}, blockAttributes, {
|
400 | images: (0, _objectSpread2.default)({}, blockAttributes.images, {
|
401 | selector: 'div.wp-block-gallery figure.blocks-gallery-image img'
|
402 | }),
|
403 | align: {
|
404 | type: 'string',
|
405 | default: 'none'
|
406 | }
|
407 | }),
|
408 | save: function save(_ref15) {
|
409 | var attributes = _ref15.attributes;
|
410 | var images = attributes.images,
|
411 | _attributes$columns4 = attributes.columns,
|
412 | columns = _attributes$columns4 === void 0 ? (0, _edit.defaultColumnsNumber)(attributes) : _attributes$columns4,
|
413 | align = attributes.align,
|
414 | imageCrop = attributes.imageCrop,
|
415 | linkTo = attributes.linkTo;
|
416 | return (0, _element.createElement)("div", {
|
417 | className: "align".concat(align, " columns-").concat(columns, " ").concat(imageCrop ? 'is-cropped' : '')
|
418 | }, images.map(function (image) {
|
419 | var href;
|
420 |
|
421 | switch (linkTo) {
|
422 | case 'media':
|
423 | href = image.url;
|
424 | break;
|
425 |
|
426 | case 'attachment':
|
427 | href = image.link;
|
428 | break;
|
429 | }
|
430 |
|
431 | var img = (0, _element.createElement)("img", {
|
432 | src: image.url,
|
433 | alt: image.alt,
|
434 | "data-id": image.id
|
435 | });
|
436 | return (0, _element.createElement)("figure", {
|
437 | key: image.id || image.url,
|
438 | className: "blocks-gallery-image"
|
439 | }, href ? (0, _element.createElement)("a", {
|
440 | href: href
|
441 | }, img) : img);
|
442 | }));
|
443 | }
|
444 | }]
|
445 | };
|
446 | exports.settings = settings;
|
447 |
|
\ | No newline at end of file |