Release: 10.6.0

assets/css/style.scss

@@ -337,6 +337,7 @@
 	@include visually-hidden-focus-reveal();
 }
 
+
 .wp-block-group.woocommerce.product .up-sells.upsells.products {
 	max-width: var(--wp--style--global--wide-size);
 }

assets/js/atomic/blocks/product-elements/image/style.scss

@@ -2,6 +2,7 @@
 .wc-block-components-product-image {
 	text-decoration: none;
 	display: block;
+	position: relative;
 
 	a {
 		border-radius: inherit;

assets/js/atomic/blocks/product-elements/price/block.tsx

@@ -17,6 +17,7 @@ import type { HTMLAttributes } from 'react';
  * Internal dependencies
  */
 import type { BlockAttributes } from './types';
+import './style.scss';
 
 type Props = BlockAttributes & HTMLAttributes< HTMLDivElement >;
 

assets/js/atomic/blocks/product-elements/price/style.scss

@@ -0,0 +1,11 @@
+.wc-block-components-product-price {
+	display: block;
+
+	.wc-block-all-products & {
+		margin-bottom: $gap-small;
+	}
+
+	ins {
+		text-decoration: none;
+	}
+}

assets/js/atomic/blocks/product-elements/product-details/block.tsx

@@ -5,6 +5,10 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 
+/**
+ * Internal dependencies
+ */
+
 interface SingleProductTab {
 	id: string;
 	title: string;

assets/js/atomic/blocks/product-elements/product-details/index.tsx

@@ -10,7 +10,6 @@ import { productDetails } from '@woocommerce/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
-import './style.scss';
 
 registerBlockSingleProductTemplate( {
 	blockName: metadata.name,

assets/js/atomic/blocks/product-elements/product-reviews/block.tsx

@@ -9,6 +9,10 @@ import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Notice } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+
 export const ProductReviews = () => {
 	const blockProps = useBlockProps();
 

assets/js/atomic/blocks/product-elements/product-reviews/index.tsx

@@ -8,7 +8,6 @@ import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
  */
 import metadata from './block.json';
 import edit from './edit';
-import './style.scss';
 
 registerBlockSingleProductTemplate( {
 	blockName: metadata.name,

assets/js/atomic/blocks/product-elements/rating/style.scss

@@ -1,12 +1,110 @@
 .wc-block-components-product-rating {
-	.wc-block-components-product-rating__container {
-		> * {
-			vertical-align: middle;
+	display: block;
+	line-height: 1;
+
+	&__stars {
+		display: inline-block;
+		overflow: hidden;
+		position: relative;
+		width: 5.3em;
+		height: 1.618em;
+		line-height: 1.618;
+		font-size: 1em;
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+		font-family: star;
+		font-weight: 400;
+
+		&.wc-block-grid__product-rating__stars {
+			margin: 0;
+		}
+
+		&::before {
+			content: "\53\53\53\53\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			opacity: 0.5;
+			color: inherit;
+			white-space: nowrap;
 		}
+		span {
+			overflow: hidden;
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			color: inherit;
+			padding-top: 1.5em;
+		}
+		span::before {
+			content: "\53\53\53\53\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			color: inherit;
+			white-space: nowrap;
+		}
+	}
+
+	.wc-block-all-products & {
+		margin-top: 0;
+		margin-bottom: $gap-small;
+	}
+
+	&__container {
+		display: flex;
+		align-items: center;
+		column-gap: $gap-smaller;
 	}
 
-	.wc-block-components-product-rating__stars {
+	&__norating-container {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		gap: $gap-smaller;
+	}
+
+	&__norating {
 		display: inline-block;
-		margin: 0;
+		overflow: hidden;
+		position: relative;
+		width: 1.5em;
+		height: 1.618em;
+		line-height: 1.618;
+		font-size: 1em;
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+		font-family: star;
+		font-weight: 400;
+		-webkit-text-stroke: 2px var(--wp--preset--color--black, #000);
+		&::before {
+			content: "\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			color: transparent;
+			white-space: nowrap;
+			text-align: center;
+		}
+	}
+}
+
+.wc-block-all-products,
+.wp-block-query {
+	.is-loading {
+		.wc-block-components-product-rating {
+			@include placeholder();
+			width: 7em;
+		}
+	}
+
+	.wc-block-components-product-rating__container {
+		display: block;
+	}
+
+	.wc-block-components-product-rating__stars.wc-block-grid__product-rating__stars {
+		margin: inherit;
 	}
 }

assets/js/base/components/country-input/style.scss

@@ -1,7 +1,3 @@
-@import "node_modules/@wordpress/base-styles/breakpoints";
-@import "node_modules/@wordpress/base-styles/mixins";
-@import "node_modules/wordpress-components/src/combobox-control/style";
-
 .wc-block-components-country-input {
 	margin-top: em($gap-large);
 }

assets/js/base/components/form-token-field/vendor.scss

@@ -8,6 +8,5 @@
 	@import "node_modules/@wordpress/base-styles/mixins";
 	@import "node_modules/wordpress-components/src/popover/style";
 	@import "node_modules/wordpress-components/src/tooltip/style";
-	@import "node_modules/wordpress-components/src/form-token-field/style";
 	/* stylelint-enable no-invalid-position-at-import-rule */
 }

assets/js/base/components/notice-banner/style.scss

@@ -43,7 +43,7 @@
 		}
 
 		// Legacy notice compatibility.
-		.wc-forward {
+		.wc-forward.wp-element-button {
 			float: right;
 			color: $gray-800 !important;
 			background: transparent;
@@ -52,8 +52,6 @@
 			border: 0;
 			appearance: none;
 			opacity: 0.6;
-			text-decoration-line: underline;
-			text-underline-position: under;
 
 			&:hover,
 			&:focus,

assets/js/base/components/product-price/style.scss

@@ -13,18 +13,6 @@
 }
 /*rtl:end:ignore*/
 
-.wc-block-components-product-price {
-	display: block;
-
-	.wc-block-all-products .wc-block-components-product-price {
-		margin-bottom: $gap-small;
-	}
-
-	ins {
-		text-decoration: none;
-	}
-}
-
 .wc-block-components-product-price__value {
 	&.is-discounted {
 		margin-left: 0.5em;

assets/js/base/components/product-rating/index.tsx

@@ -7,7 +7,6 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import './style.scss';
 
 const Rating = ( {
 	className,

assets/js/blocks/breadcrumbs/index.tsx

@@ -10,7 +10,6 @@ import { Icon, queryPagination } from '@wordpress/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
-import './style.scss';
 
 const featurePluginSupport = {
 	...metadata.supports,

assets/js/blocks/cart-checkout-shared/payment-methods/payment-methods.js

@@ -12,7 +12,6 @@ import { PAYMENT_STORE_KEY } from '@woocommerce/block-data';
 import NoPaymentMethods from './no-payment-methods';
 import PaymentMethodOptions from './payment-method-options';
 import SavedPaymentMethodOptions from './saved-payment-method-options';
-import './style.scss';
 
 /**
  * PaymentMethods component.

assets/js/blocks/cart/inner-blocks/cart-cross-sells-products/index.tsx

@@ -8,7 +8,6 @@ import { registerBlockType } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
-import './style.scss';
 
 registerBlockType( 'woocommerce/cart-cross-sells-products-block', {
 	icon: {

assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx

@@ -9,6 +9,7 @@ import type { TemplateArray } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
+import './style.scss';
 import {
 	useForcedLayout,
 	getAllowedBlocks,