Changeset 40640

Timestamp:

05/11/2017 09:10:54 PM (9 years ago)

Author:

westonruter

Message:

Widgets: Introduce media widgets for images, audio, and video with extensible base for additional media widgets in the future.

The last time a new widget was introduced, Vuvuzelas were a thing, Angry Birds started taking over phones, and WordPress stopped shipping with Kubrick. Seven years and 17 releases without new widgets have been enough, time to spice up your sidebar!

Props westonruter, melchoyce, obenland, timmydcrawford, adamsilverstein, gonom9, wonderboymusic, Fab1en, DrewAPicture, sirbrillig, joen, matias, samikeijonen, afercia, celloexpressions, designsimply, michelleweber, ranh, kjellr, karmatosed.
Fixes #32417, #39993, #39994, #39995.

Location:

trunk

Files:

• src/wp-admin/css/widgets.css (modified) (1 diff)
• src/wp-admin/js/widgets/media-audio-widget.js (added)
• src/wp-admin/js/widgets/media-image-widget.js (added)
• src/wp-admin/js/widgets/media-video-widget.js (added)
• src/wp-admin/js/widgets/media-widgets.js (added)
• src/wp-content/themes/twentyten/style.css (modified) (1 diff)
• src/wp-includes/default-widgets.php (modified) (1 diff)
• src/wp-includes/js/customize-selective-refresh.js (modified) (1 diff)
• src/wp-includes/media-template.php (modified) (3 diffs)
• src/wp-includes/script-loader.php (modified) (1 diff)
• src/wp-includes/widgets.php (modified) (1 diff)
• src/wp-includes/widgets/class-wp-widget-media-audio.php (added)
• src/wp-includes/widgets/class-wp-widget-media-image.php (added)
• src/wp-includes/widgets/class-wp-widget-media-video.php (added)
• src/wp-includes/widgets/class-wp-widget-media.php (added)
• tests/phpunit/data/images/canola-150x150.jpg (added)
• tests/phpunit/data/images/canola-300x225.jpg (added)
• tests/phpunit/data/uploads/small-audio.mp3 (added)
• tests/phpunit/data/uploads/small-video.mp4 (added)
• tests/phpunit/tests/widgets/media-audio-widget.php (added)
• tests/phpunit/tests/widgets/media-image-widget.php (added)
• tests/phpunit/tests/widgets/media-video-widget.php (added)
• tests/phpunit/tests/widgets/media-widget.php (added)
• tests/phpunit/tests/widgets/text-widget.php (modified) (2 diffs)
• tests/qunit/index.html (modified) (4 diffs)
• tests/qunit/wp-admin/js/widgets (added)
• tests/qunit/wp-admin/js/widgets/test-media-image-widget.js (added)
• tests/qunit/wp-admin/js/widgets/test-media-video-widget.js (added)
• tests/qunit/wp-admin/js/widgets/test-media-widgets.js (added)

trunk/src/wp-admin/css/widgets.css

@@ -56 +56 @@
 }
 
+/* Media Widgets */
+.wp-core-ui .media-widget-control.selected .placeholder,
+.wp-core-ui .media-widget-control.selected .not-selected,
+.wp-core-ui .media-widget-control .selected {
+        display: none;
+}
+
+.media-widget-control.selected .selected {
+        display: inline-block;
+}
+
+.media-widget-buttons {
+        text-align: left;
+        margin-bottom: 10px;
+}
+
+.media-widget-control .media-widget-buttons .button {
+        margin-left: 8px;
+        width: auto;
+}
+.media-widget-control:not(.selected) .media-widget-buttons .button,
+.media-widget-buttons .button:first-child {
+        margin-left: 0;
+}
+
+.media-widget-control .placeholder {
+        border: 1px dashed #b4b9be;
+        -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        box-sizing: border-box;
+        cursor: default;
+        line-height: 20px;
+        padding: 9px 0;
+        position: relative;
+        text-align: center;
+        width: 100%;
+}
+
+.media-widget-control .media-widget-preview {
+        text-align: center;
+}
+.media-widget-control .media-widget-preview .notice {
+        text-align: initial;
+}
+.media-frame .media-widget-embed-notice p code,
+.media-widget-control .notice p code {
+        padding: 0 3px 0 0;
+}
+.media-frame .media-widget-embed-notice {
+        margin-top: 16px;
+}
+.media-widget-control .media-widget-preview img {
+        max-width: 100%;
+}
+.media-widget-control .media-widget-preview .wp-video-shortcode {
+        background: #000;
+}
+
+.media-frame.media-widget .media-toolbar-secondary {
+        min-width: 300px;
+}
+
+.media-frame.media-widget .image-details .embed-media-settings .setting.align,
+.media-frame.media-widget .attachment-display-settings .setting.align,
+.media-frame.media-widget .embed-media-settings .setting.align,
+.media-frame.media-widget .embed-link-settings .setting.link-text,
+.media-frame.media-widget .replace-attachment,
+.media-frame.media-widget .checkbox-setting.autoplay {
+        display: none;
+}
+
+.media-widget-video-preview {
+        width: 100%;
+}
+
+.media-widget-video-link {
+        display: inline-block;
+        min-height: 132px;
+        width: 100%;
+        background: black;
+}
+
+.media-widget-video-link .dashicons {
+        font: normal 60px/1 'dashicons';
+        position: relative;
+        width: 100%;
+        top: -90px;
+        color: white;
+        text-decoration: none;
+}
+
+.media-widget-video-link.no-poster .dashicons {
+        top: 30px;
+}
+
+.media-frame #embed-url-field.invalid {
+        border: 1px solid #f00;
+}
+
+.wp-customizer .mejs-controls a:focus > .mejs-offscreen,
+.widgets-php .mejs-controls a:focus > .mejs-offscreen {
+        z-index: 2;
+}
+
 /* Widget Dragging Helpers */
 .widget.ui-draggable-dragging {

trunk/src/wp-content/themes/twentyten/style.css

@@ -842 +842 @@
         text-align: center;
 }
+.widget-container .wp-caption {
+        max-width: 100% !important;
+}
 .wp-caption img {
         margin: 5px 5px 0;

trunk/src/wp-includes/default-widgets.php

@@ -19 +19 @@
 /** WP_Widget_Archives class */
 require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-archives.php' );
+
+/** WP_Widget_Media class */
+require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media.php' );
+
+/** WP_Widget_Media_Audio class */
+require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-audio.php' );
+
+/** WP_Widget_Media_Image class */
+require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-image.php' );
+
+/** WP_Widget_Media_Video class */
+require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-media-video.php' );
+
+/** WP_Widget_Meta class */
+require_once( ABSPATH . WPINC . '/widgets/class-wp-widget-meta.php' );
 
 /** WP_Widget_Meta class */

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

@@ -469 +469 @@
                         // Prevent placement container from being being re-triggered as being rendered among nested partials.
                         placement.container.data( 'customize-partial-content-rendered', true );
+
+                        /*
+                         * Note that the 'wp_audio_shortcode_library' and 'wp_video_shortcode_library' filters
+                         * will determine whether or not wp.mediaelement is loaded and whether it will
+                         * initialize audio and video respectively. See also https://core.trac.wordpress.org/ticket/40144
+                         */
+                        if ( wp.mediaelement ) {
+                                wp.mediaelement.initialize();
+                        }
 
                         /**

trunk/src/wp-includes/media-template.php

@@ -609 +609 @@
 
                 <# if ( 'image' === data.type ) { #>
-                        <label class="setting">
+                        <label class="setting align">
                                 <span><?php _e('Alignment'); ?></span>
                                 <select class="alignment"
@@ -1088 +1088 @@
                                 </div>
 
-                                <label class="setting checkbox-setting">
+                                <label class="setting checkbox-setting autoplay">
                                         <input type="checkbox" data-setting="autoplay" />
                                         <span><?php _e( 'Autoplay' ); ?></span>
@@ -1177 +1177 @@
                                 </div>
 
-                                <label class="setting checkbox-setting">
+                                <label class="setting checkbox-setting autoplay">
                                         <input type="checkbox" data-setting="autoplay" />
                                         <span><?php _e( 'Autoplay' ); ?></span>

trunk/src/wp-includes/script-loader.php

@@ -603 +603 @@
 
                 $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
+                $scripts->add( 'media-widgets', "/wp-admin/js/widgets/media-widgets$suffix.js", array( 'jquery', 'media-models', 'media-views' ) );
+                $scripts->add_inline_script( 'media-widgets', 'wp.mediaWidgets.init();', 'after' );
+
+                $scripts->add( 'media-audio-widget', "/wp-admin/js/widgets/media-audio-widget$suffix.js", array( 'media-widgets', 'media-audiovideo' ) );
+                $scripts->add( 'media-image-widget', "/wp-admin/js/widgets/media-image-widget$suffix.js", array( 'media-widgets' ) );
+                $scripts->add( 'media-video-widget', "/wp-admin/js/widgets/media-video-widget$suffix.js", array( 'media-widgets', 'media-audiovideo' ) );
                 $scripts->add( 'text-widgets', "/wp-admin/js/widgets/text-widgets$suffix.js", array( 'jquery', 'backbone', 'editor', 'wp-util' ) );
                 $scripts->add_inline_script( 'text-widgets', 'wp.textWidgets.init();', 'after' );

trunk/src/wp-includes/widgets.php

@@ -1437 +1437 @@
  */
 function wp_widgets_init() {
-        if ( !is_blog_installed() )
-                return;
-
-        register_widget('WP_Widget_Pages');
-
-        register_widget('WP_Widget_Calendar');
-
-        register_widget('WP_Widget_Archives');
-
-        if ( get_option( 'link_manager_enabled' ) )
-                register_widget('WP_Widget_Links');
-
-        register_widget('WP_Widget_Meta');
-
-        register_widget('WP_Widget_Search');
-
-        register_widget('WP_Widget_Text');
-
-        register_widget('WP_Widget_Categories');
-
-        register_widget('WP_Widget_Recent_Posts');
-
-        register_widget('WP_Widget_Recent_Comments');
-
-        register_widget('WP_Widget_RSS');
-
-        register_widget('WP_Widget_Tag_Cloud');
-
-        register_widget('WP_Nav_Menu_Widget');
+        if ( ! is_blog_installed() ) {
+                return;
+        }
+
+        register_widget( 'WP_Widget_Pages' );
+
+        register_widget( 'WP_Widget_Calendar' );
+
+        register_widget( 'WP_Widget_Archives' );
+
+        if ( get_option( 'link_manager_enabled' ) ) {
+                register_widget( 'WP_Widget_Links' );
+        }
+
+        register_widget( 'WP_Widget_Media_Audio' );
+
+        register_widget( 'WP_Widget_Media_Image' );
+
+        register_widget( 'WP_Widget_Media_Video' );
+
+        register_widget( 'WP_Widget_Meta' );
+
+        register_widget( 'WP_Widget_Search' );
+
+        register_widget( 'WP_Widget_Text' );
+
+        register_widget( 'WP_Widget_Categories' );
+
+        register_widget( 'WP_Widget_Recent_Posts' );
+
+        register_widget( 'WP_Widget_Recent_Comments' );
+
+        register_widget( 'WP_Widget_RSS' );
+
+        register_widget( 'WP_Widget_Tag_Cloud' );
+
+        register_widget( 'WP_Nav_Menu_Widget' );
 
         /**

trunk/tests/phpunit/tests/widgets/text-widget.php

@@ -179 +179 @@
                 $result = $widget->update( $instance, array() );
                 $this->assertEquals( $result, $expected );
-
                 remove_filter( 'map_meta_cap', array( $this, 'grant_unfiltered_html_cap' ) );
+
                 add_filter( 'map_meta_cap', array( $this, 'revoke_unfiltered_html_cap' ), 10, 2 );
                 $this->assertFalse( current_user_can( 'unfiltered_html' ) );
@@ -187 +187 @@
                 $result = $widget->update( $instance, array() );
                 $this->assertEquals( $result, $expected );
-                remove_filter( 'map_meta_cap', array( $this, 'revoke_unfiltered_html_cap' ), 10, 2 );
+                remove_filter( 'map_meta_cap', array( $this, 'revoke_unfiltered_html_cap' ), 10 );
         }
 

trunk/tests/qunit/index.html

@@ -25 +25 @@
                 <script src="../../src/wp-includes/js/wp-util.js"></script>
                 <script src="../../src/wp-includes/js/wp-a11y.js"></script>
+                <script>
+                        window._wpMediaModelsL10n = {"settings":{"ajaxurl":"\/wp-admin\/admin-ajax.php","post":{"id":0}}};
+                </script>
+                <script src="../../src/wp-includes/js/media-models.js"></script>
+                <script>
+                        window.userSettings = {"url":"\/","uid":"0","time":"1493325477","secure":""};
+                </script>
+                <script src="../../src/wp-includes/js/utils.js"></script>
+                <script src="../../src/wp-includes/js/plupload/plupload.full.min.js"></script>
+                <script>
+                        window.pluploadL10n = {"queue_limit_exceeded":"You have attempted to queue too many files.","file_exceeds_size_limit":"%s exceeds the maximum upload size for this site.","zero_byte_file":"This file is empty. Please try another.","invalid_filetype":"Sorry, this file type is not permitted for security reasons.","not_an_image":"This file is not an image. Please try another.","image_memory_exceeded":"Memory exceeded. Please try another smaller file.","image_dimensions_exceeded":"This is larger than the maximum size. Please try another.","default_error":"An error occurred in the upload. Please try again later.","missing_upload_url":"There was a configuration error. Please contact the server administrator.","upload_limit_exceeded":"You may only upload 1 file.","http_error":"HTTP error.","upload_failed":"Upload failed.","big_upload_failed":"Please try uploading this file with the %1$sbrowser uploader%2$s.","big_upload_queued":"%s exceeds the maximum upload size for the multi-file uploader when used in your browser.","io_error":"IO error.","security_error":"Security error.","file_cancelled":"File canceled.","upload_stopped":"Upload stopped.","dismiss":"Dismiss","crunching":"Crunching\u2026","deleted":"moved to the trash.","error_uploading":"\u201c%s\u201d has failed to upload."};
+                        window._wpPluploadSettings = {"defaults":{"runtimes":"html5,flash,silverlight,html4","file_data_name":"async-upload","url":"\/wp-admin\/async-upload.php","flash_swf_url":"http:\/\/src.wordpress-develop.dev\/wp-includes\/js\/plupload\/plupload.flash.swf","silverlight_xap_url":"http:\/\/src.wordpress-develop.dev\/wp-includes\/js\/plupload\/plupload.silverlight.xap","filters":{"max_file_size":"2097152b","mime_types":[{"extensions":"jpg,jpeg,jpe,gif,png,bmp,tiff,tif,ico,asf,asx,wmv,wmx,wm,avi,divx,flv,mov,qt,mpeg,mpg,mpe,mp4,m4v,ogv,webm,mkv,3gp,3gpp,3g2,3gp2,txt,asc,c,cc,h,srt,csv,tsv,ics,rtx,css,vtt,dfxp,mp3,m4a,m4b,ra,ram,wav,ogg,oga,mid,midi,wma,wax,mka,rtf,js,pdf,class,tar,zip,gz,gzip,rar,7z,psd,xcf,doc,pot,pps,ppt,wri,xla,xls,xlt,xlw,mdb,mpp,docx,docm,dotx,dotm,xlsx,xlsm,xlsb,xltx,xltm,xlam,pptx,pptm,ppsx,ppsm,potx,potm,ppam,sldx,sldm,onetoc,onetoc2,onetmp,onepkg,oxps,xps,odt,odp,ods,odg,odc,odb,odf,wp,wpd,key,numbers,pages"}]},"multipart_params":{"action":"upload-attachment","_wpnonce":"87fa5740b8"}},"browser":{"mobile":false,"supported":true},"limitExceeded":false};
+                </script>
+                <script src="../../src/wp-includes/js/plupload/wp-plupload.js"></script>
+                <script>
+                        window.mejsL10n = {"language":"en-US","strings":{"Close":"Close","Fullscreen":"Fullscreen","Turn off Fullscreen":"Turn off Fullscreen","Go Fullscreen":"Go Fullscreen","Download File":"Download File","Download Video":"Download Video","Play":"Play","Pause":"Pause","Captions\/Subtitles":"Captions\/Subtitles","None":"None","Time Slider":"Time Slider","Skip back %1 seconds":"Skip back %1 seconds","Video Player":"Video Player","Audio Player":"Audio Player","Volume Slider":"Volume Slider","Mute Toggle":"Mute Toggle","Unmute":"Unmute","Mute":"Mute","Use Up\/Down Arrow keys to increase or decrease volume.":"Use Up\/Down Arrow keys to increase or decrease volume.","Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds.":"Use Left\/Right Arrow keys to advance one second, Up\/Down arrows to advance ten seconds."}};
+                        window._wpmejsSettings = {"pluginPath":"\/wp-includes\/js\/mediaelement\/"};
+                </script>
+                <script src="../../src/wp-includes/js/mediaelement/mediaelement-and-player.min.js"></script>
+                <script src="../../src/wp-includes/js/mediaelement/wp-mediaelement.js"></script>
+                <script>
+                        window._wpMediaViewsL10n = {"url":"URL","addMedia":"Add Media","search":"Search","select":"Select","cancel":"Cancel","update":"Update","replace":"Replace","remove":"Remove","back":"Back","selected":"%d selected","dragInfo":"Drag and drop to reorder media files.","uploadFilesTitle":"Upload Files","uploadImagesTitle":"Upload Images","mediaLibraryTitle":"Media Library","insertMediaTitle":"Insert Media","createNewGallery":"Create a new gallery","createNewPlaylist":"Create a new playlist","createNewVideoPlaylist":"Create a new video playlist","returnToLibrary":"\u2190 Return to library","allMediaItems":"All media items","allDates":"All dates","noItemsFound":"No items found.","insertIntoPost":"Insert into post","unattached":"Unattached","trash":"Trash","uploadedToThisPost":"Uploaded to this post","warnDelete":"You are about to permanently delete this item.\nThis will remove it from your site.\n 'Cancel' to stop, 'OK' to delete.","warnBulkDelete":"You are about to permanently delete these items.\nThis will remove them from your site.\n 'Cancel' to stop, 'OK' to delete.","warnBulkTrash":"You are about to trash these items.\n  'Cancel' to stop, 'OK' to delete.","bulkSelect":"Bulk Select","cancelSelection":"Cancel Selection","trashSelected":"Trash Selected","untrashSelected":"Untrash Selected","deleteSelected":"Delete Selected","deletePermanently":"Delete Permanently","apply":"Apply","filterByDate":"Filter by date","filterByType":"Filter by type","searchMediaLabel":"Search Media","searchMediaPlaceholder":"Search media items...","noMedia":"No media files found.","attachmentDetails":"Attachment Details","insertFromUrlTitle":"Insert from URL","setFeaturedImageTitle":"Featured Image","setFeaturedImage":"Set featured image","createGalleryTitle":"Create Gallery","editGalleryTitle":"Edit Gallery","cancelGalleryTitle":"\u2190 Cancel Gallery","insertGallery":"Insert gallery","updateGallery":"Update gallery","addToGallery":"Add to gallery","addToGalleryTitle":"Add to Gallery","reverseOrder":"Reverse order","imageDetailsTitle":"Image Details","imageReplaceTitle":"Replace Image","imageDetailsCancel":"Cancel Edit","editImage":"Edit Image","chooseImage":"Choose Image","selectAndCrop":"Select and Crop","skipCropping":"Skip Cropping","cropImage":"Crop Image","cropYourImage":"Crop your image","cropping":"Cropping\u2026","suggestedDimensions":"Suggested image dimensions:","cropError":"There has been an error cropping your image.","audioDetailsTitle":"Audio Details","audioReplaceTitle":"Replace Audio","audioAddSourceTitle":"Add Audio Source","audioDetailsCancel":"Cancel Edit","videoDetailsTitle":"Video Details","videoReplaceTitle":"Replace Video","videoAddSourceTitle":"Add Video Source","videoDetailsCancel":"Cancel Edit","videoSelectPosterImageTitle":"Select Poster Image","videoAddTrackTitle":"Add Subtitles","playlistDragInfo":"Drag and drop to reorder tracks.","createPlaylistTitle":"Create Audio Playlist","editPlaylistTitle":"Edit Audio Playlist","cancelPlaylistTitle":"\u2190 Cancel Audio Playlist","insertPlaylist":"Insert audio playlist","updatePlaylist":"Update audio playlist","addToPlaylist":"Add to audio playlist","addToPlaylistTitle":"Add to Audio Playlist","videoPlaylistDragInfo":"Drag and drop to reorder videos.","createVideoPlaylistTitle":"Create Video Playlist","editVideoPlaylistTitle":"Edit Video Playlist","cancelVideoPlaylistTitle":"\u2190 Cancel Video Playlist","insertVideoPlaylist":"Insert video playlist","updateVideoPlaylist":"Update video playlist","addToVideoPlaylist":"Add to video playlist","addToVideoPlaylistTitle":"Add to Video Playlist","settings":{"tabs":[],"tabUrl":"http:\/\/src.wordpress-develop.dev\/wp-admin\/media-upload.php?chromeless=1","mimeTypes":{"image":"Images","audio":"Audio","video":"Video"},"captions":true,"nonce":{"sendToEditor":"9585d11de6"},"post":{"id":0},"defaultProps":{"link":"none","align":"","size":""},"attachmentCounts":{"audio":1,"video":1},"embedExts":["mp3","ogg","wma","m4a","wav","mp4","m4v","webm","ogv","wmv","flv"],"embedMimes":{"mp3":"audio\/mpeg","ogg":"audio\/ogg","wma":"audio\/x-ms-wma","m4a":"audio\/mpeg","wav":"audio\/wav","mp4":"video\/mp4","m4v":"video\/mp4","webm":"video\/webm","ogv":"video\/ogg","wmv":"video\/x-ms-wmv","flv":"video\/x-flv"},"contentWidth":525,"months":[{"year":"2017","month":"4","text":"April 2017"}],"mediaTrash":0}};
+                </script>
+                <script src="../../src/wp-includes/js/media-views.js"></script>
+                <script src="../../src/wp-includes/js/media-editor.js"></script>
+                <script src="../../src/wp-includes/js/media-audiovideo.js"></script>
+                <script src="../../src/wp-includes/js/mce-view.js"></script>
 
                 <!-- QUnit -->
@@ -65 +92 @@
                 <script src="../../src/wp-admin/js/word-count.js"></script>
 
+                <script src="../../src/wp-admin/js/widgets/media-widgets.js"></script>
+                <script>
+                        wp.mediaWidgets.init();
+                </script>
+                <script src="../../src/wp-admin/js/widgets/media-image-widget.js"></script>
+                <script>
+                        wp.mediaWidgets.modelConstructors[ "media_image" ].prototype.schema = {"attachment_id":{"type":"integer","default":0,"minimum":0,"media_prop":"id"},"url":{"type":"string","default":"","format":"uri"},"title":{"type":"string","default":"","should_preview_update":false},"size":{"type":"string","default":"medium","enum":["thumbnail","medium","medium_large","large","twentyseventeen-featured-image","twentyseventeen-thumbnail-avatar","full","custom"]},"width":{"type":"integer","default":0,"minimum":0},"height":{"type":"integer","default":0,"minimum":0},"caption":{"type":"string","default":"","should_preview_update":false},"alt":{"type":"string","default":""},"link_type":{"type":"string","default":"none","enum":["none","file","post","custom"],"media_prop":"link","should_preview_update":false},"link_url":{"type":"string","default":"","format":"uri","media_prop":"linkUrl","should_preview_update":false},"image_classes":{"type":"string","default":"","media_prop":"extraClasses","should_preview_update":false},"link_classes":{"type":"string","default":"","media_prop":"linkClassName","should_preview_update":false},"link_rel":{"type":"string","default":"","media_prop":"linkRel","should_preview_update":false},"link_target_blank":{"type":"boolean","default":false,"media_prop":"linkTargetBlank","should_preview_update":false},"image_title":{"type":"string","default":"","media_prop":"title","should_preview_update":false}};
+
+                        wp.mediaWidgets.controlConstructors[ "media_image" ].prototype.mime_type = "image";
+                        _.extend( wp.mediaWidgets.controlConstructors[ "media_image" ].prototype.l10n, {"no_media_selected":"No image selected","select_media":"Select Image","change_media":"Change Image","edit_media":"Edit Image","add_to_widget":"Add to Widget","missing_attachment":"We can&#8217;t find that image. Check your <a href=\"http:\/\/src.wordpress-develop.dev\/wp-admin\/upload.php\">media library<\/a> and make sure it wasn&#8217;t deleted.","media_library_state_multi":{"0":"Image Widget (%d)","1":"Image Widget (%d)","singular":"Image Widget (%d)","plural":"Image Widget (%d)","context":null,"domain":null},"media_library_state_single":"Image Widget"} );
+                </script>
+                <script src="../../src/wp-admin/js/widgets/media-video-widget.js"></script>
+                <script>
+                        wp.mediaWidgets.modelConstructors[ "media_video" ].prototype.schema = {"attachment_id":{"type":"integer","default":0,"minimum":0,"media_prop":"id"},"url":{"type":"string","default":"","format":"uri"},"title":{"type":"string","default":""},"preload":{"type":"string","default":"metadata","enum":["none","auto","metadata"]},"loop":{"type":"boolean","default":false},"content":{"type":"string","default":""},"mp4":{"type":"string","default":"","format":"uri"},"m4v":{"type":"string","default":"","format":"uri"},"webm":{"type":"string","default":"","format":"uri"},"ogv":{"type":"string","default":"","format":"uri"},"wmv":{"type":"string","default":"","format":"uri"},"flv":{"type":"string","default":"","format":"uri"}};
+
+                        wp.mediaWidgets.controlConstructors[ "media_video" ].prototype.mime_type = "video";
+                        _.extend( wp.mediaWidgets.controlConstructors[ "media_video" ].prototype.l10n, {"no_media_selected":"No video selected","select_media":"Select Video","change_media":"Change Video","edit_media":"Edit Video","add_to_widget":"Add to Widget","missing_attachment":"We can&#8217;t find that video. Check your <a href=\"http:\/\/src.wordpress-develop.dev\/wp-admin\/upload.php\">media library<\/a> and make sure it wasn&#8217;t deleted.","media_library_state_multi":{"0":"Video Widget (%d)","1":"Video Widget (%d)","singular":"Video Widget (%d)","plural":"Video Widget (%d)","context":null,"domain":null},"media_library_state_single":"Video Widget"} );
+                </script>
+                <script src="../../src/wp-admin/js/widgets/media-audio-widget.js"></script>
+                <script>
+                        wp.mediaWidgets.modelConstructors[ "media_audio" ].prototype.schema = {"attachment_id":{"type":"integer","default":0,"minimum":0,"media_prop":"id"},"url":{"type":"string","default":"","format":"uri"},"title":{"type":"string","default":""},"preload":{"type":"string","default":"none","enum":["none","auto","metadata"]},"loop":{"type":"boolean","default":false},"mp3":{"type":"string","default":"","format":"uri"},"ogg":{"type":"string","default":"","format":"uri"},"wma":{"type":"string","default":"","format":"uri"},"m4a":{"type":"string","default":"","format":"uri"},"wav":{"type":"string","default":"","format":"uri"}};
+
+                        wp.mediaWidgets.controlConstructors[ "media_audio" ].prototype.mime_type = "audio";
+                        _.extend( wp.mediaWidgets.controlConstructors[ "media_audio" ].prototype.l10n, {"no_media_selected":"No audio selected","select_media":"Select File","change_media":"Change Audio","edit_media":"Edit Audio","add_to_widget":"Add to Widget","missing_attachment":"We can&#8217;t find that audio file. Check your <a href=\"http:\/\/src.wordpress-develop.dev\/wp-admin\/upload.php\">media library<\/a> and make sure it wasn&#8217;t deleted.","media_library_state_multi":{"0":"Audio Widget (%d)","1":"Audio Widget (%d)","singular":"Audio Widget (%d)","plural":"Audio Widget (%d)","context":null,"domain":null},"media_library_state_single":"Audio Widget"} );
+                </script>
+
                 <!-- Unit tests -->
                 <script src="wp-admin/js/password-strength-meter.js"></script>
@@ -77 +130 @@
                 <script src="wp-admin/js/word-count.js"></script>
                 <script src="wp-admin/js/nav-menu.js"></script>
+                <script src="wp-admin/js/widgets/test-media-widgets.js"></script>
+                <script src="wp-admin/js/widgets/test-media-image-widget.js"></script>
+                <script src="wp-admin/js/widgets/test-media-video-widget.js"></script>
 
                 <!-- Customizer templates for sections -->
@@ -500 +556 @@
                                 </div><!-- #available-widgets -->
                         </div><!-- #widgets-left -->
+                        
+                        <script type="text/html" id="tmpl-widget-media-media_image-control">
+                        <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
+                        <p>
+                                <label for="{{ elementIdPrefix }}title">Title:</label>
+                                <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
+                        </p>
+                        <div class="media-widget-preview">
+                                <div class="attachment-media-view">
+                                        <div class="placeholder">No image selected</div>
+                                </div>
+                        </div>
+                        <p class="media-widget-buttons">
+                                <button type="button" class="button edit-media selected">
+                                        Edit Image                              </button>
+                                <button type="button" class="button change-media select-media selected">
+                                        Replace Image                           </button>
+                                <button type="button" class="button select-media not-selected">
+                                        Add Image                               </button>
+                        </p>
+                </script>
+                                <script type="text/html" id="tmpl-wp-media-widget-image-preview">
+                        <#
+                        var describedById = 'describedBy-' + String( Math.random() );
+                        #>
+                        <# if ( data.error && 'missing_attachment' === data.error ) { #>
+                                <div class="notice notice-error notice-alt notice-missing-attachment">
+                                        <p>We can&#8217;t find that image. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
+                                </div>
+                        <# } else if ( data.error ) { #>
+                                <div class="notice notice-error notice-alt">
+                                        <p>Unable to preview media due to an unknown error.</p>
+                                </div>
+                        <# } else if ( data.url ) { #>
+                                <img class="attachment-thumb" src="{{ data.url }}" draggable="false" alt="{{ data.alt }}" <# if ( ! data.alt && data.currentFilename ) { #> aria-describedby="{{ describedById }}" <# } #> />
+                                <# if ( ! data.alt && data.currentFilename ) { #>
+                                        <p class="hidden" id="{{ describedById }}">Current image: {{ data.currentFilename }}</p>
+                                <# } #>
+                        <# } #>
+                </script>
+                                <script type="text/html" id="tmpl-widget-media-media_video-control">
+                        <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
+                        <p>
+                                <label for="{{ elementIdPrefix }}title">Title:</label>
+                                <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
+                        </p>
+                        <div class="media-widget-preview">
+                                <div class="attachment-media-view">
+                                        <div class="placeholder">No video selected</div>
+                                </div>
+                        </div>
+                        <p class="media-widget-buttons">
+                                <button type="button" class="button edit-media selected">
+                                        Edit Video                              </button>
+                                <button type="button" class="button change-media select-media selected">
+                                        Replace Video                           </button>
+                                <button type="button" class="button select-media not-selected">
+                                        Add Video                               </button>
+                        </p>
+                </script>
+                                <script type="text/html" id="tmpl-wp-media-widget-video-preview">
+                        <# if ( data.error && 'missing_attachment' === data.error ) { #>
+                                <div class="notice notice-error notice-alt notice-missing-attachment">
+                                        <p>We can&#8217;t find that video. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
+                                </div>
+                        <# } else if ( data.error && 'unsupported_file_type' === data.error ) { #>
+                                <div class="notice notice-error notice-alt notice-missing-attachment">
+                                        <p>Sorry, we can&#8217;t display the video file type selected. Please select a supported video file (<code>.mp4</code>, <code>.m4v</code>, <code>.webm</code>, <code>.ogv</code>, <code>.wmv</code>, <code>.flv</code>) or stream (YouTube or Vimeo) instead.</p>
+                                </div>
+                        <# } else if ( data.error ) { #>
+                                <div class="notice notice-error notice-alt">
+                                        <p>Unable to preview media due to an unknown error.</p>
+                                </div>
+                        <# } else if ( data.is_hosted_embed && data.model.poster ) { #>
+                                <a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link">
+                                        <img src="{{ data.model.poster }}" />
+                                </a>
+                        <# } else if ( data.is_hosted_embed ) { #>
+                                <a href="{{ data.model.src }}" target="_blank" class="media-widget-video-link no-poster">
+                                        <span class="dashicons dashicons-format-video"></span>
+                                </a>
+                        <# } else if ( data.model.src ) { #>
+                                <#  var w_rule = '', classes = [],
+                w, h, settings = wp.media.view.settings,
+                isYouTube = isVimeo = false;
+
+        if ( ! _.isEmpty( data.model.src ) ) {
+                isYouTube = data.model.src.match(/youtube|youtu\.be/);
+                isVimeo = -1 !== data.model.src.indexOf('vimeo');
+        }
+
+        if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
+                w = settings.contentWidth;
+        } else {
+                w = data.model.width;
+        }
+
+        if ( w !== data.model.width ) {
+                h = Math.ceil( ( data.model.height * w ) / data.model.width );
+        } else {
+                h = data.model.height;
+        }
+
+        if ( w ) {
+                w_rule = 'width: ' + w + 'px; ';
+        }
+
+        if ( isYouTube ) {
+                classes.push( 'youtube-video' );
+        }
+
+        if ( isVimeo ) {
+                classes.push( 'vimeo-video' );
+        }
+
+#>
+<div style="{{ w_rule }}" class="wp-video">
+<video controls
+        class="wp-video-shortcode {{ classes.join( ' ' ) }}"
+        <# if ( w ) { #>width="{{ w }}"<# } #>
+        <# if ( h ) { #>height="{{ h }}"<# } #>
+        <#
+                if ( ! _.isUndefined( data.model.poster ) && data.model.poster ) {
+                        #> poster="{{ data.model.poster }}"<#
+                } #>
+                preload="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"<#
+         if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+                #> autoplay<#
+        }
+         if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+                #> loop<#
+        }
+        #>
+>
+        <# if ( ! _.isEmpty( data.model.src ) ) {
+                if ( isYouTube ) { #>
+                <source src="{{ data.model.src }}" type="video/youtube" />
+                <# } else if ( isVimeo ) { #>
+                <source src="{{ data.model.src }}" type="video/vimeo" />
+                <# } else { #>
+                <source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
+                <# }
+        } #>
+
+        <# if ( data.model.mp4 ) { #>
+        <source src="{{ data.model.mp4 }}" type="{{ settings.embedMimes[ 'mp4' ] }}" />
+        <# } #>
+        <# if ( data.model.m4v ) { #>
+        <source src="{{ data.model.m4v }}" type="{{ settings.embedMimes[ 'm4v' ] }}" />
+        <# } #>
+        <# if ( data.model.webm ) { #>
+        <source src="{{ data.model.webm }}" type="{{ settings.embedMimes[ 'webm' ] }}" />
+        <# } #>
+        <# if ( data.model.ogv ) { #>
+        <source src="{{ data.model.ogv }}" type="{{ settings.embedMimes[ 'ogv' ] }}" />
+        <# } #>
+        <# if ( data.model.wmv ) { #>
+        <source src="{{ data.model.wmv }}" type="{{ settings.embedMimes[ 'wmv' ] }}" />
+        <# } #>
+        <# if ( data.model.flv ) { #>
+        <source src="{{ data.model.flv }}" type="{{ settings.embedMimes[ 'flv' ] }}" />
+        <# } #>
+                {{{ data.model.content }}}
+</video>
+</div>
+                        <# } #>
+                </script>
+                        <script type="text/html" id="tmpl-widget-media-media_audio-control">
+                                <# var elementIdPrefix = 'el' + String( Math.random() ) + '_' #>
+                                <p>
+                                        <label for="{{ elementIdPrefix }}title">Title:</label>
+                                        <input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
+                                </p>
+                                <div class="media-widget-preview">
+                                        <div class="attachment-media-view">
+                                                <div class="placeholder">No audio selected</div>
+                                        </div>
+                                </div>
+                                <p class="media-widget-buttons">
+                                        <button type="button" class="button edit-media selected">
+                                                Edit Audio                              </button>
+                                        <button type="button" class="button change-media select-media selected">
+                                                Replace Audio                           </button>
+                                        <button type="button" class="button select-media not-selected">
+                                                Add File                                </button>
+                                </p>
+                        </script>
+                        <script type="text/html" id="tmpl-wp-media-widget-audio-preview">
+                                <# if ( data.error && 'missing_attachment' === data.error ) { #>
+                                        <div class="notice notice-error notice-alt notice-missing-attachment">
+                                                <p>We can&#8217;t find that audio file. Check your <a href="http://src.wordpress-develop.dev/wp-admin/upload.php">media library</a> and make sure it wasn&#8217;t deleted.</p>
+                                        </div>
+                                <# } else if ( data.error ) { #>
+                                        <div class="notice notice-error notice-alt">
+                                                <p>Unable to preview media due to an unknown error.</p>
+                                        </div>
+                                <# } else if ( data.model && data.model.src ) { #>
+                                        <audio style="visibility: hidden"
+                                                controls
+                                                class="wp-audio-shortcode"
+                                                width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
+                                                preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
+                                                <#
+                                                if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+                                                        #> autoplay<#
+                                                }
+                                                if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+                                                        #> loop<#
+                                                }
+                                                #>
+                                        >
+                                        <# if ( ! _.isEmpty( data.model.src ) ) { #>
+                                                <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
+                                        <# } #>
+
+                                        <# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
+                                                <source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
+                                        <# } #>
+                                        <# if ( ! _.isEmpty( data.model.ogg ) ) { #>
+                                                <source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
+                                        <# } #>
+                                        <# if ( ! _.isEmpty( data.model.wma ) ) { #>
+                                                <source src="{{ data.model.wma }}" type="{{ wp.media.view.settings.embedMimes[ 'wma' ] }}" />
+                                        <# } #>
+                                        <# if ( ! _.isEmpty( data.model.m4a ) ) { #>
+                                                <source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
+                                        <# } #>
+                                        <# if ( ! _.isEmpty( data.model.wav ) ) { #>
+                                                <source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
+                                        <# } #>
+                                        </audio>
+                                <# } #>
+                        </script>
+                        <script type="text/html" id="tmpl-media-frame">
+                <div class="media-frame-menu"></div>
+                <div class="media-frame-title"></div>
+                <div class="media-frame-router"></div>
+                <div class="media-frame-content"></div>
+                <div class="media-frame-toolbar"></div>
+                <div class="media-frame-uploader"></div>
+        </script>
+
+        <script type="text/html" id="tmpl-media-modal">
+                <div class="media-modal wp-core-ui">
+                        <button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">Close media panel</span></span></button>
+                        <div class="media-modal-content"></div>
+                </div>
+                <div class="media-modal-backdrop"></div>
+        </script>
+
+        <script type="text/html" id="tmpl-uploader-window">
+                <div class="uploader-window-content">
+                        <h1>Drop files to upload</h1>
+                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-uploader-editor">
+                <div class="uploader-editor-content">
+                        <div class="uploader-editor-title">Drop files to upload</div>
+                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-uploader-inline">
+                <# var messageClass = data.message ? 'has-upload-message' : 'no-upload-message'; #>
+                <# if ( data.canClose ) { #>
+                <button class="close dashicons dashicons-no"><span class="screen-reader-text">Close uploader</span></button>
+                <# } #>
+                <div class="uploader-inline-content {{ messageClass }}">
+                <# if ( data.message ) { #>
+                        <h2 class="upload-message">{{ data.message }}</h2>
+                <# } #>
+                                        <div class="upload-ui">
+                                <h2 class="upload-instructions drop-instructions">Drop files anywhere to upload</h2>
+                                <p class="upload-instructions drop-instructions">or</p>
+                                <button type="button" class="browser button button-hero">Select Files</button>
+                        </div>
+
+                        <div class="upload-inline-status"></div>
+
+                        <div class="post-upload-ui">
+
+                                <p class="max-upload-size">Maximum upload file size: 2 MB.</p>
+
+                                <# if ( data.suggestedWidth && data.suggestedHeight ) { #>
+                                        <p class="suggested-dimensions">
+                                                Suggested image dimensions: {{data.suggestedWidth}} &times; {{data.suggestedHeight}}
+                                        </p>
+                                <# } #>
+
+                                                        </div>
+                                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-media-library-view-switcher">
+                <a href="?mode=list" class="view-list">
+                        <span class="screen-reader-text">List View</span>
+                </a>
+                <a href="?mode=grid" class="view-grid current">
+                        <span class="screen-reader-text">Grid View</span>
+                </a>
+        </script>
+
+        <script type="text/html" id="tmpl-uploader-status">
+                <h2>Uploading</h2>
+                <button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text">Dismiss Errors</span></button>
+
+                <div class="media-progress-bar"><div></div></div>
+                <div class="upload-details">
+                        <span class="upload-count">
+                                <span class="upload-index"></span> / <span class="upload-total"></span>
+                        </span>
+                        <span class="upload-detail-separator">&ndash;</span>
+                        <span class="upload-filename"></span>
+                </div>
+                <div class="upload-errors"></div>
+        </script>
+
+        <script type="text/html" id="tmpl-uploader-status-error">
+                <span class="upload-error-filename">{{{ data.filename }}}</span>
+                <span class="upload-error-message">{{ data.message }}</span>
+        </script>
+
+        <script type="text/html" id="tmpl-edit-attachment-frame">
+                <div class="edit-media-header">
+                        <button class="left dashicons <# if ( ! data.hasPrevious ) { #> disabled <# } #>"><span class="screen-reader-text">Edit previous media item</span></button>
+                        <button class="right dashicons <# if ( ! data.hasNext ) { #> disabled <# } #>"><span class="screen-reader-text">Edit next media item</span></button>
+                </div>
+                <div class="media-frame-title"></div>
+                <div class="media-frame-content"></div>
+        </script>
+
+        <script type="text/html" id="tmpl-attachment-details-two-column">
+                <div class="attachment-media-view {{ data.orientation }}">
+                        <div class="thumbnail thumbnail-{{ data.type }}">
+                                <# if ( data.uploading ) { #>
+                                        <div class="media-progress-bar"><div></div></div>
+                                <# } else if ( data.sizes && data.sizes.large ) { #>
+                                        <img class="details-image" src="{{ data.sizes.large.url }}" draggable="false" alt="" />
+                                <# } else if ( data.sizes && data.sizes.full ) { #>
+                                        <img class="details-image" src="{{ data.sizes.full.url }}" draggable="false" alt="" />
+                                <# } else if ( -1 === jQuery.inArray( data.type, [ 'audio', 'video' ] ) ) { #>
+                                        <img class="details-image icon" src="{{ data.icon }}" draggable="false" alt="" />
+                                <# } #>
+
+                                <# if ( 'audio' === data.type ) { #>
+                                <div class="wp-media-wrapper">
+                                        <audio style="visibility: hidden" controls class="wp-audio-shortcode" width="100%" preload="none">
+                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
+                                        </audio>
+                                </div>
+                                <# } else if ( 'video' === data.type ) {
+                                        var w_rule = '';
+                                        if ( data.width ) {
+                                                w_rule = 'width: ' + data.width + 'px;';
+                                        } else if ( wp.media.view.settings.contentWidth ) {
+                                                w_rule = 'width: ' + wp.media.view.settings.contentWidth + 'px;';
+                                        }
+                                #>
+                                <div style="{{ w_rule }}" class="wp-media-wrapper wp-video">
+                                        <video controls="controls" class="wp-video-shortcode" preload="metadata"
+                                                <# if ( data.width ) { #>width="{{ data.width }}"<# } #>
+                                                <# if ( data.height ) { #>height="{{ data.height }}"<# } #>
+                                                <# if ( data.image && data.image.src !== data.icon ) { #>poster="{{ data.image.src }}"<# } #>>
+                                                <source type="{{ data.mime }}" src="{{ data.url }}"/>
+                                        </video>
+                                </div>
+                                <# } #>
+
+                                <div class="attachment-actions">
+                                        <# if ( 'image' === data.type && ! data.uploading && data.sizes && data.can.save ) { #>
+                                        <button type="button" class="button edit-attachment">Edit Image</button>
+                                        <# } else if ( 'pdf' === data.subtype && data.sizes ) { #>
+                                        Document Preview                                        <# } #>
+                                </div>
+                        </div>
+                </div>
+                <div class="attachment-info">
+                        <span class="settings-save-status">
+                                <span class="spinner"></span>
+                                <span class="saved">Saved.</span>
+                        </span>
+                        <div class="details">
+                                <div class="filename"><strong>File name:</strong> {{ data.filename }}</div>
+                                <div class="filename"><strong>File type:</strong> {{ data.mime }}</div>
+                                <div class="uploaded"><strong>Uploaded on:</strong> {{ data.dateFormatted }}</div>
+
+                                <div class="file-size"><strong>File size:</strong> {{ data.filesizeHumanReadable }}</div>
+                                <# if ( 'image' === data.type && ! data.uploading ) { #>
+                                        <# if ( data.width && data.height ) { #>
+                                                <div class="dimensions"><strong>Dimensions:</strong> {{ data.width }} &times; {{ data.height }}</div>
+                                        <# } #>
+                                <# } #>
+
+                                <# if ( data.fileLength ) { #>
+                                        <div class="file-length"><strong>Length:</strong> {{ data.fileLength }}</div>
+                                <# } #>
+
+                                <# if ( 'audio' === data.type && data.meta.bitrate ) { #>
+                                        <div class="bitrate">
+                                                <strong>Bitrate:</strong> {{ Math.round( data.meta.bitrate / 1000 ) }}kb/s
+                                                <# if ( data.meta.bitrate_mode ) { #>
+                                                {{ ' ' + data.meta.bitrate_mode.toUpperCase() }}
+                                                <# } #>
+                                        </div>
+                                <# } #>
+
+                                <div class="compat-meta">
+                                        <# if ( data.compat && data.compat.meta ) { #>
+                                                {{{ data.compat.meta }}}
+                                        <# } #>
+                                </div>
+                        </div>
+
+                        <div class="settings">
+                                <label class="setting" data-setting="url">
+                                        <span class="name">URL</span>
+                                        <input type="text" value="{{ data.url }}" readonly />
+                                </label>
+                                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
+                                                                <label class="setting" data-setting="title">
+                                        <span class="name">Title</span>
+                                        <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
+                                </label>
+                                                                <# if ( 'audio' === data.type ) { #>
+                                                                <label class="setting" data-setting="artist">
+                                        <span class="name">Artist</span>
+                                        <input type="text" value="{{ data.artist || data.meta.artist || '' }}" />
+                                </label>
+                                                                <label class="setting" data-setting="album">
+                                        <span class="name">Album</span>
+                                        <input type="text" value="{{ data.album || data.meta.album || '' }}" />
+                                </label>
+                                                                <# } #>
+                                <label class="setting" data-setting="caption">
+                                        <span class="name">Caption</span>
+                                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+                                </label>
+                                <# if ( 'image' === data.type ) { #>
+                                        <label class="setting" data-setting="alt">
+                                                <span class="name">Alt Text</span>
+                                                <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
+                                        </label>
+                                <# } #>
+                                <label class="setting" data-setting="description">
+                                        <span class="name">Description</span>
+                                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
+                                </label>
+                                <label class="setting">
+                                        <span class="name">Uploaded By</span>
+                                        <span class="value">{{ data.authorName }}</span>
+                                </label>
+                                <# if ( data.uploadedToTitle ) { #>
+                                        <label class="setting">
+                                                <span class="name">Uploaded To</span>
+                                                <# if ( data.uploadedToLink ) { #>
+                                                        <span class="value"><a href="{{ data.uploadedToLink }}">{{ data.uploadedToTitle }}</a></span>
+                                                <# } else { #>
+                                                        <span class="value">{{ data.uploadedToTitle }}</span>
+                                                <# } #>
+                                        </label>
+                                <# } #>
+                                <div class="attachment-compat"></div>
+                        </div>
+
+                        <div class="actions">
+                                <a class="view-attachment" href="{{ data.link }}">View attachment page</a>
+                                <# if ( data.can.save ) { #> |
+                                        <a href="post.php?post={{ data.id }}&action=edit">Edit more details</a>
+                                <# } #>
+                                <# if ( ! data.uploading && data.can.remove ) { #> |
+                                                                                        <button type="button" class="button-link delete-attachment">Delete Permanently</button>
+                                                                        <# } #>
+                        </div>
+
+                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-attachment">
+                <div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
+                        <div class="thumbnail">
+                                <# if ( data.uploading ) { #>
+                                        <div class="media-progress-bar"><div style="width: {{ data.percent }}%"></div></div>
+                                <# } else if ( 'image' === data.type && data.sizes ) { #>
+                                        <div class="centered">
+                                                <img src="{{ data.size.url }}" draggable="false" alt="" />
+                                        </div>
+                                <# } else { #>
+                                        <div class="centered">
+                                                <# if ( data.image && data.image.src && data.image.src !== data.icon ) { #>
+                                                        <img src="{{ data.image.src }}" class="thumbnail" draggable="false" alt="" />
+                                                <# } else if ( data.sizes && data.sizes.medium ) { #>
+                                                        <img src="{{ data.sizes.medium.url }}" class="thumbnail" draggable="false" alt="" />
+                                                <# } else { #>
+                                                        <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
+                                                <# } #>
+                                        </div>
+                                        <div class="filename">
+                                                <div>{{ data.filename }}</div>
+                                        </div>
+                                <# } #>
+                        </div>
+                        <# if ( data.buttons.close ) { #>
+                                <button type="button" class="button-link attachment-close media-modal-icon"><span class="screen-reader-text">Remove</span></button>
+                        <# } #>
+                </div>
+                <# if ( data.buttons.check ) { #>
+                        <button type="button" class="check" tabindex="-1"><span class="media-modal-icon"></span><span class="screen-reader-text">Deselect</span></button>
+                <# } #>
+                <#
+                var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
+                if ( data.describe ) {
+                        if ( 'image' === data.type ) { #>
+                                <input type="text" value="{{ data.caption }}" class="describe" data-setting="caption"
+                                        placeholder="Caption this image&hellip;" {{ maybeReadOnly }} />
+                        <# } else { #>
+                                <input type="text" value="{{ data.title }}" class="describe" data-setting="title"
+                                        <# if ( 'video' === data.type ) { #>
+                                                placeholder="Describe this video&hellip;"
+                                        <# } else if ( 'audio' === data.type ) { #>
+                                                placeholder="Describe this audio file&hellip;"
+                                        <# } else { #>
+                                                placeholder="Describe this media file&hellip;"
+                                        <# } #> {{ maybeReadOnly }} />
+                        <# }
+                } #>
+        </script>
+
+        <script type="text/html" id="tmpl-attachment-details">
+                <h2>
+                        Attachment Details                      <span class="settings-save-status">
+                                <span class="spinner"></span>
+                                <span class="saved">Saved.</span>
+                        </span>
+                </h2>
+                <div class="attachment-info">
+                        <div class="thumbnail thumbnail-{{ data.type }}">
+                                <# if ( data.uploading ) { #>
+                                        <div class="media-progress-bar"><div></div></div>
+                                <# } else if ( 'image' === data.type && data.sizes ) { #>
+                                        <img src="{{ data.size.url }}" draggable="false" alt="" />
+                                <# } else { #>
+                                        <img src="{{ data.icon }}" class="icon" draggable="false" alt="" />
+                                <# } #>
+                        </div>
+                        <div class="details">
+                                <div class="filename">{{ data.filename }}</div>
+                                <div class="uploaded">{{ data.dateFormatted }}</div>
+
+                                <div class="file-size">{{ data.filesizeHumanReadable }}</div>
+                                <# if ( 'image' === data.type && ! data.uploading ) { #>
+                                        <# if ( data.width && data.height ) { #>
+                                                <div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
+                                        <# } #>
+
+                                        <# if ( data.can.save && data.sizes ) { #>
+                                                <a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank">Edit Image</a>
+                                        <# } #>
+                                <# } #>
+
+                                <# if ( data.fileLength ) { #>
+                                        <div class="file-length">Length: {{ data.fileLength }}</div>
+                                <# } #>
+
+                                <# if ( ! data.uploading && data.can.remove ) { #>
+                                                                                        <button type="button" class="button-link delete-attachment">Delete Permanently</button>
+                                                                        <# } #>
+
+                                <div class="compat-meta">
+                                        <# if ( data.compat && data.compat.meta ) { #>
+                                                {{{ data.compat.meta }}}
+                                        <# } #>
+                                </div>
+                        </div>
+                </div>
+
+                <label class="setting" data-setting="url">
+                        <span class="name">URL</span>
+                        <input type="text" value="{{ data.url }}" readonly />
+                </label>
+                <# var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly'; #>
+                                <label class="setting" data-setting="title">
+                        <span class="name">Title</span>
+                        <input type="text" value="{{ data.title }}" {{ maybeReadOnly }} />
+                </label>
+                                <# if ( 'audio' === data.type ) { #>
+                                <label class="setting" data-setting="artist">
+                        <span class="name">Artist</span>
+                        <input type="text" value="{{ data.artist || data.meta.artist || '' }}" />
+                </label>
+                                <label class="setting" data-setting="album">
+                        <span class="name">Album</span>
+                        <input type="text" value="{{ data.album || data.meta.album || '' }}" />
+                </label>
+                                <# } #>
+                <label class="setting" data-setting="caption">
+                        <span class="name">Caption</span>
+                        <textarea {{ maybeReadOnly }}>{{ data.caption }}</textarea>
+                </label>
+                <# if ( 'image' === data.type ) { #>
+                        <label class="setting" data-setting="alt">
+                                <span class="name">Alt Text</span>
+                                <input type="text" value="{{ data.alt }}" {{ maybeReadOnly }} />
+                        </label>
+                <# } #>
+                <label class="setting" data-setting="description">
+                        <span class="name">Description</span>
+                        <textarea {{ maybeReadOnly }}>{{ data.description }}</textarea>
+                </label>
+        </script>
+
+        <script type="text/html" id="tmpl-media-selection">
+                <div class="selection-info">
+                        <span class="count"></span>
+                        <# if ( data.editable ) { #>
+                                <button type="button" class="button-link edit-selection">Edit Selection</button>
+                        <# } #>
+                        <# if ( data.clearable ) { #>
+                                <button type="button" class="button-link clear-selection">Clear</button>
+                        <# } #>
+                </div>
+                <div class="selection-view"></div>
+        </script>
+
+        <script type="text/html" id="tmpl-attachment-display-settings">
+                <h2>Attachment Display Settings</h2>
+
+                <# if ( 'image' === data.type ) { #>
+                        <label class="setting">
+                                <span>Alignment</span>
+                                <select class="alignment"
+                                        data-setting="align"
+                                        <# if ( data.userSettings ) { #>
+                                                data-user-setting="align"
+                                        <# } #>>
+
+                                        <option value="left">
+                                                Left                                    </option>
+                                        <option value="center">
+                                                Center                                  </option>
+                                        <option value="right">
+                                                Right                                   </option>
+                                        <option value="none" selected>
+                                                None                                    </option>
+                                </select>
+                        </label>
+                <# } #>
+
+                <div class="setting">
+                        <label>
+                                <# if ( data.model.canEmbed ) { #>
+                                        <span>Embed or Link</span>
+                                <# } else { #>
+                                        <span>Link To</span>
+                                <# } #>
+
+                                <select class="link-to"
+                                        data-setting="link"
+                                        <# if ( data.userSettings && ! data.model.canEmbed ) { #>
+                                                data-user-setting="urlbutton"
+                                        <# } #>>
+
+                                <# if ( data.model.canEmbed ) { #>
+                                        <option value="embed" selected>
+                                                Embed Media Player                                      </option>
+                                        <option value="file">
+                                <# } else { #>
+                                        <option value="none" selected>
+                                                None                                    </option>
+                                        <option value="file">
+                                <# } #>
+                                        <# if ( data.model.canEmbed ) { #>
+                                                Link to Media File                                      <# } else { #>
+                                                Media File                                      <# } #>
+                                        </option>
+                                        <option value="post">
+                                        <# if ( data.model.canEmbed ) { #>
+                                                Link to Attachment Page                                 <# } else { #>
+                                                Attachment Page                                 <# } #>
+                                        </option>
+                                <# if ( 'image' === data.type ) { #>
+                                        <option value="custom">
+                                                Custom URL                                      </option>
+                                <# } #>
+                                </select>
+                        </label>
+                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
+                </div>
+
+                <# if ( 'undefined' !== typeof data.sizes ) { #>
+                        <label class="setting">
+                                <span>Size</span>
+                                <select class="size" name="size"
+                                        data-setting="size"
+                                        <# if ( data.userSettings ) { #>
+                                                data-user-setting="imgsize"
+                                        <# } #>>
+                                                                                        <#
+                                                var size = data.sizes['thumbnail'];
+                                                if ( size ) { #>
+                                                        <option value="thumbnail" >
+                                                                Thumbnail &ndash; {{ size.width }} &times; {{ size.height }}
+                                                        </option>
+                                                <# } #>
+                                                                                        <#
+                                                var size = data.sizes['medium'];
+                                                if ( size ) { #>
+                                                        <option value="medium" >
+                                                                Medium &ndash; {{ size.width }} &times; {{ size.height }}
+                                                        </option>
+                                                <# } #>
+                                                                                        <#
+                                                var size = data.sizes['large'];
+                                                if ( size ) { #>
+                                                        <option value="large" >
+                                                                Large &ndash; {{ size.width }} &times; {{ size.height }}
+                                                        </option>
+                                                <# } #>
+                                                                                        <#
+                                                var size = data.sizes['full'];
+                                                if ( size ) { #>
+                                                        <option value="full"  selected='selected'>
+                                                                Full Size &ndash; {{ size.width }} &times; {{ size.height }}
+                                                        </option>
+                                                <# } #>
+                                                                        </select>
+                        </label>
+                <# } #>
+        </script>
+
+        <script type="text/html" id="tmpl-gallery-settings">
+                <h2>Gallery Settings</h2>
+
+                <label class="setting">
+                        <span>Link To</span>
+                        <select class="link-to"
+                                data-setting="link"
+                                <# if ( data.userSettings ) { #>
+                                        data-user-setting="urlbutton"
+                                <# } #>>
+
+                                <option value="post" <# if ( ! wp.media.galleryDefaults.link || 'post' == wp.media.galleryDefaults.link ) {
+                                        #>selected="selected"<# }
+                                #>>
+                                        Attachment Page                         </option>
+                                <option value="file" <# if ( 'file' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
+                                        Media File                              </option>
+                                <option value="none" <# if ( 'none' == wp.media.galleryDefaults.link ) { #>selected="selected"<# } #>>
+                                        None                            </option>
+                        </select>
+                </label>
+
+                <label class="setting">
+                        <span>Columns</span>
+                        <select class="columns" name="columns"
+                                data-setting="columns">
+                                                                        <option value="1" <#
+                                                if ( 1 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                1                                       </option>
+                                                                        <option value="2" <#
+                                                if ( 2 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                2                                       </option>
+                                                                        <option value="3" <#
+                                                if ( 3 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                3                                       </option>
+                                                                        <option value="4" <#
+                                                if ( 4 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                4                                       </option>
+                                                                        <option value="5" <#
+                                                if ( 5 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                5                                       </option>
+                                                                        <option value="6" <#
+                                                if ( 6 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                6                                       </option>
+                                                                        <option value="7" <#
+                                                if ( 7 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                7                                       </option>
+                                                                        <option value="8" <#
+                                                if ( 8 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                8                                       </option>
+                                                                        <option value="9" <#
+                                                if ( 9 == wp.media.galleryDefaults.columns ) { #>selected="selected"<# }
+                                        #>>
+                                                9                                       </option>
+                                                        </select>
+                </label>
+
+                <label class="setting">
+                        <span>Random Order</span>
+                        <input type="checkbox" data-setting="_orderbyRandom" />
+                </label>
+
+                <label class="setting size">
+                        <span>Size</span>
+                        <select class="size" name="size"
+                                data-setting="size"
+                                <# if ( data.userSettings ) { #>
+                                        data-user-setting="imgsize"
+                                <# } #>
+                                >
+                                                                        <option value="thumbnail">
+                                                Thumbnail                                       </option>
+                                                                        <option value="medium">
+                                                Medium                                  </option>
+                                                                        <option value="large">
+                                                Large                                   </option>
+                                                                        <option value="full">
+                                                Full Size                                       </option>
+                                                        </select>
+                </label>
+        </script>
+
+        <script type="text/html" id="tmpl-playlist-settings">
+                <h2>Playlist Settings</h2>
+
+                <# var emptyModel = _.isEmpty( data.model ),
+                        isVideo = 'video' === data.controller.get('library').props.get('type'); #>
+
+                <label class="setting">
+                        <input type="checkbox" data-setting="tracklist" <# if ( emptyModel ) { #>
+                                checked="checked"
+                        <# } #> />
+                        <# if ( isVideo ) { #>
+                        <span>Show Video List</span>
+                        <# } else { #>
+                        <span>Show Tracklist</span>
+                        <# } #>
+                </label>
+
+                <# if ( ! isVideo ) { #>
+                <label class="setting">
+                        <input type="checkbox" data-setting="artists" <# if ( emptyModel ) { #>
+                                checked="checked"
+                        <# } #> />
+                        <span>Show Artist Name in Tracklist</span>
+                </label>
+                <# } #>
+
+                <label class="setting">
+                        <input type="checkbox" data-setting="images" <# if ( emptyModel ) { #>
+                                checked="checked"
+                        <# } #> />
+                        <span>Show Images</span>
+                </label>
+        </script>
+
+        <script type="text/html" id="tmpl-embed-link-settings">
+                <label class="setting link-text">
+                        <span>Link Text</span>
+                        <input type="text" class="alignment" data-setting="linkText" />
+                </label>
+                <div class="embed-container" style="display: none;">
+                        <div class="embed-preview"></div>
+                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-embed-image-settings">
+                <div class="thumbnail">
+                        <img src="{{ data.model.url }}" draggable="false" alt="" />
+                </div>
+
+                                        <label class="setting caption">
+                                <span>Caption</span>
+                                <textarea data-setting="caption" />
+                        </label>
+
+                <label class="setting alt-text">
+                        <span>Alt Text</span>
+                        <input type="text" data-setting="alt" />
+                </label>
+
+                <div class="setting align">
+                        <span>Align</span>
+                        <div class="button-group button-large" data-setting="align">
+                                <button class="button" value="left">
+                                        Left                            </button>
+                                <button class="button" value="center">
+                                        Center                          </button>
+                                <button class="button" value="right">
+                                        Right                           </button>
+                                <button class="button active" value="none">
+                                        None                            </button>
+                        </div>
+                </div>
+
+                <div class="setting link-to">
+                        <span>Link To</span>
+                        <div class="button-group button-large" data-setting="link">
+                                <button class="button" value="file">
+                                        Image URL                               </button>
+                                <button class="button" value="custom">
+                                        Custom URL                              </button>
+                                <button class="button active" value="none">
+                                        None                            </button>
+                        </div>
+                        <input type="text" class="link-to-custom" data-setting="linkUrl" />
+                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-image-details">
+                <div class="media-embed">
+                        <div class="embed-media-settings">
+                                <div class="column-image">
+                                        <div class="image">
+                                                <img src="{{ data.model.url }}" draggable="false" alt="" />
+
+                                                <# if ( data.attachment && window.imageEdit ) { #>
+                                                        <div class="actions">
+                                                                <input type="button" class="edit-attachment button" value="Edit Original" />
+                                                                <input type="button" class="replace-attachment button" value="Replace" />
+                                                        </div>
+                                                <# } #>
+                                        </div>
+                                </div>
+                                <div class="column-settings">
+                                                                                        <label class="setting caption">
+                                                        <span>Caption</span>
+                                                        <textarea data-setting="caption">{{ data.model.caption }}</textarea>
+                                                </label>
+
+                                        <label class="setting alt-text">
+                                                <span>Alternative Text</span>
+                                                <input type="text" data-setting="alt" value="{{ data.model.alt }}" />
+                                        </label>
+
+                                        <h2>Display Settings</h2>
+                                        <div class="setting align">
+                                                <span>Align</span>
+                                                <div class="button-group button-large" data-setting="align">
+                                                        <button class="button" value="left">
+                                                                Left                                                    </button>
+                                                        <button class="button" value="center">
+                                                                Center                                                  </button>
+                                                        <button class="button" value="right">
+                                                                Right                                                   </button>
+                                                        <button class="button active" value="none">
+                                                                None                                                    </button>
+                                                </div>
+                                        </div>
+
+                                        <# if ( data.attachment ) { #>
+                                                <# if ( 'undefined' !== typeof data.attachment.sizes ) { #>
+                                                        <label class="setting size">
+                                                                <span>Size</span>
+                                                                <select class="size" name="size"
+                                                                        data-setting="size"
+                                                                        <# if ( data.userSettings ) { #>
+                                                                                data-user-setting="imgsize"
+                                                                        <# } #>>
+                                                                                                                                                        <#
+                                                                                var size = data.sizes['thumbnail'];
+                                                                                if ( size ) { #>
+                                                                                        <option value="thumbnail">
+                                                                                                Thumbnail &ndash; {{ size.width }} &times; {{ size.height }}
+                                                                                        </option>
+                                                                                <# } #>
+                                                                                                                                                        <#
+                                                                                var size = data.sizes['medium'];
+                                                                                if ( size ) { #>
+                                                                                        <option value="medium">
+                                                                                                Medium &ndash; {{ size.width }} &times; {{ size.height }}
+                                                                                        </option>
+                                                                                <# } #>
+                                                                                                                                                        <#
+                                                                                var size = data.sizes['large'];
+                                                                                if ( size ) { #>
+                                                                                        <option value="large">
+                                                                                                Large &ndash; {{ size.width }} &times; {{ size.height }}
+                                                                                        </option>
+                                                                                <# } #>
+                                                                                                                                                        <#
+                                                                                var size = data.sizes['full'];
+                                                                                if ( size ) { #>
+                                                                                        <option value="full">
+                                                                                                Full Size &ndash; {{ size.width }} &times; {{ size.height }}
+                                                                                        </option>
+                                                                                <# } #>
+                                                                                                                                                <option value="custom">
+                                                                                Custom Size                                                                     </option>
+                                                                </select>
+                                                        </label>
+                                                <# } #>
+                                                        <div class="custom-size<# if ( data.model.size !== 'custom' ) { #> hidden<# } #>">
+                                                                <label><span>Width <small>(px)</small></span> <input data-setting="customWidth" type="number" step="1" value="{{ data.model.customWidth }}" /></label><span class="sep">&times;</span><label><span>Height <small>(px)</small></span><input data-setting="customHeight" type="number" step="1" value="{{ data.model.customHeight }}" /></label>
+                                                        </div>
+                                        <# } #>
+
+                                        <div class="setting link-to">
+                                                <span>Link To</span>
+                                                <select data-setting="link">
+                                                <# if ( data.attachment ) { #>
+                                                        <option value="file">
+                                                                Media File                                                      </option>
+                                                        <option value="post">
+                                                                Attachment Page                                                 </option>
+                                                <# } else { #>
+                                                        <option value="file">
+                                                                Image URL                                                       </option>
+                                                <# } #>
+                                                        <option value="custom">
+                                                                Custom URL                                                      </option>
+                                                        <option value="none">
+                                                                None                                                    </option>
+                                                </select>
+                                                <input type="text" class="link-to-custom" data-setting="linkUrl" />
+                                        </div>
+                                        <div class="advanced-section">
+                                                <h2><button type="button" class="button-link advanced-toggle">Advanced Options</button></h2>
+                                                <div class="advanced-settings hidden">
+                                                        <div class="advanced-image">
+                                                                <label class="setting title-text">
+                                                                        <span>Image Title Attribute</span>
+                                                                        <input type="text" data-setting="title" value="{{ data.model.title }}" />
+                                                                </label>
+                                                                <label class="setting extra-classes">
+                                                                        <span>Image CSS Class</span>
+                                                                        <input type="text" data-setting="extraClasses" value="{{ data.model.extraClasses }}" />
+                                                                </label>
+                                                        </div>
+                                                        <div class="advanced-link">
+                                                                <div class="setting link-target">
+                                                                        <label><input type="checkbox" data-setting="linkTargetBlank" value="_blank" <# if ( data.model.linkTargetBlank ) { #>checked="checked"<# } #>>Open link in a new tab</label>
+                                                                </div>
+                                                                <label class="setting link-rel">
+                                                                        <span>Link Rel</span>
+                                                                        <input type="text" data-setting="linkRel" value="{{ data.model.linkClassName }}" />
+                                                                </label>
+                                                                <label class="setting link-class-name">
+                                                                        <span>Link CSS Class</span>
+                                                                        <input type="text" data-setting="linkClassName" value="{{ data.model.linkClassName }}" />
+                                                                </label>
+                                                        </div>
+                                                </div>
+                                        </div>
+                                </div>
+                        </div>
+                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-image-editor">
+                <div id="media-head-{{ data.id }}"></div>
+                <div id="image-editor-{{ data.id }}"></div>
+        </script>
+
+        <script type="text/html" id="tmpl-audio-details">
+                <# var ext, html5types = {
+                        mp3: wp.media.view.settings.embedMimes.mp3,
+                        ogg: wp.media.view.settings.embedMimes.ogg
+                }; #>
+
+                                <div class="media-embed media-embed-details">
+                        <div class="embed-media-settings embed-audio-settings">
+                                <audio style="visibility: hidden"
+        controls
+        class="wp-audio-shortcode"
+        width="{{ _.isUndefined( data.model.width ) ? 400 : data.model.width }}"
+        preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
+        <#
+        if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+                #> autoplay<#
+        }
+        if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+                #> loop<#
+        }
+        #>
+>
+        <# if ( ! _.isEmpty( data.model.src ) ) { #>
+        <source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
+        <# } #>
+
+        <# if ( ! _.isEmpty( data.model.mp3 ) ) { #>
+        <source src="{{ data.model.mp3 }}" type="{{ wp.media.view.settings.embedMimes[ 'mp3' ] }}" />
+        <# } #>
+        <# if ( ! _.isEmpty( data.model.ogg ) ) { #>
+        <source src="{{ data.model.ogg }}" type="{{ wp.media.view.settings.embedMimes[ 'ogg' ] }}" />
+        <# } #>
+        <# if ( ! _.isEmpty( data.model.wma ) ) { #>
+        <source src="{{ data.model.wma }}" type="{{ wp.media.view.settings.embedMimes[ 'wma' ] }}" />
+        <# } #>
+        <# if ( ! _.isEmpty( data.model.m4a ) ) { #>
+        <source src="{{ data.model.m4a }}" type="{{ wp.media.view.settings.embedMimes[ 'm4a' ] }}" />
+        <# } #>
+        <# if ( ! _.isEmpty( data.model.wav ) ) { #>
+        <source src="{{ data.model.wav }}" type="{{ wp.media.view.settings.embedMimes[ 'wav' ] }}" />
+        <# } #>
+        </audio>
+
+                                <# if ( ! _.isEmpty( data.model.src ) ) {
+                                        ext = data.model.src.split('.').pop();
+                                        if ( html5types[ ext ] ) {
+                                                delete html5types[ ext ];
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>SRC</span>
+                                        <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
+                                        <button type="button" class="button-link remove-setting">Remove audio source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.mp3 ) ) {
+                                        if ( ! _.isUndefined( html5types.mp3 ) ) {
+                                                delete html5types.mp3;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>MP3</span>
+                                        <input type="text" disabled="disabled" data-setting="mp3" value="{{ data.model.mp3 }}" />
+                                        <button type="button" class="button-link remove-setting">Remove audio source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.ogg ) ) {
+                                        if ( ! _.isUndefined( html5types.ogg ) ) {
+                                                delete html5types.ogg;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>OGG</span>
+                                        <input type="text" disabled="disabled" data-setting="ogg" value="{{ data.model.ogg }}" />
+                                        <button type="button" class="button-link remove-setting">Remove audio source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.wma ) ) {
+                                        if ( ! _.isUndefined( html5types.wma ) ) {
+                                                delete html5types.wma;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>WMA</span>
+                                        <input type="text" disabled="disabled" data-setting="wma" value="{{ data.model.wma }}" />
+                                        <button type="button" class="button-link remove-setting">Remove audio source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.m4a ) ) {
+                                        if ( ! _.isUndefined( html5types.m4a ) ) {
+                                                delete html5types.m4a;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>M4A</span>
+                                        <input type="text" disabled="disabled" data-setting="m4a" value="{{ data.model.m4a }}" />
+                                        <button type="button" class="button-link remove-setting">Remove audio source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.wav ) ) {
+                                        if ( ! _.isUndefined( html5types.wav ) ) {
+                                                delete html5types.wav;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>WAV</span>
+                                        <input type="text" disabled="disabled" data-setting="wav" value="{{ data.model.wav }}" />
+                                        <button type="button" class="button-link remove-setting">Remove audio source</button>
+                                </label>
+                                <# } #>
+
+                                <# if ( ! _.isEmpty( html5types ) ) { #>
+                                <div class="setting">
+                                        <span>Add alternate sources for maximum HTML5 playback:</span>
+                                        <div class="button-large">
+                                        <# _.each( html5types, function (mime, type) { #>
+                                        <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
+                                        <# } ) #>
+                                        </div>
+                                </div>
+                                <# } #>
+
+                                <div class="setting preload">
+                                        <span>Preload</span>
+                                        <div class="button-group button-large" data-setting="preload">
+                                                <button class="button" value="auto">Auto</button>
+                                                <button class="button" value="metadata">Metadata</button>
+                                                <button class="button active" value="none">None</button>
+                                        </div>
+                                </div>
+
+                                <label class="setting checkbox-setting">
+                                        <input type="checkbox" data-setting="autoplay" />
+                                        <span>Autoplay</span>
+                                </label>
+
+                                <label class="setting checkbox-setting">
+                                        <input type="checkbox" data-setting="loop" />
+                                        <span>Loop</span>
+                                </label>
+                        </div>
+                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-video-details">
+                <# var ext, html5types = {
+                        mp4: wp.media.view.settings.embedMimes.mp4,
+                        ogv: wp.media.view.settings.embedMimes.ogv,
+                        webm: wp.media.view.settings.embedMimes.webm
+                }; #>
+
+                                <div class="media-embed media-embed-details">
+                        <div class="embed-media-settings embed-video-settings">
+                                <div class="wp-video-holder">
+                                <#
+                                var w = ! data.model.width || data.model.width > 640 ? 640 : data.model.width,
+                                        h = ! data.model.height ? 360 : data.model.height;
+
+                                if ( data.model.width && w !== data.model.width ) {
+                                        h = Math.ceil( ( h * w ) / data.model.width );
+                                }
+                                #>
+
+                                <#  var w_rule = '', classes = [],
+                w, h, settings = wp.media.view.settings,
+                isYouTube = isVimeo = false;
+
+        if ( ! _.isEmpty( data.model.src ) ) {
+                isYouTube = data.model.src.match(/youtube|youtu\.be/);
+                isVimeo = -1 !== data.model.src.indexOf('vimeo');
+        }
+
+        if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
+                w = settings.contentWidth;
+        } else {
+                w = data.model.width;
+        }
+
+        if ( w !== data.model.width ) {
+                h = Math.ceil( ( data.model.height * w ) / data.model.width );
+        } else {
+                h = data.model.height;
+        }
+
+        if ( w ) {
+                w_rule = 'width: ' + w + 'px; ';
+        }
+
+        if ( isYouTube ) {
+                classes.push( 'youtube-video' );
+        }
+
+        if ( isVimeo ) {
+                classes.push( 'vimeo-video' );
+        }
+
+#>
+<div style="{{ w_rule }}" class="wp-video">
+<video controls
+        class="wp-video-shortcode {{ classes.join( ' ' ) }}"
+        <# if ( w ) { #>width="{{ w }}"<# } #>
+        <# if ( h ) { #>height="{{ h }}"<# } #>
+        <#
+                if ( ! _.isUndefined( data.model.poster ) && data.model.poster ) {
+                        #> poster="{{ data.model.poster }}"<#
+                } #>
+                preload="{{ _.isUndefined( data.model.preload ) ? 'metadata' : data.model.preload }}"<#
+         if ( ! _.isUndefined( data.model.autoplay ) && data.model.autoplay ) {
+                #> autoplay<#
+        }
+         if ( ! _.isUndefined( data.model.loop ) && data.model.loop ) {
+                #> loop<#
+        }
+        #>
+>
+        <# if ( ! _.isEmpty( data.model.src ) ) {
+                if ( isYouTube ) { #>
+                <source src="{{ data.model.src }}" type="video/youtube" />
+                <# } else if ( isVimeo ) { #>
+                <source src="{{ data.model.src }}" type="video/vimeo" />
+                <# } else { #>
+                <source src="{{ data.model.src }}" type="{{ settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
+                <# }
+        } #>
+
+        <# if ( data.model.mp4 ) { #>
+        <source src="{{ data.model.mp4 }}" type="{{ settings.embedMimes[ 'mp4' ] }}" />
+        <# } #>
+        <# if ( data.model.m4v ) { #>
+        <source src="{{ data.model.m4v }}" type="{{ settings.embedMimes[ 'm4v' ] }}" />
+        <# } #>
+        <# if ( data.model.webm ) { #>
+        <source src="{{ data.model.webm }}" type="{{ settings.embedMimes[ 'webm' ] }}" />
+        <# } #>
+        <# if ( data.model.ogv ) { #>
+        <source src="{{ data.model.ogv }}" type="{{ settings.embedMimes[ 'ogv' ] }}" />
+        <# } #>
+        <# if ( data.model.wmv ) { #>
+        <source src="{{ data.model.wmv }}" type="{{ settings.embedMimes[ 'wmv' ] }}" />
+        <# } #>
+        <# if ( data.model.flv ) { #>
+        <source src="{{ data.model.flv }}" type="{{ settings.embedMimes[ 'flv' ] }}" />
+        <# } #>
+                {{{ data.model.content }}}
+</video>
+</div>
+
+                                <# if ( ! _.isEmpty( data.model.src ) ) {
+                                        ext = data.model.src.split('.').pop();
+                                        if ( html5types[ ext ] ) {
+                                                delete html5types[ ext ];
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>SRC</span>
+                                        <input type="text" disabled="disabled" data-setting="src" value="{{ data.model.src }}" />
+                                        <button type="button" class="button-link remove-setting">Remove video source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.mp4 ) ) {
+                                        if ( ! _.isUndefined( html5types.mp4 ) ) {
+                                                delete html5types.mp4;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>MP4</span>
+                                        <input type="text" disabled="disabled" data-setting="mp4" value="{{ data.model.mp4 }}" />
+                                        <button type="button" class="button-link remove-setting">Remove video source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.m4v ) ) {
+                                        if ( ! _.isUndefined( html5types.m4v ) ) {
+                                                delete html5types.m4v;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>M4V</span>
+                                        <input type="text" disabled="disabled" data-setting="m4v" value="{{ data.model.m4v }}" />
+                                        <button type="button" class="button-link remove-setting">Remove video source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.webm ) ) {
+                                        if ( ! _.isUndefined( html5types.webm ) ) {
+                                                delete html5types.webm;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>WEBM</span>
+                                        <input type="text" disabled="disabled" data-setting="webm" value="{{ data.model.webm }}" />
+                                        <button type="button" class="button-link remove-setting">Remove video source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.ogv ) ) {
+                                        if ( ! _.isUndefined( html5types.ogv ) ) {
+                                                delete html5types.ogv;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>OGV</span>
+                                        <input type="text" disabled="disabled" data-setting="ogv" value="{{ data.model.ogv }}" />
+                                        <button type="button" class="button-link remove-setting">Remove video source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.wmv ) ) {
+                                        if ( ! _.isUndefined( html5types.wmv ) ) {
+                                                delete html5types.wmv;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>WMV</span>
+                                        <input type="text" disabled="disabled" data-setting="wmv" value="{{ data.model.wmv }}" />
+                                        <button type="button" class="button-link remove-setting">Remove video source</button>
+                                </label>
+                                <# } #>
+                                <# if ( ! _.isEmpty( data.model.flv ) ) {
+                                        if ( ! _.isUndefined( html5types.flv ) ) {
+                                                delete html5types.flv;
+                                        }
+                                #>
+                                <label class="setting">
+                                        <span>FLV</span>
+                                        <input type="text" disabled="disabled" data-setting="flv" value="{{ data.model.flv }}" />
+                                        <button type="button" class="button-link remove-setting">Remove video source</button>
+                                </label>
+                                <# } #>
+                                                                </div>
+
+                                <# if ( ! _.isEmpty( html5types ) ) { #>
+                                <div class="setting">
+                                        <span>Add alternate sources for maximum HTML5 playback:</span>
+                                        <div class="button-large">
+                                        <# _.each( html5types, function (mime, type) { #>
+                                        <button class="button add-media-source" data-mime="{{ mime }}">{{ type }}</button>
+                                        <# } ) #>
+                                        </div>
+                                </div>
+                                <# } #>
+
+                                <# if ( ! _.isEmpty( data.model.poster ) ) { #>
+                                <label class="setting">
+                                        <span>Poster Image</span>
+                                        <input type="text" disabled="disabled" data-setting="poster" value="{{ data.model.poster }}" />
+                                        <button type="button" class="button-link remove-setting">Remove poster image</button>
+                                </label>
+                                <# } #>
+                                <div class="setting preload">
+                                        <span>Preload</span>
+                                        <div class="button-group button-large" data-setting="preload">
+                                                <button class="button" value="auto">Auto</button>
+                                                <button class="button" value="metadata">Metadata</button>
+                                                <button class="button active" value="none">None</button>
+                                        </div>
+                                </div>
+
+                                <label class="setting checkbox-setting">
+                                        <input type="checkbox" data-setting="autoplay" />
+                                        <span>Autoplay</span>
+                                </label>
+
+                                <label class="setting checkbox-setting">
+                                        <input type="checkbox" data-setting="loop" />
+                                        <span>Loop</span>
+                                </label>
+
+                                <label class="setting" data-setting="content">
+                                        <span>Tracks (subtitles, captions, descriptions, chapters, or metadata)</span>
+                                        <#
+                                        var content = '';
+                                        if ( ! _.isEmpty( data.model.content ) ) {
+                                                var tracks = jQuery( data.model.content ).filter( 'track' );
+                                                _.each( tracks.toArray(), function (track) {
+                                                        content += track.outerHTML; #>
+                                                <p>
+                                                        <input class="content-track" type="text" value="{{ track.outerHTML }}" />
+                                                        <button type="button" class="button-link remove-setting remove-track">Remove video track</button>
+                                                </p>
+                                                <# } ); #>
+                                        <# } else { #>
+                                        <em>There are no associated subtitles.</em>
+                                        <# } #>
+                                        <textarea class="hidden content-setting">{{ content }}</textarea>
+                                </label>
+                        </div>
+                </div>
+        </script>
+
+        <script type="text/html" id="tmpl-editor-gallery">
+                <# if ( data.attachments.length ) { #>
+                        <div class="gallery gallery-columns-{{ data.columns }}">
+                                <# _.each( data.attachments, function( attachment, index ) { #>
+                                        <dl class="gallery-item">
+                                                <dt class="gallery-icon">
+                                                        <# if ( attachment.thumbnail ) { #>
+                                                                <img src="{{ attachment.thumbnail.url }}" width="{{ attachment.thumbnail.width }}" height="{{ attachment.thumbnail.height }}" alt="" />
+                                                        <# } else { #>
+                                                                <img src="{{ attachment.url }}" alt="" />
+                                                        <# } #>
+                                                </dt>
+                                                <# if ( attachment.caption ) { #>
+                                                        <dd class="wp-caption-text gallery-caption">
+                                                                {{{ data.verifyHTML( attachment.caption ) }}}
+                                                        </dd>
+                                                <# } #>
+                                        </dl>
+                                        <# if ( index % data.columns === data.columns - 1 ) { #>
+                                                <br style="clear: both;">
+                                        <# } #>
+                                <# } ); #>
+                        </div>
+                <# } else { #>
+                        <div class="wpview-error">
+                                <div class="dashicons dashicons-format-gallery"></div><p>No items found.</p>
+                        </div>
+                <# } #>
+        </script>
+
+        <script type="text/html" id="tmpl-crop-content">
+                <img class="crop-image" src="{{ data.url }}" alt="Image crop area preview. Requires mouse interaction.">
+                <div class="upload-errors"></div>
+        </script>
+
+        <script type="text/html" id="tmpl-site-icon-preview">
+                <h2>Preview</h2>
+                <strong aria-hidden="true">As a browser icon</strong>
+                <div class="favicon-preview">
+                        <img src="http://src.wordpress-develop.dev/wp-admin/images/browser.png" class="browser-preview" width="182" height="" alt="" />
+
+                        <div class="favicon">
+                                <img id="preview-favicon" src="{{ data.url }}" alt="Preview as a browser icon"/>
+                        </div>
+                        <span class="browser-title" aria-hidden="true">WordPress Develop</span>
+                </div>
+
+                <strong aria-hidden="true">As an app icon</strong>
+                <div class="app-icon-preview">
+                        <img id="preview-app-icon" src="{{ data.url }}" alt="Preview as an app icon"/>
+                </div>
+        </script>
                 </div><!-- end widget templates -->
                 <script src="../../src/wp-includes/js/tinymce/tinymce.js"></script>