From 975c16f4b281621774770f86f8c46cecd96b6a7a Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Sat, 10 Oct 2015 06:50:35 +0000
Subject: [PATCH] Use `wp_star_rating()` on Add Themes screen:

* It works correctly for RTL
* Requires less CSS styling
* Is visually consistent with plugin ratings
* Is more accessible

Fixes #34080.

git-svn-id: https://develop.svn.wordpress.org/trunk@35006 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/themes.css            | 56 +++++---------------------
 src/wp-admin/includes/ajax-actions.php |  3 +-
 src/wp-admin/theme-install.php         | 10 ++---
 3 files changed, 17 insertions(+), 52 deletions(-)

diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 365743926d..04f6b5bd8d 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1154,57 +1154,23 @@ body.show-upload-theme p.no-themes {
 	}
 }
 
+.theme-details .theme-rating {
+	line-height: 23px;
+}
+
 .theme-details .star-rating {
-	margin: 15px 0 0;
+	display: inline;
 }
 
-.theme-details .star-rating span:before {
-	color: #ffb900;
-	content: "\f154";
-	display: inline-block;
-	-webkit-font-smoothing: antialiased;
-	font: normal 20px/1 dashicons;
-	vertical-align: top;
+.theme-details .num-ratings,
+.theme-details .no-rating {
+	font-size: 11px;
+	color: #999;
 }
 
-/* Half stars */
-.star-rating.rating-10 span.one:before,
-.star-rating.rating-30 span.two:before,
-.star-rating.rating-50 span.three:before,
-.star-rating.rating-70 span.four:before,
-.star-rating.rating-90 span.five:before {
-	content: "\f459";
-}
-
-/* Full stars */
-.star-rating.rating-20 span.one:before,
-.star-rating.rating-30 span.one:before,
-.star-rating.rating-40 span.one:before,
-.star-rating.rating-40 span.two:before,
-.star-rating.rating-50 span.one:before,
-.star-rating.rating-50 span.two:before,
-.star-rating.rating-60 span.one:before,
-.star-rating.rating-60 span.two:before,
-.star-rating.rating-60 span.three:before,
-.star-rating.rating-70 span.one:before,
-.star-rating.rating-70 span.two:before,
-.star-rating.rating-70 span.three:before,
-.star-rating.rating-80 span.one:before,
-.star-rating.rating-80 span.two:before,
-.star-rating.rating-80 span.three:before,
-.star-rating.rating-80 span.four:before,
-.star-rating.rating-90 span.one:before,
-.star-rating.rating-90 span.two:before,
-.star-rating.rating-90 span.three:before,
-.star-rating.rating-90 span.four:before,
-.star-rating.rating-100 > span:before {
-	content: "\f155";
-}
-
-.theme-details .star-rating .ratings {
+.theme-details .no-rating {
 	display: block;
 	line-height: 20px;
-	color: #999;
 }
 
 /*------------------------------------------------------------------------------
@@ -1628,7 +1594,7 @@ body.full-overlay-active {
 }
 
 .install-theme-info .theme-screenshot {
-	margin-top: 15px;
+	margin: 15px 0;
 	width: 258px;
 	border: 1px solid #ccc;
 }
diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php
index bf04c22bce..7e7ce58fad 100644
--- a/src/wp-admin/includes/ajax-actions.php
+++ b/src/wp-admin/includes/ajax-actions.php
@@ -2801,7 +2801,8 @@ function wp_ajax_query_themes() {
 		$theme->author      = wp_kses( $theme->author, $themes_allowedtags );
 		$theme->version     = wp_kses( $theme->version, $themes_allowedtags );
 		$theme->description = wp_kses( $theme->description, $themes_allowedtags );
-		$theme->num_ratings = sprintf( _n( '(based on %s rating)', '(based on %s ratings)', $theme->num_ratings ), number_format_i18n( $theme->num_ratings ) );
+		$theme->stars       = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) );
+		$theme->num_ratings = number_format_i18n( $theme->num_ratings );
 		$theme->preview_url = set_url_scheme( $theme->preview_url );
 	}
 
diff --git a/src/wp-admin/theme-install.php b/src/wp-admin/theme-install.php
index 06bd438ac6..bf60bf3b30 100644
--- a/src/wp-admin/theme-install.php
+++ b/src/wp-admin/theme-install.php
@@ -242,14 +242,12 @@ if ( $tab ) {
 
 				<div class="theme-details">
 					<# if ( data.rating ) { #>
-						<div class="star-rating rating-{{ Math.round( data.rating / 10 ) * 10 }}">
-							<span class="one"></span><span class="two"></span><span class="three"></span><span class="four"></span><span class="five"></span>
-							<small class="ratings">{{ data.num_ratings }}</small>
+						<div class="theme-rating">
+							{{{ data.stars }}}
+							<span class="num-ratings">({{ data.num_ratings }})</span>
 						</div>
 					<# } else { #>
-						<div class="star-rating">
-							<small class="ratings"><?php _e( 'This theme has not been rated yet.' ); ?></small>
-						</div>
+						<span class="no-rating"><?php _e( 'This theme has not been rated yet.' ); ?></span>
 					<# } #>
 					<div class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></div>
 					<div class="theme-description">{{{ data.description }}}</div>