When adding a URL in the Insert from URL state in the media modal, attempt to show a preview of the content. Drop the unused width and height fields.

This will probably be iterated upon.

Props helen, jtsternberg, wonderboymusic.
See #15490.

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


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

wp-admin/includes/ajax-actions.php

@@ -2309,6 +2309,8 @@ function wp_ajax_send_attachment_to_editor() {
  * @since 3.5.0
  */
 function wp_ajax_send_link_to_editor() {
+	global $post, $wp_embed;
+
 	check_ajax_referer( 'media-send-to-editor', 'nonce' );
 
 	if ( ! $src = wp_unslash( $_POST['src'] ) )
@@ -2323,9 +2325,20 @@ function wp_ajax_send_link_to_editor() {
 	if ( ! $title = trim( wp_unslash( $_POST['title'] ) ) )
 		$title = wp_basename( $src );
 
-	$html = '';
-	if ( $title )
+	$post = get_post( isset( $_POST['post_id'] ) ? $_POST['post_id'] : 0 );
+	// ping WordPress for an embed
+	$check_embed = $wp_embed->run_shortcode( '[embed]'. $src .'[/embed]' );
+	// fallback that WordPress creates when no oEmbed was found
+	$fallback = $wp_embed->maybe_make_link( $src );
+
+	if ( $check_embed !== $fallback ) {
+		// TinyMCE view for [embed] will parse this
+		$html = '[embed]' . $src . '[/embed]';
+	} elseif ( $title ) {
 		$html = '<a href="' . esc_url( $src ) . '">' . $title . '</a>';
+	} else {
+		$html = '';
+	}
 
 	// Figure out what filter to run:
 	$type = 'file';

wp-includes/css/media-views-rtl.css

@@ -1583,7 +1583,7 @@
 
 .media-frame .embed-url .spinner {
 	position: absolute;
-	top: 16px;
+	top: 32px;
 	left: 26px;
 }
 
@@ -1594,7 +1594,7 @@
 .embed-link-settings,
 .embed-media-settings {
 	position: absolute;
-	top: 60px;
+	top: 70px;
 	right: 0;
 	left: 0;
 	bottom: 0;
@@ -1602,6 +1602,14 @@
 	overflow: auto;
 }
 
+.embed-preview img, .embed-preview iframe, .embed-preview embed {
+	max-width: 100%;
+}
+
+.embed-preview img {
+	height: auto;
+}
+
 .image-details .media-modal {
 	right: 140px;
 	left: 140px;

wp-includes/css/media-views.css

@@ -1583,7 +1583,7 @@
 
 .media-frame .embed-url .spinner {
 	position: absolute;
-	top: 16px;
+	top: 32px;
 	right: 26px;
 }
 
@@ -1594,7 +1594,7 @@
 .embed-link-settings,
 .embed-media-settings {
 	position: absolute;
-	top: 60px;
+	top: 70px;
 	left: 0;
 	right: 0;
 	bottom: 0;
@@ -1602,6 +1602,14 @@
 	overflow: auto;
 }
 
+.embed-preview img, .embed-preview iframe, .embed-preview embed {
+	max-width: 100%;
+}
+
+.embed-preview img {
+	height: auto;
+}
+
 .image-details .media-modal {
 	left: 140px;
 	right: 140px;

wp-includes/js/media-views.js

@@ -6150,7 +6150,7 @@
 		},
 
 		initialize: function() {
-			this.$input = $('<input/>').attr( 'type', 'text' ).val( this.model.get('url') );
+			this.$input = $('<input id="embed-url-field" />').attr( 'type', 'text' ).val( this.model.get('url') );
 			this.input = this.$input[0];
 
 			this.spinner = $('<span class="spinner" />')[0];
@@ -6206,7 +6206,51 @@
 	 */
 	media.view.EmbedLink = media.view.Settings.extend({
 		className: 'embed-link-settings',
-		template:  media.template('embed-link-settings')
+		template:  media.template('embed-link-settings'),
+
+		initialize: function() {
+			this.spinner = $('<span class="spinner" />');
+			this.$el.append( this.spinner[0] );
+			this.listenTo( this.model, 'change:url', this.updateoEmbed );
+		},
+
+		updateoEmbed: function() {
+			var url = this.model.get( 'url' );
+
+			this.$('.setting.title').show();
+			// clear out previous results
+			this.$('.embed-container').hide().find('.embed-preview').html('');
+
+			// only proceed with embed if the field contains more than 6 characters
+			if ( url && url.length < 6 ) {
+				return;
+			}
+
+			this.spinner.show();
+
+			setTimeout( _.bind( this.fetch, this ), 500 );
+		},
+
+		fetch: function() {
+			// check if they haven't typed in 500 ms
+			if ( $('#embed-url-field').val() !== this.model.get('url') ) {
+				return;
+			}
+
+			wp.ajax.send( 'parse-embed', {
+				data : {
+					post_ID: media.view.settings.post.id,
+					content: '[embed]' + this.model.get('url') + '[/embed]'
+				}
+			} ).done( _.bind( this.renderoEmbed, this ) );
+		},
+
+		renderoEmbed: function(html) {
+			this.spinner.hide();
+
+			this.$('.setting.title').hide();
+			this.$('.embed-container').show().find('.embed-preview').html( html );
+		}
 	});
 
 	/**

wp-includes/media-template.php

@@ -546,10 +546,13 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-embed-link-settings">
-		<label class="setting">
-			<span><?php _e('Title'); ?></span>
+		<label class="setting title">
+			<span><?php _e( 'Title' ); ?></span>
 			<input type="text" class="alignment" data-setting="title" />
 		</label>
+		<div class="embed-container" style="display: none;">
+			<div class="embed-preview"></div>
+		</div>
 	</script>
 
 	<script type="text/html" id="tmpl-embed-image-settings">