WordPress.org
Get WordPress

Make WordPress Core

Changeset 26726


Ignore:
Timestamp:
12/06/2013 04:10:25 PM (11 years ago)
Author:
nacin
Message:

No-JavaScript and no-Customizer support for the new Themes screen.

JavaScript is rarely disabled, but graceful degradation is still important. For example, syntax errors can occur, usually with major WP updates that overhaul entire experiences and update external libraries combined with themes or plugins doing weird or old things. If this error is due to their current theme, a user needs to be able to access the themes screen to switch away from the theme. A more subtle issue could make things painful to diagnose.

This commit renders the grid in PHP (the template is duplicated, but it lightweight, fairly mundane, and easy to sync). On Backbone render, the grid is then re-rendered from JavaScript so searches can occur. Customize and Live Preview is disabled if JS fails to kick in. If JS is disabled, old-school "Preview" links are displayed.

No-Customizer support: The customizer is only supported when the browser supports postMessage (IE8+), and if the frontend is a different domain, CORS (IE10+). We use the .hide-if-no-customize class for this. Pre-customize "Preview" links should use .hide-if-customize.

The .load-customize class should be used to declare a link that opens the customizer. This enables customize-loader.js to intercept this link and load the customizer on top of the current window, making for a smoother experience.

fixes #25964.

Location:
trunk/src/wp-admin
Files:
6 edited

Legend:

Unmodified
Added
Removed

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

    r26725 r26726  
    64556455}
    64566456
    6457 .theme-browser .theme:hover .theme-screenshot img {
     6457.theme-browser.rendered .theme:hover .theme-screenshot img {
    64586458    opacity: 0.4;
    64596459}
    … …  
    64786478}
    64796479
    6480 .theme-browser .theme:hover .more-details {
     6480.theme-browser.rendered .theme:hover .more-details {
    64816481    opacity: 1;
    64826482}

  • trunk/src/wp-admin/includes/theme.php

    r26711 r26726  
    379379 */
    380380function wp_prepare_themes_for_js( $themes = null ) {
    381     $prepared_themes = array();
    382381    $current_theme = get_stylesheet();
     382
     383    // Make sure the current theme is listed first.
     384    $prepared_themes = array( $current_theme => array() );
    383385
    384386    if ( null === $themes ) {
    … …  
    407409        $encoded_slug = urlencode( $slug );
    408410
    409         $prepared_themes[] = array(
     411        $prepared_themes[ $slug ] = array(
    410412            'id'           => $slug,
    411413            'name'         => $theme->display( 'Name' ),
    … …  
    423425                'activate' => current_user_can( 'switch_themes' ) ? wp_nonce_url( admin_url( 'themes.php?action=activate&stylesheet=' . $encoded_slug ), 'switch-theme_' . $slug ) : null,
    424426                'customize'=> current_user_can( 'edit_theme_options' ) ? wp_customize_url( $slug ) : null,
     427                'preview'   => add_query_arg( array(
     428                    'preview'        => 1,
     429                    'template'       => urlencode( $theme->get_template() ),
     430                    'stylesheet'     => urlencode( $slug ),
     431                    'preview_iframe' => true,
     432                    'TB_iframe'      => true,
     433                ), home_url( '/' ) ),
    425434                'delete'   => current_user_can( 'delete_themes' ) ? wp_nonce_url( admin_url( 'themes.php?action=delete&stylesheet=' . $encoded_slug ), 'delete-theme_' . $slug ) : null,
    426435            ),
    … …  
    437446     * @param array $prepared_themes Array of themes.
    438447     */
    439     return apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
    440 }
     448    $prepared_themes = apply_filters( 'wp_prepare_themes_for_js', $prepared_themes );
     449    return array_values( $prepared_themes );
     450}

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

    r26686 r26726  
    5252        // Render and append
    5353        this.view.render();
    54         this.$el.append( this.view.el );
     54        this.$el.empty().append( this.view.el ).addClass('rendered');
    5555        this.$el.append( '<br class="clear"/>' );
    5656    },

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

    r26518 r26726  
    219219$parent_file = 'themes.php';
    220220
    221 wp_enqueue_script( 'theme' );
     221wp_enqueue_script( 'theme-preview' );
    222222
    223223require_once(ABSPATH . 'wp-admin/admin-header.php');

  • trunk/src/wp-admin/theme-install.php

    r26518 r26726  
    3131
    3232wp_enqueue_script( 'theme-install' );
    33 wp_enqueue_script( 'theme' );
     33wp_enqueue_script( 'theme-preview' );
    3434
    3535$body_id = $tab;

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

    r26725 r26726  
    117117<div class="wrap">
    118118    <h2><?php esc_html_e( 'Themes' ); ?>
    119         <span class="theme-count"></span>
     119        <span class="theme-count"><?php echo count( $themes ); ?></span>
    120120    <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
    121121        <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
    … …  
    180180?>
    181181
    182 <div class="theme-browser"></div>
     182<div class="theme-browser">
     183    <div class="themes">
     184
     185<?php
     186/*
     187 * This PHP is synchronized with the tmpl-theme template below!
     188 */
     189
     190foreach ( $themes as $theme ) : ?>
     191<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>">
     192    <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
     193        <div class="theme-screenshot">
     194            <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
     195        </div>
     196    <?php } else { ?>
     197        <div class="theme-screenshot blank"></div>
     198    <?php } ?>
     199    <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
     200    <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
     201
     202    <?php if ( $theme['active'] ) { ?>
     203        <h3 class="theme-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
     204    <?php } else { ?>
     205        <h3 class="theme-name"><?php echo $theme['name']; ?></h3>
     206    <?php } ?>
     207
     208    <div class="theme-actions">
     209
     210    <?php if ( $theme['active'] ) { ?>
     211        <?php if ( $theme['actions']['customize'] ) { ?>
     212            <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
     213        <?php } ?>
     214    <?php } else { ?>
     215        <a class="button button-primary activate" href="<?php echo $theme['actions']['activate']; ?>"><?php _e( 'Activate' ); ?></a>
     216        <a class="button button-secondary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
     217        <a class="button button-secondary hide-if-customize" href="<?php echo $theme['actions']['preview']; ?>"><?php _e( 'Preview' ); ?></a>
     218    <?php } ?>
     219
     220    </div>
     221
     222    <?php if ( $theme['hasUpdate'] ) { ?>
     223        <div class="theme-update"><?php _e( 'Update Available' ); ?></div>
     224    <?php } ?>
     225</div>
     226<?php endforeach; ?>
     227    <br class="clear" />
     228    </div>
     229</div>
    183230
    184231<?php
    … …  
    213260</div><!-- .wrap -->
    214261
     262<?php
     263/*
     264 * The tmpl-theme template is synchronized with PHP above!
     265 */
     266?>
    215267<script id="tmpl-theme" type="text/template">
    216268    <# if ( data.screenshot[0] ) { #>
    … …  
    234286    <# if ( data.active ) { #>
    235287        <# if ( data.actions.customize ) { #>
    236             <a class="button button-primary hide-if-no-customize" href="{{ data.actions.customize }}"><?php _e( 'Customize' ); ?></a>
     288            <a class="button button-primary customize load-customize hide-if-no-customize" href="{{ data.actions.customize }}"><?php _e( 'Customize' ); ?></a>
    237289        <# } #>
    238290    <# } else { #>
    239291        <a class="button button-primary activate" href="{{{ data.actions.activate }}}"><?php _e( 'Activate' ); ?></a>
    240         <a class="button button-secondary preview" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
     292        <a class="button button-secondary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
     293        <a class="button button-secondary hide-if-customize" href="{{{ data.actions.preview }}}"><?php _e( 'Preview' ); ?></a>
    241294    <# } #>
    242295
    … …  
    297350        <div class="theme-actions">
    298351            <div class="active-theme">
    299                 <a href="{{{ data.actions.customize }}}" class="button button-primary hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
     352                <a href="{{{ data.actions.customize }}}" class="button button-primary customize load-customize hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
    300353                <?php echo implode( ' ', $current_theme_actions ); ?>
    301354            </div>
    302355            <div class="inactive-theme">
    303356                <# if ( data.actions.activate ) { #>
    304                     <a href="{{{ data.actions.activate }}}" class="button button-primary"><?php _e( 'Activate' ); ?></a>
    305                 <# } #>
    306                 <a href="{{{ data.actions.customize }}}" class="button button-secondary"><?php _e( 'Live Preview' ); ?></a>
     357                    <a href="{{{ data.actions.activate }}}" class="button button-primary activate"><?php _e( 'Activate' ); ?></a>
     358                <# } #>
     359                <a href="{{{ data.actions.customize }}}" class="button button-secondary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
     360                <a href="{{{ data.actions.preview }}}" class="button button-secondary hide-if-customize"><?php _e( 'Preview' ); ?></a>
    307361            </div>
    308362
Note: See TracChangeset for help on using the changeset viewer.