Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

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

Merged
merged 7 commits into from
Jan 20, 2023
12 changes: 6 additions & 6 deletions assets/js/atomic/blocks/product-elements/rating/style.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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";
Expand Down Expand Up @@ -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 {
Expand All @@ -66,8 +68,6 @@
.wc-block-components-product-rating {
@include placeholder();
width: 7em;
margin-left: auto;
margin-right: auto;
}
}
}
2 changes: 1 addition & 1 deletion patterns/product-query-3-column-product-row.php
Original file line number Diff line number Diff line change
Expand Up @@ -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"} /-->

Expand Down
2 changes: 1 addition & 1 deletion patterns/product-query-4-column-product-row.php
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}}} /-->
Expand Down
2 changes: 1 addition & 1 deletion patterns/product-query-minimal-product-list.php
Original file line number Diff line number Diff line change
Expand Up @@ -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"} /-->

Expand Down
2 changes: 1 addition & 1 deletion patterns/product-query-product-gallery.php
Original file line number Diff line number Diff line change
Expand Up @@ -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"} /-->

Expand Down
2 changes: 1 addition & 1 deletion patterns/product-query-product-list-with-1-1-images.php
Original file line number Diff line number Diff line change
Expand Up @@ -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"} /-->

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"}}}} /-->

Expand Down