Ticket #41274: 41274.0.diff

src/wp-admin/css/widgets.css

@@ -152 +152 @@
         border: 1px solid #f00;
 }
 
+.media-widget-extra {
+        text-align: left;
+}
+
+.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 +30 @@
                  * @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 +71 @@
                         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 +140 @@
                  * @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;
                 }
         });
 

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

@@ -513 +513 @@
                                 });
                         });
 
+                        // Update link_url attribute.
+                        control.$el.on( 'input change', '.link', function updateExtra() {
+                                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.
@@ -819 +839 @@
                         }
 
                         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 +95 @@
                                         'default' => 'none',
                                         'media_prop' => 'link',
                                         'description' => __( 'Link To' ),
-                                        'should_preview_update' => false,
+                                        'should_preview_update' => true,
                                 ),
                                 'link_url' => array(
                                         'type' => 'string',
@@ -103 +103 @@
                                         'format' => 'uri',
                                         'media_prop' => 'linkUrl',
                                         'description' => __( 'URL' ),
-                                        'should_preview_update' => false,
+                                        'should_preview_update' => true,
                                 ),
                                 'image_classes' => array(
                                         'type' => 'string',
@@ -307 +307 @@
                 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="text" class="widefat link extra" 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 +404 @@
                                         <?php echo esc_html( $this->l10n['add_media'] ); ?>
                                 </button>
                         </p>
+                        <div class="media-widget-fields">
+                        </div>
                 </script>
                 <?php
         }