Product Rating: Transition from using CSS margin to Global Styles (#8202

) * Product Rating: Transition from using CSS margin to Global Styles * Product Rating: Re-add css margins for Product Rating inside of the All Products block. * Product Rating: Change bottom margin to 1rem * Product Rating: Re-add the Classic Template fix. * Product Rating: Remove the Classic Template fix.
woocommerce · Jan 20, 2023 · 18c5591 · 18c5591
1 parent f05497c
commit 18c5591
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 12 deletions.
diff --git a/assets/js/atomic/blocks/product-elements/rating/style.scss b/assets/js/atomic/blocks/product-elements/rating/style.scss
@@ -1,9 +1,8 @@
 .wc-block-components-product-rating {
 	display: block;
-	margin-top: 0;
-	margin-bottom: $gap-small;
 
 	&__stars {
+		display: inline-block;
 		overflow: hidden;
 		position: relative;
 		width: 5.3em;
@@ -13,8 +12,6 @@
 		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
 		font-family: star;
 		font-weight: 400;
-		margin: 0 auto;
-		text-align: left;
 
 		&::before {
 			content: "\53\53\53\53\53";
@@ -52,6 +49,11 @@
 		text-align: inherit;
 		@include font-size(small);
 	}
+
+	.wc-block-all-products & {
+		margin-top: 0;
+		margin-bottom: $gap-small;
+	}
 }
 
 .wc-block-single-product {
@@ -66,8 +68,6 @@
 		.wc-block-components-product-rating {
 			@include placeholder();
 			width: 7em;
-			margin-left: auto;
-			margin-right: auto;
 		}
 	}
 }
diff --git a/patterns/product-query-3-column-product-row.php b/patterns/product-query-3-column-product-row.php
@@ -10,7 +10,7 @@
 <div class="wp-block-query"><!-- wp:post-template -->
 <!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
 
-<!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+<!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
 <!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"top":"0","bottom":"1rem"}}},"fontSize":"medium"} /-->
 

diff --git a/patterns/product-query-4-column-product-row.php b/patterns/product-query-4-column-product-row.php
@@ -15,7 +15,7 @@
 <!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"top","justifyContent":"space-between","orientation":"horizontal"}} -->
 <div class="wp-block-group"><!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
-<!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small"} /--></div>
+<!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /--></div>
 <!-- /wp:group -->
 
 <!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"top":"1em"}}}} /-->

diff --git a/patterns/product-query-minimal-product-list.php b/patterns/product-query-minimal-product-list.php
@@ -14,7 +14,7 @@
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"66.66%","layout":{"type":"default"}} -->
-<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
 <!-- wp:post-title {"level":3,"isLink":true,"style":{"spacing":{"margin":{"top":"0"}}},"fontSize":"large"} /-->
 

diff --git a/patterns/product-query-product-gallery.php b/patterns/product-query-product-gallery.php
@@ -10,7 +10,7 @@
 <div class="wp-block-query"><!-- wp:post-template -->
 <!-- wp:woocommerce/product-image {"saleBadgeAlign":"left","isDescendentOfQueryLoop":true} /-->
 
-<!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small"} /-->
+<!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
 <!-- wp:post-title {"textAlign":"center","level":3,"isLink":true,"style":{"spacing":{"margin":{"top":"0"}}},"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
 

diff --git a/patterns/product-query-product-list-with-1-1-images.php b/patterns/product-query-product-list-with-1-1-images.php
@@ -14,7 +14,7 @@
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"66.66%","layout":{"type":"default"}} -->
-<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small"} /-->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
 <!-- wp:post-title {"level":3,"isLink":true,"style":{"spacing":{"margin":{"top":"0"}}},"fontSize":"large"} /-->
 

diff --git a/patterns/product-query-product-list-with-full-product-description.php b/patterns/product-query-product-list-with-full-product-description.php
@@ -14,7 +14,7 @@
 <!-- /wp:column -->
 
 <!-- wp:column {"width":"66.66%","layout":{"type":"default"}} -->
-<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"0"}}}} /-->
+<div class="wp-block-column" style="flex-basis:66.66%"><!-- wp:woocommerce/product-rating {"isDescendentOfQueryLoop":true,"fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
 
 <!-- wp:post-terms {"term":"product_cat","style":{"spacing":{"margin":{"top":"0"}}}} /-->