[wp-trac] [WordPress Trac] #32417: Add new core media widget

[WordPress Trac]

#32417: Add new core media widget
-------------------------------------------------+-------------------------
 Reporter:  melchoyce                            |       Owner:  melchoyce
     Type:  feature request                      |      Status:  assigned
 Priority:  normal                               |   Milestone:  4.8
Component:  Widgets                              |     Version:  4.3
 Severity:  normal                               |  Resolution:
 Keywords:  needs-unit-tests has-patch needs-    |     Focuses:  ui,
  refresh                                        |  administration
-------------------------------------------------+-------------------------

Comment (by westonruter):

 Replying to [comment:102 gonom9]:
 > Can anyone tell me the best practice to add
 [https://gist.github.com/taggon/009cc7baa372b3431074723b57c7bf13 small JS
 code] to preview? The code will turn a normal `<video>` or `<audio>`
 element into an interactive media element after partial updates. I
 originally added the code using `wp_add_inline_script()` and it seemed to
 work well but I'm not sure if it's a right way. Would it be better to
 write the code in a separate file?

 In the plugin form, what you have is good. However, for the core merge
 this logic should actually be part of `selective-refresh.js` itself as was
 done for emoji, toward the end of this snippet:
 https://github.com/WordPress/wordpress-develop/blob/4.7.2/src/wp-
 includes/js/customize-selective-refresh.js#L425-L454

 Something like:

 {{{#!js
 wp.mediaelement.initialize(  );
 }}}


 Now, I believe an early iteration of selective refresh actually did
 include auto-initialization of media elements. However, it was removed due
 to complexities in regards to initialization which can be seen in the
 Jetpack infinite-scroll module. There may be other use cases in the
 Jetpack module that can be gleaned from for various edge cases:
 https://github.com/Automattic/jetpack/blob/master/modules/infinite-
 scroll/infinity.js

 See also this PR which hooked up Jetpack's Infinite Scroll with Selective
 Refresh: https://github.com/Automattic/jetpack/pull/3542

 Nevertheless, all of the logic for lazy-loading media element JS probably
 should be eliminated in favor of the Media Widget itself enqueueing the
 assets whenever the widget is active (or in the customize preview). In
 other words, the `WP_Media_Widget::__construct()` method can include:

 {{{#!php
 <?php
 if ( is_customize_preview() ) {
         wp_enqueue_style( 'wp-mediaelement' );
         wp_enqueue_script( 'wp-mediaelement' );
 }
 }}}

 The reason for doing this ''only'' in customizer preview is for the sake
 of adding the ''first'' instance of the media widget to the page.
 Otherwise, when on the frontend and there is a media widget in a sidebar,
 it will have already called `wp_audio_shortcode` or `wp_video_shortcode`
 and thus the required assets would have already been enqueued and
 available for use.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/32417#comment:103>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform