Changeset 38813 for trunk/src/wp-admin/includes/theme.php

Timestamp:

10/19/2016 03:19:13 AM (8 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:

• trunk/src/wp-admin/includes/theme.php (modified) (4 diffs)

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

@@ -608 +608 @@
  */
 function customize_themes_print_templates() {
-    $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
-    $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
     ?>
     <script type="text/html" id="tmpl-customize-themes-details-view">
@@ -621 +619 @@
             <div class="theme-about wp-clearfix">
                 <div class="theme-screenshots">
-                <# if ( data.screenshot[0] ) { #>
+                <# if ( data.screenshot && data.screenshot[0] ) { #>
                     <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
                 <# } else { #>
@@ -634 +632 @@
                     <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
                     <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
+
+                    <# if ( data.stars && 0 != data.num_ratings ) { #>
+                        <div class="theme-rating">
+                            {{{ data.stars }}}
+                            <span class="num-ratings"><?php echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' ); ?></span>
+                        </div>
+                    <# } #>
+
+                    <# if ( data.hasUpdate ) { #>
+                        <div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
+                            <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
+                            {{{ data.update }}}
+                        </div>
+                    <# } #>
+
                     <p class="theme-description">{{{ data.description }}}</p>
 
@@ -639 +652 @@
                         <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
                     <# } #>
-
                     <# if ( data.tags ) { #>
-                        <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
+                        <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
                     <# } #>
                 </div>
             </div>
 
-            <# if ( ! data.active ) { #>
-                <div class="theme-actions">
-                    <div class="inactive-theme">
-                        <?php
-                        /* translators: %s: Theme name */
-                        $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
-                        ?>
-                        <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>
-                    </div>
-                </div>
-            <# } #>
+            <div class="theme-actions">
+                <# if ( data.active ) { #>
+                    <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
+                <# } else if ( 'installed' === data.type ) { #>
+                    <?php if ( current_user_can( 'delete_themes' ) ) { ?>
+                        <# if ( data.actions && data.actions['delete'] ) { #>
+                            <a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
+                        <# } #>
+                    <?php } ?>
+                    <button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></span>
+                <# } else { #>
+                    <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
+                    <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}"><?php _e( 'Install & Preview' ); ?></button>
+                <# } #>
+            </div>
         </div>
     </script>