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

* 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.


Built from https://develop.svn.wordpress.org/trunk@27528


git-svn-id: http://core.svn.wordpress.org/trunk@27371 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/class-wp-editor.php

@@ -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'] ) ) {

wp-includes/js/mce-view.js

@@ -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));

wp-includes/js/mce-view.min.js

@@ -1 +1 @@
-window.wp=window.wp||{},function(a){var b={},c={},d=wp.media,e=["encodedText"];wp.mce=wp.mce||{},wp.mce.View=function(a){a||(a={}),_.extend(this,_.pick(a,e)),this.initialize.apply(this,arguments)},_.extend(wp.mce.View.prototype,{initialize:function(){},html:function(){},render:function(){var b=this.getHtml();_.each(tinymce.editors,function(c){var d;c.plugins.wpview&&(d=c.getDoc(),a(d).find('[data-wpview-text="'+this.encodedText+'"]').html(b))},this)}}),wp.mce.View.extend=Backbone.View.extend,wp.mce.views={register:function(a,c){b[a]=c},get:function(a){return b[a]},unregister:function(a){delete b[a]},toViews:function(a){var c,d=[{content:a}];return _.each(b,function(a,b){c=d.slice(),d=[],_.each(c,function(c){var e,f=c.content;if(c.processed)return void d.push(c);for(;f&&(e=a.toView(f));)e.index&&d.push({content:f.substring(0,e.index)}),d.push({content:wp.mce.views.toView(b,e.content,e.options),processed:!0}),f=f.slice(e.index+e.content.length);f&&d.push({content:f})})}),_.pluck(d,"content").join("")},toView:function(a,b,d){var e,f,g=wp.mce.views.get(a),h=window.encodeURIComponent(b);return g?(wp.mce.views.getInstance(h)||(f=d,f.encodedText=h,e=new g.View(f),c[h]=e),wp.html.string({tag:"div",attrs:{"class":"wpview-wrap wpview-type-"+a,"data-wpview-text":h,"data-wpview-type":a,contenteditable:"false"},content:" "})):b},refreshView:function(a,b){var d,e,f,g=window.encodeURIComponent(b);f=wp.mce.views.getInstance(g),f||(e=a.toView(b),d=e.options,d.encodedText=g,f=new a.View(d),c[g]=f),wp.mce.views.render()},getInstance:function(a){return c[a]},render:function(){_.each(c,function(a){a.render()})},edit:function(b){var c=a(b).data("wpview-type"),d=wp.mce.views.get(c);d&&d.edit(b)}},wp.mce.gallery={shortcode:"gallery",toView:function(a){var b=wp.shortcode.next(this.shortcode,a);if(b)return{index:b.index,content:b.content,options:{shortcode:b.shortcode}}},View:wp.mce.View.extend({className:"editor-gallery",template:d.template("editor-gallery"),postID:a("#post_ID").val(),initialize:function(a){this.shortcode=a.shortcode,this.fetch()},fetch:function(){this.attachments=wp.media.gallery.attachments(this.shortcode,this.postID),this.attachments.more().done(_.bind(this.render,this))},getHtml:function(){var a,b=this.shortcode.attrs.named;if(this.attachments.length)return a={attachments:this.attachments.toJSON(),columns:b.columns?parseInt(b.columns,10):3},this.template(a)}}),edit:function(b){var c,d,e=wp.media.gallery,f=this;d=window.decodeURIComponent(a(b).data("wpview-text")),c=e.edit(d),c.state("gallery-edit").on("update",function(d){var g=e.shortcode(d).string();a(b).attr("data-wpview-text",window.encodeURIComponent(g)),wp.mce.views.refreshView(f,g),c.detach()})}},wp.mce.views.register("gallery",wp.mce.gallery)}(jQuery);
+window.wp=window.wp||{},function(a){var b={},c={},d=wp.media,e=["encodedText"];wp.mce=wp.mce||{},wp.mce.View=function(a){a||(a={}),_.extend(this,_.pick(a,e)),this.initialize.apply(this,arguments)},_.extend(wp.mce.View.prototype,{initialize:function(){},html:function(){},render:function(){var b=this.getHtml();_.each(tinymce.editors,function(c){var d,e=this;c.plugins.wpview&&(d=c.getDoc(),a(d).find('[data-wpview-text="'+this.encodedText+'"]').each(function(c,d){var f=a(d);f.html(b),a(e).trigger("ready",d)}))},this)}}),wp.mce.View.extend=Backbone.View.extend,wp.mce.views={register:function(a,c){b[a]=c},get:function(a){return b[a]},unregister:function(a){delete b[a]},toViews:function(a){var c,d=[{content:a}];return _.each(b,function(a,b){c=d.slice(),d=[],_.each(c,function(c){var e,f=c.content;if(c.processed)return void d.push(c);for(;f&&(e=a.toView(f));)e.index&&d.push({content:f.substring(0,e.index)}),d.push({content:wp.mce.views.toView(b,e.content,e.options),processed:!0}),f=f.slice(e.index+e.content.length);f&&d.push({content:f})})}),_.pluck(d,"content").join("")},toView:function(a,b,d){var e,f,g=wp.mce.views.get(a),h=window.encodeURIComponent(b);return g?(wp.mce.views.getInstance(h)||(f=d,f.encodedText=h,e=new g.View(f),c[h]=e),wp.html.string({tag:"div",attrs:{"class":"wpview-wrap wpview-type-"+a,"data-wpview-text":h,"data-wpview-type":a,contenteditable:"false"},content:" "})):b},refreshView:function(a,b){var d,e,f,g=window.encodeURIComponent(b);f=wp.mce.views.getInstance(g),f||(e=a.toView(b),d=e.options,d.encodedText=g,f=new a.View(d),c[g]=f),wp.mce.views.render()},getInstance:function(a){return c[a]},render:function(){_.each(c,function(a){a.render()})},edit:function(b){var c=a(b).data("wpview-type"),d=wp.mce.views.get(c);d&&d.edit(b)}},wp.mce.gallery={shortcode:"gallery",toView:function(a){var b=wp.shortcode.next(this.shortcode,a);if(b)return{index:b.index,content:b.content,options:{shortcode:b.shortcode}}},View:wp.mce.View.extend({className:"editor-gallery",template:d.template("editor-gallery"),postID:a("#post_ID").val(),initialize:function(a){this.shortcode=a.shortcode,this.fetch()},fetch:function(){this.attachments=wp.media.gallery.attachments(this.shortcode,this.postID),this.attachments.more().done(_.bind(this.render,this))},getHtml:function(){var a,b=this.shortcode.attrs.named;if(this.attachments.length)return a={attachments:this.attachments.toJSON(),columns:b.columns?parseInt(b.columns,10):3},this.template(a)}}),edit:function(b){var c,d,e=wp.media.gallery,f=this;d=window.decodeURIComponent(a(b).data("wpview-text")),c=e.edit(d),c.state("gallery-edit").on("update",function(d){var g=e.shortcode(d).string();a(b).attr("data-wpview-text",window.encodeURIComponent(g)),wp.mce.views.refreshView(f,g),c.detach()})}},wp.mce.views.register("gallery",wp.mce.gallery),wp.mce.media={toView:function(a){var b=wp.shortcode.next(this.shortcode,a);if(b)return{index:b.index,content:b.content,options:{shortcode:b.shortcode}}},edit:function(b){var c,d,e,f=wp.media[this.shortcode],g=this;for(c in window.mejs.players)window.mejs.players[c].pause();e=window.decodeURIComponent(a(b).data("wpview-text")),d=f.edit(e),d.on("close",function(){d.detach()}),d.state(g.shortcode+"-details").on("update",function(c){var e=wp.media[g.shortcode].update(c).string();a(b).attr("data-wpview-text",window.encodeURIComponent(e)),wp.mce.views.refreshView(g,e),d.detach()}),d.open()}},wp.mce.media.ViewMixin=wp.mce.View.extend({initialize:function(b){this.shortcode=b.shortcode,_.bindAll(this,"setPlayer"),a(this).on("ready",this.setPlayer)},setPlayer:function(b,c){if(c){var d,e,f={},g=".wp-"+this.shortcode.tag+"-shortcode";e=a(c).find(g),e.hasClass("rendered")?(d=e.closest(g).attr("id"),window.mejs.players[d].remove()):e.addClass("rendered"),e.prop("preload","none"),e=e.get(0),_.isUndefined(window._wpmejsSettings)||(f.pluginPath=_wpmejsSettings.pluginPath),e=wp.media.view.MediaDetails.prepareSrc(e),new MediaElementPlayer(e,f)}},getHtml:function(){var a=this.shortcode.attrs.named;return this.template({model:a})}}),wp.mce.video=_.extend({},wp.mce.media,{shortcode:"video",View:wp.mce.media.ViewMixin.extend({className:"editor-video",template:d.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:d.template("editor-audio")})}),wp.mce.views.register("audio",wp.mce.audio)}(jQuery);

wp-includes/js/media-editor.js

@@ -581,20 +581,24 @@
 			return frame;
 		},
 
-		shortcode : function (shortcode) {
+		update : function (model) {
-			var self = this;
+			var self = this, content;
 
-			_.each( wp.media.audio.defaults, function( value, key ) {
+			_.each( this.defaults, function( value, key ) {
-				shortcode[ key ] = self.coerce( shortcode, key );
+				model[ key ] = self.coerce( model, key );
 
-				if ( value === shortcode[ key ] ) {
+				if ( value === model[ key ] ) {
-					delete shortcode[ key ];
+					delete model[ key ];
 				}
 			});
 
-			return wp.shortcode.string({
+			content = model.content;
-				tag:     'audio',
+			delete model.content;
-				attrs:   shortcode
+
+			return new wp.shortcode({
+				tag: 'audio',
+				attrs: model,
+				content: content
 			});
 		}
 	}, wp.media.mixin);
@@ -631,21 +635,23 @@
 			return frame;
 		},
 
-		shortcode : function (shortcode) {
+		update : function (model) {
-			var self = this, content = shortcode.content;
+			var self = this, content = '';
-			delete shortcode.content;
 
 			_.each( this.defaults, function( value, key ) {
-				shortcode[ key ] = self.coerce( shortcode, key );
+				model[ key ] = self.coerce( model, key );
 
-				if ( value === shortcode[ key ] ) {
+				if ( value === model[ key ] ) {
-					delete shortcode[ key ];
+					delete model[ key ];
 				}
 			});
 
-			return wp.shortcode.string({
+			content = model.content;
-				tag:     'video',
+			delete model.content;
-				attrs:   shortcode,
+
+			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 ) {
+			$(document.body)
-				var elem = $( event.currentTarget ),
+				.on( 'click', '.insert-media', function( event ) {
-					editor = elem.data('editor'),
+					var elem = $( event.currentTarget ),
-					options = {
+						editor = elem.data('editor'),
-						frame:    'post',
+						options = {
-						state:    'insert',
+							frame:    'post',
-						title:    wp.media.view.l10n.addMedia,
+							state:    'insert',
-						multiple: true
+							title:    wp.media.view.l10n.addMedia,
-					};
+							multiple: true
+						};
 
-				event.preventDefault();
+					event.preventDefault();
 
-				// Remove focus from the `.insert-media` button.
+					// Remove focus from the `.insert-media` button.
-				// Prevents Opera from showing the outline of the button
+					// Prevents Opera from showing the outline of the button
-				// above the modal.
+					// above the modal.
-				//
+					//
-				// See: http://core.trac.wordpress.org/ticket/22445
+					// See: http://core.trac.wordpress.org/ticket/22445
-				elem.blur();
+					elem.blur();
 
-				if ( elem.hasClass( 'gallery' ) ) {
+					if ( elem.hasClass( 'gallery' ) ) {
-					options.state = 'gallery';
+						options.state = 'gallery';
-					options.title = wp.media.view.l10n.createGalleryTitle;
+						options.title = wp.media.view.l10n.createGalleryTitle;
-				} else if ( elem.hasClass( 'playlist' ) ) {
+					} else if ( elem.hasClass( 'playlist' ) ) {
-					options.state = 'playlist';
+						options.state = 'playlist';
-					options.title = wp.media.view.l10n.createPlaylistTitle;
+						options.title = wp.media.view.l10n.createPlaylistTitle;
-				} else if ( elem.hasClass( 'video-playlist' ) ) {
+					} else if ( elem.hasClass( 'video-playlist' ) ) {
-					options.state = 'video-playlist';
+						options.state = 'video-playlist';
-					options.title = wp.media.view.l10n.createVideoPlaylistTitle;
+						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();

wp-includes/js/media-models.js

@@ -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 {

wp-includes/js/media-views.js

@@ -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 ) ) {
+				for ( p in window.mejs.players ) {
-					this.mejs.pause();
+					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') ) {
+				video = video.get(0);
-					this.media = this.prepareSrc( video.get(0) );
+
-				} else {
+				if ( ! yt ) {
-					this.media = video.get(0);
+					video = media.view.MediaDetails.prepareSrc( video );
 				}
+
+				this.media = video;
 			} else {
 				video.hide();
 				this.media = false;

wp-includes/js/tinymce/plugins/wpgallery/plugin.js

@@ -25,8 +25,8 @@ tinymce.PluginManager.add('wpgallery', function( editor ) {
 	}
 
 	function replaceAVShortcodes( content ) {
-		var testRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]/,
+		var testRegex = /\[(video-playlist|playlist)[^\]]*\]/,
-			replaceRegex = /\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;
+			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 );

wp-includes/js/tinymce/plugins/wpgallery/plugin.min.js

@@ -1 +1 @@
-tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){return c("wp-gallery",a)})}function c(a,b){return b=window.encodeURIComponent(b),'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media mceItem '+a+'" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'}function d(a,b,d){var e;return d&&d.indexOf("["+b)>-1?(e=a.length-d.length,c("wp-"+b,a.substring(0,e))+a.substring(e)):c("wp-"+b,a)}function e(a){for(var b=/\[(video-playlist|audio|video|playlist)[^\]]*\]/,c=/\[(video-playlist|audio|video|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;b.test(a);)a=a.replace(c,d);return a}function f(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"').exec(a),b?window.decodeURIComponent(b[1]):""}return a.replace(/(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"data-wp-media");return d?"<p>"+d+"</p>":a})}function g(b){var c,d,e;"IMG"===b.nodeName&&"undefined"!=typeof wp&&wp.media&&(e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),a.dom.hasClass(b,"wp-gallery")&&wp.media.gallery?(c=wp.media.gallery,d=c.edit(e),d.state("gallery-edit").on("update",function(e){var f=c.shortcode(e).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(f)),d.detach()})):a.dom.hasClass(b,"wp-playlist")&&wp.media.playlist?(d=wp.media.playlist.edit(e),d.state("playlist-edit").on("update",function(c){var e=wp.media.playlist.shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):a.dom.hasClass(b,"wp-video-playlist")&&wp.media["video-playlist"]?(d=wp.media["video-playlist"].edit(e),d.state("video-playlist-edit").on("update",function(c){var e=wp.media["video-playlist"].shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):a.dom.hasClass(b,"wp-video")?(d=wp.media.video.edit(e),d.on("close",function(){d.detach()}),d.state("video-details").on("update replace add-source select-poster-image add-track",function(c){var e=wp.media.video.shortcode(c);a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()}),d.open()):a.dom.hasClass(b,"wp-audio")?(d=wp.media.audio.edit(e),d.on("close",function(){d.detach()}),d.state("audio-details").on("update replace add-source",function(c){var e=wp.media.audio.shortcode(c);a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()}),d.open()):window.console&&window.console.log("Edit AV shortcode "+e))}a.addCommand("WP_Gallery",function(){g(a.selection.getNode())}),a.on("mouseup",function(b){function c(){d.removeClass(d.select("img.wp-media-selected"),"wp-media-selected")}var d=a.dom,e=b.target;"IMG"===e.nodeName&&d.getAttrib(e,"data-wp-media")?2!==b.button&&(d.hasClass(e,"wp-media-selected")?g(e):(c(),d.addClass(e,"wp-media-selected"))):c()}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")&&(c.hasClass(d,"wp-gallery")?b.name="gallery":c.hasClass(d,"wp-video")?b.name="video":c.hasClass(d,"wp-audio")?b.name="audio":c.hasClass(d,"wp-playlist")?b.name="playlist":c.hasClass(d,"wp-video-playlist")&&(b.name="video-playlist"))}),a.on("BeforeSetContent",function(c){a.plugins.wpview||(c.content=b(c.content)),c.content=e(c.content)}),a.on("PostProcess",function(a){a.get&&(a.content=f(a.content))})});
+tinymce.PluginManager.add("wpgallery",function(a){function b(a){return a.replace(/\[gallery([^\]]*)\]/g,function(a){return c("wp-gallery",a)})}function c(a,b){return b=window.encodeURIComponent(b),'<img src="'+tinymce.Env.transparentSrc+'" class="wp-media mceItem '+a+'" data-wp-media="'+b+'" data-mce-resize="false" data-mce-placeholder="1" />'}function d(a,b,d){var e;return d&&d.indexOf("["+b)>-1?(e=a.length-d.length,c("wp-"+b,a.substring(0,e))+a.substring(e)):c("wp-"+b,a)}function e(a){for(var b=/\[(video-playlist|playlist)[^\]]*\]/,c=/\[(video-playlist|playlist)[^\]]*\]([\s\S]*?\[\/\1\])?/;b.test(a);)a=a.replace(c,d);return a}function f(a){function b(a,b){return b=new RegExp(b+'="([^"]+)"').exec(a),b?window.decodeURIComponent(b[1]):""}return a.replace(/(?:<p(?: [^>]+)?>)*(<img [^>]+>)(?:<\/p>)*/g,function(a,c){var d=b(c,"data-wp-media");return d?"<p>"+d+"</p>":a})}function g(b){var c,d,e;"IMG"===b.nodeName&&"undefined"!=typeof wp&&wp.media&&(e=window.decodeURIComponent(a.dom.getAttrib(b,"data-wp-media")),a.dom.hasClass(b,"wp-gallery")&&wp.media.gallery?(c=wp.media.gallery,d=c.edit(e),d.state("gallery-edit").on("update",function(e){var f=c.shortcode(e).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(f)),d.detach()})):a.dom.hasClass(b,"wp-playlist")&&wp.media.playlist?(d=wp.media.playlist.edit(e),d.state("playlist-edit").on("update",function(c){var e=wp.media.playlist.shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):a.dom.hasClass(b,"wp-video-playlist")&&wp.media["video-playlist"]?(d=wp.media["video-playlist"].edit(e),d.state("video-playlist-edit").on("update",function(c){var e=wp.media["video-playlist"].shortcode(c).string();a.dom.setAttrib(b,"data-wp-media",window.encodeURIComponent(e)),d.detach()})):window.console&&window.console.log("Edit AV shortcode "+e))}a.addCommand("WP_Gallery",function(){g(a.selection.getNode())}),a.on("mouseup",function(b){function c(){d.removeClass(d.select("img.wp-media-selected"),"wp-media-selected")}var d=a.dom,e=b.target;"IMG"===e.nodeName&&d.getAttrib(e,"data-wp-media")?2!==b.button&&(d.hasClass(e,"wp-media-selected")?g(e):(c(),d.addClass(e,"wp-media-selected"))):c()}),a.on("ResolveName",function(b){var c=a.dom,d=b.target;"IMG"===d.nodeName&&c.getAttrib(d,"data-wp-media")&&(c.hasClass(d,"wp-gallery")?b.name="gallery":c.hasClass(d,"wp-video")?b.name="video":c.hasClass(d,"wp-audio")?b.name="audio":c.hasClass(d,"wp-playlist")?b.name="playlist":c.hasClass(d,"wp-video-playlist")&&(b.name="video-playlist"))}),a.on("BeforeSetContent",function(c){a.plugins.wpview||(c.content=b(c.content)),c.content=e(c.content)}),a.on("PostProcess",function(a){a.get&&(a.content=f(a.content))})});

wp-includes/js/tinymce/skins/wordpress/wp-content.css

@@ -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;
 }
 

wp-includes/media-template.php

@@ -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
+				<?php wp_underscore_audio_template() ?>
-					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>
 				<# 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">
-				<#
+				<?php wp_underscore_video_template() ?>
-				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>
 				<# 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