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.


git-svn-id: https://develop.svn.wordpress.org/trunk@41252 602fd350-edb4-49c9-b593-d223f7449a82

src/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%;

src/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;
 		}
 	});
 

src/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;
 			}

src/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>

src/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
 	}