Themes: Add a Favorites tab to the Add Themes screen.

You can now browse and install your wordpress.org theme favorites from the theme installer, just like with plugins.

Props swissspidy.
Fixes #34206.

git-svn-id: https://develop.svn.wordpress.org/trunk@35527 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/admin-ajax.php

@@ -62,7 +62,7 @@ $core_actions_post = array(
 	'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', 'crop-image', 'generate-password',
+	'press-this-add-category', 'crop-image', 'generate-password', 'save-wporg-username',
 );
 
 // Deprecated

src/wp-admin/css/common.css

@@ -1085,6 +1085,20 @@ th.action-links {
 	color: #fff;
 }
 
+.wp-filter .favorites-form {
+	display: none;
+	margin: 0 -20px;
+	padding: 20px;
+	border-top: 1px solid #eee;
+	background: #fafafa;
+	overflow: hidden;
+	width: 100%;
+}
+
+.show-favorites-form .wp-filter .favorites-form {
+	display: block;
+}
+
 .filter-drawer {
 	display: none;
 	margin: 0 -20px;

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

@@ -2821,6 +2821,13 @@ function wp_ajax_query_themes() {
 		'fields'   => $theme_field_defaults
 	) );
 
+	if ( 'favorites' === $args['browse'] && ! isset( $args['user'] ) ) {
+		$user = get_user_option( 'wporg_favorites' );
+		if ( $user ) {
+			$args['user'] = $user;
+		}
+	}
+
 	$old_filter = isset( $args['browse'] ) ? $args['browse'] : 'search';
 
 	/** This filter is documented in wp-admin/includes/class-wp-theme-install-list-table.php */
@@ -3290,3 +3297,22 @@ function wp_ajax_crop_image() {
 function wp_ajax_generate_password() {
 	wp_send_json_success( wp_generate_password( 24 ) );
 }
+
+/**
+ * Ajax handler for saving the user's WordPress.org username.
+ *
+ * @since 4.4.0
+ */
+function wp_ajax_save_wporg_username() {
+	if ( ! current_user_can( 'install_themes' ) && ! current_user_can( 'install_plugins' ) ) {
+		wp_send_json_error();
+	}
+
+	$username = isset( $_REQUEST['username'] ) ? wp_unslash( $_REQUEST['username'] ) : false;
+
+	if ( ! $username ) {
+		wp_send_json_error();
+	}
+
+	wp_send_json_success( update_user_meta( get_current_user_id(), 'wporg_favorites', $username ) );
+}

src/wp-admin/js/theme.js

@@ -1356,7 +1356,9 @@ themes.view.Installer = themes.view.Appearance.extend({
 		'click .filter-drawer .apply-filters': 'applyFilters',
 		'click .filter-group [type="checkbox"]': 'addFilter',
 		'click .filter-drawer .clear-filters': 'clearFilters',
-		'click .filtered-by': 'backToFilters'
+		'click .filtered-by': 'backToFilters',
+		'click .favorites-form-submit' : 'saveUsername',
+		'keyup #wporg-username-input': 'saveUsername',
 	},
 
 	// Initial render method
@@ -1448,6 +1450,12 @@ themes.view.Installer = themes.view.Appearance.extend({
 		$( '.filter-links li > a, .theme-filter' ).removeClass( this.activeClass );
 		$( '[data-sort="' + sort + '"]' ).addClass( this.activeClass );
 
+		if ( 'favorites' === sort ) {
+			$ ( 'body' ).addClass( 'show-favorites-form' );
+		} else {
+			$ ( 'body' ).removeClass( 'show-favorites-form' );
+		}
+
 		this.browse( sort );
 	},
 
@@ -1509,6 +1517,33 @@ themes.view.Installer = themes.view.Appearance.extend({
 		this.collection.query( request );
 	},
 
+	// Save the user's WordPress.org username and get his favorite themes.
+	saveUsername: function ( event ) {
+		var username = $( '#wporg-username-input' ).val(),
+			request = { browse: 'favorites', user: username },
+			that = this;
+
+		if ( event ) {
+			event.preventDefault();
+		}
+
+		// save username on enter
+		if ( event.type === 'keyup' && event.which !== 13 ) {
+			return;
+		}
+
+		return wp.ajax.send( 'save-wporg-username', {
+			data: {
+				username: username
+			},
+			success: function () {
+				// Get the themes by sending Ajax POST request to api.wordpress.org/themes
+				// or searching the local cache
+				that.collection.query( request );
+			}
+		} );
+	},
+
 	// Get the checked filters
 	// @return {array} of tags or false
 	filtersChecked: function() {

src/wp-admin/theme-install.php

@@ -139,12 +139,27 @@ include(ABSPATH . 'wp-admin/admin-header.php');
 			<li><a href="#" data-sort="featured"><?php _ex( 'Featured', 'themes' ); ?></a></li>
 			<li><a href="#" data-sort="popular"><?php _ex( 'Popular', 'themes' ); ?></a></li>
 			<li><a href="#" data-sort="new"><?php _ex( 'Latest', 'themes' ); ?></a></li>
+			<li><a href="#" data-sort="favorites"><?php _ex( 'Favorites', 'themes' ); ?></a></li>
 		</ul>
 
 		<a class="drawer-toggle" href="#"><?php _e( 'Feature Filter' ); ?></a>
 
 		<div class="search-form"></div>
 
+		<div class="favorites-form">
+			<?php
+			$user = isset( $_GET['user'] ) ? wp_unslash( $_GET['user'] ) : get_user_option( 'wporg_favorites' );
+			update_user_meta( get_current_user_id(), 'wporg_favorites', $user );
+			?>
+			<p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
+
+			<p>
+				<label for="user"><?php _e( 'Your WordPress.org username:' ); ?></label>
+				<input type="search" id="wporg-username-input" value="<?php echo esc_attr( $user ); ?>" />
+				<input type="button" class="button button-secondary favorites-form-submit" value="<?php esc_attr_e( 'Get Favorites' ); ?>" />
+			</p>
+		</div>
+
 		<div class="filter-drawer">
 			<div class="buttons">
 				<a class="apply-filters button button-secondary" href="#"><?php _e( 'Apply Filters' ); ?><span></span></a>