Ticket #31530: 31530-theme-install-workinprogress.diff

src/wp-admin/admin-ajax.php

@@ -61 +61 @@
         'query-attachments', 'save-attachment', 'save-attachment-compat', 'send-link-to-editor',
         'send-attachment-to-editor', 'save-attachment-order', 'heartbeat', 'get-revision-diffs',
         'save-user-color-scheme', 'update-widget', 'query-themes', 'parse-embed', 'set-attachment-thumbnail',
-        'parse-media-shortcode', 'destroy-sessions', 'install-plugin', 'update-plugin', 'press-this-save-post',
-        'press-this-add-category',
+        'parse-media-shortcode', 'destroy-sessions', 'install-plugin', 'update-plugin', 'install-theme',
+        'press-this-save-post', 'press-this-add-category',
 );
 
 // Register core Ajax calls.

src/wp-admin/includes/ajax-actions.php

@@ -2968 +2968 @@
 }
 
 /**
+ * AJAX handler for installing a theme.
+ *
+ * @since 4.2.0
+ */
+function wp_ajax_install_theme() {
+        $status = array(
+                'install' => 'theme',
+                'slug'    => sanitize_key( $_POST['slug'] ),
+        );
+
+        if ( ! current_user_can( 'install_themes' ) ) {
+                $status['error'] = __( 'You do not have sufficient permissions to install themes on this site.' );
+                wp_send_json_error( $status );
+        }
+
+        check_ajax_referer( 'updates' );
+
+        include_once( ABSPATH . 'wp-admin/includes/class-wp-upgrader.php' );
+        include_once( ABSPATH . 'wp-admin/includes/theme.php' );
+        include_once( ABSPATH . 'wp-admin/includes/theme-install.php' );
+
+        $api = themes_api( 'theme_information', array(
+                'slug'   => sanitize_key( $_POST['slug'] ),
+                'fields' => array( 'sections' => false )
+        ) );
+
+        if ( is_wp_error( $api ) ) {
+                $status['error'] = $api->get_error_message();
+                wp_send_json_error( $status );
+        }
+
+        $upgrader = new Theme_Upgrader( new Automatic_Upgrader_Skin() );
+        $result = $upgrader->install( $api->download_link );
+
+        if ( is_wp_error( $result ) ) {
+                $status['error'] = $result->get_error_message();
+                wp_send_json_error( $status );
+        }
+
+        // Never switch to theme (unlike plugin activation)
+        // Backbone should then also show the "Already installed banner"
+
+        wp_send_json_success( $status );
+}
+
+/**
  * AJAX handler for saving a post from Ptrss This.
  *
  * @since 4.2.0

src/wp-admin/js/theme.js

@@ -384 +384 @@
         render: function() {
                 var data = this.model.toJSON();
                 // Render themes using the html template
-                this.$el.html( this.html( data ) ).attr({
+                this.$el.attr(
+                        'id', 'theme-' + data.id
+                ).html( this.html( data ) ).attr({
                         tabindex: 0,
                         'aria-describedby' : data.id + '-action ' + data.id + '-name'
                 });
@@ -452 +454 @@
 
         preview: function( event ) {
                 var self = this,
+                        $currentTarget = $( event.currentTarget ),
                         current, preview;
 
                 // Bail if the user scrolled on a touch device
@@ -459 +462 @@
                         return this.touchDrag = false;
                 }
 
-                // Allow direct link path to installing a theme.
-                if ( $( event.target ).hasClass( 'button-primary' ) ) {
+                // Allow AJAX install of themes.
+                if ( ! $currentTarget.hasClass( 'is-installed' ) && $( event.target ).hasClass( 'theme-install' ) && wp && wp.updates ) {
+                        event.preventDefault();
+                        wp.updates.installTheme( $currentTarget.attr( 'id' ).replace( /^theme-/,'' ) );
                         return;
                 }
 

src/wp-admin/js/updates.js

@@ -257 +257 @@
 
 
         /**
+         * Send an Ajax request to the server to install a theme.
+         *
+         * @since 4.2.0
+         *
+         * @param {string} slug
+         */
+        wp.updates.installTheme = function( slug ) {
+                var $message = $( '#theme-' + slug ).find( '.theme-install' );
+
+                $message.addClass( 'updating-message' );
+                $message.text( wp.updates.l10n.installing );
+                wp.a11y.speak( wp.updates.l10n.installingMsg );
+
+                if ( wp.updates.updateLock ) {
+                        wp.updates.updateQueue.push( {
+                                type: 'install-theme',
+                                data: {
+                                        slug: slug
+                                }
+                        } );
+                        return;
+                }
+
+                wp.updates.updateLock = true;
+
+                var data = {
+                        '_ajax_nonce': wp.updates.ajaxNonce,
+                        'slug':        slug
+                };
+
+                wp.ajax.post( 'install-theme', data )
+                        .done( wp.updates.installThemeSuccess )
+                        .fail( wp.updates.installThemeError )
+                        .always( wp.updates.updateAlways );
+        };
+
+        /**
+         * On theme install success, update the UI with the result.
+         *
+         * @since 4.2.0
+         *
+         * @param {object} response
+         */
+        wp.updates.installThemeSuccess = function( response ) {
+                var $card = $( '#theme-' + response.slug ),
+                        $message = $card.find( '.theme-install' );
+
+                $message.removeClass( 'updating-message' ).addClass( 'updated-message button-disabled' );
+                $message.text( wp.updates.l10n.installed );
+                wp.a11y.speak( wp.updates.l10n.installedMsg );
+                $card.addClass( 'is-installed' );
+        };
+
+        /**
+         * On theme install failure, update the UI appropriately.
+         *
+         * @since 4.2.0
+         *
+         * @param {object} response
+         */
+        wp.updates.installThemeError = function( response ) {
+                var $message = $( '#theme-' + response.slug ).find( '.theme-install' );
+
+                $message.removeClass( 'updating-message' );
+                $message.text( wp.updates.l10n.installNow );
+        };
+
+
+        /**
          * If an install/update job has been placed in the queue, queueChecker pulls it out and runs it.
          *
          * @since 4.2.0

src/wp-admin/theme-install.php

@@ -55 +55 @@
 
 wp_enqueue_script( 'theme' );
 
+wp_enqueue_script( 'updates' );
+
 if ( $tab ) {
         /**
          * Fires before each of the tabs are rendered on the Install Themes page.
@@ -204 +206 @@
         <h3 class="theme-name">{{ data.name }}</h3>
 
         <div class="theme-actions">
-                <a class="button button-primary" href="{{ data.install_url }}"><?php esc_html_e( 'Install' ); ?></a>
+                <a class="button button-primary theme-install" href="{{ data.install_url }}"><?php esc_html_e( 'Install' ); ?></a>
                 <a class="button button-secondary preview install-theme-preview" href="#"><?php esc_html_e( 'Preview' ); ?></a>
         </div>
 

src/wp-admin/themes.php

@@ -210 +210 @@
         $aria_action = esc_attr( $theme['id'] . '-action' );
         $aria_name   = esc_attr( $theme['id'] . '-name' );
         ?>
-<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
+<div id="theme-<?php echo esc_attr( $theme['id'] ); ?>" class="theme<?php if ( $theme['active'] ) echo ' active'; ?>" tabindex="0" aria-describedby="<?php echo $aria_action . ' ' . $aria_name; ?>">
         <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
                 <div class="theme-screenshot">
                         <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />