Move and adjust ratings-bars and ratings-stars.

[StevenDufresne]

We have ratings components on wp.org in there places:

• Themes Single (Example)
• Plugins Single (Example)
• Support Forums (Reviews)

This PR moves blocks added to https://github.com/WordPress/wporg-theme-directory to this project for use across the site.

Approach

I decided to use block.json to expose the attributes and custom filters for themes to use to populate the values. I'm not 100% sure it's the best approach. I considered using render_block_data instead of a custom filter but thought this was more maintainable in the future and we use custom filters for other blocks. I can be convinced otherwise.

Example Usage

wporg/ratings-stars

<!-- wp:wporg/ratings-stars /-->

Attributes

Attribute	Type
rating	number

wporg/ratings-bars

<!-- wp:wporg/ratings-bars /-->

Attributes

Attribute	Type	Description
ratingsCount	number	The total of ratings, must match sum of all values in ratings
ratings	array(5)	Rating count. The array must have 5 items. [1] = 1 star, [5] = 5 star.
slug	string	The slug of the theme or plugin.
supportUrl	string	Base url for support forums.

Filter Example

use function WordPressdotorg\Theme\Theme_Directory_2024\{get_support_url, get_theme_information};

/**
 * Update ratings blocks with real rating data.
 *
 * @param array $data    Rating data.
 * @param int   $post_id Current post.
 *
 * @return array
 */
function set_rating_data( $data, $post_id ) {
	$theme = get_theme_information( $post_id );
	if ( ! $theme ) {
		return $data;
	}

	return array(
		'rating' => $theme->rating,
		'ratingsCount' => $theme->num_ratings,
		'ratings' => $theme->ratings,
		'supportUrl' => get_support_url( $theme->slug . '/reviews/' ),
	);
}
add_filter( 'wporg_ratings_data', __NAMESPACE__ . '\set_rating_data', 10, 2 );

Testing this PR

You can test this PR in conjunction with WordPress/wporg-theme-directory#146.

That environment doesn't include the ratings table by default so it make makes sense to test in a sandbox.

1. Load this PR in your theme directory environment on try/refactor-rating-starstry/refactor-rating-stars
2. Navigate to a theme, the reviews should be present

[ryelle]

The blocks do work, but I have some feedback on the filter process. In the query total & query filter blocks, the filter runs over a placeholder value so the filter only applies to that item, I think an approach like that would be better here.

[ryelle]

Looks good now, one last little 🧹 cleanup request before merging — the attributes can be removed from block.json.