WordPress.org

Make WordPress Core


Ignore:
Timestamp:
10/19/2016 03:19:13 AM (3 years ago)
Author:
westonruter
Message:

Customize: Introduce a new experience for discovering, installing, and previewing themes within the customizer.

Unify the theme-browsing and theme-customization experiences by introducing a comprehensive theme browser and installer directly accessible in the customizer. Replaces the customizer theme switcher with a full-screen panel for discovering/browsing and installing themes available on WordPress.org. Themes can now be installed and previewed directly in the customizer without entering the wp-admin context.

For details, see https://make.wordpress.org/core/2016/10/03/feature-proposal-a-new-experience-for-discovering-installing-and-previewing-themes-in-the-customizer/

Fixes #37661, #34843.
Props celloexpressions, folletto, westonruter, karmatosed, afercia.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/includes/theme.php

    r38788 r38813  
    608608 */
    609609function customize_themes_print_templates() {
    610     $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
    611     $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
    612610    ?>
    613611    <script type="text/html" id="tmpl-customize-themes-details-view">
     
    621619            <div class="theme-about wp-clearfix">
    622620                <div class="theme-screenshots">
    623                 <# if ( data.screenshot[0] ) { #>
     621                <# if ( data.screenshot && data.screenshot[0] ) { #>
    624622                    <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
    625623                <# } else { #>
     
    634632                    <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
    635633                    <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
     634
     635                    <# if ( data.stars && 0 != data.num_ratings ) { #>
     636                        <div class="theme-rating">
     637                            {{{ data.stars }}}
     638                            <span class="num-ratings"><?php echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' ); ?></span>
     639                        </div>
     640                    <# } #>
     641
     642                    <# if ( data.hasUpdate ) { #>
     643                        <div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
     644                            <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
     645                            {{{ data.update }}}
     646                        </div>
     647                    <# } #>
     648
    636649                    <p class="theme-description">{{{ data.description }}}</p>
    637650
     
    639652                        <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
    640653                    <# } #>
    641 
    642654                    <# if ( data.tags ) { #>
    643                         <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
     655                        <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
    644656                    <# } #>
    645657                </div>
    646658            </div>
    647659
    648             <# if ( ! data.active ) { #>
    649                 <div class="theme-actions">
    650                     <div class="inactive-theme">
    651                         <?php
    652                         /* translators: %s: Theme name */
    653                         $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
    654                         ?>
    655                         <a href="<?php echo $preview_url; ?>" target="_top" class="button button-primary" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Live Preview' ); ?></a>
    656                     </div>
    657                 </div>
    658             <# } #>
     660            <div class="theme-actions">
     661                <# if ( data.active ) { #>
     662                    <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
     663                <# } else if ( 'installed' === data.type ) { #>
     664                    <?php if ( current_user_can( 'delete_themes' ) ) { ?>
     665                        <# if ( data.actions && data.actions['delete'] ) { #>
     666                            <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
     667                        <# } #>
     668                    <?php } ?>
     669                    <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></span>
     670                <# } else { #>
     671                    <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
     672                    <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}"><?php _e( 'Install & Preview' ); ?></button>
     673                <# } #>
     674            </div>
    659675        </div>
    660676    </script>
Note: See TracChangeset for help on using the changeset viewer.