Changeset 41252

Timestamp:

08/14/2017 05:55:24 PM (7 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