|
1
|
|
|
<?php |
|
2
|
|
|
/** |
|
3
|
|
|
* Slideshow Block. |
|
4
|
|
|
* |
|
5
|
|
|
* @since 7.1.0 |
|
6
|
|
|
* |
|
7
|
|
|
* @package Jetpack |
|
8
|
|
|
*/ |
|
9
|
|
|
|
|
10
|
|
|
namespace Automattic\Jetpack\Extensions\Slideshow; |
|
11
|
|
|
|
|
12
|
|
|
use Jetpack_AMP_Support; |
|
13
|
|
|
use Jetpack_Gutenberg; |
|
14
|
|
|
|
|
15
|
|
|
const FEATURE_NAME = 'slideshow'; |
|
16
|
|
|
const BLOCK_NAME = 'jetpack/' . FEATURE_NAME; |
|
17
|
|
|
|
|
18
|
|
|
/** |
|
19
|
|
|
* Registers the block for use in Gutenberg |
|
20
|
|
|
* This is done via an action so that we can disable |
|
21
|
|
|
* registration if we need to. |
|
22
|
|
|
*/ |
|
23
|
|
|
function register_block() { |
|
24
|
|
|
jetpack_register_block( |
|
25
|
|
|
BLOCK_NAME, |
|
26
|
|
|
array( 'render_callback' => __NAMESPACE__ . '\load_assets' ) |
|
27
|
|
|
); |
|
28
|
|
|
} |
|
29
|
|
|
add_action( 'init', __NAMESPACE__ . '\register_block' ); |
|
30
|
|
|
|
|
31
|
|
|
/** |
|
32
|
|
|
* Slideshow block registration/dependency declaration. |
|
33
|
|
|
* |
|
34
|
|
|
* @param array $attr Array containing the slideshow block attributes. |
|
35
|
|
|
* @param string $content String containing the slideshow block content. |
|
36
|
|
|
* |
|
37
|
|
|
* @return string |
|
38
|
|
|
*/ |
|
39
|
|
View Code Duplication |
function load_assets( $attr, $content ) { |
|
|
|
|
|
|
40
|
|
|
Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME ); |
|
41
|
|
|
if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) { |
|
42
|
|
|
return render_amp( $attr ); |
|
43
|
|
|
} |
|
44
|
|
|
return $content; |
|
45
|
|
|
} |
|
46
|
|
|
|
|
47
|
|
|
/** |
|
48
|
|
|
* Render slideshow block for AMP |
|
49
|
|
|
* |
|
50
|
|
|
* @param array $attr Array containing the slideshow block attributes. |
|
51
|
|
|
* |
|
52
|
|
|
* @return string |
|
53
|
|
|
*/ |
|
54
|
|
|
function render_amp( $attr ) { |
|
55
|
|
|
static $wp_block_jetpack_slideshow_id = 0; |
|
56
|
|
|
$wp_block_jetpack_slideshow_id++; |
|
57
|
|
|
|
|
58
|
|
|
$ids = empty( $attr['ids'] ) ? array() : $attr['ids']; |
|
59
|
|
|
$autoplay = empty( $attr['autoplay'] ) ? false : true; |
|
60
|
|
|
$extras = array( |
|
61
|
|
|
'wp-amp-block', |
|
62
|
|
|
$autoplay ? 'wp-block-jetpack-slideshow__autoplay' : null, |
|
63
|
|
|
$autoplay ? 'wp-block-jetpack-slideshow__autoplay-playing' : null, |
|
64
|
|
|
); |
|
65
|
|
|
$classes = Jetpack_Gutenberg::block_classes( FEATURE_NAME, $attr, $extras ); |
|
66
|
|
|
|
|
67
|
|
|
return sprintf( |
|
68
|
|
|
'<div class="%1$s" id="wp-block-jetpack-slideshow__%2$d"><div class="wp-block-jetpack-slideshow_container swiper-container">%3$s%4$s%5$s</div></div>', |
|
69
|
|
|
esc_attr( $classes ), |
|
70
|
|
|
absint( $wp_block_jetpack_slideshow_id ), |
|
71
|
|
|
amp_carousel( $attr, $wp_block_jetpack_slideshow_id ), |
|
72
|
|
|
$autoplay ? autoplay_ui( $wp_block_jetpack_slideshow_id ) : '', |
|
73
|
|
|
bullets( $ids, $wp_block_jetpack_slideshow_id ) |
|
74
|
|
|
); |
|
75
|
|
|
} |
|
76
|
|
|
|
|
77
|
|
|
/** |
|
78
|
|
|
* Generate amp-carousel markup |
|
79
|
|
|
* |
|
80
|
|
|
* @param array $attr Array of block attributes. |
|
81
|
|
|
* @param int $block_ordinal The ordinal number of the block, used in unique ID. |
|
82
|
|
|
* |
|
83
|
|
|
* @return string amp-carousel markup. |
|
84
|
|
|
*/ |
|
85
|
|
|
function amp_carousel( $attr, $block_ordinal ) { |
|
86
|
|
|
$ids = empty( $attr['ids'] ) ? array() : $attr['ids']; |
|
87
|
|
|
$first_image = wp_get_attachment_metadata( $ids[0] ); |
|
88
|
|
|
$delay = empty( $attr['delay'] ) ? 3 : absint( $attr['delay'] ); |
|
89
|
|
|
$autoplay = empty( $attr['autoplay'] ) ? false : $attr['autoplay']; |
|
90
|
|
|
$width = empty( $first_image['width'] ) ? 800 : $first_image['width']; |
|
91
|
|
|
$height = empty( $first_image['height'] ) ? 600 : $first_image['height']; |
|
92
|
|
|
return sprintf( |
|
93
|
|
|
'<amp-carousel width="%1$d" height="%2$d" layout="responsive" type="slides" data-next-button-aria-label="%3$s" data-prev-button-aria-label="%4$s" controls loop %5$s id="wp-block-jetpack-slideshow__amp-carousel__%6$s" on="slideChange:wp-block-jetpack-slideshow__amp-pagination__%6$s.toggle(index=event.index, value=true)">%7$s</amp-carousel>', |
|
94
|
|
|
esc_attr( $width ), |
|
95
|
|
|
esc_attr( $height ), |
|
96
|
|
|
esc_attr__( 'Next Slide', 'jetpack' ), |
|
97
|
|
|
esc_attr__( 'Previous Slide', 'jetpack' ), |
|
98
|
|
|
$autoplay ? 'autoplay delay=' . esc_attr( $delay * 1000 ) : '', |
|
99
|
|
|
absint( $block_ordinal ), |
|
100
|
|
|
implode( '', slides( $ids, $width, $height ) ) |
|
101
|
|
|
); |
|
102
|
|
|
} |
|
103
|
|
|
|
|
104
|
|
|
/** |
|
105
|
|
|
* Generate array of slides markup |
|
106
|
|
|
* |
|
107
|
|
|
* @param array $ids Array of image ids. |
|
108
|
|
|
* @param int $width Width of the container. |
|
109
|
|
|
* @param int $height Height of the container. |
|
110
|
|
|
* |
|
111
|
|
|
* @return array Array of slides markup. |
|
112
|
|
|
*/ |
|
113
|
|
|
function slides( $ids = array(), $width = 400, $height = 300 ) { |
|
114
|
|
|
return array_map( |
|
115
|
|
|
function( $id ) use ( $width, $height ) { |
|
116
|
|
|
$caption = wp_get_attachment_caption( $id ); |
|
117
|
|
|
$figcaption = $caption ? sprintf( |
|
118
|
|
|
'<figcaption class="wp-block-jetpack-slideshow_caption gallery-caption">%s</figcaption>', |
|
119
|
|
|
wp_kses_post( $caption ) |
|
120
|
|
|
) : ''; |
|
121
|
|
|
$image = wp_get_attachment_image( |
|
122
|
|
|
$id, |
|
123
|
|
|
array( $width, $height ), |
|
124
|
|
|
false, |
|
125
|
|
|
array( |
|
126
|
|
|
'class' => 'wp-block-jetpack-slideshow_image', |
|
127
|
|
|
'object-fit' => 'contain', |
|
128
|
|
|
) |
|
129
|
|
|
); |
|
130
|
|
|
return sprintf( |
|
131
|
|
|
'<div class="wp-block-jetpack-slideshow_slide"><figure>%s%s</figure></div>', |
|
132
|
|
|
$image, |
|
133
|
|
|
$figcaption |
|
134
|
|
|
); |
|
135
|
|
|
}, |
|
136
|
|
|
$ids |
|
137
|
|
|
); |
|
138
|
|
|
} |
|
139
|
|
|
|
|
140
|
|
|
/** |
|
141
|
|
|
* Generate array of bullets markup |
|
142
|
|
|
* |
|
143
|
|
|
* @param array $ids Array of image ids. |
|
144
|
|
|
* @param int $block_ordinal The ordinal number of the block, used in unique ID. |
|
145
|
|
|
* |
|
146
|
|
|
* @return array Array of bullets markup. |
|
147
|
|
|
*/ |
|
148
|
|
|
function bullets( $ids = array(), $block_ordinal = 0 ) { |
|
149
|
|
|
$buttons = array_map( |
|
150
|
|
|
function( $index ) { |
|
151
|
|
|
$aria_label = sprintf( |
|
152
|
|
|
/* translators: %d: Slide number. */ |
|
153
|
|
|
__( 'Go to slide %d', 'jetpack' ), |
|
154
|
|
|
absint( $index + 1 ) |
|
155
|
|
|
); |
|
156
|
|
|
return sprintf( |
|
157
|
|
|
'<button option="%d" class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="%s" %s></button>', |
|
158
|
|
|
absint( $index ), |
|
159
|
|
|
esc_attr( $aria_label ), |
|
160
|
|
|
0 === $index ? 'selected' : '' |
|
161
|
|
|
); |
|
162
|
|
|
}, |
|
163
|
|
|
array_keys( $ids ) |
|
164
|
|
|
); |
|
165
|
|
|
|
|
166
|
|
|
return sprintf( |
|
167
|
|
|
'<amp-selector id="wp-block-jetpack-slideshow__amp-pagination__%1$d" class="wp-block-jetpack-slideshow_pagination swiper-pagination swiper-pagination-bullets amp-pagination" on="select:wp-block-jetpack-slideshow__amp-carousel__%1$d.goToSlide(index=event.targetOption)" layout="container">%2$s</amp-selector>', |
|
168
|
|
|
absint( $block_ordinal ), |
|
169
|
|
|
implode( '', $buttons ) |
|
170
|
|
|
); |
|
171
|
|
|
} |
|
172
|
|
|
|
|
173
|
|
|
/** |
|
174
|
|
|
* Generate autoplay play/pause UI. |
|
175
|
|
|
* |
|
176
|
|
|
* @param int $block_ordinal The ordinal number of the block, used in unique ID. |
|
177
|
|
|
* |
|
178
|
|
|
* @return string Autoplay UI markup. |
|
179
|
|
|
*/ |
|
180
|
|
|
function autoplay_ui( $block_ordinal = 0 ) { |
|
181
|
|
|
$block_id = sprintf( |
|
182
|
|
|
'wp-block-jetpack-slideshow__%d', |
|
183
|
|
|
absint( $block_ordinal ) |
|
184
|
|
|
); |
|
185
|
|
|
$amp_carousel_id = sprintf( |
|
186
|
|
|
'wp-block-jetpack-slideshow__amp-carousel__%d', |
|
187
|
|
|
absint( $block_ordinal ) |
|
188
|
|
|
); |
|
189
|
|
|
$autoplay_pause = sprintf( |
|
190
|
|
|
'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-pause" role="button" on="tap:%s.toggleAutoplay(toggleOn=false),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=false)"></a>', |
|
191
|
|
|
esc_attr__( 'Pause Slideshow', 'jetpack' ), |
|
192
|
|
|
esc_attr( $amp_carousel_id ), |
|
193
|
|
|
esc_attr( $block_id ) |
|
194
|
|
|
); |
|
195
|
|
|
$autoplay_play = sprintf( |
|
196
|
|
|
'<a aria-label="%s" class="wp-block-jetpack-slideshow_button-play" role="button" on="tap:%s.toggleAutoplay(toggleOn=true),%s.toggleClass(class=wp-block-jetpack-slideshow__autoplay-playing,force=true)"></a>', |
|
197
|
|
|
esc_attr__( 'Play Slideshow', 'jetpack' ), |
|
198
|
|
|
esc_attr( $amp_carousel_id ), |
|
199
|
|
|
esc_attr( $block_id ) |
|
200
|
|
|
); |
|
201
|
|
|
return $autoplay_pause . $autoplay_play; |
|
202
|
|
|
} |
|
203
|
|
|
|
Automattic /
jetpack
Duplicated code is one of the most pungent code smells. If you need to duplicate the same code in three or more different places, we strongly encourage you to look into extracting the code into a single class or operation.
You can also find more detailed suggestions in the “Code” section of your repository.