WordPress.org
Get WordPress

Make WordPress Core

Changeset 41797


Ignore:
Timestamp:
10/09/2017 04:03:35 PM (7 years ago)
Author:
westonruter
Message:

Customize: Eliminate use of customize-loader in core so Customizer is opened consistently in top window.

  • Open the door for future browser history feature in #28536, which is currently not feasible when customize-loader is used.
  • Remove customizer-loader from being used on admin screens for Dashboard, Themes, non-shiny theme install/update.
  • Keep the customize-loader functionality available for plugins, for the time being. It may become deprecated.
  • Ensure return param in customizer links in Themes screen update to reflect search updated by pushState.
  • Persist return when reloading Customizer due to theme switch, autosave restoration, or changeset trashing.
  • Use location.replace() instead of changing location.href when trashing.
  • Hide theme browser while Themes screen is loading when there is a search to prevent flash of unfiltered themes.
  • Use throttling instead of debouncing when searching themes to ensure that screen is updated immediately on page load.
  • Fix encoding and decoding of search param between URL and search field.
  • Add support for dismissing autosaves when closing customize-loader, when it is used by plugins.
  • Skip sending changeset UUID to customize-loader for population in browser location if changeset branching is not enabled.

See #28536.
Fixes #40254.

Location:
trunk/src
Files:
11 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-admin/css/themes.css

    r41667 r41797  
    77  16.1 - Manage Themes
    88------------------------------------------------------------------------------*/
     9
     10body.js .theme-browser.search-loading {
     11    display: none;
     12}
    913
    1014.theme-browser .themes {

  • trunk/src/wp-admin/includes/class-theme-installer-skin.php

    r41161 r41797  
    6565
    6666        if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
    67             $install_actions['preview'] = '<a href="' . wp_customize_url( $stylesheet ) . '" class="hide-if-no-customize load-customize"><span aria-hidden="true">' . __( 'Live Preview' ) . '</span><span class="screen-reader-text">' . sprintf( __( 'Live Preview &#8220;%s&#8221;' ), $name ) . '</span></a>';
     67            $customize_url = add_query_arg(
     68                array(
     69                    'theme' => urlencode( $stylesheet ),
     70                    'return' => urlencode( admin_url( 'web' === $this->type ? 'theme-install.php' : 'themes.php' ) ),
     71                ),
     72                admin_url( 'customize.php' )
     73            );
     74            $install_actions['preview'] = '<a href="' . esc_url( $customize_url ) . '" class="hide-if-no-customize load-customize"><span aria-hidden="true">' . __( 'Live Preview' ) . '</span><span class="screen-reader-text">' . sprintf( __( 'Live Preview &#8220;%s&#8221;' ), $name ) . '</span></a>';
    6875        }
    6976        $install_actions['activate'] = '<a href="' . esc_url( $activate_link ) . '" class="activatelink"><span aria-hidden="true">' . __( 'Activate' ) . '</span><span class="screen-reader-text">' . sprintf( __( 'Activate &#8220;%s&#8221;' ), $name ) . '</span></a>';

  • trunk/src/wp-admin/includes/class-theme-upgrader-skin.php

    r41161 r41797  
    5050            $activate_link = wp_nonce_url( $activate_link, 'switch-theme_' . $stylesheet );
    5151
     52            $customize_url = add_query_arg(
     53                array(
     54                    'theme' => urlencode( $stylesheet ),
     55                    'return' => urlencode( admin_url( 'themes.php' ) ),
     56                ),
     57                admin_url( 'customize.php' )
     58            );
    5259            if ( get_stylesheet() == $stylesheet ) {
    5360                if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
    54                     $update_actions['preview']  = '<a href="' . wp_customize_url( $stylesheet ) . '" class="hide-if-no-customize load-customize"><span aria-hidden="true">' . __( 'Customize' ) . '</span><span class="screen-reader-text">' . sprintf( __( 'Customize &#8220;%s&#8221;' ), $name ) . '</span></a>';
     61                    $update_actions['preview']  = '<a href="' . esc_url( $customize_url ) . '" class="hide-if-no-customize load-customize"><span aria-hidden="true">' . __( 'Customize' ) . '</span><span class="screen-reader-text">' . sprintf( __( 'Customize &#8220;%s&#8221;' ), $name ) . '</span></a>';
    5562                }
    5663            } elseif ( current_user_can( 'switch_themes' ) ) {
    5764                if ( current_user_can( 'edit_theme_options' ) && current_user_can( 'customize' ) ) {
    58                     $update_actions['preview'] = '<a href="' . wp_customize_url( $stylesheet ) . '" class="hide-if-no-customize load-customize"><span aria-hidden="true">' . __( 'Live Preview' ) . '</span><span class="screen-reader-text">' . sprintf( __( 'Live Preview &#8220;%s&#8221;' ), $name ) . '</span></a>';
     65                    $update_actions['preview'] = '<a href="' . esc_url( $customize_url ) . '" class="hide-if-no-customize load-customize"><span aria-hidden="true">' . __( 'Live Preview' ) . '</span><span class="screen-reader-text">' . sprintf( __( 'Live Preview &#8220;%s&#8221;' ), $name ) . '</span></a>';
    5966                }
    6067                $update_actions['activate'] = '<a href="' . esc_url( $activate_link ) . '" class="activatelink"><span aria-hidden="true">' . __( 'Activate' ) . '</span><span class="screen-reader-text">' . sprintf( __( 'Activate &#8220;%s&#8221;' ), $name ) . '</span></a>';

  • trunk/src/wp-admin/index.php

    r40776 r41797  
    1717wp_enqueue_script( 'dashboard' );
    1818
    19 if ( current_user_can( 'edit_theme_options' ) )
    20     wp_enqueue_script( 'customize-loader' );
    2119if ( current_user_can( 'install_plugins' ) ) {
    2220    wp_enqueue_script( 'plugin-install' );

  • trunk/src/wp-admin/js/customize-controls.js

    r41788 r41797  
    107107         * @since 4.9.0
    108108         *
    109          * @param {string|wp.customize.Notification} - Notification object to add. Alternatively code may be supplied, and in that case the second notificationObject argument must be supplied.
     109         * @param {string|wp.customize.Notification} notification - Notification object to add. Alternatively code may be supplied, and in that case the second notificationObject argument must be supplied.
    110110         * @param {wp.customize.Notification} [notificationObject] - Notification to add when first argument is the code string.
    111111         * @returns {wp.customize.Notification} Added notification (or existing instance if it was already added).
    … …  
    30153015                {
    30163016                    theme: themeId,
    3017                     changeset_uuid: api.settings.changeset.uuid
     3017                    changeset_uuid: api.settings.changeset.uuid,
     3018                    'return': api.settings.url['return']
    30183019                }
    30193020            );
    … …  
    30453046                    deferred.resolve();
    30463047                    $( window ).off( 'beforeunload.customize-confirm' );
    3047                     window.location.href = urlParser.href; // @todo Use location.replace()?
     3048                    location.replace( urlParser.href );
    30483049                } );
    30493050                request.fail( function() {
    … …  
    69596960                            api.settings.changeset.uuid = response.next_changeset_uuid;
    69606961                            api.state( 'changesetStatus' ).set( '' );
    6961                             parent.send( 'changeset-uuid', api.settings.changeset.uuid );
     6962                            if ( api.settings.changeset.branching ) {
     6963                                parent.send( 'changeset-uuid', api.settings.changeset.uuid );
     6964                            }
    69626965                            api.previewer.send( 'changeset-uuid', api.settings.changeset.uuid );
    69636966                        }
    … …  
    69906993                            api.state( 'changesetStatus' ).set( '' );
    69916994                            api.settings.changeset.uuid = response.next_changeset_uuid;
    6992                             parent.send( 'changeset-uuid', api.settings.changeset.uuid );
     6995                            if ( api.settings.changeset.branching ) {
     6996                                parent.send( 'changeset-uuid', api.settings.changeset.uuid );
     6997                            }
    69936998                        }
    69946999
    … …  
    70667071                    queryParams = api.utils.parseQueryString( urlParser.search.substr( 1 ) );
    70677072                    delete queryParams.changeset_uuid;
     7073                    queryParams['return'] = api.settings.url['return'];
    70687074                    urlParser.search = $.param( queryParams );
    70697075                    location.replace( urlParser.href );
    … …  
    74197425                    queryParams.customize_autosaved = 'on';
    74207426                }
     7427                queryParams['return'] = api.settings.url['return'];
    74217428                urlParser.search = $.param( queryParams );
    74227429                return urlParser.href;
    … …  
    79167923            api.bind( 'change', startPromptingBeforeUnload );
    79177924
    7918             closeBtn.on( 'click.customize-controls-close', function( event ) {
     7925            function requestClose() {
    79197926                var clearedToClose = $.Deferred();
    7920                 event.preventDefault();
    7921 
    7922                 /*
    7923                  * The isInsideIframe condition is because Customizer is not able to use a confirm()
    7924                  * since customize-loader.js will also use one. So autosave restorations are disabled
    7925                  * when customize-loader.js is used.
    7926                  */
    7927                 if ( isInsideIframe || isCleanState() ) {
     7927                if ( isCleanState() ) {
    79287928                    clearedToClose.resolve();
    79297929                } else if ( confirm( api.l10n.saveAlert ) ) {
    … …  
    79557955                    clearedToClose.reject();
    79567956                }
    7957 
    7958                 clearedToClose.done( function() {
    7959                     $( window ).off( 'beforeunload.customize-confirm' );
    7960                     if ( isInsideIframe ) {
    7961                         parent.send( 'close' );
    7962                     } else {
     7957                return clearedToClose.promise();
     7958            }
     7959
     7960            parent.bind( 'confirm-close', function() {
     7961                requestClose().done( function() {
     7962                    parent.send( 'confirmed-close', true );
     7963                } ).fail( function() {
     7964                    parent.send( 'confirmed-close', false );
     7965                } );
     7966            } );
     7967
     7968            closeBtn.on( 'click.customize-controls-close', function( event ) {
     7969                event.preventDefault();
     7970                if ( isInsideIframe ) {
     7971                    parent.send( 'close' ); // See confirm-close logic above.
     7972                } else {
     7973                    requestClose().done( function() {
     7974                        $( window ).off( 'beforeunload.customize-confirm' );
    79637975                        window.location.href = closeBtn.prop( 'href' );
    7964                     }
    7965                 } );
     7976                    } );
     7977                }
    79667978            });
    79677979        })();
    … …  
    79797991        });
    79807992
    7981         parent.send( 'changeset-uuid', api.settings.changeset.uuid );
     7993        if ( api.settings.changeset.branching ) {
     7994            parent.send( 'changeset-uuid', api.settings.changeset.uuid );
     7995        }
    79827996
    79837997        // Initialize the connection with the parent frame.

  • trunk/src/wp-admin/js/theme.js

    r41683 r41797  
    7777        // Render search form.
    7878        this.search();
     79
     80        this.$el.removeClass( 'search-loading' );
    7981
    8082        // Render and append
    … …  
    13461348        }
    13471349
    1348         /**
    1349          * Since doSearch is debounced, it will only run when user input comes to a rest
    1350          */
     1350        // Note that doSearch is throttled.
    13511351        this.doSearch( event );
    13521352    },
    13531353
    13541354    // Runs a search on the theme collection.
    1355     doSearch: _.debounce( function( event ) {
     1355    doSearch: _.throttle( function( event ) {
    13561356        var options = {};
    13571357
    1358         this.collection.doSearch( event.target.value );
     1358        this.collection.doSearch( event.target.value.replace( /\+/g, ' ' ) );
    13591359
    13601360        // if search is initiated and key is not return
    … …  
    13771377
    13781378        if ( event.target.value ) {
    1379             url = themes.router.baseUrl( themes.router.searchPath + event.target.value );
     1379            url = themes.router.baseUrl( themes.router.searchPath + encodeURIComponent( event.target.value ) );
    13801380        }
    13811381
    … …  
    13851385    }
    13861386});
     1387
     1388/**
     1389 * Navigate router.
     1390 *
     1391 * @since 4.9.0
     1392 *
     1393 * @param {string} url - URL to navigate to.
     1394 * @param {object} state - State.
     1395 * @returns {void}
     1396 */
     1397function navigateRouter( url, state ) {
     1398    var router = this;
     1399    if ( Backbone.history._hasPushState ) {
     1400        Backbone.Router.prototype.navigate.call( router, url, state );
     1401    }
     1402}
    13871403
    13881404// Sets up the routes events for relevant url queries
    … …  
    14061422
    14071423    search: function( query ) {
    1408         $( '.wp-filter-search' ).val( query );
     1424        $( '.wp-filter-search' ).val( query.replace( /\+/g, ' ' ) );
    14091425    },
    14101426
    … …  
    14131429    },
    14141430
    1415     navigate: function() {
    1416         if ( Backbone.history._hasPushState ) {
    1417             Backbone.Router.prototype.navigate.apply( this, arguments );
    1418         }
    1419     }
     1431    navigate: navigateRouter
    14201432
    14211433});
    … …  
    15091521    },
    15101522
    1511     doSearch: _.debounce( function( value ) {
     1523    doSearch: _.throttle( function( value ) {
    15121524        var request = {};
    15131525
    … …  
    15521564
    15531565        // Set route
    1554         themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + value ), { replace: true } );
     1566        themes.router.navigate( themes.router.baseUrl( themes.router.searchPath + encodeURIComponent( value ) ), { replace: true } );
    15551567    }, 500 )
    15561568});
    … …  
    18881900
    18891901    search: function( query ) {
    1890         $( '.wp-filter-search' ).val( query );
    1891     },
    1892 
    1893     navigate: function() {
    1894         if ( Backbone.history._hasPushState ) {
    1895             Backbone.Router.prototype.navigate.apply( this, arguments );
    1896         }
    1897     }
     1902        $( '.wp-filter-search' ).val( query.replace( /\+/g, ' ' ) );
     1903    },
     1904
     1905    navigate: navigateRouter
    18981906});
    18991907
    … …  
    20032011        themes.Run.init();
    20042012    }
     2013
     2014    // Update the return param just in time.
     2015    $( document.body ).on( 'click', '.load-customize', function() {
     2016        var link = $( this ), urlParser = document.createElement( 'a' );
     2017        urlParser.href = link.prop( 'href' );
     2018        urlParser.search = $.param( _.extend(
     2019            wp.customize.utils.parseQueryString( urlParser.search.substr( 1 ) ),
     2020            {
     2021                'return': window.location.href
     2022            }
     2023        ) );
     2024        link.prop( 'href', urlParser.href );
     2025    });
    20052026
    20062027    $( '.broken-themes .delete-theme' ).on( 'click', function() {

  • trunk/src/wp-admin/themes.php

    r41658 r41797  
    147147wp_enqueue_script( 'theme' );
    148148wp_enqueue_script( 'updates' );
    149 wp_enqueue_script( 'customize-loader' );
    150149
    151150require_once( ABSPATH . 'wp-admin/admin-header.php' );
    … …  
    154153<div class="wrap">
    155154    <h1 class="wp-heading-inline"><?php esc_html_e( 'Themes' ); ?>
    156         <span class="title-count theme-count"><?php echo count( $themes ); ?></span>
     155        <span class="title-count theme-count"><?php echo ! empty( $_GET['search'] ) ? __( '&hellip;' ) : count( $themes ); ?></span>
    157156    </h1>
    158157
    … …  
    235234?>
    236235
    237 <div class="theme-browser">
     236<?php
     237$class_name = 'theme-browser';
     238if ( ! empty( $_GET['search'] ) ) {
     239    $class_name .= ' search-loading';
     240}
     241?>
     242<div class="<?php echo esc_attr( $class_name ); ?>">
    238243    <div class="themes wp-clearfix">
    239244

  • trunk/src/wp-admin/update.php

    r41289 r41797  
    174174        check_admin_referer('upgrade-theme_' . $theme);
    175175
    176         wp_enqueue_script( 'customize-loader' );
    177176        wp_enqueue_script( 'updates' );
    178177
    … …  
    224223        $api = themes_api('theme_information', array('slug' => $theme, 'fields' => array('sections' => false, 'tags' => false) ) ); //Save on a bit of bandwidth.
    225224
    226         if ( is_wp_error($api) )
    227             wp_die($api);
    228 
    229         wp_enqueue_script( 'customize-loader' );
     225        if ( is_wp_error( $api ) ) {
     226            wp_die( $api );
     227        }
    230228
    231229        $title = __('Install Themes');
    … …  
    253251
    254252        $file_upload = new File_Upload_Upgrader('themezip', 'package');
    255 
    256         wp_enqueue_script( 'customize-loader' );
    257253
    258254        $title = __('Upload Theme');

  • trunk/src/wp-includes/class-wp-customize-manager.php

    r41793 r41797  
    42374237            'url'      => array(
    42384238                'preview'       => esc_url_raw( $this->get_preview_url() ),
     4239                'return'        => esc_url_raw( $this->get_return_url() ),
    42394240                'parent'        => esc_url_raw( admin_url() ),
    42404241                'activated'     => esc_url_raw( home_url( '/' ) ),

  • trunk/src/wp-includes/js/customize-loader.js

    r41351 r41797  
    1 /* global _wpCustomizeLoaderSettings, confirm */
     1/* global _wpCustomizeLoaderSettings */
    22/**
    33 * Expose a public API that allows the customizer to be
    … …  
    209209         */
    210210        close: function() {
    211             if ( ! this.active ) {
     211            var self = this, onConfirmClose;
     212            if ( ! self.active ) {
    212213                return;
    213214            }
    214215
    215             // Display AYS dialog if Customizer is dirty
    216             if ( ! this.saved() && ! confirm( Loader.settings.l10n.saveAlert ) ) {
    217                 // Go forward since Customizer is exited by history.back()
    218                 history.forward();
    219                 return;
    220             }
    221 
    222             this.active = false;
    223 
    224             this.trigger( 'close' );
    225 
    226             // Restore document title prior to opening the Live Preview
    227             if ( this.originalDocumentTitle ) {
    228                 document.title = this.originalDocumentTitle;
    229             }
     216            onConfirmClose = function( confirmed ) {
     217                if ( confirmed ) {
     218                    self.active = false;
     219                    self.trigger( 'close' );
     220
     221                    // Restore document title prior to opening the Live Preview
     222                    if ( self.originalDocumentTitle ) {
     223                        document.title = self.originalDocumentTitle;
     224                    }
     225                } else {
     226
     227                    // Go forward since Customizer is exited by history.back()
     228                    history.forward();
     229                }
     230                self.messenger.unbind( 'confirmed-close', onConfirmClose );
     231            };
     232            self.messenger.bind( 'confirmed-close', onConfirmClose );
     233
     234            Loader.messenger.send( 'confirm-close' );
    230235        },
    231236

  • trunk/src/wp-includes/script-loader.php

    r41791 r41797  
    726726        $scripts->add( 'custom-html-widgets', "/wp-admin/js/widgets/custom-html-widgets$suffix.js", array( 'code-editor', 'jquery', 'backbone', 'wp-util', 'jquery-ui-core', 'wp-a11y' ) );
    727727
    728         $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y' ), false, 1 );
     728        $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y', 'customize-base' ), false, 1 );
    729729
    730730        $scripts->add( 'inline-edit-post', "/wp-admin/js/inline-edit-post$suffix.js", array( 'jquery', 'tags-suggest', 'wp-a11y' ), false, 1 );
Note: See TracChangeset for help on using the changeset viewer.