1
|
|
|
<?php |
2
|
|
|
/** |
3
|
|
|
* Story Block. |
4
|
|
|
* |
5
|
|
|
* @since 8.6.1 |
6
|
|
|
* |
7
|
|
|
* @package Jetpack |
8
|
|
|
*/ |
9
|
|
|
|
10
|
|
|
namespace Automattic\Jetpack\Extensions\Story; |
11
|
|
|
|
12
|
|
|
use Automattic\Jetpack\Blocks; |
13
|
|
|
use Jetpack_Gutenberg; |
14
|
|
|
|
15
|
|
|
const FEATURE_NAME = 'story'; |
16
|
|
|
const BLOCK_NAME = 'jetpack/' . FEATURE_NAME; |
17
|
|
|
|
18
|
|
|
const EMBED_SIZE = array( 180, 320 ); |
19
|
|
|
const CROP_UP_TO = 0.2; |
20
|
|
|
const MAX_BULLETS = 7; |
21
|
|
|
const IMAGE_BREAKPOINTS = '(max-width: 460px) 576w, (max-width: 614px) 768w, 120vw'; // 120vw to match the 20% CROP_UP_TO ratio |
22
|
|
|
|
23
|
|
|
/** |
24
|
|
|
* Registers the block for use in Gutenberg |
25
|
|
|
* This is done via an action so that we can disable |
26
|
|
|
* registration if we need to. |
27
|
|
|
*/ |
28
|
|
|
function register_block() { |
29
|
|
|
Blocks::jetpack_register_block( |
30
|
|
|
BLOCK_NAME, |
31
|
|
|
array( 'render_callback' => __NAMESPACE__ . '\render_block' ) |
32
|
|
|
); |
33
|
|
|
} |
34
|
|
|
add_action( 'init', __NAMESPACE__ . '\register_block' ); |
35
|
|
|
|
36
|
|
|
/** |
37
|
|
|
* Add missing `width`, `height`, `srcset` and `sizes` properties to images of the mediaFiles block attributes |
38
|
|
|
* |
39
|
|
|
* @param array $media_files List of media, each as an array containing the media attributes. |
40
|
|
|
* |
41
|
|
|
* @return array $media_files |
42
|
|
|
*/ |
43
|
|
|
function with_width_height_srcset_and_sizes( $media_files ) { |
44
|
|
|
return array_map( |
45
|
|
|
function ( $media_file ) { |
46
|
|
|
if ( ! isset( $media_file['id'] ) || ! empty( $media_file['srcset'] ) ) { |
47
|
|
|
return $media_file; |
48
|
|
|
} |
49
|
|
|
$attachment_id = $media_file['id']; |
50
|
|
|
if ( 'image' === $media_file['type'] ) { |
51
|
|
|
$image = wp_get_attachment_image_src( $attachment_id, EMBED_SIZE, false ); |
52
|
|
|
if ( ! $image ) { |
53
|
|
|
return $media_file; |
54
|
|
|
} |
55
|
|
|
list( $src, $width, $height ) = $image; |
56
|
|
|
$image_meta = wp_get_attachment_metadata( $attachment_id ); |
57
|
|
|
if ( ! is_array( $image_meta ) ) { |
58
|
|
|
return $media_file; |
59
|
|
|
} |
60
|
|
|
$size_array = array( absint( $width ), absint( $height ) ); |
61
|
|
|
return array_merge( |
62
|
|
|
$media_file, |
63
|
|
|
array( |
64
|
|
|
'width' => absint( $width ), |
65
|
|
|
'height' => absint( $height ), |
66
|
|
|
'srcset' => wp_calculate_image_srcset( $size_array, $src, $image_meta, $attachment_id ), |
67
|
|
|
'sizes' => IMAGE_BREAKPOINTS, |
68
|
|
|
'title' => get_the_title( $attachment_id ), |
69
|
|
|
'alt' => get_post_meta( $attachment_id, '_wp_attachment_image_alt', true ), |
70
|
|
|
'caption' => wp_get_attachment_caption( $attachment_id ), |
71
|
|
|
) |
72
|
|
|
); |
73
|
|
|
} else { |
74
|
|
|
$video_meta = wp_get_attachment_metadata( $attachment_id ); |
75
|
|
|
if ( ! isset( $video_meta['width'] ) || ! isset( $video_meta['width'] ) ) { |
76
|
|
|
return $media_file; |
77
|
|
|
} |
78
|
|
|
$url = ! empty( $video_meta['original']['url'] ) ? $video_meta['original']['url'] : $media_file['url']; |
79
|
|
|
$description = ! empty( $video_meta['videopress']['description'] ) ? $video_meta['videopress']['description'] : $media_file['alt']; |
80
|
|
|
return array_merge( |
81
|
|
|
$media_file, |
82
|
|
|
array( |
83
|
|
|
'width' => absint( $video_meta['width'] ), |
84
|
|
|
'height' => absint( $video_meta['height'] ), |
85
|
|
|
'alt' => $description, |
86
|
|
|
'url' => $url, |
87
|
|
|
'title' => get_the_title( $attachment_id ), |
88
|
|
|
'caption' => wp_get_attachment_caption( $attachment_id ), |
89
|
|
|
) |
90
|
|
|
); |
91
|
|
|
} |
92
|
|
|
}, |
93
|
|
|
$media_files |
94
|
|
|
); |
95
|
|
|
} |
96
|
|
|
|
97
|
|
|
/** |
98
|
|
|
* Render an image inside a slide |
99
|
|
|
* |
100
|
|
|
* @param array $media Image information. |
101
|
|
|
* |
102
|
|
|
* @return string |
103
|
|
|
*/ |
104
|
|
|
function render_image( $media ) { |
105
|
|
|
if ( empty( $media['id'] ) || empty( $media['url'] ) ) { |
106
|
|
|
return __( 'Error retrieving media', 'jetpack' ); |
107
|
|
|
} |
108
|
|
|
$image = wp_get_attachment_image_src( $media['id'], 'full', false ); |
109
|
|
|
$crop_class = ''; |
110
|
|
|
if ( $image ) { |
111
|
|
|
list( , $width, $height ) = $image; |
112
|
|
|
$crop_class = get_image_crop_class( $width, $height ); |
113
|
|
|
} |
114
|
|
|
// need to specify the size of the embed so it picks an image that is large enough for the `src` attribute |
115
|
|
|
// `sizes` is optimized for 1080x1920 (9:16) images |
116
|
|
|
// Note that the Story block does not have thumbnail support, it will load the right |
117
|
|
|
// image based on the viewport size only. |
118
|
|
|
return wp_get_attachment_image( |
119
|
|
|
$media['id'], |
120
|
|
|
EMBED_SIZE, |
121
|
|
|
false, |
122
|
|
|
array( |
123
|
|
|
'class' => sprintf( 'wp-story-image wp-image-%d %s', $media['id'], $crop_class ), |
124
|
|
|
'sizes' => IMAGE_BREAKPOINTS, |
125
|
|
|
'title' => get_the_title( $media['id'] ), |
126
|
|
|
) |
127
|
|
|
); |
128
|
|
|
} |
129
|
|
|
|
130
|
|
|
/** |
131
|
|
|
* Return the css crop class if image width and height requires it |
132
|
|
|
* |
133
|
|
|
* @param array $width Image width. |
134
|
|
|
* @param array $height Image height. |
135
|
|
|
* |
136
|
|
|
* @return string The CSS class which will display a cropped image |
137
|
|
|
*/ |
138
|
|
|
function get_image_crop_class( $width, $height ) { |
139
|
|
|
$crop_class = ''; |
140
|
|
|
$media_aspect_ratio = $width / $height; |
141
|
|
|
$target_aspect_ratio = EMBED_SIZE[0] / EMBED_SIZE[1]; |
142
|
|
|
if ( $media_aspect_ratio >= $target_aspect_ratio ) { |
143
|
|
|
// image wider than canvas. |
144
|
|
|
$media_too_wide_to_crop = $media_aspect_ratio > $target_aspect_ratio / ( 1 - CROP_UP_TO ); |
145
|
|
|
if ( ! $media_too_wide_to_crop ) { |
146
|
|
|
$crop_class = 'wp-story-crop-wide'; |
147
|
|
|
} |
148
|
|
|
} else { |
149
|
|
|
// image narrower than canvas. |
150
|
|
|
$media_too_narrow_to_crop = $media_aspect_ratio < $target_aspect_ratio * ( 1 - CROP_UP_TO ); |
151
|
|
|
if ( ! $media_too_narrow_to_crop ) { |
152
|
|
|
$crop_class = 'wp-story-crop-narrow'; |
153
|
|
|
} |
154
|
|
|
} |
155
|
|
|
return $crop_class; |
156
|
|
|
} |
157
|
|
|
|
158
|
|
|
/** |
159
|
|
|
* Render a video inside a slide |
160
|
|
|
* |
161
|
|
|
* @param array $media Video information. |
162
|
|
|
* |
163
|
|
|
* @return string |
164
|
|
|
*/ |
165
|
|
|
function render_video( $media ) { |
166
|
|
|
if ( empty( $media['id'] ) || empty( $media['mime'] ) || empty( $media['url'] ) ) { |
167
|
|
|
return __( 'Error retrieving media', 'jetpack' ); |
168
|
|
|
} |
169
|
|
|
|
170
|
|
|
$metadata = wp_get_attachment_metadata( $media['id'] ); |
171
|
|
|
|
172
|
|
|
if ( ! empty( $metadata ) && ! empty( $metadata['videopress'] ) ) { |
173
|
|
|
// Use poster image for VideoPress videos. |
174
|
|
|
$poster_url = $metadata['videopress']['poster']; |
175
|
|
|
$description = ! empty( $metadata['videopress']['description'] ) ? $metadata['videopress']['description'] : ''; |
176
|
|
|
$meta_width = ! empty( $metadata['videopress']['width'] ) ? $metadata['videopress']['width'] : ''; |
177
|
|
|
$meta_height = ! empty( $metadata['videopress']['height'] ) ? $metadata['videopress']['height'] : ''; |
178
|
|
|
} elseif ( ! empty( $metadata['thumb'] ) ) { |
179
|
|
|
// On WordPress.com, VideoPress videos have a 'thumb' property with the |
180
|
|
|
// poster image filename instead. |
181
|
|
|
$video_url = wp_get_attachment_url( $media['id'] ); |
182
|
|
|
$poster_url = str_replace( wp_basename( $video_url ), $metadata['thumb'], $video_url ); |
183
|
|
|
$description = ! empty( $media['alt'] ) ? $media['alt'] : ''; |
184
|
|
|
$meta_width = ! empty( $metadata['width'] ) ? $metadata['width'] : ''; |
185
|
|
|
$meta_height = ! empty( $metadata['height'] ) ? $metadata['height'] : ''; |
186
|
|
|
} |
187
|
|
|
|
188
|
|
|
if ( ! empty( $poster_url ) ) { |
189
|
|
|
return sprintf( |
190
|
|
|
'<img title="%1$s" alt="%2$s" class="%3$s" src="%4$s"%5$s%6$s>', |
191
|
|
|
esc_attr( get_the_title( $media['id'] ) ), |
192
|
|
|
esc_attr( $description ), |
|
|
|
|
193
|
|
|
'wp-block-jetpack-story_image wp-story-image ' . |
194
|
|
|
get_image_crop_class( $meta_width, $meta_height ), |
|
|
|
|
195
|
|
|
esc_attr( $poster_url ), |
196
|
|
|
! empty( $meta_width ) ? ' width="' . esc_attr( $meta_width ) . '"' : '', |
197
|
|
|
! empty( $meta_height ) ? ' height="' . esc_attr( $meta_height ) . '"' : '' |
198
|
|
|
); |
199
|
|
|
} |
200
|
|
|
|
201
|
|
|
return sprintf( |
202
|
|
|
'<video |
203
|
|
|
title="%1$s" |
204
|
|
|
type="%2$s" |
205
|
|
|
class="wp-story-video intrinsic-ignore wp-video-%3$s" |
206
|
|
|
data-id="%3$s" |
207
|
|
|
src="%4$s"> |
208
|
|
|
</video>', |
209
|
|
|
esc_attr( get_the_title( $media['id'] ) ), |
210
|
|
|
esc_attr( $media['mime'] ), |
211
|
|
|
$media['id'], |
212
|
|
|
esc_attr( $media['url'] ) |
213
|
|
|
); |
214
|
|
|
} |
215
|
|
|
|
216
|
|
|
/** |
217
|
|
|
* Render a slide |
218
|
|
|
* |
219
|
|
|
* @param array $media Media information. |
220
|
|
|
* @param array $index Index of the slide, first slide will be displayed by default, others hidden. |
221
|
|
|
* |
222
|
|
|
* @return string |
223
|
|
|
*/ |
224
|
|
|
function render_slide( $media, $index = 0 ) { |
225
|
|
|
$media_template = ''; |
226
|
|
|
$media_type = ! empty( $media['type'] ) ? $media['type'] : null; |
227
|
|
|
if ( ! $media_type ) { |
228
|
|
|
return ''; |
229
|
|
|
} |
230
|
|
|
switch ( $media_type ) { |
231
|
|
|
case 'image': |
232
|
|
|
$media_template = render_image( $media, $index ); |
233
|
|
|
break; |
234
|
|
|
case 'video': |
235
|
|
|
$media_template = render_video( $media, $index ); |
236
|
|
|
break; |
237
|
|
|
case 'file': |
238
|
|
|
// VideoPress videos can sometimes have type 'file', and mime 'video/videopress' or 'video/mp4'. |
239
|
|
|
if ( 'video' === substr( $media['mime'], 0, 5 ) ) { |
240
|
|
|
$media_template = render_video( $media, $index ); |
241
|
|
|
} |
242
|
|
|
break; |
243
|
|
|
} |
244
|
|
|
return sprintf( |
245
|
|
|
'<div class="wp-story-slide" style="display: %s;"> |
246
|
|
|
<figure>%s</figure> |
247
|
|
|
</div>', |
248
|
|
|
0 === $index ? 'block' : 'none', |
249
|
|
|
$media_template |
250
|
|
|
); |
251
|
|
|
} |
252
|
|
|
|
253
|
|
|
/** |
254
|
|
|
* Render the top right icon on top of the story embed |
255
|
|
|
* |
256
|
|
|
* @param array $settings The block settings. |
257
|
|
|
* |
258
|
|
|
* @return string |
259
|
|
|
*/ |
260
|
|
|
function render_top_right_icon( $settings ) { |
261
|
|
|
$show_slide_count = isset( $settings['showSlideCount'] ) ? $settings['showSlideCount'] : false; |
262
|
|
|
$slide_count = isset( $settings['slides'] ) ? count( $settings['slides'] ) : 0; |
263
|
|
|
if ( $show_slide_count ) { |
264
|
|
|
// Render the story block icon along with the slide count. |
265
|
|
|
return sprintf( |
266
|
|
|
'<div class="wp-story-embed-icon"> |
267
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"> |
268
|
|
|
<path d="M0 0h24v24H0z" fill="none"></path> |
269
|
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3H14V17H6L6 3ZM4 3C4 1.89543 4.89543 1 6 1H14C15.1046 1 16 1.89543 16 3V17C16 18.1046 15.1046 19 14 19H6C4.89543 19 4 18.1046 4 17V3ZM18 5C19.1046 5 20 5.89543 20 7V21C20 22.1046 19.1046 23 18 23H10C8.89543 23 8 22.1046 8 21H18V5Z"></path> |
270
|
|
|
</svg> |
271
|
|
|
<span>%d</span> |
272
|
|
|
</div>', |
273
|
|
|
$slide_count |
274
|
|
|
); |
275
|
|
|
} else { |
276
|
|
|
// Render the Fullscreen Gridicon. |
277
|
|
|
return ( |
278
|
|
|
'<div class="wp-story-embed-icon-expand"> |
279
|
|
|
<svg class="gridicon gridicons-fullscreen" role="img" height="24" width="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> |
280
|
|
|
<g> |
281
|
|
|
<path d="M21 3v6h-2V6.41l-3.29 3.3-1.42-1.42L17.59 5H15V3zM3 3v6h2V6.41l3.29 3.3 1.42-1.42L6.41 5H9V3zm18 18v-6h-2v2.59l-3.29-3.29-1.41 1.41L17.59 19H15v2zM9 21v-2H6.41l3.29-3.29-1.41-1.42L5 17.59V15H3v6z"></path> |
282
|
|
|
</g> |
283
|
|
|
</svg> |
284
|
|
|
</div>' |
285
|
|
|
); |
286
|
|
|
} |
287
|
|
|
} |
288
|
|
|
|
289
|
|
|
/** |
290
|
|
|
* Render a pagination bullet |
291
|
|
|
* |
292
|
|
|
* @param array $slide_index The slide index it corresponds to. |
293
|
|
|
* @param array $class_name Optional css class name(s) to customize the bullet element. |
294
|
|
|
* |
295
|
|
|
* @return string |
296
|
|
|
*/ |
297
|
|
|
function render_pagination_bullet( $slide_index, $class_name = '' ) { |
298
|
|
|
return sprintf( |
299
|
|
|
'<a href="#" class="wp-story-pagination-bullet %s" aria-label="%s"> |
300
|
|
|
<div class="wp-story-pagination-bullet-bar"></div> |
301
|
|
|
</a>', |
302
|
|
|
esc_attr( $class_name ), |
303
|
|
|
/* translators: %d is the slide number (1, 2, 3...) */ |
304
|
|
|
sprintf( __( 'Go to slide %d', 'jetpack' ), $slide_index ) |
305
|
|
|
); |
306
|
|
|
} |
307
|
|
|
|
308
|
|
|
/** |
309
|
|
|
* Render pagination on top of the story embed |
310
|
|
|
* |
311
|
|
|
* @param array $settings The block settings. |
312
|
|
|
* |
313
|
|
|
* @return string |
314
|
|
|
*/ |
315
|
|
|
function render_pagination( $settings ) { |
316
|
|
|
$show_slide_count = isset( $settings['showSlideCount'] ) ? $settings['showSlideCount'] : false; |
317
|
|
|
if ( $show_slide_count ) { |
318
|
|
|
return ''; |
319
|
|
|
} |
320
|
|
|
$slide_count = isset( $settings['slides'] ) ? count( $settings['slides'] ) : 0; |
321
|
|
|
$bullet_count = min( $slide_count, MAX_BULLETS ); |
322
|
|
|
$bullet_ellipsis = $slide_count > $bullet_count |
323
|
|
|
? render_pagination_bullet( $bullet_count + 1, 'wp-story-pagination-ellipsis' ) |
324
|
|
|
: ''; |
325
|
|
|
return sprintf( |
326
|
|
|
'<div class="wp-story-pagination wp-story-pagination-bullets"> |
327
|
|
|
%s |
328
|
|
|
</div>', |
329
|
|
|
join( "\n", array_map( __NAMESPACE__ . '\render_pagination_bullet', range( 1, $bullet_count ) ) ) . $bullet_ellipsis |
330
|
|
|
); |
331
|
|
|
} |
332
|
|
|
|
333
|
|
|
/** |
334
|
|
|
* Render story block |
335
|
|
|
* |
336
|
|
|
* @param array $attributes Block attributes. |
337
|
|
|
* |
338
|
|
|
* @return string |
339
|
|
|
*/ |
340
|
|
|
function render_block( $attributes ) { |
341
|
|
|
Jetpack_Gutenberg::load_assets_as_required( FEATURE_NAME ); |
342
|
|
|
|
343
|
|
|
$media_files = isset( $attributes['mediaFiles'] ) ? $attributes['mediaFiles'] : array(); |
344
|
|
|
$settings_from_attributes = isset( $attributes['settings'] ) ? $attributes['settings'] : array(); |
345
|
|
|
|
346
|
|
|
$settings = array_merge( |
347
|
|
|
$settings_from_attributes, |
348
|
|
|
array( |
349
|
|
|
'slides' => with_width_height_srcset_and_sizes( $media_files ), |
350
|
|
|
) |
351
|
|
|
); |
352
|
|
|
|
353
|
|
|
return sprintf( |
354
|
|
|
'<div class="%1$s" aria-labelledby="%2$s" data-settings="%3$s"> |
355
|
|
|
<div style="display: contents;"> |
356
|
|
|
<div class="wp-story-container"> |
357
|
|
|
<div class="wp-story-meta"> |
358
|
|
|
<div class="wp-story-icon"> |
359
|
|
|
<img alt="%4$s" src="%5$s" width="32" height=32> |
360
|
|
|
</div> |
361
|
|
|
<div> |
362
|
|
|
<div class="wp-story-title"> |
363
|
|
|
%6$s |
364
|
|
|
</div> |
365
|
|
|
</div> |
366
|
|
|
<a class="wp-story-exit-fullscreen jetpack-mdc-icon-button"> |
367
|
|
|
<i class="jetpack-material-icons close md-24"></i> |
368
|
|
|
</a> |
369
|
|
|
</div> |
370
|
|
|
<div class="wp-story-wrapper"> |
371
|
|
|
%7$s |
372
|
|
|
</div> |
373
|
|
|
<a class="wp-story-overlay" href="%8$s" title="%9$s"> |
374
|
|
|
%10$s |
375
|
|
|
</a> |
376
|
|
|
%11$s |
377
|
|
|
</div> |
378
|
|
|
</div> |
379
|
|
|
</div>', |
380
|
|
|
esc_attr( Blocks::classes( FEATURE_NAME, $attributes, array( 'wp-story', 'aligncenter' ) ) ), |
381
|
|
|
esc_attr( 'wp-story-' . get_the_ID() ), |
382
|
|
|
filter_var( wp_json_encode( $settings ), FILTER_SANITIZE_SPECIAL_CHARS ), |
383
|
|
|
__( 'Site icon', 'jetpack' ), |
384
|
|
|
esc_attr( get_site_icon_url( 40, includes_url( 'images/w-logo-blue.png' ) ) ), |
385
|
|
|
esc_html( get_the_title() ), |
386
|
|
|
! empty( $media_files[0] ) ? render_slide( $media_files[0] ) : '', |
387
|
|
|
get_permalink() . '?wp-story-load-in-fullscreen=true&wp-story-play-on-load=true', |
388
|
|
|
__( 'Play story in new tab', 'jetpack' ), |
389
|
|
|
render_top_right_icon( $settings ), |
390
|
|
|
render_pagination( $settings ) |
391
|
|
|
); |
392
|
|
|
} |
393
|
|
|
|
If you define a variable conditionally, it can happen that it is not defined for all execution paths.
Let’s take a look at an example:
In the above example, the variable $x is defined if you pass “foo” or “bar” as argument for $a. However, since the switch statement has no default case statement, if you pass any other value, the variable $x would be undefined.
Available Fixes
Check for existence of the variable explicitly:
Define a default value for the variable:
Add a value for the missing path: