Block Directory: Update search results list UI (#25521)

* Block Directory: Update UI

* Add a tooltip with rating count and status context

* Add instructions to reload the page on fatal errors

* Fix the e2e test query string

packages/block-directory/src/components/block-ratings/index.js

@@ -1,27 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { _n, sprintf } from '@wordpress/i18n';
-
 /**
  * Internal dependencies
  */
 import Stars from './stars';
 
-export const BlockRatings = ( { rating, ratingCount } ) => (
-	<div className="block-directory-block-ratings">
+export const BlockRatings = ( { rating } ) => (
+	<span className="block-directory-block-ratings">
 		<Stars rating={ rating } />
-		<span
-			className="block-directory-block-ratings__rating-count"
-			aria-label={ sprintf(
-				// translators: %d: number of ratings (number).
-				_n( '%d total rating', '%d total ratings', ratingCount ),
-				ratingCount
-			) }
-		>
-			({ ratingCount })
-		</span>
-	</div>
+	</span>
 );
 
 export default BlockRatings;

packages/block-directory/src/components/block-ratings/stars.js

@@ -17,7 +17,7 @@ function Stars( { rating } ) {
 	const emptyStarCount = 5 - ( fullStarCount + halfStarCount );
 
 	return (
-		<div
+		<span
 			aria-label={ sprintf(
 				/* translators: %s: number of stars. */
 				__( '%s out of 5 stars' ),
@@ -27,25 +27,28 @@ function Stars( { rating } ) {
 			{ times( fullStarCount, ( i ) => (
 				<Icon
 					key={ `full_stars_${ i }` }
+					className="block-directory-block-ratings__star-full"
 					icon={ starFilled }
 					size={ 16 }
 				/>
 			) ) }
 			{ times( halfStarCount, ( i ) => (
 				<Icon
 					key={ `half_stars_${ i }` }
+					className="block-directory-block-ratings__star-half-full"
 					icon={ starHalf }
 					size={ 16 }
 				/>
 			) ) }
 			{ times( emptyStarCount, ( i ) => (
 				<Icon
 					key={ `empty_stars_${ i }` }
+					className="block-directory-block-ratings__star-empty"
 					icon={ starEmpty }
 					size={ 16 }
 				/>
 			) ) }
-		</div>
+		</span>
 	);
 }
 

packages/block-directory/src/components/block-ratings/style.scss

@@ -1,15 +1,15 @@
 .block-directory-block-ratings {
-	display: flex;
-	> div {
-		line-height: 1;
+
+	> span {
 		display: flex;
 	}
 
-	.block-directory-block-ratings__rating-count {
-		font-size: ms(-2);
+	svg {
+		fill: $gray-900;
+		margin-left: -4px;
 	}
 
-	svg {
-		fill: #ffb900;
+	.block-directory-block-ratings__star-empty {
+		fill: $gray-400;
 	}
 }

packages/block-directory/src/components/downloadable-block-icon/index.js

@@ -1,25 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
 import { BlockIcon } from '@wordpress/block-editor';
 
-function DownloadableBlockIcon( { icon, title } ) {
-	return (
-		<div className="block-directory-downloadable-block-icon">
-			{ icon.match( /\.(jpeg|jpg|gif|png|svg)(?:\?.*)?$/ ) !== null ? (
-				<img
-					src={ icon }
-					alt={ sprintf(
-						// translators: %s: Name of the plugin e.g: "Akismet".
-						__( '%s block icon' ),
-						title
-					) }
-				/>
-			) : (
-				<BlockIcon icon={ icon } showColors />
-			) }
-		</div>
+function DownloadableBlockIcon( { icon } ) {
+	const className = 'block-directory-downloadable-block-icon';
+	return icon.match( /\.(jpeg|jpg|gif|png|svg)(?:\?.*)?$/ ) !== null ? (
+		<img className={ className } src={ icon } alt="" />
+	) : (
+		<BlockIcon className={ className } icon={ icon } showColors />
 	);
 }
 

packages/block-directory/src/components/downloadable-block-icon/style.scss

@@ -1,15 +1,7 @@
 .block-directory-downloadable-block-icon {
-	width: $button-size;
-	height: $button-size;
-
-	.block-editor-block-icon {
-		width: $button-size;
-		height: $button-size;
-		font-size: $button-size;
-		background-color: $gray-300;
-	}
-
-	> img {
-		width: 100%;
-	}
+	min-width: $button-size * 1.5;
+	width: $button-size * 1.5;
+	height: $button-size * 1.5;
+	vertical-align: middle;
+	border: 1px solid $gray-300;
 }