Make WordPress Core

Changeset 26141


Ignore:
Timestamp:
11/13/2013 08:57:29 PM (11 years ago)
Author:
nacin
Message:

Update the Themes screen, merging THX into core.

  • Name: THX38
  • Description: Update the Themes screen with a new design and experience.
  • Tags: visually-focused, bigger-screenshots, fast, mobile-friendly, backbone-driven
  • Author: matveb, shaunandrews, melchoyce, designsimply, shelob9
  • URI: http://wordpress.org/plugins/thx38/

fixes #25948

Location:
trunk
Files:
1 added
4 edited
1 copied

Legend:

Unmodified
Added
Removed
  • trunk/Gruntfile.js

    r26137 r26141  
    103103                    'wp-includes/css/*.css',
    104104                    // Exceptions
     105                    '!wp-admin/css/theme.css', // Temporary file
    105106                    '!wp-admin/css/farbtastic.css'
    106107                ]
  • trunk/src/wp-admin/includes/theme.php

    r25961 r26141  
    346346    return apply_filters( 'themes_api_result', $res, $action, $args );
    347347}
     348
     349/**
     350 * Prepare themes for JavaScript.
     351 *
     352 * @since 3.8.0
     353 *
     354 * @param array $themes Optional. Array of WP_Theme objects to prepare.
     355 *                      Defaults to all allowed themes.
     356 *
     357 * @return array An associative array of theme data.
     358 */
     359function wp_prepare_themes_for_js( $themes = null ) {
     360    if ( null === $themes ) {
     361        $themes = wp_get_themes( array( 'allowed' => true ) );
     362    }
     363
     364    $prepared_themes = array();
     365    $current_theme = get_stylesheet();
     366
     367    $updates = array();
     368    if ( current_user_can( 'update_themes' ) ) {
     369        $updates = get_site_transient( 'update_themes' );
     370        $updates = $updates->response;
     371    }
     372
     373    foreach( $themes as $slug => $theme ) {
     374        $parent = false;
     375        if ( $theme->parent() ) {
     376            $parent = $theme->parent()->display( 'Name' );
     377        }
     378
     379        $encoded_slug = urlencode( $slug );
     380
     381        $prepared_themes[] = array(
     382            'id'           => $slug,
     383            'name'         => $theme->display( 'Name' ),
     384            'screenshot'   => array( $theme->get_screenshot() ), // @todo multiple
     385            'description'  => $theme->display( 'Description' ),
     386            'author'       => $theme->get( 'Author' ),
     387            'authorURI'    => $theme->get( 'AuthorURI' ),
     388            'version'      => $theme->get( 'Version' ),
     389            'tags'         => $theme->get( 'Tags' ),
     390            'parent'       => $parent,
     391            'active'       => $slug === $current_theme,
     392            'hasUpdate'    => isset( $updates[ $slug ] ),
     393            'update'       => 'New version available', // @todo complete this
     394            'actions'      => array(
     395                'activate' => wp_nonce_url( 'themes.php?action=activate&stylesheet=' . $encoded_slug, 'switch-theme_' . $slug ),
     396                'customize'=> admin_url( 'customize.php?theme=' . $encoded_slug ),
     397                'delete'   => wp_nonce_url( 'themes.php?action=delete&stylesheet=' . $encoded_slug, 'delete-theme_' . $slug ),
     398            ),
     399        );
     400    }
     401    // var_dump( $prepared_themes );
     402
     403    return $prepared_themes;
     404}
  • trunk/src/wp-admin/themes.php

    r25679 r26141  
    1212if ( !current_user_can('switch_themes') && !current_user_can('edit_theme_options') )
    1313    wp_die( __( 'Cheatin’ uh?' ) );
    14 
    15 $wp_list_table = _get_list_table('WP_Themes_List_Table');
    16 
    17 $_SERVER['REQUEST_URI'] = remove_query_arg( array( 's', 'features', '_ajax_fetch_list_nonce', '_wp_http_referer', 'paged' ), $_SERVER['REQUEST_URI'] );
    1814
    1915if ( current_user_can( 'switch_themes' ) && isset($_GET['action'] ) ) {
     
    3733}
    3834
    39 $wp_list_table->prepare_items();
    40 
    4135$title = __('Manage Themes');
    4236$parent_file = 'themes.php';
     
    6761}
    6862
    69 add_thickbox();
    70 
    7163endif; // switch_themes
    7264
     
    9183);
    9284
     85if ( current_user_can( 'switch_themes' ) ) {
     86    $themes = wp_prepare_themes_for_js();
     87} else {
     88    $themes = wp_prepare_themes_for_js( array( wp_get_theme() ) );
     89}
     90
     91wp_localize_script( 'theme', '_wpThemeSettings', array(
     92    'themes'   => $themes,
     93    'settings' => array(
     94        'install_uri'   => admin_url( 'theme-install.php' ),
     95        'customizeURI'  => ( current_user_can( 'edit_theme_options' ) ) ? wp_customize_url() : null,
     96        'confirmDelete' => __( "Are you sure you want to delete this theme?\n\nClick 'Cancel' to go back, 'OK' to confirm the delete." ),
     97        'root'          => '/wp-admin/themes.php',
     98        'container'     => '#appearance',
     99        'extraRoutes'   => '',
     100    ),
     101    'i18n' => array(
     102        'add_new'         => __( 'Add New Theme' ),
     103    ),
     104) );
     105
     106wp_enqueue_style( 'theme' );
    93107wp_enqueue_script( 'theme' );
    94108wp_enqueue_script( 'customize-loader' );
     
    97111?>
    98112
    99 <div class="wrap"><?php
    100 screen_icon();
    101 if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
    102 <h2 class="nav-tab-wrapper">
    103 <a href="themes.php" class="nav-tab nav-tab-active"><?php echo esc_html( $title ); ?></a><a href="<?php echo admin_url( 'theme-install.php'); ?>" class="nav-tab"><?php echo esc_html_x('Install Themes', 'theme'); ?></a>
    104 <?php else : ?>
    105 <h2><?php echo esc_html( $title ); ?>
    106 <?php endif; ?>
    107 </h2>
     113<div id="appearance" class="wrap">
     114    <h2><?php esc_html_e( 'Themes' ); ?>
     115        <span id="theme-count" class="theme-count"></span>
     116    <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
     117        <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
     118    <?php endif; ?>
     119    </h2>
     120
    108121<?php
    109122if ( ! validate_current_theme() || isset( $_GET['broken'] ) ) : ?>
     
    121134
    122135$ct = wp_get_theme();
    123 $screenshot = $ct->get_screenshot();
    124 $class = $screenshot ? 'has-screenshot' : '';
    125 
    126 $customize_title = sprintf( __( 'Customize &#8220;%s&#8221;' ), $ct->display('Name') );
    127 
    128 ?>
    129 <div id="current-theme" class="<?php echo esc_attr( $class ); ?>">
    130     <?php if ( $screenshot ) : ?>
    131         <?php if ( current_user_can( 'edit_theme_options' ) ) : ?>
    132         <a href="<?php echo wp_customize_url(); ?>" class="load-customize hide-if-no-customize" title="<?php echo esc_attr( $customize_title ); ?>">
    133             <img src="<?php echo esc_url( $screenshot ); ?>" alt="<?php esc_attr_e( 'Current theme preview' ); ?>" />
    134         </a>
    135         <?php endif; ?>
    136         <img class="hide-if-customize" src="<?php echo esc_url( $screenshot ); ?>" alt="<?php esc_attr_e( 'Current theme preview' ); ?>" />
    137     <?php endif; ?>
    138 
    139     <h3><?php _e('Current Theme'); ?></h3>
    140     <h4>
    141         <?php echo $ct->display('Name'); ?>
    142     </h4>
    143 
    144 <?php
     136
    145137if ( $ct->errors() && ( ! is_multisite() || current_user_can( 'manage_network_themes' ) ) ) {
    146138    echo '<p class="error-message">' . sprintf( __( 'ERROR: %s' ), $ct->errors()->get_error_message() ) . '</p>';
    147139}
    148140
     141/*
    149142// Certain error codes are less fatal than others. We can still display theme information in most cases.
    150143if ( ! $ct->errors() || ( 1 == count( $ct->errors()->get_error_codes() )
    151144    && in_array( $ct->errors()->get_error_code(), array( 'theme_no_parent', 'theme_parent_invalid', 'theme_no_index' ) ) ) ) : ?>
    152 
    153     <div>
    154         <ul class="theme-info">
    155             <li><?php printf( __('By %s'), $ct->display('Author') ); ?></li>
    156             <li><?php printf( __('Version %s'), $ct->display('Version') ); ?></li>
    157         </ul>
    158         <p class="theme-description"><?php echo $ct->display('Description'); ?></p>
    159         <?php if ( $ct->parent() ) {
    160             printf( ' <p class="howto">' . __( 'This <a href="%1$s">child theme</a> requires its parent theme, %2$s.' ) . '</p>',
    161                 __( 'http://codex.wordpress.org/Child_Themes' ),
    162                 $ct->parent()->display( 'Name' ) );
    163         } ?>
    164         <?php theme_update_available( $ct ); ?>
    165     </div>
    166145
    167146    <?php
     
    195174        }
    196175    }
    197 
    198     if ( $options || current_user_can( 'edit_theme_options' ) ) :
    199     ?>
    200     <div class="theme-options">
    201         <?php if ( current_user_can( 'edit_theme_options' ) ) : ?>
    202         <a id="customize-current-theme-link" href="<?php echo wp_customize_url(); ?>" class="load-customize hide-if-no-customize" title="<?php echo esc_attr( $customize_title ); ?>"><?php _e( 'Customize' ); ?></a>
    203         <?php
    204         endif; // edit_theme_options
    205         if ( $options ) :
    206         ?>
    207         <span><?php _e( 'Options:' )?></span>
    208         <ul>
    209             <?php foreach ( $options as $option ) : ?>
    210                 <li><?php echo $option; ?></li>
    211             <?php endforeach; ?>
    212         </ul>
    213         <?php
    214         endif; // options
    215         ?>
    216     </div>
    217     <?php
    218     endif; // options || edit_theme_options
    219     ?>
    220 
    221 <?php endif; // theme errors ?>
    222 
    223 </div>
    224 
    225 <br class="clear" />
    226 <?php
    227 if ( ! current_user_can( 'switch_themes' ) ) {
    228     echo '</div>';
    229     require( ABSPATH . 'wp-admin/admin-footer.php' );
    230     exit;
    231 }
    232 ?>
    233 
    234 <form class="search-form filter-form" action="" method="get">
    235 
    236 <h3 class="available-themes"><?php _e('Available Themes'); ?></h3>
    237 
    238 <?php if ( !empty( $_REQUEST['s'] ) || !empty( $_REQUEST['features'] ) || $wp_list_table->has_items() ) : ?>
    239 
    240 <p class="search-box">
    241     <label class="screen-reader-text" for="theme-search-input"><?php _e('Search Installed Themes'); ?>:</label>
    242     <input type="search" id="theme-search-input" name="s" value="<?php _admin_search_query(); ?>" />
    243     <?php submit_button( __( 'Search Installed Themes' ), 'button', false, false, array( 'id' => 'search-submit' ) ); ?>
    244     <a id="filter-click" href="?filter=1"><?php _e( 'Feature Filter' ); ?></a>
    245 </p>
    246 
    247 <div id="filter-box" style="<?php if ( empty($_REQUEST['filter']) ) echo 'display: none;'; ?>">
    248 <?php $feature_list = get_theme_feature_list(); ?>
    249     <div class="feature-filter">
    250         <p class="install-help"><?php _e('Theme filters') ?></p>
    251     <?php if ( !empty( $_REQUEST['filter'] ) ) : ?>
    252         <input type="hidden" name="filter" value="1" />
    253     <?php endif; ?>
    254     <?php foreach ( $feature_list as $feature_name => $features ) :
    255             $feature_name = esc_html( $feature_name ); ?>
    256 
    257         <div class="feature-container">
    258             <div class="feature-name"><?php echo $feature_name ?></div>
    259 
    260             <ol class="feature-group">
    261                 <?php foreach ( $features as $key => $feature ) :
    262                         $feature_name = $feature;
    263                         $feature_name = esc_html( $feature_name );
    264                         $feature = esc_attr( $feature );
    265                         ?>
    266                 <li>
    267                     <input type="checkbox" name="features[]" id="feature-id-<?php echo $key; ?>" value="<?php echo $key; ?>" <?php checked( in_array( $key, $wp_list_table->features ) ); ?>/>
    268                     <label for="feature-id-<?php echo $key; ?>"><?php echo $feature_name; ?></label>
    269                 </li>
    270                 <?php endforeach; ?>
    271             </ol>
    272         </div>
    273     <?php endforeach; ?>
    274 
    275     <div class="feature-container">
    276         <?php submit_button( __( 'Apply Filters' ), 'button-secondary submitter', false, false, array( 'id' => 'filter-submit' ) ); ?>
    277         &nbsp;
    278         <a id="mini-filter-click" href="<?php echo esc_url( remove_query_arg( array('filter', 'features', 'submit') ) ); ?>"><?php _e( 'Close filters' )?></a>
    279     </div>
    280     <br/>
    281     </div>
    282     <br class="clear"/>
    283 </div>
    284 
    285 <?php endif; ?>
    286 
    287 <br class="clear" />
    288 
    289 <?php $wp_list_table->display(); ?>
    290 
    291 </form>
    292 <br class="clear" />
     176*/
     177?>
    293178
    294179<?php
     
    318203}
    319204?>
    320 </div>
     205</div><!-- .wrap -->
     206
     207<script id="tmpl-theme" type="text/template">
     208    <div class="theme-screenshot">
     209        <img src="{{ data.screenshot[0] }}" alt="" />
     210    </div>
     211    <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.author }}' ); ?></div>
     212    <h3 class="theme-name">{{ data.name }}</h3>
     213    <div class="theme-actions">
     214
     215    <# if ( data.active ) { #>
     216        <span class="current-label"><?php _e( 'Current Theme' ); ?></span>
     217        <# if ( wp.themes.data.settings['customizeURI'] ) { #>
     218            <a class="button button-primary hide-if-no-customize" href="{{ wp.themes.data.settings['customizeURI'] }}"><?php _e( 'Customize' ); ?></a>
     219        <# } #>
     220    <# } else { #>
     221        <a class="button button-primary activate" href="{{{ data.actions['activate'] }}}"><?php _e( 'Activate' ); ?></a>
     222        <a class="button button-secondary preview" href="{{{ data.actions['customize'] }}}"><?php _e( 'Live Preview' ); ?></a>
     223    <# } #>
     224
     225    </div>
     226
     227    <# if ( data.hasUpdate ) { #>
     228        <a class="theme-update"><?php _e( 'Update Available' ); ?></a>
     229    <# } #>
     230
     231    <# if ( ! data.active ) { #>
     232        <a href="{{{ data.actions.delete }}}" class="delete-theme"><?php _e( 'Delete' ); ?></a>
     233    <# } #>
     234</script>
     235
     236<script id="tmpl-theme-search" type="text/template">
     237    <input type="text" name="theme-search" id="theme-search" placeholder="<?php esc_attr_e( 'Search...' ); ?>" />
     238</script>
     239
     240<script id="tmpl-theme-single" type="text/template">
     241    <div class="theme-backdrop"></div>
     242    <div class="theme-wrap">
     243        <div class="theme-utility">
     244            <div alt="<?php _e( 'Close overlay' ); ?>" class="back dashicons dashicons-no"></div>
     245            <div alt="<?php _e( 'Show previous theme' ); ?>" class="left dashicons dashicons-no"></div>
     246            <div alt="<?php _e( 'Show next theme' ); ?>" class="right dashicons dashicons-no"></div>
     247        </div>
     248
     249        <div class="theme-screenshots" id="theme-screenshots">
     250            <div class="screenshot first"><img src="{{ data.screenshot[0] }}" alt="" /></div>
     251        <#
     252            if ( _.size( data.screenshot ) > 1 ) {
     253                _.each ( data.screenshot, function( image ) {
     254        #>
     255                <div class="screenshot thumb"><img src="{{ image }}" alt="" /></div>
     256        <#
     257                });
     258            }
     259        #>
     260        </div>
     261
     262        <div class="theme-info">
     263            <# if ( data.active ) { #>
     264                <span class="current-label"><?php _e( 'Current Theme' ); ?></span>
     265            <# } #>
     266            <h3 class="theme-name">{{ data.name }}<span class="theme-version"><?php _e('Version: '); ?> {{ data.version }}</span></h3>
     267            <h4 class="theme-author"><?php printf( __( 'By %s' ), '<a href="{{ data.authorURI }}">{{ data.author }}</a>' ); ?></h4>
     268
     269            <# if ( data.hasUpdate ) { #>
     270            <div class="theme-update-message">
     271                <a class="theme-update"><?php _e( 'Update Available' ); ?></a>
     272                <p>{{{ data.update }}}</p>
     273            </div>
     274            <# } #>
     275            <p class="theme-description">{{{ data.description }}}</p>
     276
     277            <# if ( data.parent ) { #>
     278                <p class="parent-theme"><?php printf( __( 'This is a child theme of <strong>%s</strong>.' ), '{{ data.parent }}' ); ?></p>
     279            <# } #>
     280
     281            <# if ( data.tags.length !== 0 ) { #>
     282                <p class="theme-tags">
     283                    <span><?php _e( 'Tags:' ); ?></span>
     284                    {{{ data.tags.join( ', ' ).replace( /-/g, ' ' ) }}}
     285                </p>
     286            <# } #>
     287        </div>
     288    </div>
     289
     290    <div class="theme-actions">
     291        <div class="active-theme">
     292            <a href="{{{ wp.themes.data.settings.customizeURI }}}" class="button button-primary hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
     293            <a class="button button-secondary" href="<?php echo admin_url( 'nav-menus.php' ); ?>"><?php _e( 'Menus' ); ?></a>
     294            <a class="button button-secondary" href="<?php echo admin_url( 'widgets.php' ); ?>"><?php _e( 'Widgets' ); ?></a>
     295        </div>
     296        <div class="inactive-theme">
     297            <a href="{{{ data.actions.activate }}}" class="button button-primary"><?php _e( 'Activate' ); ?></a>
     298            <a href="{{{ data.actions.customize }}}" class="button button-secondary"><?php _e( 'Live Preview' ); ?></a>
     299        </div>
     300
     301        <# if ( ! data.active ) { #>
     302            <a href="{{{ data.actions.delete }}}" class="delete-theme"><?php _e( 'Delete' ); ?></a>
     303        <# } #>
     304    </div>
     305</script>
    321306
    322307<?php require( ABSPATH . 'wp-admin/admin-footer.php' ); ?>
  • trunk/src/wp-includes/script-loader.php

    r26128 r26141  
    452452        $scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
    453453
    454         $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'jquery' ), false, 1 );
     454        $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone' ), false, 1 );
     455        $scripts->add( 'theme-install', "/wp-admin/js/theme-install$suffix.js", array( 'jquery' ), false, 1 );
    455456
    456457        // @todo: Core no longer uses theme-preview.js. Remove?
     
    571572    $styles->add( 'colors-fresh', "/wp-admin/css/colors-fresh$suffix.css", array( 'wp-admin', 'buttons' ) );
    572573
     574    $styles->add( 'theme', "/wp-admin/css/theme.css" );
    573575    $styles->add( 'media', "/wp-admin/css/media$suffix.css" );
    574576    $styles->add( 'install', "/wp-admin/css/install$suffix.css", array('buttons') );
Note: See TracChangeset for help on using the changeset viewer.