Changeset 42622

Timestamp:

01/30/2018 02:55:25 PM (7 years ago)

Author:

SergeyBiryukov

Message:

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.
Merges [42613], [42617] to the 4.9 branch.
Fixes #42495.

Location:

branches/4.9

Files:

• . (modified) (1 prop)
• src/wp-includes/js/customize-selective-refresh.js (modified) (1 diff)
• src/wp-includes/js/mediaelement/wp-playlist.js (modified) (2 diffs)
• src/wp-includes/widgets/class-wp-widget-text.php (modified) (2 diffs)
• tests/phpunit/tests/widgets/text-widget.php (modified) (2 diffs)

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

@@ -487 +487 @@
             if ( wp.mediaelement ) {
                 wp.mediaelement.initialize();
+            }
+
+            if ( wp.playlist ) {
+                wp.playlist.initialize();
             }
 

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

@@ -3 +3 @@
 (function ($, _, Backbone) {
     'use strict';
+
+    /** @namespace wp */
+    window.wp = window.wp || {};
 
     var WPPlaylistView = Backbone.View.extend({
@@ -165 +168 @@
     });
 
-    $(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;

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

@@ -57 +57 @@
 
         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().
@@ -388 +392 @@
 
         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' );
     }
 

branches/4.9/tests/phpunit/tests/widgets/text-widget.php

@@ -30 +30 @@
      * Clean up global scope.
      *
-     * @global WP_Scripts $wp_scripts
-     * @global WP_Styles  $wp_style
+     * @global WP_Scripts           $wp_scripts
+     * @global WP_Styles            $wp_style
+     * @global WP_Customize_Manager $wp_customize
      */
     function clean_up_global_scope() {
-        global $wp_scripts, $wp_styles;
+        global $wp_scripts, $wp_styles, $wp_customize;
         parent::clean_up_global_scope();
-        $wp_scripts = null;
-        $wp_styles = null;
+        $wp_scripts   = null;
+        $wp_styles    = null;
+        $wp_customize = null;
     }
 
@@ -67 +69 @@
         $this->assertEquals( 10, has_action( 'admin_footer-widgets.php', array( 'WP_Widget_Text', 'render_control_template_scripts' ) ) );
         $this->assertContains( 'wp.textWidgets.idBases.push( "text" );', wp_scripts()->registered['text-widgets']->extra['after'] );
+        $this->assertFalse( has_action( 'wp_enqueue_scripts', array( $widget, 'enqueue_preview_scripts' ) ) );
+    }
+
+    /**
+     * Test register in customize preview.
+     *
+     * @global WP_Customize_Manager $wp_customize
+     * @covers WP_Widget_Text::__construct()
+     * @covers WP_Widget_Text::_register()
+     */
+    function test__register_in_customize_preview() {
+        global $wp_customize;
+        wp_set_current_user(
+            $this->factory()->user->create(
+                array(
+                    'role' => 'administrator',
+                )
+            )
+        );
+        require_once ABSPATH . WPINC . '/class-wp-customize-manager.php';
+        $wp_customize = new WP_Customize_Manager(
+            array(
+                'changeset_uuid' => wp_generate_uuid4(),
+            )
+        );
+        $wp_customize->start_previewing_theme();
+
+        $widget = new WP_Widget_Text();
+        $widget->_register();
+        $this->assertEquals( 10, has_action( 'wp_enqueue_scripts', array( $widget, 'enqueue_preview_scripts' ) ) );
+    }
+
+    /**
+     * Test enqueue_preview_scripts method.
+     *
+     * @global WP_Scripts $wp_scripts
+     * @global WP_Styles $wp_styles
+     * @covers WP_Widget_Text::enqueue_preview_scripts
+     */
+    function test_enqueue_preview_scripts() {
+        global $wp_scripts, $wp_styles;
+        $wp_scripts = null;
+        $wp_styles  = null;
+        $widget     = new WP_Widget_Text();
+
+        $this->assertFalse( wp_style_is( 'wp-mediaelement' ) );
+        $this->assertFalse( wp_script_is( 'wp-playlist' ) );
+
+        ob_start();
+        $widget->enqueue_preview_scripts();
+        ob_end_clean();
+
+        $this->assertTrue( wp_style_is( 'wp-mediaelement' ) );
+        $this->assertTrue( wp_script_is( 'wp-playlist' ) );
     }