Make WordPress Core

Changeset 36990


Ignore:
Timestamp:
03/14/2016 07:16:09 PM (8 years ago)
Author:
westonruter
Message:

Customize: Rely on selective refresh exclusively for previewing custom logo changes.

Eliminates JS logic (from [36698]) which attempted to do pure JS update while waiting for the selective refresh response to return. The duplicate JS logic lacked a re-implementation of the image_downsize() functionality available in PHP, and so the JS preview logic would fail to properly preview images that didn't have the exact theme image size generated. To keep the code DRY and to eliminate the momentary display of an improperly-sized image, the duplicated JS logic is now removed.

See #27355.
See #33755.
Fixes #36096.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/js/customize-preview.js

    r36903 r36990  
    227227         * Custom Logo
    228228         *
    229          * The custom logo setting only contains the attachment ID. To avoid having to send an AJAX request to get more
    230          * data, we send a separate message with the attachment data we get from the Customizer's media modal.
    231          * Therefore first callback handles only the event of a new logo being selected.
    232          *
    233          * We don't need any information about a removed logo, so the second callback only handles that.
     229         * Toggle the wp-custom-logo body class when a logo is added or removed.
    234230         *
    235231         * @since 4.5.0
    236232         */
    237         api.preview.bind( 'custom_logo-attachment-data', function( attachment ) {
    238             var $logo  = $( '.custom-logo' ),
    239                 size   = $logo.data( 'size' ),
    240                 srcset = [];
    241 
    242             // If the source was smaller than the size required by the theme, give the biggest we've got.
    243             if ( ! attachment.sizes[ size ] ) {
    244                 size = 'full';
    245             }
    246 
    247             _.each( attachment.sizes, function( size ) {
    248                 srcset.push( size.url + ' ' + size.width + 'w' );
     233        api( 'custom_logo', function( setting ) {
     234            $( 'body' ).toggleClass( 'wp-custom-logo', !! setting.get() );
     235            setting.bind( function( attachmentId ) {
     236                $( 'body' ).toggleClass( 'wp-custom-logo', !! attachmentId );
    249237            } );
    250 
    251             $logo.attr( {
    252                 height: attachment.sizes[ size ].height,
    253                 width:  attachment.sizes[ size ].width,
    254                 src:    attachment.sizes[ size ].url,
    255                 srcset: srcset
    256             } );
    257 
    258             $( '.custom-logo-link' ).show();
    259             $( 'body' ).addClass( 'wp-custom-logo' );
    260         } );
    261 
    262         api( 'custom_logo', function( setting ) {
    263             setting.bind( function( newValue ) {
    264                 if ( ! newValue ) {
    265                     $( '.custom-logo-link' ).hide();
    266                     $( 'body' ).removeClass( 'wp-custom-logo' );
    267                 }
    268             } );
    269 
    270             // Focus on the control when the logo is clicked, if there is no custom_logo partial.
    271             if ( ! api.selectiveRefresh || ! api.selectiveRefresh.partial.has( 'custom_logo' ) ) {
    272                 $( document.body ).on( 'click', '.custom-logo-link', function( e ) {
    273                     if ( ! e.shiftKey ) {
    274                         return;
    275                     }
    276                     api.preview.send( 'focus-control-for-setting', 'custom_logo' );
    277                 } );
    278                 $( '.custom-logo-link' ).attr( 'title', api.settings.l10n.shiftClickToEdit );
    279             }
    280238        } );
    281239
Note: See TracChangeset for help on using the changeset viewer.