Changeset 41252

Timestamp:

08/14/2017 05:55:24 PM (9 years ago)

Author:

westonruter

Message:

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.

Location:

trunk/src

Files:

• wp-admin/css/widgets.css (modified) (1 diff)
• wp-admin/js/widgets/media-image-widget.js (modified) (4 diffs)
• wp-admin/js/widgets/media-widgets.js (modified) (2 diffs)
• wp-includes/widgets/class-wp-widget-media-image.php (modified) (3 diffs)
• wp-includes/widgets/class-wp-widget-media.php (modified) (1 diff)

trunk/src/wp-admin/css/widgets.css

@@ -153 +153 @@
 }
 
+.media-widget-image-link {
+        margin: 1em 0;
+}
+
 /* Widget Dragging Helpers */
 .widget.ui-draggable-dragging {

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

@@ -31 +31 @@
                  */
                 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;
@@ -38 +38 @@
                         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() ) );
+                        }
                 },
 
@@ -65 +72 @@
 
                         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(
@@ -131 +141 @@
                  */
                 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;
                 }
         });

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

@@ -513 +513 @@
                         });
 
+                        // 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
@@ -823 +843 @@
 
                         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;

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

@@ -96 +96 @@
                                         'media_prop' => 'link',
                                         'description' => __( 'Link To' ),
-                                        'should_preview_update' => false,
+                                        'should_preview_update' => true,
                                 ),
                                 'link_url' => array(
@@ -104 +104 @@
                                         'media_prop' => 'linkUrl',
                                         'description' => __( 'URL' ),
-                                        'should_preview_update' => false,
+                                        'should_preview_update' => true,
                                 ),
                                 'image_classes' => array(
@@ -308 +308 @@
 
                 ?>
+                <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">

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

@@ -405 +405 @@
                                 </button>
                         </p>
+                        <div class="media-widget-fields">
+                        </div>
                 </script>
                 <?php