Ratings Block: switch to block_classes to handle class management

[jeherve]

See discussion here:
#14091 (comment)

[jeherve]

I looked into this a bit. Doing so is simple enough:

diff --git a/extensions/blocks/rating-star/rating-meta.php b/extensions/blocks/rating-star/rating-meta.php
index dfbf30038..721d3374e 100644
--- a/extensions/blocks/rating-star/rating-meta.php
+++ b/extensions/blocks/rating-star/rating-meta.php
@@ -97,12 +97,11 @@ if ( ! function_exists( 'jetpack_rating_meta_render_block' ) ) {
 	 * @return string
 	 */
 	function jetpack_rating_meta_render_block( $attributes ) {
-		$classname = empty( $attributes['className'] ) ? '' : ' ' . $attributes['className'];
+		$classes = Jetpack_Gutenberg::block_classes( 'rating-' . $attributes['ratingStyle'], $attributes );
 		return sprintf(
-			'<div class="%1$s" style="text-align:%3$s">%2$s</div>',
-			esc_attr( 'wp-block-jetpack-rating-' . $attributes['ratingStyle'] . $classname ),
-			jetpack_rating_meta_get_symbols( $attributes ),
-			( isset( $attributes['align'] ) ) ? esc_attr( $attributes['align'] ) : ''
+			'<div class="%1$s">%2$s</div>',
+			esc_attr( $classes ),
+			jetpack_rating_meta_get_symbols( $attributes )
 		);
 	}
 }
diff --git a/extensions/blocks/rating-star/style.scss b/extensions/blocks/rating-star/style.scss
index e5d0e473c..b4ec3ea97 100644
--- a/extensions/blocks/rating-star/style.scss
+++ b/extensions/blocks/rating-star/style.scss
@@ -7,6 +7,10 @@
 	line-height: 0;
 	stroke-width: 0;
 
+	&.aligncenter {
+		text-align: center;
+	}
+
 	.is-rating-unfilled {
 		fill-opacity: 0.33;
 	}

It also gives us the opportunity to extend the block and move from storing block alignment in an attribute to using Core's supports. This has the advantage of offering more alignment options, all the while being consistent with other blocks.

diff --git a/extensions/blocks/rating-star/index.js b/extensions/blocks/rating-star/index.js
index 693f97aa6..07b4ab188 100644
--- a/extensions/blocks/rating-star/index.js
+++ b/extensions/blocks/rating-star/index.js
@@ -39,6 +39,9 @@ export const settings = {
 			label: _x( 'Outlined', 'block style', 'jetpack' ),
 		},
 	],
+	supports: {
+		align: [ 'left', 'center', 'right', 'wide', 'full' ],
+	},
 	attributes: {
 		rating: {
 			type: 'number',

However I'm not quite sure how to handle the migration from attributes to that, without invalidating blocks.

@nosolosw Any idea about how we could go about this?

[simison]

@jeherve did you have a look at https://developer.wordpress.org/block-editor/developers/block-api/block-deprecation/ yet? Some other blocks in this repo have examples, too.

[oandregal]

Just took a look at the Jetpack_Gutenberg::block_classes and I'm not sure whether we can use it due to the align* classes it adds. This is what happens to consecutive rating blocks when I use block_classes:

Editor	Front

Not sure how that align* classes work. If we want to change this code, we want to use the core has-text-align-* instead.

[jeherve]

This is what happens to consecutive rating blocks when I use block_classes:

That's mostly linked to Twenty Twenty. I would recommend trying to Twenty Nineteen, you'll most likely get different results.

Twenty Twenty's alignment settings are a bit tricky, and we've had to work around them quite a bit already with other blocks:
https://github.com/Automattic/jetpack/blob/fcf029c3deb172b4982f2a9d964b999aab1aa438/modules/theme-tools/compat/twentytwenty.css

Not sure how that align* classes work.

They work well on their own, and since they're common classes, they allow themes to style each alignment to fit their needs.

You can see this in action with other Jetpack blocks such as Tiled Gallery, Map, or Gif, or most (all?) Core blocks.

[oandregal]

In this case, it's not related to the theme, but the align* classes themselves. For reference, here's what happens in twentynineteen if I use Jetpack_Gutenberg::block_classes:

Editor	Front

[jeherve]

hm, you're right. Adding a clear: both; to the block' style seems to improve things a bit on my end with Twenty Nineteen:

diff --git a/extensions/blocks/rating-star/style.scss b/extensions/blocks/rating-star/style.scss
index e5d0e473c..521001efc 100644
--- a/extensions/blocks/rating-star/style.scss
+++ b/extensions/blocks/rating-star/style.scss
@@ -3,10 +3,15 @@
 
 // Editor and View styles
 .wp-block-jetpack-rating-star {
+	clear: both;
 	margin-bottom: $jetpack-block-margin-bottom;
 	line-height: 0;
 	stroke-width: 0;
 
+	&.aligncenter {
+		text-align: center;
+	}
+
 	.is-rating-unfilled {
 		fill-opacity: 0.33;
 	}

[stale]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.