WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/29/2017 08:12:19 PM (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. Also includes an extensible framework for browsing and installing themes from other sources.

Also includes CSS auto-prefixing added via grunt precommit:css.

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/

Previously [38813] but reverted in [39140].
Fixes #37661, #34843, #38666.
Props celloexpressions, folletto, westonruter, karmatosed, melchoyce, afercia.

File:
1 edited

Legend:

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

    r41605 r41648  
    235235    $features = array(
    236236
    237         __( 'Layout' ) => array(
    238             'grid-layout'   => __( 'Grid Layout' ),
    239             'one-column'    => __( 'One Column' ),
    240             'two-columns'   => __( 'Two Columns' ),
    241             'three-columns' => __( 'Three Columns' ),
    242             'four-columns'  => __( 'Four Columns' ),
    243             'left-sidebar'  => __( 'Left Sidebar' ),
    244             'right-sidebar' => __( 'Right Sidebar' ),
    245         ),
    246 
    247         __( 'Features' ) => array(
    248             'accessibility-ready'   => __( 'Accessibility Ready' ),
    249             'buddypress'            => __( 'BuddyPress' ),
    250             'custom-background'     => __( 'Custom Background' ),
    251             'custom-colors'         => __( 'Custom Colors' ),
    252             'custom-header'         => __( 'Custom Header' ),
    253             'custom-logo'           => __( 'Custom Logo' ),
    254             'custom-menu'           => __( 'Custom Menu' ),
    255             'editor-style'          => __( 'Editor Style' ),
    256             'featured-image-header' => __( 'Featured Image Header' ),
    257             'featured-images'       => __( 'Featured Images' ),
    258             'flexible-header'       => __( 'Flexible Header' ),
    259             'footer-widgets'        => __( 'Footer Widgets' ),
    260             'front-page-post-form'  => __( 'Front Page Posting' ),
    261             'full-width-template'   => __( 'Full Width Template' ),
    262             'microformats'          => __( 'Microformats' ),
    263             'post-formats'          => __( 'Post Formats' ),
    264             'rtl-language-support'  => __( 'RTL Language Support' ),
    265             'sticky-post'           => __( 'Sticky Post' ),
    266             'theme-options'         => __( 'Theme Options' ),
    267             'threaded-comments'     => __( 'Threaded Comments' ),
    268             'translation-ready'     => __( 'Translation Ready' ),
    269         ),
    270 
    271237        __( 'Subject' )  => array(
    272238            'blog'           => __( 'Blog' ),
     
    279245            'photography'    => __( 'Photography' ),
    280246            'portfolio'      => __( 'Portfolio' ),
     247        ),
     248
     249        __( 'Features' ) => array(
     250            'accessibility-ready'   => __( 'Accessibility Ready' ),
     251            'custom-background'     => __( 'Custom Background' ),
     252            'custom-colors'         => __( 'Custom Colors' ),
     253            'custom-header'         => __( 'Custom Header' ),
     254            'custom-logo'           => __( 'Custom Logo' ),
     255            'editor-style'          => __( 'Editor Style' ),
     256            'featured-image-header' => __( 'Featured Image Header' ),
     257            'featured-images'       => __( 'Featured Images' ),
     258            'footer-widgets'        => __( 'Footer Widgets' ),
     259            'full-width-template'   => __( 'Full Width Template' ),
     260            'post-formats'          => __( 'Post Formats' ),
     261            'sticky-post'           => __( 'Sticky Post' ),
     262            'theme-options'         => __( 'Theme Options' ),
     263        ),
     264
     265        __( 'Layout' ) => array(
     266            'grid-layout'   => __( 'Grid Layout' ),
     267            'one-column'    => __( 'One Column' ),
     268            'two-columns'   => __( 'Two Columns' ),
     269            'three-columns' => __( 'Three Columns' ),
     270            'four-columns'  => __( 'Four Columns' ),
     271            'left-sidebar'  => __( 'Left Sidebar' ),
     272            'right-sidebar' => __( 'Right Sidebar' ),
    281273        )
     274
    282275    );
    283276
     
    575568        $parent = false;
    576569        if ( $theme->parent() ) {
    577             $parent = $theme->parent()->display( 'Name' );
    578             $parents[ $slug ] = $theme->parent()->get_stylesheet();
     570            $parent = $theme->parent();
     571            $parents[ $slug ] = $parent->get_stylesheet();
     572            $parent = $parent->display( 'Name' );
    579573        }
    580574
     
    636630 */
    637631function customize_themes_print_templates() {
    638     $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
    639     $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
    640632    ?>
    641633    <script type="text/html" id="tmpl-customize-themes-details-view">
     
    649641            <div class="theme-about wp-clearfix">
    650642                <div class="theme-screenshots">
    651                 <# if ( data.screenshot[0] ) { #>
     643                <# if ( data.screenshot && data.screenshot[0] ) { #>
    652644                    <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
    653645                <# } else { #>
     
    662654                    <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
    663655                    <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
    664                     <p class="theme-description">{{{ data.description }}}</p>
     656
     657                    <# if ( data.stars && 0 != data.num_ratings ) { #>
     658                        <div class="theme-rating">
     659                            {{{ data.stars }}}
     660                            <span class="num-ratings">
     661                                <?php
     662                                /* translators: %s is the number of ratings */
     663                                echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' );
     664                                ?>
     665                            </span>
     666                        </div>
     667                    <# } #>
     668
     669                    <# if ( data.hasUpdate ) { #>
     670                        <div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
     671                            <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
     672                            {{{ data.update }}}
     673                        </div>
     674                    <# } #>
    665675
    666676                    <# if ( data.parent ) { #>
     
    668678                    <# } #>
    669679
     680                    <p class="theme-description">{{{ data.description }}}</p>
     681
    670682                    <# if ( data.tags ) { #>
    671                         <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
     683                        <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
    672684                    <# } #>
    673685                </div>
    674686            </div>
    675687
    676             <# if ( ! data.active ) { #>
    677                 <div class="theme-actions">
    678                     <div class="inactive-theme">
    679                         <?php
    680                         /* translators: %s: Theme name */
    681                         $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
    682                         ?>
    683                         <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>
    684                     </div>
    685                 </div>
    686             <# } #>
     688            <div class="theme-actions">
     689                <# if ( data.active ) { #>
     690                    <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
     691                <# } else if ( 'installed' === data.type ) { #>
     692                    <?php if ( current_user_can( 'delete_themes' ) ) { ?>
     693                        <# if ( data.actions && data.actions['delete'] ) { #>
     694                            <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
     695                        <# } #>
     696                    <?php } ?>
     697                    <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></span>
     698                <# } else { #>
     699                    <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
     700                    <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}"><?php _e( 'Install &amp; Preview' ); ?></button>
     701                <# } #>
     702            </div>
    687703        </div>
    688704    </script>
Note: See TracChangeset for help on using the changeset viewer.