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