diff --git a/src/wp-admin/css/widgets.css b/src/wp-admin/css/widgets.css
index 627b581c72..a4084137a0 100644
--- a/src/wp-admin/css/widgets.css
+++ b/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%;
diff --git a/src/wp-admin/js/widgets/media-image-widget.js b/src/wp-admin/js/widgets/media-image-widget.js
index 0cda681197..ddbe6b3e24 100644
--- a/src/wp-admin/js/widgets/media-image-widget.js
+++ b/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 );
- mediaFrameProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
- return mediaFrameProps;
+ previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control );
+ previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : '';
+ previewTemplateProps.link_url = control.model.get( 'link_url' );
+ return previewTemplateProps;
}
});
diff --git a/src/wp-admin/js/widgets/media-widgets.js b/src/wp-admin/js/widgets/media-widgets.js
index 45c0889654..8781df4bd3 100644
--- a/src/wp-admin/js/widgets/media-widgets.js
+++ b/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;
}
diff --git a/src/wp-includes/widgets/class-wp-widget-media-image.php b/src/wp-includes/widgets/class-wp-widget-media-image.php
index 40485a595d..e0dafd3733 100644
--- a/src/wp-includes/widgets/class-wp-widget-media-image.php
+++ b/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();
?>
+