Widgets: Expose link URL input field in Image widget to avoid having to open media modal to discover.

Props timmydcrawford, westonruter.
See #39993.
Fixes #41274.

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


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

wp-admin/css/widgets-rtl.css

@@ -152,6 +152,10 @@
 	border: 1px solid #f00;
 }
 
+.media-widget-image-link {
+	margin: 1em 0;
+}
+
 /* Widget Dragging Helpers */
 .widget.ui-draggable-dragging {
 	min-width: 100%;

wp-admin/css/widgets.css

@@ -152,6 +152,10 @@
 	border: 1px solid #f00;
 }
 
+.media-widget-image-link {
+	margin: 1em 0;
+}
+
 /* Widget Dragging Helpers */
 .widget.ui-draggable-dragging {
 	min-width: 100%;

wp-admin/js/widgets/media-image-widget.js

@@ -30,14 +30,21 @@
 		 * @returns {void}
 		 */
 		renderPreview: function renderPreview() {
-			var control = this, previewContainer, previewTemplate;
+			var control = this, previewContainer, previewTemplate, fieldsContainer, fieldsTemplate, linkInput;
 			if ( ! control.model.get( 'attachment_id' ) && ! control.model.get( 'url' ) ) {
 				return;
 			}
 
 			previewContainer = control.$el.find( '.media-widget-preview' );
 			previewTemplate = wp.template( 'wp-media-widget-image-preview' );
-			previewContainer.html( previewTemplate( _.extend( control.previewTemplateProps.toJSON() ) ) );
+			previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) );
+
+			linkInput = control.$el.find( '.link' );
+			if ( ! linkInput.is( document.activeElement ) ) {
+				fieldsContainer = control.$el.find( '.media-widget-fields' );
+				fieldsTemplate = wp.template( 'wp-media-widget-image-fields' );
+				fieldsContainer.html( fieldsTemplate( control.previewTemplateProps.toJSON() ) );
+			}
 		},
 
 		/**
@@ -64,11 +71,14 @@
 			mediaFrame.$el.addClass( 'media-widget' );
 
 			updateCallback = function() {
-				var mediaProps;
+				var mediaProps, linkType;
 
 				// Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview.
 				mediaProps = mediaFrame.state().attributes.image.toJSON();
+				linkType = mediaProps.link;
+				mediaProps.link = mediaProps.linkUrl;
 				control.selectedAttachment.set( mediaProps );
+				control.displaySettings.set( 'link', linkType );
 
 				control.model.set( _.extend(
 					control.mapMediaToModelProps( mediaProps ),
@@ -130,11 +140,12 @@
 		 * @returns {Object} Preview template props.
 		 */
 		mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() {
-			var control = this, mediaFrameProps, url;
+			var control = this, previewTemplateProps, url;
 			url = control.model.get( 'url' );
-			mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );
+			previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );
-			mediaFrameProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
+			previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
-			return mediaFrameProps;
+			previewTemplateProps.link_url = control.model.get( 'link_url' );
+			return previewTemplateProps;
 		}
 	});
 

wp-admin/js/widgets/media-image-widget.min.js

@@ -1 +1 @@
-!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({renderPreview:function(){var a,b,c=this;(c.model.get("attachment_id")||c.model.get("url"))&&(a=c.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(_.extend(c.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b;b=a.state().attributes.image.toJSON(),f.selectedAttachment.set(b),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery);
+!function(a,b){"use strict";var c,d;c=a.MediaWidgetModel.extend({}),d=a.MediaWidgetControl.extend({renderPreview:function(){var a,b,c,d,e,f=this;(f.model.get("attachment_id")||f.model.get("url"))&&(a=f.$el.find(".media-widget-preview"),b=wp.template("wp-media-widget-image-preview"),a.html(b(f.previewTemplateProps.toJSON())),e=f.$el.find(".link"),e.is(document.activeElement)||(c=f.$el.find(".media-widget-fields"),d=wp.template("wp-media-widget-image-fields"),c.html(d(f.previewTemplateProps.toJSON()))))},editMedia:function(){var a,c,d,e,f=this;e=f.mapModelToMediaFrameProps(f.model.toJSON()),"none"===e.link&&(e.linkUrl=""),a=wp.media({frame:"image",state:"image-details",metadata:e}),a.$el.addClass("media-widget"),c=function(){var b,c;b=a.state().attributes.image.toJSON(),c=b.link,b.link=b.linkUrl,f.selectedAttachment.set(b),f.displaySettings.set("link",c),f.model.set(_.extend(f.mapMediaToModelProps(b),{error:!1}))},a.state("image-details").on("update",c),a.state("replace-image").on("replace",c),d=wp.media.model.Attachment.prototype.sync,wp.media.model.Attachment.prototype.sync=function(){return b.Deferred().rejectWith(this).promise()},a.on("close",function(){a.detach(),wp.media.model.Attachment.prototype.sync=d}),a.open()},getEmbedResetProps:function(){return _.extend(a.MediaWidgetControl.prototype.getEmbedResetProps.call(this),{size:"full",width:0,height:0})},getModelPropsFromMediaFrame:function(b){var c=this;return _.omit(a.MediaWidgetControl.prototype.getModelPropsFromMediaFrame.call(c,b),"image_title")},mapModelToPreviewTemplateProps:function(){var b,c,d=this;return c=d.model.get("url"),b=a.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call(d),b.currentFilename=c?c.replace(/\?.*$/,"").replace(/^.+\//,""):"",b.link_url=d.model.get("link_url"),b}}),a.controlConstructors.media_image=d,a.modelConstructors.media_image=c}(wp.mediaWidgets,jQuery);

wp-admin/js/widgets/media-widgets.js

@@ -512,6 +512,26 @@ wp.mediaWidgets = ( function( $ ) {
 				});
 			});
 
+			// Update link_url attribute.
+			control.$el.on( 'input change', '.link', function updateLinkUrl() {
+				var linkUrl = $.trim( $( this ).val() ), linkType = 'custom';
+				if ( control.selectedAttachment.get( 'linkUrl' ) === linkUrl || control.selectedAttachment.get( 'link' ) === linkUrl ) {
+					linkType = 'post';
+				} else if ( control.selectedAttachment.get( 'url' ) === linkUrl ) {
+					linkType = 'file';
+				}
+				control.model.set( {
+					link_url: linkUrl,
+					link_type: linkType
+				});
+
+				// Update display settings for the next time the user opens to select from the media library.
+				control.displaySettings.set( {
+					link: linkType,
+					linkUrl: linkUrl
+				});
+			});
+
 			/*
 			 * Copy current display settings from the widget model to serve as basis
 			 * of customized display settings for the current media frame session.
@@ -822,7 +842,7 @@ wp.mediaWidgets = ( function( $ ) {
 			}
 
 			if ( 'post' === mediaFrameProps.link ) {
-				modelProps.link_url = mediaFrameProps.postUrl;
+				modelProps.link_url = mediaFrameProps.postUrl || mediaFrameProps.linkUrl;
 			} else if ( 'file' === mediaFrameProps.link ) {
 				modelProps.link_url = mediaFrameProps.url;
 			}

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-alpha-41251';
+$wp_version = '4.9-alpha-41252';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

wp-includes/widgets/class-wp-widget-media-image.php

@@ -95,7 +95,7 @@ class WP_Widget_Media_Image extends WP_Widget_Media {
 					'default' => 'none',
 					'media_prop' => 'link',
 					'description' => __( 'Link To' ),
-					'should_preview_update' => false,
+					'should_preview_update' => true,
 				),
 				'link_url' => array(
 					'type' => 'string',
@@ -103,7 +103,7 @@ class WP_Widget_Media_Image extends WP_Widget_Media {
 					'format' => 'uri',
 					'media_prop' => 'linkUrl',
 					'description' => __( 'URL' ),
-					'should_preview_update' => false,
+					'should_preview_update' => true,
 				),
 				'image_classes' => array(
 					'type' => 'string',
@@ -307,10 +307,17 @@ class WP_Widget_Media_Image extends WP_Widget_Media {
 		parent::render_control_template_scripts();
 
 		?>
+		<script type="text/html" id="tmpl-wp-media-widget-image-fields">
+			<# var elementIdPrefix = 'el' + String( Math.random() ) + '_'; #>
+			<# if ( data.url ) { #>
+			<p class="media-widget-image-link">
+				<label for="{{ elementIdPrefix }}linkUrl"><?php esc_html_e( 'Link to:' ); ?></label>
+				<input id="{{ elementIdPrefix }}linkUrl" type="url" class="widefat link" value="{{ data.link_url }}" placeholder="http://">
+			</p>
+			<# } #>
+		</script>
 		<script type="text/html" id="tmpl-wp-media-widget-image-preview">
-			<#
+			<# var describedById = 'describedBy-' + String( Math.random() ); #>
-			var describedById = 'describedBy-' + String( Math.random() );
-			#>
 			<# if ( data.error && 'missing_attachment' === data.error ) { #>
 				<div class="notice notice-error notice-alt notice-missing-attachment">
 					<p><?php echo $this->l10n['missing_attachment']; ?></p>

wp-includes/widgets/class-wp-widget-media.php

@@ -404,6 +404,8 @@ abstract class WP_Widget_Media extends WP_Widget {
 					<?php echo esc_html( $this->l10n['add_media'] ); ?>
 				</button>
 			</p>
+			<div class="media-widget-fields">
+			</div>
 		</script>
 		<?php
 	}