Completed
Push — renovate/i18n-calypso-4.x ( e49752...2c88cf )
by
unknown
22:42 queued 15:06
created

Jetpack_Twitter_Timeline_Widget::update()   F

Complexity

Conditions 17
Paths 792

Size

Total Lines 96

Duplication

Lines 10
Ratio 10.42 %

Importance

Changes 0
Metric Value
cc 17
nc 792
nop 2
dl 10
loc 96
rs 1.1583
c 0
b 0
f 0

How to fix   Long Method    Complexity   

Long Method

Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.

For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.

Commonly applied refactorings include:

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 View Code Duplication
		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 View Code Duplication
				case 'noscrollbar':
307
					if ( ! isset( $new_instance['chrome'] ) || ! in_array( $chrome, $new_instance['chrome'], true ) ) {
308
						$instance['chrome'][] = $chrome;
309
					}
310
					break;
311 View Code Duplication
				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'  => '#e8e8e8',
350
			'theme'         => 'light',
351
			'chrome'        => array(),
352
			'tweet-limit'   => 1,
353
			'tweet-display' => 'dynamic',
354
		);
355
356
		$instance = wp_parse_args( (array) $instance, $defaults );
0 ignored issues
show
Documentation introduced by
$defaults is of type array<string,?,{"title":...eet-display":"string"}>, but the function expects a string.

It seems like the type of the argument is not accepted by the function/method which you are calling.

In some cases, in particular if PHP’s automatic type-juggling kicks in this might be fine. In other cases, however this might be a bug.

We suggest to add an explicit type cast like in the following example:

function acceptsInteger($int) { }

$x = '123'; // string "123"

// Instead of
acceptsInteger($x);

// we recommend to use
acceptsInteger((integer) $x);
Loading history...
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