jetpack / modules / widgets / twitter-timeline.php

twitter-timeline.php in Jetpack – WP Security, Backup, Speed, & Growth 9.7, at modules/widgets/twitter-timeline.php

581 lines 19.1 KB

Raw Download Zip

1	<?php
2
3	/*
4	* Based on Evolution Twitter Timeline
5	* (https://wordpress.org/extend/plugins/evolution-twitter-timeline/)
6	* For details on Twitter Timelines see:
7	* - https://twitter.com/settings/widgets
8	* - https://dev.twitter.com/docs/embedded-timelines
9	*/
10
11	use Automattic\Jetpack\Assets;
12	use Automattic\Jetpack\Redirect;
13
14	/**
15	* Register the widget for use in Appearance -> Widgets
16	*/
17	add_action( 'widgets_init', 'jetpack_twitter_timeline_widget_init' );
18
19	function jetpack_twitter_timeline_widget_init() {
20	register_widget( 'Jetpack_Twitter_Timeline_Widget' );
21	}
22
23	class Jetpack_Twitter_Timeline_Widget extends WP_Widget {
24	/**
25	* Register widget with WordPress.
26	*/
27	public function __construct() {
28	parent::__construct(
29	'twitter_timeline',
30	/** This filter is documented in modules/widgets/facebook-likebox.php */
31	apply_filters( 'jetpack_widget_name', esc_html__( 'Twitter Timeline', 'jetpack' ) ),
32	array(
33	'classname' => 'widget_twitter_timeline',
34	'description' => __( 'Display an official Twitter Embedded Timeline widget.', 'jetpack' ),
35	'customize_selective_refresh' => true,
36	)
37	);
38
39	if ( is_active_widget( false, false, $this->id_base ) \|\| is_active_widget( false, false, 'monster' ) \|\| is_customize_preview() ) {
40	add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
41	}
42
43	add_action( 'admin_enqueue_scripts', array( $this, 'admin_scripts' ) );
44	}
45
46	/**
47	* Enqueue scripts.
48	*/
49	public function enqueue_scripts() {
50	if ( ! class_exists( 'Jetpack_AMP_Support' ) \|\| ! Jetpack_AMP_Support::is_amp_request() ) {
51	wp_enqueue_script( 'jetpack-twitter-timeline' );
52	}
53	}
54
55	/**
56	* Enqueue Twitter's widget library.
57	*
58	* @deprecated
59	*/
60	public function library() {
61	_deprecated_function( __METHOD__, '4.0.0' );
62	wp_print_scripts( array( 'jetpack-twitter-timeline' ) );
63	}
64
65	/**
66	* Enqueue script to improve admin UI
67	*/
68	public function admin_scripts( $hook ) {
69	// This is still 'widgets.php' when managing widgets via the Customizer.
70	if ( 'widgets.php' === $hook ) {
71	wp_enqueue_script(
72	'twitter-timeline-admin',
73	Assets::get_file_url_for_environment(
74	'_inc/build/widgets/twitter-timeline-admin.min.js',
75	'modules/widgets/twitter-timeline-admin.js'
76	)
77	);
78	}
79	}
80
81	/**
82	* Front-end display of widget.
83	*
84	* @see WP_Widget::widget()
85	*
86	* @param array $args Widget arguments.
87	* @param array $instance Saved values from database.
88	*/
89	public function widget( $args, $instance ) {
90	$output = '';
91
92	// Twitter deprecated `data-widget-id` on 2018-05-25,
93	// with cease support deadline on 2018-07-27.
94	if ( isset( $instance['type'] ) && 'widget-id' === $instance['type'] ) {
95	if ( current_user_can( 'edit_theme_options' ) ) {
96	$output .= $args['before_widget']
97	. $args['before_title'] . esc_html__( 'Twitter Timeline', 'jetpack' ) . $args['after_title']
98	. '<p>' . esc_html__( "The Twitter Timeline widget can't display tweets based on searches or hashtags. To display a simple list of tweets instead, change the Widget ID to a Twitter username. Otherwise, delete this widget.", 'jetpack' ) . '</p>'
99	. '<p>' . esc_html__( '(Only administrators will see this message.)', 'jetpack' ) . '</p>'
100	. $args['after_widget'];
101	}
102
103	echo $output; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
104	return;
105	}
106
107	$instance['lang'] = substr( strtoupper( get_locale() ), 0, 2 );
108
109	$output .= $args['before_widget'];
110
111	$title = isset( $instance['title'] ) ? $instance['title'] : '';
112
113	/** This filter is documented in core/src/wp-includes/default-widgets.php */
114	$title = apply_filters( 'widget_title', $title );
115	if ( ! empty( $title ) ) {
116	$output .= $args['before_title'] . $title . $args['after_title'];
117	}
118
119	$possible_data_attribs = array(
120	'width',
121	'height',
122	'theme',
123	'border-color',
124	'tweet-limit',
125	'lang',
126	);
127	$data_attrs = '';
128	foreach ( $possible_data_attribs as $att ) {
129	if ( ! empty( $instance[ $att ] ) && ! is_array( $instance[ $att ] ) ) {
130	$data_attrs .= ' data-' . esc_attr( $att ) . '="' . esc_attr( $instance[ $att ] ) . '"';
131	}
132	}
133
134	/** This filter is documented in modules/shortcodes/tweet.php */
135	$partner = apply_filters( 'jetpack_twitter_partner_id', 'jetpack' );
136	if ( ! empty( $partner ) ) {
137	$data_attrs .= ' data-partner="' . esc_attr( $partner ) . '"';
138	}
139
140	/**
141	* Allow the activation of Do Not Track for the Twitter Timeline Widget.
142	*
143	* @see https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference.html
144	*
145	* @module widgets
146	*
147	* @since 6.9.0
148	*
149	* @param bool false Should the Twitter Timeline use the DNT attribute? Default to false.
150	*/
151	$dnt = apply_filters( 'jetpack_twitter_timeline_default_dnt', false );
152	if ( true === $dnt ) {
153	$data_attrs .= ' data-dnt="true"';
154	}
155
156	if ( ! empty( $instance['chrome'] ) && is_array( $instance['chrome'] ) ) {
157	$data_attrs .= ' data-chrome="' . esc_attr( join( ' ', $instance['chrome'] ) ) . '"';
158	}
159
160	$timeline_placeholder = __( 'My Tweets', 'jetpack' );
161
162	/**
163	* Filter the Timeline placeholder text.
164	*
165	* @module widgets
166	*
167	* @since 3.4.0
168	*
169	* @param string $timeline_placeholder Timeline placeholder text.
170	*/
171	$timeline_placeholder = apply_filters( 'jetpack_twitter_timeline_placeholder', $timeline_placeholder );
172
173	$type = ( isset( $instance['type'] ) ? $instance['type'] : '' );
174	$widget_id = ( isset( $instance['widget-id'] ) ? $instance['widget-id'] : '' );
175
176	if ( class_exists( 'Jetpack_AMP_Support' ) && Jetpack_AMP_Support::is_amp_request() ) {
177	$width = ! empty( $instance['width'] ) ? $instance['width'] : 600;
178	$height = ! empty( $instance['height'] ) ? $instance['height'] : 480;
179	$output .= '<amp-twitter' . $data_attrs . ' layout="responsive" data-timeline-source-type="profile" data-timeline-screen-name="' . esc_attr( $widget_id ) . '" width="' . absint( $width ) . '" height="' . absint( $height ) . '">'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
180	$output .= esc_html( $timeline_placeholder ) . '</amp-twitter>';
181
182	echo $output . $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
183	return;
184	}
185
186	// Start tag output
187	// This tag is transformed into the widget markup by Twitter's
188	// widgets.js code.
189	$output .= '<a class="twitter-timeline"' . $data_attrs; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
190	switch ( $type ) {
191	case 'profile':
192	$output .= ' href="https://twitter.com/' . esc_attr( $widget_id ) . '"';
193	break;
194	case 'widget-id':
195	default:
196	$output .= ' data-widget-id="' . esc_attr( $widget_id ) . '"';
197	break;
198	}
199	$output .= ' href="https://twitter.com/' . esc_attr( $widget_id ) . '"';
200
201	// End tag output.
202	$output .= '>';
203
204	$output .= esc_html( $timeline_placeholder ) . '</a>';
205
206	// End tag output
207
208	echo $output . $args['after_widget']; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
209
210	/** This action is documented in modules/widgets/gravatar-profile.php */
211	do_action( 'jetpack_stats_extra', 'widget_view', 'twitter_timeline' );
212	}
213
214
215	/**
216	* Sanitize widget form values as they are saved.
217	*
218	* @see WP_Widget::update()
219	*
220	* @param array $new_instance Values just sent to be saved.
221	* @param array $old_instance Previously saved values from database.
222	*
223	* @return array Updated safe values to be saved.
224	*/
225	public function update( $new_instance, $old_instance ) {
226	$instance = array();
227
228	$instance['title'] = sanitize_text_field( $new_instance['title'] );
229
230	$width = (int) $new_instance['width'];
231	if ( $width ) {
232	// From publish.twitter.com: 220 <= width <= 1200
233	$instance['width'] = min( max( $width, 220 ), 1200 );
234	} else {
235	// Set default width value to minimum.
236	$instance['width'] = 220;
237	}
238
239	$tweet_display = sanitize_text_field( $new_instance['tweet-display'] );
240	$instance['tweet-display'] = $tweet_display;
241	/**
242	* A timeline with a specified limit is expanded to the height of those Tweets.
243	* The specified height value no longer applies, so reject the height value
244	* when a valid limit is set: a widget attempting to save both limit 5 and
245	* height 400 would be saved with just limit 5.
246	* So if the tweet display option is set to 'dynamic' the limit will be unset and we'll
247	* take into account the height value.
248	* If the tweet display option is set to 'fixed' the height will be unset and we'll
249	* take into account the limit value.
250	*/
251	$instance['height'] = '';
252	$instance['tweet-limit'] = null;
253
254	switch ( $tweet_display ) {
255	case 'dynamic':
256	$height = (int) $new_instance['height'];
257	// From publish.twitter.com: height >= 200.
258	$instance['height'] = max( $height, 200 );
259	break;
260	case 'fixed':
261	$tweet_limit = (int) $new_instance['tweet-limit'];
262	// From publish.twitter.com: 1 >= tweet-limit >= 20.
263	$instance['tweet-limit'] = min( max( $tweet_limit, 1 ), 20 );
264	break;
265	}
266
267	// If they entered something that might be a full URL, try to parse it out
268	if ( is_string( $new_instance['widget-id'] ) ) {
269	if ( preg_match(
270	'#https?://twitter\.com/settings/widgets/(\d+)#s',
271	$new_instance['widget-id'],
272	$matches
273	) ) {
274	$new_instance['widget-id'] = $matches[1];
275	}
276	}
277
278	$instance['widget-id'] = sanitize_text_field( $new_instance['widget-id'] );
279
280	$new_border_color = sanitize_hex_color( $new_instance['border-color'] );
281	if ( ! empty( $new_border_color ) ) {
282	$instance['border-color'] = $new_border_color;
283	}
284
285	$instance['type'] = 'profile';
286
287	$instance['theme'] = 'light';
288	if ( in_array( $new_instance['theme'], array( 'light', 'dark' ) ) ) {
289	$instance['theme'] = $new_instance['theme'];
290	}
291
292	$instance['chrome'] = array();
293	$chrome_settings = array(
294	'noheader',
295	'nofooter',
296	'noborders',
297	'transparent',
298	'noscrollbar',
299	);
300
301	foreach ( $chrome_settings as $chrome ) {
302	switch ( $chrome ) {
303	case 'noheader':
304	case 'nofooter':
305	case 'noborders':
306	case 'noscrollbar':
307	if ( ! isset( $new_instance['chrome'] ) \|\| ! in_array( $chrome, $new_instance['chrome'], true ) ) {
308	$instance['chrome'][] = $chrome;
309	}
310	break;
311	default:
312	if ( isset( $new_instance['chrome'] ) && in_array( $chrome, $new_instance['chrome'], true ) ) {
313	$instance['chrome'][] = $chrome;
314	}
315	break;
316	}
317	}
318
319	return $instance;
320	}
321
322	/**
323	* Returns a link to the documentation for a feature of this widget on
324	* Jetpack or WordPress.com.
325	*/
326	public function get_docs_link( $hash = '' ) {
327	if ( defined( 'IS_WPCOM' ) && IS_WPCOM ) {
328	$base_url = 'https://wordpress.com/support/widgets/twitter-timeline-widget/';
329	} else {
330	$base_url = esc_url( Redirect::get_url( 'jetpack-support-extra-sidebar-widgets-twitter-timeline-widget' ) );
331	}
332	return '<a class="widget-access-link" href="' . $base_url . $hash . '" target="_blank"> Need help?</a>';
333	}
334
335	/**
336	* Back end widget form.
337	*
338	* @see WP_Widget::form()
339	*
340	* @param array $instance Previously saved values from database.
341	*/
342	public function form( $instance ) {
343	$defaults = array(
344	'title' => esc_html__( 'Follow me on Twitter', 'jetpack' ),
345	'width' => '220',
346	'height' => '200',
347	'type' => 'profile',
348	'widget-id' => '',
349	'border-color' => '#f0f0f1',
350	'theme' => 'light',
351	'chrome' => array(),
352	'tweet-limit' => 1,
353	'tweet-display' => 'dynamic',
354	);
355
356	$instance = wp_parse_args( (array) $instance, $defaults );
357
358	if ( 'widget-id' === $instance['type'] ) {
359	$instance['widget-id'] = '';
360	}
361
362	$instance['type'] = 'profile';
363
364	/**
365	* Set the tweet-display option to 'fixed' if height is empty and tweet-limit set
366	* to ensure backwards compatibility with pre-existing widgets.
367	*/
368	if ( empty( $instance['height'] ) && isset( $instance['tweet-limit'] ) ) {
369	$instance['tweet-display'] = 'fixed';
370	}
371	?>
372
373	<p class="jetpack-twitter-timeline-widget-id-container">
374	<label for="<?php echo esc_attr( $this->get_field_id( 'widget-id' ) ); ?>">
375	<?php esc_html_e( 'Twitter username:', 'jetpack' ); ?>
376	<?php
377	echo wp_kses(
378	$this->get_docs_link( '#twitter-username' ),
379	array(
380	'a' => array(
381	'href' => array(),
382	'rel' => array(),
383	'target' => array(),
384	'class' => array(),
385	),
386	)
387	);
388	?>
389	</label>
390	<input
391	class="widefat"
392	id="<?php echo esc_attr( $this->get_field_id( 'widget-id' ) ); ?>"
393	name="<?php echo esc_attr( $this->get_field_name( 'widget-id' ) ); ?>"
394	type="text"
395	value="<?php echo esc_attr( $instance['widget-id'] ); ?>"
396	/>
397	</p>
398
399	<p>
400	<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>">
401	<?php esc_html_e( 'Title:', 'jetpack' ); ?>
402	</label>
403	<input
404	class="widefat"
405	id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"
406	name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>"
407	type="text"
408	value="<?php echo esc_attr( $instance['title'] ); ?>"
409	/>
410	</p>
411
412	<p>
413	<label>
414	<strong><?php esc_html_e( 'Number of tweets shown:', 'jetpack' ); ?></strong>
415	</label>
416	<ul>
417	<li>
418	<label>
419	<input
420	id="<?php echo esc_attr( $this->get_field_id( 'tweet-display' ) ); ?>-dynamic"
421	name="<?php echo esc_attr( $this->get_field_name( 'tweet-display' ) ); ?>"
422	type="radio"
423	class="jetpack-twitter-timeline-widget-tweet-display-radio"
424	value="dynamic"
425	<?php checked( 'dynamic', $instance['tweet-display'] ); ?>
426	/>
427	<?php esc_html_e( 'Dynamic', 'jetpack' ); ?>
428	</label>
429	</li>
430	<li>
431	<label>
432	<input
433	id="<?php echo esc_attr( $this->get_field_id( 'tweet-display' ) ); ?>-fixed"
434	name="<?php echo esc_attr( $this->get_field_name( 'tweet-display' ) ); ?>"
435	type="radio"
436	class="jetpack-twitter-timeline-widget-tweet-display-radio"
437	value="fixed"
438	<?php checked( 'fixed', $instance['tweet-display'] ); ?>
439	/>
440	<?php esc_html_e( 'Fixed', 'jetpack' ); ?>
441	</label>
442	</li>
443	</ul>
444	</p>
445
446	<p class="jetpack-twitter-timeline-widget-height-container" <?php echo ( 'fixed' === $instance['tweet-display'] ) ? ' style="display:none;"' : ''; ?>>
447	<label for="<?php echo esc_attr( $this->get_field_id( 'height' ) ); ?>">
448	<?php esc_html_e( 'Height (in pixels; at least 200):', 'jetpack' ); ?>
449	</label>
450	<input
451	class="widefat"
452	id="<?php echo esc_attr( $this->get_field_id( 'height' ) ); ?>"
453	name="<?php echo esc_attr( $this->get_field_name( 'height' ) ); ?>"
454	type="number" min="200"
455	value="<?php echo esc_attr( $instance['height'] ); ?>"
456	/>
457	</p>
458
459	<p class="jetpack-twitter-timeline-widget-tweet-limit-container" <?php echo ( 'dynamic' === $instance['tweet-display'] ) ? ' style="display:none;"' : ''; ?>>
460	<label for="<?php echo esc_attr( $this->get_field_id( 'tweet-limit' ) ); ?>">
461	<?php esc_html_e( 'Number of tweets in the timeline (1 to 20):', 'jetpack' ); ?>
462	</label>
463	<input
464	class="widefat"
465	id="<?php echo esc_attr( $this->get_field_id( 'tweet-limit' ) ); ?>"
466	name="<?php echo esc_attr( $this->get_field_name( 'tweet-limit' ) ); ?>"
467	type="number" min="1" max="20"
468	value="<?php echo esc_attr( $instance['tweet-limit'] ); ?>"
469	/>
470	</p>
471
472	<p>
473	<label for="<?php echo esc_attr( $this->get_field_id( 'width' ) ); ?>">
474	<?php esc_html_e( 'Maximum width (in pixels; 220 to 1200):', 'jetpack' ); ?>
475	</label>
476	<input
477	class="widefat"
478	id="<?php echo esc_attr( $this->get_field_id( 'width' ) ); ?>"
479	name="<?php echo esc_attr( $this->get_field_name( 'width' ) ); ?>"
480	type="number" min="220" max="1200"
481	value="<?php echo esc_attr( $instance['width'] ); ?>"
482	/>
483	</p>
484
485	<p>
486	<label for="<?php echo esc_attr( $this->get_field_id( 'chrome-noheader' ) ); ?>">
487	<strong><?php esc_html_e( 'Layout options:', 'jetpack' ); ?></strong>
488	</label>
489	</p>
490	<p>
491	<input
492	type="checkbox"
493	<?php checked( false, in_array( 'noheader', $instance['chrome'], true ) ); ?>
494	id="<?php echo esc_attr( $this->get_field_id( 'chrome-noheader' ) ); ?>"
495	name="<?php echo esc_attr( $this->get_field_name( 'chrome' ) ); ?>[]"
496	value="noheader"
497	/>
498	<label for="<?php echo esc_attr( $this->get_field_id( 'chrome-noheader' ) ); ?>">
499	<?php esc_html_e( 'Show header', 'jetpack' ); ?>
500	</label>
501	<br />
502	<input
503	type="checkbox"
504	<?php checked( false, in_array( 'nofooter', $instance['chrome'], true ) ); ?>
505	id="<?php echo esc_attr( $this->get_field_id( 'chrome-nofooter' ) ); ?>"
506	name="<?php echo esc_attr( $this->get_field_name( 'chrome' ) ); ?>[]"
507	value="nofooter"
508	/>
509	<label for="<?php echo esc_attr( $this->get_field_id( 'chrome-nofooter' ) ); ?>">
510	<?php esc_html_e( 'Show footer', 'jetpack' ); ?>
511	</label>
512	<br />
513	<input
514	type="checkbox"
515	<?php checked( false, in_array( 'noborders', $instance['chrome'], true ) ); ?>
516	id="<?php echo esc_attr( $this->get_field_id( 'chrome-noborders' ) ); ?>"
517	name="<?php echo esc_attr( $this->get_field_name( 'chrome' ) ); ?>[]"
518	value="noborders"
519	/>
520	<label for="<?php echo esc_attr( $this->get_field_id( 'chrome-noborders' ) ); ?>">
521	<?php esc_html_e( 'Show borders', 'jetpack' ); ?>
522	</label>
523	<br />
524	<input
525	type="checkbox"
526	<?php checked( false, in_array( 'noscrollbar', $instance['chrome'], true ) ); ?>
527	id="<?php echo esc_attr( $this->get_field_id( 'chrome-noscrollbar' ) ); ?>"
528	name="<?php echo esc_attr( $this->get_field_name( 'chrome' ) ); ?>[]"
529	value="noscrollbar"
530	<?php disabled( 'fixed', $instance['tweet-display'] ); ?>
531	/>
532	<label for="<?php echo esc_attr( $this->get_field_id( 'chrome-noscrollbar' ) ); ?>">
533	<?php esc_html_e( 'Show scrollbar', 'jetpack' ); ?>
534	</label>
535	<br />
536	<input
537	type="checkbox"
538	<?php checked( in_array( 'transparent', $instance['chrome'], true ) ); ?>
539	id="<?php echo esc_attr( $this->get_field_id( 'chrome-transparent' ) ); ?>"
540	name="<?php echo esc_attr( $this->get_field_name( 'chrome' ) ); ?>[]"
541	value="transparent"
542	/>
543	<label for="<?php echo esc_attr( $this->get_field_id( 'chrome-transparent' ) ); ?>">
544	<?php esc_html_e( 'Transparent background', 'jetpack' ); ?>
545	</label>
546	</p>
547
548	<p>
549	<label for="<?php echo esc_attr( $this->get_field_id( 'border-color' ) ); ?>">
550	<?php esc_html_e( 'Border color (in hex format):', 'jetpack' ); ?>
551	</label>
552	<input
553	class="widefat"
554	id="<?php echo esc_attr( $this->get_field_id( 'border-color' ) ); ?>"
555	name="<?php echo esc_attr( $this->get_field_name( 'border-color' ) ); ?>"
556	type="text"
557	value="<?php echo esc_attr( $instance['border-color'] ); ?>"
558	/>
559	</p>
560
561	<p>
562	<label for="<?php echo esc_attr( $this->get_field_id( 'theme' ) ); ?>">
563	<?php esc_html_e( 'Color scheme:', 'jetpack' ); ?>
564	</label>
565	<select
566	name="<?php echo esc_attr( $this->get_field_name( 'theme' ) ); ?>"
567	id="<?php echo esc_attr( $this->get_field_id( 'theme' ) ); ?>"
568	class="widefat"
569	>
570	<option value="light"<?php selected( $instance['theme'], 'light' ); ?>>
571	<?php esc_html_e( 'Light', 'jetpack' ); ?>
572	</option>
573	<option value="dark"<?php selected( $instance['theme'], 'dark' ); ?>>
574	<?php esc_html_e( 'Dark', 'jetpack' ); ?>
575	</option>
576	</select>
577	</p>
578	<?php
579	}
580	}
581