1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
/**
* External dependencies
*/
import { __, _x } from '@wordpress/i18n';
import { Path, SVG } from '@wordpress/components';
/**
* Internal dependencies
*/
import edit from './edit';
import save from './save';
import transforms from './transforms';
export const icon = (
<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<Path d="M0 0h24v24H0z" fill="none" />
<Path d="M10 8v8l5-4-5-4zm9-5H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z" />
</SVG>
);
const attributes = {
align: {
default: 'center',
type: 'string',
},
autoplay: {
type: 'boolean',
default: false,
},
delay: {
type: 'number',
default: 3,
},
ids: {
default: [],
type: 'array',
},
images: {
type: 'array',
default: [],
source: 'query',
selector: '.swiper-slide',
query: {
alt: {
source: 'attribute',
selector: 'img',
attribute: 'alt',
default: '',
},
caption: {
type: 'string',
source: 'html',
selector: 'figcaption',
},
id: {
source: 'attribute',
selector: 'img',
attribute: 'data-id',
},
url: {
source: 'attribute',
selector: 'img',
attribute: 'src',
},
},
},
effect: {
type: 'string',
default: 'slide',
},
};
export const name = 'slideshow';
export const settings = {
title: __( 'Slideshow', 'jetpack' ),
category: 'jetpack',
keywords: [
_x( 'image', 'block search term', 'jetpack' ),
_x( 'gallery', 'block search term', 'jetpack' ),
_x( 'slider', 'block search term', 'jetpack' ),
],
description: __( 'Add an interactive slideshow.', 'jetpack' ),
attributes,
supports: {
align: [ 'center', 'wide', 'full' ],
html: false,
},
icon,
edit,
save,
transforms,
};
|