Customize: Ensure media playlists get initialized after selective refresh; expose new wp.playlist.initialize() API.

In particular allows audio and video playlists to be added to the Text widget and previewed.

Props bpayton, westonruter.
See #40854.
Fixes #42495.


git-svn-id: https://develop.svn.wordpress.org/trunk@42613 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-includes/js/customize-selective-refresh.js

@@ -488,6 +488,10 @@ wp.customize.selectiveRefresh = ( function( $, api ) {
 				wp.mediaelement.initialize();
 			}
 
+			if ( wp.playlist ) {
+				wp.playlist.initialize();
+			}
+
 			/**
 			 * Announce when a partial's placement has been rendered so that dynamic elements can be re-built.
 			 */

src/wp-includes/js/mediaelement/wp-playlist.js

@@ -3,6 +3,9 @@
 (function ($, _, Backbone) {
 	'use strict';
 
+	/** @namespace wp */
+	window.wp = window.wp || {};
+
 	var WPPlaylistView = Backbone.View.extend(/** @lends WPPlaylistView.prototype */{
 		/**
 		 * @constructs
@@ -168,11 +171,32 @@
 		}
 	});
 
-    $(document).ready(function () {
-		$('.wp-playlist').each( function() {
-			return new WPPlaylistView({ el: this });
+	/**
+	 * Initialize media playlists in the document.
+	 *
+	 * Only initializes new playlists not previously-initialized.
+	 *
+	 * @since 4.9.3
+	 * @returns {void}
+	 */
+	function initialize() {
+		$( '.wp-playlist:not(:has(.mejs-container))' ).each( function() {
+			new WPPlaylistView( { el: this } );
 		} );
-    });
+	}
+
+	/**
+	 * Expose the API publicly on window.wp.playlist.
+	 *
+	 * @namespace wp.playlist
+	 * @since 4.9.3
+	 * @type {object}
+	 */
+	window.wp.playlist = {
+		initialize: initialize
+	};
+
+	$( document ).ready( initialize );
 
 	window.WPPlaylistView = WPPlaylistView;
 

src/wp-includes/widgets/class-wp-widget-text.php

@@ -57,6 +57,10 @@ class WP_Widget_Text extends WP_Widget {
 
 		wp_add_inline_script( 'text-widgets', sprintf( 'wp.textWidgets.idBases.push( %s );', wp_json_encode( $this->id_base ) ) );
 
+		if ( $this->is_preview() ) {
+			add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_preview_scripts' ) );
+		}
+
 		// Note that the widgets component in the customizer will also do the 'admin_print_scripts-widgets.php' action in WP_Customize_Widgets::print_scripts().
 		add_action( 'admin_print_scripts-widgets.php', array( $this, 'enqueue_admin_scripts' ) );
 
@@ -393,6 +397,22 @@ class WP_Widget_Text extends WP_Widget {
 		return $instance;
 	}
 
+	/**
+	 * Enqueue preview scripts.
+	 *
+	 * These scripts normally are enqueued just-in-time when a playlist shortcode is used.
+	 * However, in the customizer, a playlist shortcode may be used in a text widget and
+	 * dynamically added via selective refresh, so it is important to unconditionally enqueue them.
+	 *
+	 * @since 4.9.3
+	 */
+	public function enqueue_preview_scripts() {
+		require_once dirname( dirname( __FILE__ ) ) . '/media.php';
+
+		wp_playlist_scripts( 'audio' );
+		wp_playlist_scripts( 'video' );
+	}
+
 	/**
 	 * Loads the required scripts and styles for the widget control.
 	 *