Changeset 42622 for branches/4.9

Timestamp:

01/30/2018 02:55:25 PM (9 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' ) );
         }