WordPress.org

Make WordPress Core

Changeset 41252


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