Move and adjust ratings-bars and ratings-stars.

WordPress · Jun 24, 2024 · 8291de7 · 8291de7
1 parent ed9879d
commit 8291de7
Show file tree

Hide file tree

Showing 12 changed files with 347 additions and 0 deletions.
diff --git a/mu-plugins/blocks/ratings-bars/index.php b/mu-plugins/blocks/ratings-bars/index.php
@@ -0,0 +1,20 @@
+<?php
+/**
+ * Block Name: Ratings (bars)
+ * Description: The breakdown of ratings displayed as bars for each rating value.
+ *
+ * @package wporg
+ */
+
+namespace WordPressdotorg\Theme\Theme_Directory_2024\Ratings_Bars_Block;
+
+defined( 'WPINC' ) || die();
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Register the block.
+ */
+function init() {
+	register_block_type( __DIR__ . '/build' );
+}
diff --git a/mu-plugins/blocks/ratings-bars/render.php b/mu-plugins/blocks/ratings-bars/render.php
@@ -0,0 +1,42 @@
+<?php
+
+use function WordPressdotorg\Theme\Theme_Directory_2024\get_support_url;
+
+$attributes = apply_filters( 'wporg_block_ratings_bars', $attributes );
+
+if ( ! $attributes['num_ratings'] ) {
+	return;
+}
+
+?>
+<ul <?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>>
+<?php
+foreach ( range( 5, 1 ) as $stars ) :
+	if ( ! isset( $attributes['ratings'][ $stars - 1 ] ) ) {
+		continue;
+	}
+	$count = $attributes['ratings'][ $stars - 1 ];
+	$rating_bar_width = 100 * $count / $attributes['num_ratings'];
+	?>
+	<li class="wporg-ratings-bars__bar">
+		<a href="<?php echo esc_url( get_support_url( $attributes['slug'] . '/reviews/?filter=' . $stars ) ); ?>">
+			<span class="screen-reader-text">
+			<?php
+				// translators: %1$d: count of reviews. %2$d: level of star rating (ex, 5-star).
+				echo esc_html( sprintf( _n( '%1$d %2$d-star review', '%1$d %2$d-star reviews', $count, 'wporg-themes' ), $count, $stars ) );
+			?>
+			</span>
+			<span aria-hidden="true" class="wporg-ratings-bars__bar-label">
+			<?php
+				// translators: %d: star review amount, 1-5; ex "5 stars".
+				echo esc_html( sprintf( _n( '%d star', '%d stars', $stars, 'wporg-themes' ), $stars ) );
+			?>
+			</span>
+			<span aria-hidden="true" class="wporg-ratings-bars__bar-background">
+				<span class="wporg-ratings-bars__bar-foreground" style="width: <?php echo intval( $rating_bar_width ); ?>%;"></span>
+			</span>
+			<span aria-hidden="true" class="wporg-ratings-bars__bar-count"><?php echo intval( $count ); ?></span>
+		</a>
+	</li>
+<?php endforeach; ?>
+</ul>
diff --git a/mu-plugins/blocks/ratings-bars/src/block.json b/mu-plugins/blocks/ratings-bars/src/block.json
@@ -0,0 +1,39 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/ratings-bars",
+	"version": "0.1.0",
+	"title": "Ratings (bars)",
+	"category": "design",
+	"icon": "",
+	"description": "The breakdown of ratings displayed as bars for each rating value.",
+	"textdomain": "wporg",
+	"supports": {
+		"html": false
+	},
+	"attributes": {
+		"num_ratings": {
+			"type": "number",
+			"default": 0
+		},
+		"ratings": {
+			"type": "array",
+			"default": []
+		},
+		"slug": {
+			"type": "string",
+			"default": ""
+		},
+		"support_url": {
+			"type": "string",
+			"default": ""
+		},
+		"type": {
+			"type": "string",
+			"default": 0
+		}
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css",
+	"render": "file:../render.php"
+}
diff --git a/mu-plugins/blocks/ratings-bars/src/edit.js b/mu-plugins/blocks/ratings-bars/src/edit.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+
+export default function Edit( { name, attributes, context } ) {
+	const blockProps = useBlockProps();
+	const { postId } = context;
+	return (
+		<div { ...blockProps }>
+			<ServerSideRender
+				block={ name }
+				attributes={ attributes }
+				skipBlockSupportAttributes
+				urlQueryArgs={ { post_id: postId } }
+			/>
+		</div>
+	);
+}
diff --git a/mu-plugins/blocks/ratings-bars/src/index.js b/mu-plugins/blocks/ratings-bars/src/index.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+import './style.scss';
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save: () => null,
+} );
diff --git a/mu-plugins/blocks/ratings-bars/src/style.scss b/mu-plugins/blocks/ratings-bars/src/style.scss
@@ -0,0 +1,65 @@
+.wp-block-wporg-ratings-bars {
+	list-style: none;
+	padding-inline-start: unset;
+}
+
+.wporg-ratings-bars__bar {
+	a {
+		margin-bottom: 4px;
+		display: flex;
+		align-items: center;
+		gap: var(--wp--preset--spacing--10);
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: underline;
+		}
+	}
+
+	&:last-child a {
+		margin-bottom: 0;
+	}
+}
+
+.wporg-ratings-bars__bar-label {
+	flex-basis: 4em;
+	flex-shrink: 0;
+}
+
+.wporg-ratings-bars__bar-count {
+	flex-basis: 2em;
+	flex-shrink: 0;
+	text-align: right;
+}
+
+.wporg-ratings-bars__bar-background {
+	display: inline-block;
+	background-color: var(--wp--preset--color--light-grey-2);
+	position: relative;
+	width: 100%;
+	height: var(--wp--preset--spacing--20);
+}
+
+.wporg-ratings-bars__bar-foreground {
+	position: absolute;
+	inset: 0;
+	right: auto;
+	background-color: var(--wp--custom--wporg-ratings-stars--color--fill);
+}
+
+@supports (grid-template-columns: subgrid) {
+	.wp-block-wporg-ratings-bars {
+		display: grid;
+		gap: 4px var(--wp--preset--spacing--10);
+		grid-template-columns: auto 1fr auto;
+
+		.wporg-ratings-bars__bar,
+		.wporg-ratings-bars__bar a {
+			display: grid;
+			grid-column: span 3;
+			grid-template-columns: subgrid;
+			margin-bottom: unset;
+			gap: unset;
+		}
+	}
+}
diff --git a/mu-plugins/blocks/ratings-stars/index.php b/mu-plugins/blocks/ratings-stars/index.php
@@ -0,0 +1,22 @@
+<?php
+/**
+ * Block Name: Ratings (stars)
+ * Description: The avgerage rating of this theme displayed as stars.
+ *
+ * @package wporg
+ */
+
+namespace WordPressdotorg\Theme\MU_Plugins\Ratings_Stars_Block;
+
+defined( 'WPINC' ) || die();
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Register the block.
+ */
+function init() {
+	register_block_type( __DIR__ . '/build' );
+}
+
+
diff --git a/mu-plugins/blocks/ratings-stars/render.php b/mu-plugins/blocks/ratings-stars/render.php
@@ -0,0 +1,41 @@
+<?php
+
+$attributes = apply_filters( 'wporg_block_ratings_stars', $attributes );
+
+
+?>
+<div <?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>>
+	<?php if ( ! $attributes['rating'] ) : ?>
+	<!-- Hide the "See all…" link if there are no ratings. -->
+	<style>.wporg-ratings-link{display:none}</style>
+	<div class="wporg-ratings-stars__label-empty">
+		<?php esc_html_e( 'This theme has not been rated yet.', 'wporg' ); ?>
+	</div>
+	<?php else : ?>
+	<div class="wporg-ratings-stars__icons">
+		<?php
+
+		$display_rating = round( $attributes['rating'] / 10 ) * 0.5;
+		for ( $i = 0; $i < 5; $i++ ) {
+			if ( $i + 1 <= $display_rating ) {
+				echo '<svg class="is-star-filled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M11.776 4.454a.25.25 0 01.448 0l2.069 4.192a.25.25 0 00.188.137l4.626.672a.25.25 0 01.139.426l-3.348 3.263a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.362.263l-4.138-2.175a.25.25 0 00-.232 0l-4.138 2.175a.25.25 0 01-.363-.263l.79-4.607a.25.25 0 00-.071-.222L4.754 9.881a.25.25 0 01.139-.426l4.626-.672a.25.25 0 00.188-.137l2.069-4.192z"></path></svg>';
+			} else if ( $i + 0.5 === $display_rating ) {
+				echo '<svg class="is-star-half" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M9.518 8.783a.25.25 0 00.188-.137l2.069-4.192a.25.25 0 01.448 0l2.07 4.192a.25.25 0 00.187.137l4.626.672a.25.25 0 01.139.427l-3.347 3.262a.25.25 0 00-.072.222l.79 4.607a.25.25 0 01-.363.264l-4.137-2.176a.25.25 0 00-.233 0l-4.138 2.175a.25.25 0 01-.362-.263l.79-4.607a.25.25 0 00-.072-.222L4.753 9.882a.25.25 0 01.14-.427l4.625-.672zM12 14.533c.28 0 .559.067.814.2l1.895.997-.362-2.11a1.75 1.75 0 01.504-1.55l1.533-1.495-2.12-.308a1.75 1.75 0 01-1.317-.957L12 7.39v7.143z"></path></svg>';
+			} else {
+				echo '<svg class="is-star-empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path fill-rule="evenodd" d="M9.706 8.646a.25.25 0 01-.188.137l-4.626.672a.25.25 0 00-.139.427l3.348 3.262a.25.25 0 01.072.222l-.79 4.607a.25.25 0 00.362.264l4.138-2.176a.25.25 0 01.233 0l4.137 2.175a.25.25 0 00.363-.263l-.79-4.607a.25.25 0 01.072-.222l3.347-3.262a.25.25 0 00-.139-.427l-4.626-.672a.25.25 0 01-.188-.137l-2.069-4.192a.25.25 0 00-.448 0L9.706 8.646zM12 7.39l-.948 1.921a1.75 1.75 0 01-1.317.957l-2.12.308 1.534 1.495c.412.402.6.982.503 1.55l-.362 2.11 1.896-.997a1.75 1.75 0 011.629 0l1.895.997-.362-2.11a1.75 1.75 0 01.504-1.55l1.533-1.495-2.12-.308a1.75 1.75 0 01-1.317-.957L12 7.39z" clip-rule="evenodd"></path></svg>';
+			}
+		}
+		?>
+	</div>
+
+	<div class="wporg-ratings-stars__label">
+		<?php
+		printf(
+			// translators: %s is the current rating value.
+			esc_html__( '%s out of 5 stars.', 'wporg' ),
+			'<span>' . $display_rating . '</span>' // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
+		);
+		?>
+	</div>
+	<?php endif; ?>
+</div>
diff --git a/mu-plugins/blocks/ratings-stars/src/block.json b/mu-plugins/blocks/ratings-stars/src/block.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/ratings-stars",
+	"version": "0.1.0",
+	"title": "Ratings (stars)",
+	"category": "design",
+	"icon": "",
+	"description": "The average rating displayed as stars.",
+	"textdomain": "wporg",
+	"supports": {
+		"html": false
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css",
+	"render": "file:./render.php"
+}
diff --git a/mu-plugins/blocks/ratings-stars/src/edit.js b/mu-plugins/blocks/ratings-stars/src/edit.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import ServerSideRender from '@wordpress/server-side-render';
+
+export default function Edit( { name, attributes, context } ) {
+	const blockProps = useBlockProps();
+	const { postId } = context;
+	return (
+		<div { ...blockProps }>
+			<ServerSideRender
+				block={ name }
+				attributes={ attributes }
+				skipBlockSupportAttributes
+				urlQueryArgs={ { post_id: postId } }
+			/>
+		</div>
+	);
+}
diff --git a/mu-plugins/blocks/ratings-stars/src/index.js b/mu-plugins/blocks/ratings-stars/src/index.js
@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+import './style.scss';
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save: () => null,
+} );
diff --git a/mu-plugins/blocks/ratings-stars/src/style.scss b/mu-plugins/blocks/ratings-stars/src/style.scss
@@ -0,0 +1,29 @@
+.wp-block-wporg-ratings-stars {
+	display: flex;
+	align-items: center;
+}
+
+.wporg-ratings-stars__icons {
+	display: inline-flex;
+
+	svg {
+		height: 32px;
+		width: 32px;
+		margin-inline-start: -6px;
+		fill: var(--wp--custom--wporg-ratings-stars--color--fill);
+	}
+
+	// Flip the half-star for RTL views.
+	.rtl & .is-star-half {
+		transform: rotateY(-180deg);
+	}
+}
+
+.wporg-ratings-stars__label {
+	font-size: var(--wp--preset--font-size--small);
+	color: var(--wp--preset--color--charcoal-4);
+
+	.wporg-ratings-stars__icons + & {
+		margin-inline-start: 0.5em;
+	}
+}