From b0d06b1222ced4b260c7a5de2cb8d77d0e824d56 Mon Sep 17 00:00:00 2001 From: Weston Ruter Date: Mon, 14 Aug 2017 17:55:24 +0000 Subject: [PATCH] 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 | 4 +++ src/wp-admin/js/widgets/media-image-widget.js | 25 +++++++++++++------ src/wp-admin/js/widgets/media-widgets.js | 22 +++++++++++++++- .../widgets/class-wp-widget-media-image.php | 17 +++++++++---- .../widgets/class-wp-widget-media.php | 2 ++ 5 files changed, 57 insertions(+), 13 deletions(-) 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(); ?> +