WordPress.org

Make WordPress Core

Changeset 41252


Ignore:
Timestamp:
08/14/17 17:55:24 (3 months 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/widgets.css

    r41062 r41252  
    153153} 
    154154 
     155.media-widget-image-link { 
     156    margin: 1em 0; 
     157} 
     158 
    155159/* Widget Dragging Helpers */ 
    156160.widget.ui-draggable-dragging { 
  • trunk/src/wp-admin/js/widgets/media-image-widget.js

    r40670 r41252  
    3131         */ 
    3232        renderPreview: function renderPreview() { 
    33             var control = this, previewContainer, previewTemplate; 
     33            var control = this, previewContainer, previewTemplate, fieldsContainer, fieldsTemplate, linkInput; 
    3434            if ( ! control.model.get( 'attachment_id' ) && ! control.model.get( 'url' ) ) { 
    3535                return; 
     
    3838            previewContainer = control.$el.find( '.media-widget-preview' ); 
    3939            previewTemplate = wp.template( 'wp-media-widget-image-preview' ); 
    40             previewContainer.html( previewTemplate( _.extend( control.previewTemplateProps.toJSON() ) ) ); 
     40            previewContainer.html( previewTemplate( control.previewTemplateProps.toJSON() ) ); 
     41 
     42            linkInput = control.$el.find( '.link' ); 
     43            if ( ! linkInput.is( document.activeElement ) ) { 
     44                fieldsContainer = control.$el.find( '.media-widget-fields' ); 
     45                fieldsTemplate = wp.template( 'wp-media-widget-image-fields' ); 
     46                fieldsContainer.html( fieldsTemplate( control.previewTemplateProps.toJSON() ) ); 
     47            } 
    4148        }, 
    4249 
     
    6572 
    6673            updateCallback = function() { 
    67                 var mediaProps; 
     74                var mediaProps, linkType; 
    6875 
    6976                // Update cached attachment object to avoid having to re-fetch. This also triggers re-rendering of preview. 
    7077                mediaProps = mediaFrame.state().attributes.image.toJSON(); 
     78                linkType = mediaProps.link; 
     79                mediaProps.link = mediaProps.linkUrl; 
    7180                control.selectedAttachment.set( mediaProps ); 
     81                control.displaySettings.set( 'link', linkType ); 
    7282 
    7383                control.model.set( _.extend( 
     
    131141         */ 
    132142        mapModelToPreviewTemplateProps: function mapModelToPreviewTemplateProps() { 
    133             var control = this, mediaFrameProps, url; 
     143            var control = this, previewTemplateProps, url; 
    134144            url = control.model.get( 'url' ); 
    135             mediaFrameProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control ); 
    136             mediaFrameProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : ''; 
    137             return mediaFrameProps; 
     145            previewTemplateProps = component.MediaWidgetControl.prototype.mapModelToPreviewTemplateProps.call( control ); 
     146            previewTemplateProps.currentFilename = url ? url.replace( /\?.*$/, '' ).replace( /^.+\//, '' ) : ''; 
     147            previewTemplateProps.link_url = control.model.get( 'link_url' ); 
     148            return previewTemplateProps; 
    138149        } 
    139150    }); 
  • trunk/src/wp-admin/js/widgets/media-widgets.js

    r41249 r41252  
    513513            }); 
    514514 
     515            // Update link_url attribute. 
     516            control.$el.on( 'input change', '.link', function updateLinkUrl() { 
     517                var linkUrl = $.trim( $( this ).val() ), linkType = 'custom'; 
     518                if ( control.selectedAttachment.get( 'linkUrl' ) === linkUrl || control.selectedAttachment.get( 'link' ) === linkUrl ) { 
     519                    linkType = 'post'; 
     520                } else if ( control.selectedAttachment.get( 'url' ) === linkUrl ) { 
     521                    linkType = 'file'; 
     522                } 
     523                control.model.set( { 
     524                    link_url: linkUrl, 
     525                    link_type: linkType 
     526                }); 
     527 
     528                // Update display settings for the next time the user opens to select from the media library. 
     529                control.displaySettings.set( { 
     530                    link: linkType, 
     531                    linkUrl: linkUrl 
     532                }); 
     533            }); 
     534 
    515535            /* 
    516536             * Copy current display settings from the widget model to serve as basis 
     
    823843 
    824844            if ( 'post' === mediaFrameProps.link ) { 
    825                 modelProps.link_url = mediaFrameProps.postUrl; 
     845                modelProps.link_url = mediaFrameProps.postUrl || mediaFrameProps.linkUrl; 
    826846            } else if ( 'file' === mediaFrameProps.link ) { 
    827847                modelProps.link_url = mediaFrameProps.url; 
  • trunk/src/wp-includes/widgets/class-wp-widget-media-image.php

    r41162 r41252  
    9696                    'media_prop' => 'link', 
    9797                    'description' => __( 'Link To' ), 
    98                     'should_preview_update' => false, 
     98                    'should_preview_update' => true, 
    9999                ), 
    100100                'link_url' => array( 
     
    104104                    'media_prop' => 'linkUrl', 
    105105                    'description' => __( 'URL' ), 
    106                     'should_preview_update' => false, 
     106                    'should_preview_update' => true, 
    107107                ), 
    108108                'image_classes' => array( 
     
    308308 
    309309        ?> 
     310        <script type="text/html" id="tmpl-wp-media-widget-image-fields"> 
     311            <# var elementIdPrefix = 'el' + String( Math.random() ) + '_'; #> 
     312            <# if ( data.url ) { #> 
     313            <p class="media-widget-image-link"> 
     314                <label for="{{ elementIdPrefix }}linkUrl"><?php esc_html_e( 'Link to:' ); ?></label> 
     315                <input id="{{ elementIdPrefix }}linkUrl" type="url" class="widefat link" value="{{ data.link_url }}" placeholder="http://"> 
     316            </p> 
     317            <# } #> 
     318        </script> 
    310319        <script type="text/html" id="tmpl-wp-media-widget-image-preview"> 
    311             <# 
    312             var describedById = 'describedBy-' + String( Math.random() ); 
    313             #> 
     320            <# var describedById = 'describedBy-' + String( Math.random() ); #> 
    314321            <# if ( data.error && 'missing_attachment' === data.error ) { #> 
    315322                <div class="notice notice-error notice-alt notice-missing-attachment"> 
  • trunk/src/wp-includes/widgets/class-wp-widget-media.php

    r41162 r41252  
    405405                </button> 
    406406            </p> 
     407            <div class="media-widget-fields"> 
     408            </div> 
    407409        </script> 
    408410        <?php 
Note: See TracChangeset for help on using the changeset viewer.