Merge branch 'trunk' into test/9692

Author: nielslange

.github/workflows/auto-merge-dependabot.yml

@@ -13,7 +13,7 @@ jobs:
         steps:
             - name: Dependabot metadata
               id: metadata
-              uses: dependabot/fetch-metadata@v1.4.0
+              uses: dependabot/fetch-metadata@v1.5.1
               with:
                   github-token: "${{ secrets.GITHUB_TOKEN }}"
 

.github/workflows/typescript-monitoring.yml

@@ -46,7 +46,7 @@ jobs:
 
             - name: Get branch name
               id: branch-name
-              uses: tj-actions/branch-names@v6
+              uses: tj-actions/branch-names@v7
 
             - name: Monitor TypeScript errors
               uses: ./.github/monitor-typescript-errors

assets/js/atomic/blocks/product-elements/add-to-cart-form/block.json

@@ -3,6 +3,12 @@
 	"version": "1.0.0",
 	"title": "Add to Cart with Options",
 	"description": "Display a button so the customer can add a product to their cart. Options will also be displayed depending on product type. e.g. quantity, variation.",
+	"attributes": {
+		"isDescendentOfSingleProductBlock": {
+			"type": "boolean",
+			"default": false
+		}
+	},
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
 	"usesContext": ["postId"],

assets/js/atomic/blocks/product-elements/add-to-cart-form/edit.tsx

@@ -1,23 +1,38 @@
 /**
  * External dependencies
  */
+import { useEffect } from '@wordpress/element';
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { Button, Disabled, Tooltip } from '@wordpress/components';
 import { Skeleton } from '@woocommerce/base-components/skeleton';
+import { BlockEditProps } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
+import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
 export interface Attributes {
 	className?: string;
+	isDescendentOfSingleProductBlock: boolean;
 }
 
-const Edit = () => {
+const Edit = ( props: BlockEditProps< Attributes > ) => {
+	const { setAttributes } = props;
 	const blockProps = useBlockProps( {
 		className: 'wc-block-add-to-cart-form',
 	} );
+	const { isDescendentOfSingleProductBlock } =
+		useIsDescendentOfSingleProductBlock( {
+			blockClientId: blockProps?.id,
+		} );
+
+	useEffect( () => {
+		setAttributes( {
+			isDescendentOfSingleProductBlock,
+		} );
+	}, [ setAttributes, isDescendentOfSingleProductBlock ] );
 
 	return (
 		<div { ...blockProps }>

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

@@ -8,12 +8,12 @@ import {
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import type { BlockAlignment } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Block from './block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
 
 type UnsupportedAligments = 'wide' | 'full';
 type AllowedAlignments = Exclude< BlockAlignment, UnsupportedAligments >;
@@ -53,18 +53,12 @@ const PriceEdit = ( {
 	};
 	const isDescendentOfQueryLoop = Number.isFinite( context.queryId );
 
-	const isDescendentOfSingleProductTemplate = useSelect(
-		( select ) => {
-			const store = select( 'core/edit-site' );
-			const postId = store?.getEditedPostId< string | undefined >();
+	let { isDescendentOfSingleProductTemplate } =
+		useIsDescendentOfSingleProductTemplate( { isDescendentOfQueryLoop } );
 
-			return (
-				postId?.includes( '//single-product' ) &&
-				! isDescendentOfQueryLoop
-			);
-		},
-		[ isDescendentOfQueryLoop ]
-	);
+	if ( isDescendentOfQueryLoop ) {
+		isDescendentOfSingleProductTemplate = false;
+	}
 
 	useEffect(
 		() =>

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

@@ -4,4 +4,8 @@
 	.wc-block-all-products & {
 		margin-bottom: $gap-small;
 	}
+
+	ins {
+		text-decoration: none;
+	}
 }

assets/js/atomic/blocks/product-elements/product-meta/edit.tsx

@@ -3,20 +3,16 @@
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { InnerBlockTemplate } from '@wordpress/blocks';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './editor.scss';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
 
 const Edit = () => {
-	const isDescendentOfSingleProductTemplate = useSelect( ( select ) => {
-		const store = select( 'core/edit-site' );
-		const postId = store?.getEditedPostId< string | undefined >();
-
-		return postId?.includes( '//single-product' );
-	}, [] );
+	const isDescendentOfSingleProductTemplate =
+		useIsDescendentOfSingleProductTemplate();
 
 	const TEMPLATE: InnerBlockTemplate[] = [
 		[

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

@@ -40,12 +40,35 @@ const getRatingCount = ( product: ProductResponseItem ) => {
 	return Number.isFinite( count ) && count > 0 ? count : 0;
 };
 
+const getStarStyle = ( rating: number ) => ( {
+	width: ( rating / 5 ) * 100 + '%',
+} );
+
+const NoRating = ( { parentClassName }: { parentClassName: string } ) => {
+	const starStyle = getStarStyle( 0 );
+
+	return (
+		<div
+			className={ classnames(
+				'wc-block-components-product-rating__norating-container',
+				`${ parentClassName }-product-rating__norating-container`
+			) }
+		>
+			<div
+				className={ 'wc-block-components-product-rating__norating' }
+				role="img"
+			>
+				<span style={ starStyle } />
+			</div>
+			<span>{ __( 'No Reviews', 'woo-gutenberg-products-block' ) }</span>
+		</div>
+	);
+};
+
 const Rating = ( props: RatingProps ): JSX.Element => {
 	const { rating, reviews, parentClassName } = props;
 
-	const starStyle = {
-		width: ( rating / 5 ) * 100 + '%',
-	};
+	const starStyle = getStarStyle( rating );
 
 	const ratingText = sprintf(
 		/* translators: %f is referring to the average rating value */
@@ -132,11 +155,7 @@ export const Block = ( props: ProductRatingProps ): JSX.Element | null => {
 		}
 	);
 	const mockedRatings = shouldDisplayMockedReviewsWhenProductHasNoReviews ? (
-		<Rating
-			rating={ 0 }
-			reviews={ 0 }
-			parentClassName={ parentClassName }
-		/>
+		<NoRating parentClassName={ parentClassName } />
 	) : null;
 
 	const content = reviews ? (

assets/js/atomic/blocks/product-elements/rating/edit.tsx

@@ -9,7 +9,6 @@ import {
 import type { BlockEditProps } from '@wordpress/blocks';
 import { useEffect } from '@wordpress/element';
 import { ProductQueryContext as Context } from '@woocommerce/blocks/product-query/types';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -18,6 +17,7 @@ import Block from './block';
 import { BlockAttributes } from './types';
 import './editor.scss';
 import { useIsDescendentOfSingleProductBlock } from '../shared/use-is-descendent-of-single-product-block';
+import { useIsDescendentOfSingleProductTemplate } from '../shared/use-is-descendent-of-single-product-template';
 
 const Edit = (
 	props: BlockEditProps< BlockAttributes > & { context: Context }
@@ -36,21 +36,12 @@ const Edit = (
 		useIsDescendentOfSingleProductBlock( {
 			blockClientId: blockProps?.id,
 		} );
-	const { isDescendentOfSingleProductTemplate } = useSelect(
-		( select ) => {
-			const store = select( 'core/edit-site' );
-			const postId = store?.getEditedPostId< string | undefined >();
+	let { isDescendentOfSingleProductTemplate } =
+		useIsDescendentOfSingleProductTemplate();
 
-			return {
-				isDescendentOfSingleProductTemplate: Boolean(
-					postId?.includes( '//single-product' ) &&
-						! isDescendentOfQueryLoop &&
-						! isDescendentOfSingleProductBlock
-				),
-			};
-		},
-		[ isDescendentOfQueryLoop, isDescendentOfSingleProductBlock ]
-	);
+	if ( isDescendentOfQueryLoop || isDescendentOfSingleProductBlock ) {
+		isDescendentOfSingleProductTemplate = false;
+	}
 
 	useEffect( () => {
 		setAttributes( {

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

@@ -56,6 +56,37 @@
 		margin-top: 0;
 		margin-bottom: $gap-small;
 	}
+
+	&__norating-container {
+		display: inline-flex;
+		flex-direction: row;
+		align-items: center;
+		gap: $gap-smaller;
+	}
+
+	&__norating {
+		display: inline-block;
+		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;
+		}
+	}
 }
 
 .wp-block-woocommerce-single-product {