WordPress.org

Make WordPress Core

Ticket #41274: 41274.1.diff

File 41274.1.diff, 6.8 KB (added by westonruter, 3 years ago)

Δ https://github.com/xwp/wordpress-develop/pull/243/commits/0cb1dae

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

    diff --git src/wp-admin/css/widgets.css src/wp-admin/css/widgets.css
    index 627b581c72..a4084137a0 100644
     
    152152        border: 1px solid #f00;
    153153}
    154154
     155.media-widget-image-link {
     156        margin: 1em 0;
     157}
     158
    155159/* Widget Dragging Helpers */
    156160.widget.ui-draggable-dragging {
    157161        min-width: 100%;
  • src/wp-admin/js/widgets/media-image-widget.js

    diff --git src/wp-admin/js/widgets/media-image-widget.js src/wp-admin/js/widgets/media-image-widget.js
    index 0cda681197..ddbe6b3e24 100644
     
    3030                 * @returns {void}
    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;
    3636                        }
    3737
    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
    4350                /**
     
    6471                        mediaFrame.$el.addClass( 'media-widget' );
    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(
    7484                                        control.mapMediaToModelProps( mediaProps ),
     
    130140                 * @returns {Object} Preview template props.
    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        });
    140151
  • src/wp-admin/js/widgets/media-widgets.js

    diff --git src/wp-admin/js/widgets/media-widgets.js src/wp-admin/js/widgets/media-widgets.js
    index e922670a2c..25ea864818 100644
    wp.mediaWidgets = ( function( $ ) { 
    513513                                });
    514514                        });
    515515
     516                        // Update link_url attribute.
     517                        control.$el.on( 'input change', '.link', function updateLinkUrl() {
     518                                var linkUrl = $.trim( $( this ).val() ), linkType = 'custom';
     519                                if ( control.selectedAttachment.get( 'linkUrl' ) === linkUrl || control.selectedAttachment.get( 'link' ) === linkUrl ) {
     520                                        linkType = 'post';
     521                                } else if ( control.selectedAttachment.get( 'url' ) === linkUrl ) {
     522                                        linkType = 'file';
     523                                }
     524                                control.model.set( {
     525                                        link_url: linkUrl,
     526                                        link_type: linkType
     527                                });
     528
     529                                // Update display settings for the next time the user opens to select from the media library.
     530                                control.displaySettings.set( {
     531                                        link: linkType,
     532                                        linkUrl: linkUrl
     533                                });
     534                        });
     535
    516536                        /*
    517537                         * Copy current display settings from the widget model to serve as basis
    518538                         * of customized display settings for the current media frame session.
    wp.mediaWidgets = ( function( $ ) { 
    819839                        }
    820840
    821841                        if ( 'post' === mediaFrameProps.link ) {
    822                                 modelProps.link_url = mediaFrameProps.postUrl;
     842                                modelProps.link_url = mediaFrameProps.postUrl || mediaFrameProps.linkUrl;
    823843                        } else if ( 'file' === mediaFrameProps.link ) {
    824844                                modelProps.link_url = mediaFrameProps.url;
    825845                        }
  • src/wp-includes/widgets/class-wp-widget-media-image.php

    diff --git src/wp-includes/widgets/class-wp-widget-media-image.php src/wp-includes/widgets/class-wp-widget-media-image.php
    index 40485a595d..e0dafd3733 100644
    class WP_Widget_Media_Image extends WP_Widget_Media { 
    9595                                        'default' => 'none',
    9696                                        'media_prop' => 'link',
    9797                                        'description' => __( 'Link To' ),
    98                                         'should_preview_update' => false,
     98                                        'should_preview_update' => true,
    9999                                ),
    100100                                'link_url' => array(
    101101                                        'type' => 'string',
    class WP_Widget_Media_Image extends WP_Widget_Media { 
    103103                                        'format' => 'uri',
    104104                                        'media_prop' => 'linkUrl',
    105105                                        'description' => __( 'URL' ),
    106                                         'should_preview_update' => false,
     106                                        'should_preview_update' => true,
    107107                                ),
    108108                                'image_classes' => array(
    109109                                        'type' => 'string',
    class WP_Widget_Media_Image extends WP_Widget_Media { 
    307307                parent::render_control_template_scripts();
    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">
    316323                                        <p><?php echo $this->l10n['missing_attachment']; ?></p>
  • src/wp-includes/widgets/class-wp-widget-media.php

    diff --git src/wp-includes/widgets/class-wp-widget-media.php src/wp-includes/widgets/class-wp-widget-media.php
    index 59afe7d082..84c9b3ff92 100644
    abstract class WP_Widget_Media extends WP_Widget { 
    404404                                        <?php echo esc_html( $this->l10n['add_media'] ); ?>
    405405                                </button>
    406406                        </p>
     407                        <div class="media-widget-fields">
     408                        </div>
    407409                </script>
    408410                <?php
    409411        }