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

Timestamp:

09/29/2017 08:12:19 PM (7 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:

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

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

@@ -235 +235 @@
     $features = array(
 
-        __( 'Layout' ) => array(
-            'grid-layout'   => __( 'Grid Layout' ),
-            'one-column'    => __( 'One Column' ),
-            'two-columns'   => __( 'Two Columns' ),
-            'three-columns' => __( 'Three Columns' ),
-            'four-columns'  => __( 'Four Columns' ),
-            'left-sidebar'  => __( 'Left Sidebar' ),
-            'right-sidebar' => __( 'Right Sidebar' ),
-        ),
-
-        __( 'Features' ) => array(
-            'accessibility-ready'   => __( 'Accessibility Ready' ),
-            'buddypress'            => __( 'BuddyPress' ),
-            'custom-background'     => __( 'Custom Background' ),
-            'custom-colors'         => __( 'Custom Colors' ),
-            'custom-header'         => __( 'Custom Header' ),
-            'custom-logo'           => __( 'Custom Logo' ),
-            'custom-menu'           => __( 'Custom Menu' ),
-            'editor-style'          => __( 'Editor Style' ),
-            'featured-image-header' => __( 'Featured Image Header' ),
-            'featured-images'       => __( 'Featured Images' ),
-            'flexible-header'       => __( 'Flexible Header' ),
-            'footer-widgets'        => __( 'Footer Widgets' ),
-            'front-page-post-form'  => __( 'Front Page Posting' ),
-            'full-width-template'   => __( 'Full Width Template' ),
-            'microformats'          => __( 'Microformats' ),
-            'post-formats'          => __( 'Post Formats' ),
-            'rtl-language-support'  => __( 'RTL Language Support' ),
-            'sticky-post'           => __( 'Sticky Post' ),
-            'theme-options'         => __( 'Theme Options' ),
-            'threaded-comments'     => __( 'Threaded Comments' ),
-            'translation-ready'     => __( 'Translation Ready' ),
-        ),
-
         __( 'Subject' )  => array(
             'blog'           => __( 'Blog' ),
@@ -279 +245 @@
             'photography'    => __( 'Photography' ),
             'portfolio'      => __( 'Portfolio' ),
+        ),
+
+        __( 'Features' ) => array(
+            'accessibility-ready'   => __( 'Accessibility Ready' ),
+            'custom-background'     => __( 'Custom Background' ),
+            'custom-colors'         => __( 'Custom Colors' ),
+            'custom-header'         => __( 'Custom Header' ),
+            'custom-logo'           => __( 'Custom Logo' ),
+            'editor-style'          => __( 'Editor Style' ),
+            'featured-image-header' => __( 'Featured Image Header' ),
+            'featured-images'       => __( 'Featured Images' ),
+            'footer-widgets'        => __( 'Footer Widgets' ),
+            'full-width-template'   => __( 'Full Width Template' ),
+            'post-formats'          => __( 'Post Formats' ),
+            'sticky-post'           => __( 'Sticky Post' ),
+            'theme-options'         => __( 'Theme Options' ),
+        ),
+
+        __( 'Layout' ) => array(
+            'grid-layout'   => __( 'Grid Layout' ),
+            'one-column'    => __( 'One Column' ),
+            'two-columns'   => __( 'Two Columns' ),
+            'three-columns' => __( 'Three Columns' ),
+            'four-columns'  => __( 'Four Columns' ),
+            'left-sidebar'  => __( 'Left Sidebar' ),
+            'right-sidebar' => __( 'Right Sidebar' ),
         )
+
     );
 
@@ -575 +568 @@
         $parent = false;
         if ( $theme->parent() ) {
-            $parent = $theme->parent()->display( 'Name' );
-            $parents[ $slug ] = $theme->parent()->get_stylesheet();
+            $parent = $theme->parent();
+            $parents[ $slug ] = $parent->get_stylesheet();
+            $parent = $parent->display( 'Name' );
         }
 
@@ -636 +630 @@
  */
 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">
@@ -649 +641 @@
             <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 { #>
@@ -662 +654 @@
                     <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>
-                    <p class="theme-description">{{{ data.description }}}</p>
+
+                    <# if ( data.stars && 0 != data.num_ratings ) { #>
+                        <div class="theme-rating">
+                            {{{ data.stars }}}
+                            <span class="num-ratings">
+                                <?php
+                                /* translators: %s is the number of ratings */
+                                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>
+                    <# } #>
 
                     <# if ( data.parent ) { #>
@@ -668 +678 @@
                     <# } #>
 
+                    <p class="theme-description">{{{ data.description }}}</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 &amp; Preview' ); ?></button>
+                <# } #>
+            </div>
         </div>
     </script>