function twitterWidgetTypeChanged( widgetTypeSelector ) {
var selectedType = $( widgetTypeSelector ).val();
.closest( '.jetpack-twitter-timeline-widget-type-container' )
.next( '.jetpack-twitter-timeline-widget-id-container' )
.css( 'display', function () {
var labelType = $( this ).data( 'widget-type' );
if ( selectedType === labelType ) {
function twitterWidgetTweetDisplayChanged( event ) {
var $tweetDisplaySelector = $( event.target );
var selectedTweetDisplay = $tweetDisplaySelector.val();
var $form = $tweetDisplaySelector.closest( 'form' );
var $heightContainer = $form.find( '.jetpack-twitter-timeline-widget-height-container' );
var $tweetLimitContainer = $form.find(
'.jetpack-twitter-timeline-widget-tweet-limit-container'
var $scrollbarInput = $form.find( 'input[id*=chrome-noscrollbar]' );
switch ( selectedTweetDisplay ) {
$tweetLimitContainer.show();
$scrollbarInput.prop( 'disabled', true );
$tweetLimitContainer.hide();
$scrollbarInput.prop( 'disabled', false );
// We could either be in wp-admin/widgets.php or the Customizer.
var $container = $( '#customize-controls' );
if ( ! $container.length ) {
$container = $( '#wpbody' );
// Observe widget settings for 'change' events of the 'type' property for
// current and future Twitter timeline widgets.
$container.on( 'change', '.jetpack-twitter-timeline-widget-type', function () {
twitterWidgetTypeChanged( this );
// Set the labels for currently existing widgets (including the "template"
// version that is copied when a new widget is added).
$container.find( '.jetpack-twitter-timeline-widget-type' ).each( function () {
twitterWidgetTypeChanged( this );
// Observe widget settings for 'change' events of the 'tweet-display' property for
// current and future Twitter timeline widgets.
'.jetpack-twitter-timeline-widget-tweet-display-radio',
twitterWidgetTweetDisplayChanged