sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add MCE Views for audio and video. Please clear your browser cache so that you get the latest TinyMCE stylesheet.

Browse Source 
* Move TinyMCE shortcode handling from `wpgallery` plugin to `mce-view.js`
* Force `preload="none"` when rendering media in the editor to ensure fast loading (I realize this sounds illogical)
* Move audio and video tag builder logic in `media-template.php` into PHP funcs that can be reused by any code passing `data.model` to an Underscore template
* Pause all players when moving between editor tabs and when moving from the editor to editing in the media modal.
* Rename `wp.media.audio|video.shortcode()` to the more appropriate `wp.media.audio|video.update()` that now returns a `wp.shortcode` object instead of a string.
* Add necessary MediaElement css files to `$mce_css`
* In `wp.mce.View.render()`, support multiple instances of the same shortcode
* When rendering `wp.mce.View`s, fire a ready event that passes the current MCE View root element as context 

See #27389.



git-svn-id: https://develop.svn.wordpress.org/trunk@27528 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Scott Taylor 2014-03-13 23:09:06 +00:00
parent 110e19a6a0
commit 1c7d92ba50
8 changed files with 386 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-includes/class-wp-editor.php
View File

@ -343,9 +343,16 @@ final class _WP_Editors {
$suffix = defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ? '' : '.min';
$version = 'ver=' . $GLOBALS['wp_version'];
$dashicons = includes_url( "css/dashicons$suffix.css?$version" );
$mediaelement = includes_url( "js/mediaelement/mediaelementplayer.min.css?$version" );
$wpmediaelement = includes_url( "js/mediaelement/wp-mediaelement.css?$version" );
// WordPress default stylesheet and dashicons
$mce_css = array( $dashicons, self::$baseurl . '/skins/wordpress/wp-content.css' );
$mce_css = array(
$dashicons,
$mediaelement,
$wpmediaelement,
self::$baseurl . '/skins/wordpress/wp-content.css'
);
// load editor_style.css if the current theme supports it
if ( ! empty( $GLOBALS['editor_styles'] ) && is_array( $GLOBALS['editor_styles'] ) ) {

122
src/wp-includes/js/mce-view.js
View File

@ -1,4 +1,4 @@
/* global tinymce */
/* global tinymce, _wpmejsSettings, MediaElementPlayer */
// Ensure the global `wp` object exists.
window.wp = window.wp || {};
@ -31,10 +31,14 @@ window.wp = window.wp || {};
var html = this.getHtml();
// Search all tinymce editor instances and update the placeholders
_.each( tinymce.editors, function( editor ) {
var doc;
var doc, self = this;
if ( editor.plugins.wpview ) {
doc = editor.getDoc();
$( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).html( html );
$( doc ).find( '[data-wpview-text="' + this.encodedText + '"]' ).each(function (i, elem) {
var node = $( elem );
node.html( html );
$( self ).trigger( 'ready', elem );
});
}
}, this );
}
@ -178,7 +182,7 @@ window.wp = window.wp || {};
/**
* Refresh views after an update is made
*
*
* @param view {object} being refreshed
* @param text {string} textual representation of the view
*/
@ -204,9 +208,9 @@ window.wp = window.wp || {};
return instances[ encodedText ];
},
/**
/**
* render( scope )
*
*
* Renders any view instances inside a DOM node `scope`.
*
* View instances are detected by the presence of wrapper elements.
@ -302,4 +306,110 @@ window.wp = window.wp || {};
};
wp.mce.views.register( 'gallery', wp.mce.gallery );
wp.mce.media = {
toView: function( content ) {
var match = wp.shortcode.next( this.shortcode, content );
if ( ! match ) {
return;
}
return {
index: match.index,
content: match.content,
options: {
shortcode: match.shortcode
}
};
},
edit: function( node ) {
var p,
media = wp.media[ this.shortcode ],
self = this,
frame, data;
for (p in window.mejs.players) {
window.mejs.players[p].pause();
}
data = window.decodeURIComponent( $( node ).data('wpview-text') );
frame = media.edit( data );
frame.on( 'close', function () {
frame.detach();
} );
frame.state( self.shortcode + '-details' ).on( 'update', function( selection ) {
var shortcode = wp.media[ self.shortcode ].update( selection ).string();
$( node ).attr( 'data-wpview-text', window.encodeURIComponent( shortcode ) );
wp.mce.views.refreshView( self, shortcode );
frame.detach();
} );
frame.open();
}
};
wp.mce.media.ViewMixin = wp.mce.View.extend({
initialize: function( options ) {
this.shortcode = options.shortcode;
_.bindAll( this, 'setPlayer' );
$(this).on( 'ready', this.setPlayer );
},
setPlayer: function (e, node) {
// if the ready event fires on an empty node
if ( ! node ) {
return;
}
var id,
media,
settings = {},
className = '.wp-' + this.shortcode.tag + '-shortcode';
media = $( node ).find( className );
if ( media.hasClass( 'rendered' ) ) {
id = media.closest( className ).attr( 'id' );
window.mejs.players[ id ].remove();
} else {
media.addClass( 'rendered' );
}
media.prop( 'preload', 'none' );
media = media.get(0);
if ( ! _.isUndefined( window._wpmejsSettings ) ) {
settings.pluginPath = _wpmejsSettings.pluginPath;
}
media = wp.media.view.MediaDetails.prepareSrc( media );
new MediaElementPlayer( media, settings );
},
getHtml: function() {
var attrs = this.shortcode.attrs.named;
return this.template({ model: attrs });
}
});
wp.mce.video = _.extend( {}, wp.mce.media, {
shortcode: 'video',
View: wp.mce.media.ViewMixin.extend({
className: 'editor-video',
template: media.template('editor-video')
})
} );
wp.mce.views.register( 'video', wp.mce.video );
wp.mce.audio = _.extend( {}, wp.mce.media, {
shortcode: 'audio',
View: wp.mce.media.ViewMixin.extend({
className: 'editor-audio',
template: media.template('editor-audio')
})
} );
wp.mce.views.register( 'audio', wp.mce.audio );
}(jQuery));

107
src/wp-includes/js/media-editor.js
View File

@ -581,20 +581,24 @@
return frame;
},
shortcode : function (shortcode) {
var self = this;
update : function (model) {
var self = this, content;
_.each( wp.media.audio.defaults, function( value, key ) {
shortcode[ key ] = self.coerce( shortcode, key );
_.each( this.defaults, function( value, key ) {
model[ key ] = self.coerce( model, key );
if ( value === shortcode[ key ] ) {
delete shortcode[ key ];
if ( value === model[ key ] ) {
delete model[ key ];
}
});
return wp.shortcode.string({
tag: 'audio',
attrs: shortcode
content = model.content;
delete model.content;
return new wp.shortcode({
tag: 'audio',
attrs: model,
content: content
});
}
}, wp.media.mixin);
@ -631,21 +635,23 @@
return frame;
},
shortcode : function (shortcode) {
var self = this, content = shortcode.content;
delete shortcode.content;
update : function (model) {
var self = this, content = '';
_.each( this.defaults, function( value, key ) {
shortcode[ key ] = self.coerce( shortcode, key );
model[ key ] = self.coerce( model, key );
if ( value === shortcode[ key ] ) {
delete shortcode[ key ];
if ( value === model[ key ] ) {
delete model[ key ];
}
});
return wp.shortcode.string({
tag: 'video',
attrs: shortcode,
content = model.content;
delete model.content;
return new wp.shortcode({
tag: 'video',
attrs: model,
content: content
});
}
@ -1111,38 +1117,47 @@
* @global wp.media.view.l10n
*/
init: function() {
$(document.body).on( 'click', '.insert-media', function( event ) {
var elem = $( event.currentTarget ),
editor = elem.data('editor'),
options = {
frame: 'post',
state: 'insert',
title: wp.media.view.l10n.addMedia,
multiple: true
};
$(document.body)
.on( 'click', '.insert-media', function( event ) {
var elem = $( event.currentTarget ),
editor = elem.data('editor'),
options = {
frame: 'post',
state: 'insert',
title: wp.media.view.l10n.addMedia,
multiple: true
};
event.preventDefault();
event.preventDefault();
// Remove focus from the `.insert-media` button.
// Prevents Opera from showing the outline of the button
// above the modal.
//
// See: http://core.trac.wordpress.org/ticket/22445
elem.blur();
// Remove focus from the `.insert-media` button.
// Prevents Opera from showing the outline of the button
// above the modal.
//
// See: http://core.trac.wordpress.org/ticket/22445
elem.blur();
if ( elem.hasClass( 'gallery' ) ) {
options.state = 'gallery';
options.title = wp.media.view.l10n.createGalleryTitle;
} else if ( elem.hasClass( 'playlist' ) ) {
options.state = 'playlist';
options.title = wp.media.view.l10n.createPlaylistTitle;
} else if ( elem.hasClass( 'video-playlist' ) ) {
options.state = 'video-playlist';
options.title = wp.media.view.l10n.createVideoPlaylistTitle;
}
if ( elem.hasClass( 'gallery' ) ) {
options.state = 'gallery';
options.title = wp.media.view.l10n.createGalleryTitle;
} else if ( elem.hasClass( 'playlist' ) ) {
options.state = 'playlist';
options.title = wp.media.view.l10n.createPlaylistTitle;
} else if ( elem.hasClass( 'video-playlist' ) ) {
options.state = 'video-playlist';
options.title = wp.media.view.l10n.createVideoPlaylistTitle;
}
wp.media.editor.open( editor, options );
});
wp.media.editor.open( editor, options );
})
.on( 'click', '.wp-switch-editor', function () {
var p;
if ( window.mejs && window.mejs.players ) {
for ( p in window.mejs.players ) {
window.mejs.players[p].pause();
}
}
} );
// Initialize and render the Editor drag-and-drop uploader.
new wp.media.view.EditorUploader().render();

1
src/wp-includes/js/media-models.js
View File

@ -467,6 +467,7 @@ window.wp = window.wp || {};
this.attachment = attachment;
this.extension = attachment.get('filename' ).split('.').pop();
this.unset( 'src' );
if ( _.contains( wp.media.view.settings.embedExts, this.extension ) ) {
this.set( this.extension, this.attachment.get( 'url' ) );
} else {

81
src/wp-includes/js/media-views.js
View File

@ -6542,26 +6542,6 @@
}, this.options );
},
/**
* When multiple players in the DOM contain the same src, things get weird.
*
* @param {HTMLElement} media
* @returns {HTMLElement}
*/
prepareSrc : function (media) {
var i = wp.media.view.MediaDetails.instances++;
_.each( $(media).find('source'), function (source) {
source.src = [
source.src,
source.src.indexOf('?') > -1 ? '&' : '?',
'_=',
i
].join('');
});
return media;
},
removeSetting : function (e) {
var wrap = $( e.currentTarget ).parent(), setting;
@ -6633,9 +6613,10 @@
},
unsetPlayer : function() {
var p;
if ( this.player ) {
if ( _.isUndefined( this.mejs.pluginType ) ) {
this.mejs.pause();
for ( p in window.mejs.players ) {
window.mejs.players[p].pause();
}
this.removePlayer();
this.player = false;
@ -6675,7 +6656,30 @@
this.$( '.embed-media-settings' ).scrollTop( 0 );
}
}, {
instances : 0
instances : 0,
/**
* When multiple players in the DOM contain the same src, things get weird.
*
* @param {HTMLElement} media
* @returns {HTMLElement}
*/
prepareSrc : function (media) {
var i = wp.media.view.MediaDetails.instances++;
if ( 0 === i ) {
i = (new Date()).getTime();
}
_.each( $(media).find('source'), function (source) {
source.src = [
source.src,
source.src.indexOf('?') > -1 ? '&' : '?',
'_=',
i
].join('');
});
return media;
}
});
/**
@ -6694,13 +6698,23 @@
template: media.template('audio-details'),
setMedia: function() {
var audio = this.$('.wp-audio-shortcode');
var className = '.wp-audio-shortcode',
audio;
audio = this.$( className );
if ( audio.find( 'source' ).length ) {
if ( audio.is(':hidden') ) {
audio.show();
}
this.media = this.prepareSrc( audio.get(0) );
audio = audio.get(0);
if ( $( className ).length > 0 ) {
audio = media.view.MediaDetails.prepareSrc( audio );
}
this.media = audio;
} else {
audio.hide();
this.media = false;
@ -6726,18 +6740,25 @@
template: media.template('video-details'),
setMedia: function() {
var video = this.$('.wp-video-shortcode');
var className = '.wp-video-shortcode',
video,
yt;
video = this.$( className );
yt = video.hasClass('youtube-video');
if ( video.find( 'source' ).length ) {
if ( video.is(':hidden') ) {
video.show();
}
if ( ! video.hasClass('youtube-video') ) {
this.media = this.prepareSrc( video.get(0) );
} else {
this.media = video.get(0);
video = video.get(0);
if ( ! yt ) {
video = media.view.MediaDetails.prepareSrc( video );
}
this.media = video;
} else {
video.hide();
this.media = false;

29
src/wp-includes/js/tinymce/plugins/wpgallery/plugin.js
View File

@ -25,8 +25,8 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
}
function replaceAVShortcodes( content ) {
var testRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]/,
replaceRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
var testRegex = /\[(video-playlist|playlist)[^\]]*\]/,
replaceRegex = /\[(video-playlist|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
while ( testRegex.test( content ) ) {
content = content.replace( replaceRegex, replaceCallback );
@ -92,31 +92,6 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
frame.detach();
});
} else if ( editor.dom.hasClass( node, 'wp-video' ) ) {
frame = wp.media.video.edit( data );
frame.on( 'close', function () {
frame.detach();
} );
frame.state( 'video-details' ).on(
'update replace add-source select-poster-image add-track',
function ( selection ) {
var shortcode = wp.media.video.shortcode( selection );
editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
frame.detach();
}
);
frame.open();
} else if ( editor.dom.hasClass( node, 'wp-audio' ) ) {
frame = wp.media.audio.edit( data );
frame.on( 'close', function () {
frame.detach();
} );
frame.state( 'audio-details' ).on( 'update replace add-source', function ( selection ) {
var shortcode = wp.media.audio.shortcode( selection );
editor.dom.setAttrib( node, 'data-wp-media', window.encodeURIComponent( shortcode ) );
frame.detach();
} );
frame.open();
} else {
// temp
window.console && window.console.log( 'Edit AV shortcode ' + data );

43
src/wp-includes/js/tinymce/skins/wordpress/wp-content.css
View File

@ -237,14 +237,32 @@ img::selection {
/**
* Gallery preview
*/
.wpview-type-gallery {
.wpview-type-gallery,
.wpview-type-audio,
.wpview-type-video {
position: relative;
padding: 0 0 12px;
margin-bottom: 16px;
cursor: pointer;
}
.wpview-type-gallery:after {
.wpview-type-audio {
padding: 32px 0 0;
}
.wpview-type-video {
padding: 16px 0 0;
}
.wpview-type-audio audio,
.wpview-type-video video {
display: inline-block;
max-width: 100%;
}
.wpview-type-gallery:after,
.wpview-type-audio:after,
.wpview-type-video:after {
content: '';
display: block;
height: 0;
@ -252,11 +270,18 @@ img::selection {
visibility: hidden;
}
.wpview-type-gallery.selected {
.wpview-type-gallery.selected {
background-color: #efefef;
}
.wpview-type-gallery .toolbar {
.wpview-type-audio,
.wpview-type-video {
background-color: #efefef;
}
.wpview-type-gallery .toolbar,
.wpview-type-audio .toolbar,
.wpview-type-video .toolbar {
position: absolute;
top: 0;
left: 0;
@ -264,13 +289,21 @@ img::selection {
color: white;
padding: 4px;
display: none;
z-index: 100;
}
.wpview-type-audio .toolbar,
.wpview-type-video .toolbar {
display: block;
}
.wpview-type-gallery.selected .toolbar {
display: block;
}
.wpview-type-gallery .toolbar span {
.wpview-type-gallery .toolbar span,
.wpview-type-audio .toolbar span
.wpview-type-video .toolbar span {
cursor: pointer;
}

177
src/wp-includes/media-template.php
View File

@ -7,6 +7,97 @@
* @since 3.5.0
*/
/**
* Output the markup for a audio tag to be used in an Underscore template
* when data.model is passed.
*
* @since 3.9.0
*/
function wp_underscore_audio_template() {
$audio_types = wp_get_audio_extensions();
?>
<audio controls
class="wp-audio-shortcode"
preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
<#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# } #>
<?php foreach ( $audio_types as $type ):
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach;
?></audio>
<?php
}
/**
* Output the markup for a video tag to be used in an Underscore template
* when data.model is passed.
*
* @since 3.9.0
*/
function wp_underscore_video_template( $onload = false ) {
$video_types = wp_get_video_extensions();
?>
<#
var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
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 );
}
#>
<video controls
class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
width="{{ w }}"
height="{{ h }}"
<?php
$props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ):
if ( empty( $value ) ) {
?><#
if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
#> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
} #>
<?php } else {
echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
}
endforeach;
?><#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) {
if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" />
<# } else { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# }
} #>
<?php foreach ( $video_types as $type ):
?><# if ( data.model.<?php echo $type ?> ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach; ?>
{{{ data.model.content }}}
</video>
<?php
}
/**
* Prints the templates used in the media manager.
*
@ -676,26 +767,7 @@ function wp_print_media_templates() {
<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-audio-settings">
<div class="instructions media-instructions">{{{ wp.media.view.l10n.audioDetailsText }}}</div>
<audio controls
class="wp-audio-shortcode"
preload="{{ _.isUndefined( data.model.preload ) ? 'none' : data.model.preload }}"
<#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?>if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# } #>
<?php foreach ( $audio_types as $type ):
?><# if ( ! _.isEmpty( data.model.<?php echo $type ?> ) ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach;
?></audio>
<?php wp_underscore_audio_template() ?>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<label class="setting">
<span>SRC</span>
@ -738,60 +810,21 @@ function wp_print_media_templates() {
</div>
</script>
<script type="text/html" id="tmpl-editor-audio">
<div class="toolbar">
<div class="dashicons dashicons-format-audio edit"></div>
<div class="dashicons dashicons-no-alt remove"></div>
</div>
<?php wp_underscore_audio_template() ?>
</script>
<script type="text/html" id="tmpl-video-details">
<?php $video_types = wp_get_video_extensions(); ?>
<div class="media-embed media-embed-details">
<div class="embed-media-settings embed-video-settings">
<div class="instructions media-instructions">{{{ wp.media.view.l10n.videoDetailsText }}}</div>
<div class="wp-video-holder">
<#
var isYouTube = ! _.isEmpty( data.model.src ) && data.model.src.match(/youtube|youtu\.be/);
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 );
}
#>
<video controls
class="wp-video-shortcode{{ isYouTube ? ' youtube-video' : '' }}"
width="{{ w }}"
height="{{ h }}"
<?php
$props = array( 'poster' => '', 'preload' => 'metadata' );
foreach ( $props as $key => $value ):
if ( empty( $value ) ) {
?><#
if ( ! _.isUndefined( data.model.<?php echo $key ?> ) && data.model.<?php echo $key ?> ) {
#> <?php echo $key ?>="{{ data.model.<?php echo $key ?> }}"<#
} #>
<?php } else {
echo $key ?>="{{ _.isUndefined( data.model.<?php echo $key ?> ) ? '<?php echo $value ?>' : data.model.<?php echo $key ?> }}"<?php
}
endforeach;
?><#
<?php foreach ( array( 'autoplay', 'loop' ) as $attr ):
?> if ( ! _.isUndefined( data.model.<?php echo $attr ?> ) && data.model.<?php echo $attr ?> ) {
#> <?php echo $attr ?><#
}
<?php endforeach ?>#>
>
<# if ( ! _.isEmpty( data.model.src ) ) {
if ( isYouTube ) { #>
<source src="{{ data.model.src }}" type="video/youtube" />
<# } else { #>
<source src="{{ data.model.src }}" type="{{ wp.media.view.settings.embedMimes[ data.model.src.split('.').pop() ] }}" />
<# }
} #>
<?php foreach ( $video_types as $type ):
?><# if ( data.model.<?php echo $type ?> ) { #>
<source src="{{ data.model.<?php echo $type ?> }}" type="{{ wp.media.view.settings.embedMimes[ '<?php echo $type ?>' ] }}" />
<# } #>
<?php endforeach; ?>
{{{ data.model.content }}}
</video>
<?php wp_underscore_video_template() ?>
<# if ( ! _.isEmpty( data.model.src ) ) { #>
<label class="setting">
<span>SRC</span>
@ -857,6 +890,14 @@ function wp_print_media_templates() {
</div>
</div>
</script>
<script type="text/html" id="tmpl-editor-video">
<div class="toolbar">
<div class="dashicons dashicons-format-video edit"></div>
<div class="dashicons dashicons-no-alt remove"></div>
</div>
<?php wp_underscore_video_template() ?>
</script>
<?php
//TODO: do we want to deal with the fact that the elements used for gallery items are filterable and can be overriden via shortcode attributes