Merge branch 'trunk' of https://github.com/woocommerce/woocommerce-bl…

…ocks into fix/refactor-product-query-e2e-tests

.github/comments-aggregator/README.md

@@ -28,7 +28,7 @@ This action is meant to be used as the poster/commenter. Instead of having exist
 
 - **`repo-token`** (required): This is the GitHub token. This is required to manipulate PR comments.
 - **`section-id`** (required): The unique ID that helps this action to update the correct part of the aggregated comment.
-- **`content`** (required): The comment content.
+- **`content`** (option): The comment content. Default to empty. If nothing was provided, this action will stop gracefully.
 - **`order`** (optional): The order of the comment part inside the aggregated comment. Default to 10.
 
 ## More examples

.github/comments-aggregator/action.yml

@@ -9,7 +9,7 @@ inputs:
         required: true
     content:
         description: 'Comment content'
-        required: true
+        default: ''
     order:
         description: 'Order of the comment'
         required: false 

.github/comments-aggregator/index.js

@@ -16,12 +16,17 @@ const runner = async () => {
 		const payload = context.payload;
 		const repo = payload.repository.name;
 		const owner = payload.repository.owner.login;
+
+		// Only run this action on pull requests.
+		if ( ! payload.pull_request?.number ) {
+			return;
+		}
+
 		const sectionId = getInput( 'section-id', {
 			required: true,
 		} );
-		const content = getInput( 'content', {
-			required: true,
-		} );
+
+		const content = getInput( 'content' );
 		const order = getInput( 'order' );
 
 		if ( ! sectionId || ! content ) {

.github/comments-aggregator/utils.js

@@ -1,7 +1,7 @@
 const identifier = `<!-- comments-aggregator -->`;
 const separator = '<!-- separator -->';
 const footerText =
-	'[comments-aggregator](https://github.com/woocommerce/woocommerce-blocks/tree/trunk/.github/comments-aggregator).';
+	'[comments-aggregator](https://github.com/woocommerce/woocommerce-blocks/tree/trunk/.github/comments-aggregator)';
 const footer = `\n> <sub>${ footerText }</sub>\n${ identifier }`;
 
 function getSectionId( section ) {

.github/patch-initial-checklist.md

@@ -80,13 +80,13 @@ This only needs done if the patch release needs to be included in WooCommerce Co
 
         -   [ ] Increase the version of `woocommerce/woocommerce-blocks` in the `plugins/woocommerce/composer.json` file
         -   [ ] Run `composer update woocommerce/woocommerce-blocks` and make sure `composer-lock.json` was updated
-        -   [ ] Add a new file similar to this one [plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.1](https://github.com/woocommerce/woocommerce/blob/5040a10d01896bcf40fd0ac538f2b7bc584ffe0a/plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.1) with a similar content as below. For the Significance entry we’ll always use `minor`, or `patch` when including a patch release
+        -   [ ] Run `pnpm --filter=woocommerce changelog add` to create a new changelog file similar to this one [plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.1](https://github.com/woocommerce/woocommerce/blob/5040a10d01896bcf40fd0ac538f2b7bc584ffe0a/plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.1). The file will be auto-generated with your answers. For the _Significance_ entry we’ll always use `patch` for WC Blocks patch releases:
 
             ```md
-            Significance: minor
+            Significance: patch
             Type: update
 
-                Update WooCommerce Blocks to 7.4.1
+            Update WooCommerce Blocks to 7.4.1
             ```
 
     -   The PR description can follow [this example](https://github.com/woocommerce/woocommerce/pull/32627).

.github/release-initial-checklist.md

@@ -103,13 +103,13 @@ This only needs to be done if this release is the last release of the feature pl
 
         -   [ ] Increase the version of `woocommerce/woocommerce-blocks` in the `plugins/woocommerce/composer.json` file
         -   [ ] Run `composer update woocommerce/woocommerce-blocks` and make sure `composer-lock.json` was updated
-        -   [ ] Add a new file similar to this one [plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.1](https://github.com/woocommerce/woocommerce/blob/5040a10d01896bcf40fd0ac538f2b7bc584ffe0a/plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.1) with a similar content as below. For the Significance entry we’ll always use `minor`, or `patch` when including a patch release
+        -   [ ] Run `pnpm --filter=woocommerce changelog add` to create a new changelog file similar to this one [plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.1](https://github.com/woocommerce/woocommerce/blob/5040a10d01896bcf40fd0ac538f2b7bc584ffe0a/plugins/woocommerce/changelog/update-woocommerce-blocks-7.4.1). The file will be auto-generated with your answers. For the _Significance_ entry we’ll always use `minor` for WC Blocks major releases:
 
             ```md
             Significance: minor
             Type: update
 
-            Update WooCommerce Blocks to 7.4.1
+            Update WooCommerce Blocks to 7.4.0
             ```
 
     -   The PR description can follow [this example](https://github.com/woocommerce/woocommerce/pull/32627).

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

@@ -0,0 +1,66 @@
+name: Dependabot auto-merge
+on: pull_request
+
+permissions:
+    pull-requests: write
+    contents: write
+    repository-projects: write
+
+jobs:
+    dependabot:
+        runs-on: ubuntu-latest
+        if: ${{ github.actor == 'dependabot[bot]' }}
+        steps:
+            - name: Dependabot metadata
+              id: metadata
+              uses: dependabot/[email protected]
+              with:
+                  github-token: "${{ secrets.GITHUB_TOKEN }}"
+
+            - name: Enable auto-merge for Dependabot PRs
+              # Automatically merge the following dependency upgrades:
+              if: "${{ steps.metadata.outputs.dependency-names == '@actions/core' ||
+                  steps.metadata.outputs.dependency-names == '@automattic/color-studio' ||
+                  steps.metadata.outputs.dependency-names == '@babel/cli' ||
+                  steps.metadata.outputs.dependency-names == '@babel/core' ||
+                  steps.metadata.outputs.dependency-names == '@babel/plugin-proposal-class-properties' ||
+                  steps.metadata.outputs.dependency-names == '@babel/plugin-syntax-jsx' ||
+                  steps.metadata.outputs.dependency-names == '@babel/polyfill' ||
+                  steps.metadata.outputs.dependency-names == '@types/classnames' ||
+                  steps.metadata.outputs.dependency-names == '@types/dinero.js' ||
+                  steps.metadata.outputs.dependency-names == '@types/dompurify' ||
+                  steps.metadata.outputs.dependency-names == '@types/gtag.js' ||
+                  steps.metadata.outputs.dependency-names == '@types/jest' ||
+                  steps.metadata.outputs.dependency-names == '@types/jest-environment-puppeteer' ||
+                  steps.metadata.outputs.dependency-names == '@types/jquery' ||
+                  steps.metadata.outputs.dependency-names == '@types/lodash' ||
+                  steps.metadata.outputs.dependency-names == '@types/puppeteer' ||
+                  steps.metadata.outputs.dependency-names == '@types/react' ||
+                  steps.metadata.outputs.dependency-names == '@types/react-dom' ||
+                  steps.metadata.outputs.dependency-names == '@types/wordpress__block-editor' ||
+                  steps.metadata.outputs.dependency-names == '@types/wordpress__blocks' ||
+                  steps.metadata.outputs.dependency-names == '@types/wordpress__data' ||
+                  steps.metadata.outputs.dependency-names == '@types/wordpress__data-controls' ||
+                  steps.metadata.outputs.dependency-names == '@types/wordpress__editor' ||
+                  steps.metadata.outputs.dependency-names == '@types/wordpress__notices' ||
+                  steps.metadata.outputs.dependency-names == '@typescript-eslint/eslint-plugin' ||
+                  steps.metadata.outputs.dependency-names == '@typescript-eslint/parser' ||
+                  steps.metadata.outputs.dependency-names == 'chalk' ||
+                  steps.metadata.outputs.dependency-names == 'circular-dependency-plugin' ||
+                  steps.metadata.outputs.dependency-names == 'commander' ||
+                  steps.metadata.outputs.dependency-names == 'copy-webpack-plugin' ||
+                  steps.metadata.outputs.dependency-names == 'eslint-import-resolver-typescript' ||
+                  steps.metadata.outputs.dependency-names == 'gh-pages' ||
+                  steps.metadata.outputs.dependency-names == 'markdown-it' ||
+                  steps.metadata.outputs.dependency-names == 'promptly' ||
+                  steps.metadata.outputs.dependency-names == 'react-docgen' ||
+                  steps.metadata.outputs.dependency-names == 'wp-types'
+              }}"
+
+              run: |
+                gh pr edit --add-label 'dependencies-auto-merged' "$PR_URL"
+                gh pr review --approve "$PR_URL"
+                gh pr merge --auto --squash "$PR_URL"
+              env:
+                  PR_URL: ${{github.event.pull_request.html_url}}
+                  GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

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

@@ -22,7 +22,15 @@ import Block from './block';
 import withProductSelector from '../shared/with-product-selector';
 import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
-const Edit = ( { attributes, setAttributes } ) => {
+interface EditProps {
+	attributes: {
+		className: string;
+		showFormElements: boolean;
+	};
+	setAttributes: ( attributes: { showFormElements: boolean } ) => void;
+}
+
+const Edit = ( { attributes, setAttributes }: EditProps ) => {
 	const { product } = useProductDataContext();
 	const { className, showFormElements } = attributes;
 

assets/js/atomic/blocks/product-elements/button/attributes.js → assets/js/atomic/blocks/product-elements/button/attributes.ts

@@ -1,4 +1,9 @@
-export const blockAttributes = {
+/**
+ * External dependencies
+ */
+import type { BlockAttributes } from '@wordpress/blocks';
+
+export const blockAttributes: BlockAttributes = {
 	productId: {
 		type: 'number',
 		default: 0,

assets/js/atomic/blocks/product-elements/button/block.js → assets/js/atomic/blocks/product-elements/button/block.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
@@ -27,59 +26,11 @@ import { withProductDataContext } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import './style.scss';
-
-/**
- * Product Button Block Component.
- *
- * @param {Object} props             Incoming props.
- * @param {string} [props.className] CSS Class name for the component.
- * @param {string} [props.textAlign] Text alignment.
- * @return {*} The component.
- */
-export const Block = ( props ) => {
-	const { className } = props;
-	const { parentClassName } = useInnerBlockLayoutContext();
-	const { product } = useProductDataContext();
-	const colorProps = useColorProps( props );
-	const borderProps = useBorderProps( props );
-	const typographyProps = useTypographyProps( props );
-	const spacingProps = useSpacingProps( props );
-	const { textAlign } = props;
-
-	return (
-		<div
-			className={ classnames(
-				className,
-				'wp-block-button',
-				'wc-block-components-product-button',
-				{
-					[ `${ parentClassName }__product-add-to-cart` ]:
-						parentClassName,
-				},
-				{
-					[ `has-text-align-${ textAlign }` ]: textAlign,
-				}
-			) }
-		>
-			{ product.id ? (
-				<AddToCartButton
-					product={ product }
-					colorStyles={ colorProps }
-					borderStyles={ borderProps }
-					typographyStyles={ typographyProps }
-					spacingStyles={ spacingProps }
-				/>
-			) : (
-				<AddToCartButtonPlaceholder
-					colorStyles={ colorProps }
-					borderStyles={ borderProps }
-					typographyStyles={ typographyProps }
-					spacingStyles={ spacingProps }
-				/>
-			) }
-		</div>
-	);
-};
+import type {
+	BlockAttributes,
+	AddToCartButtonAttributes,
+	AddToCartButtonPlaceholderAttributes,
+} from './types';
 
 /**
  * Product Button Block Component.
@@ -101,7 +52,7 @@ const AddToCartButton = ( {
 	typographyStyles,
 	spacingStyles,
 	textAlign,
-} ) => {
+}: AddToCartButtonAttributes ): JSX.Element => {
 	const {
 		id,
 		permalink,
@@ -111,10 +62,7 @@ const AddToCartButton = ( {
 		is_in_stock: isInStock,
 	} = product;
 	const { dispatchStoreEvent } = useStoreEvents();
-	const { cartQuantity, addingToCart, addToCart } = useStoreAddToCart(
-		id,
-		`woocommerce/single-product/${ id || 0 }`
-	);
+	const { cartQuantity, addingToCart, addToCart } = useStoreAddToCart( id );
 
 	const addedToCart = Number.isFinite( cartQuantity ) && cartQuantity > 0;
 	const allowAddToCart = ! hasOptions && isPurchasable && isInStock;
@@ -138,7 +86,7 @@ const AddToCartButton = ( {
 		  );
 
 	const ButtonTag = allowAddToCart ? 'button' : 'a';
-	const buttonProps = {};
+	const buttonProps = {} as HTMLAnchorElement & { onClick: () => void };
 
 	if ( ! allowAddToCart ) {
 		buttonProps.href = permalink;
@@ -156,7 +104,8 @@ const AddToCartButton = ( {
 			} );
 			// redirect to cart if the setting to redirect to the cart page
 			// on cart add item is enabled
-			const { cartRedirectAfterAdd } = getSetting( 'productsSettings' );
+			const { cartRedirectAfterAdd }: { cartRedirectAfterAdd: boolean } =
+				getSetting( 'productsSettings' );
 			if ( cartRedirectAfterAdd ) {
 				window.location.href = CART_URL;
 			}
@@ -211,7 +160,7 @@ const AddToCartButtonPlaceholder = ( {
 	borderStyles,
 	typographyStyles,
 	spacingStyles,
-} ) => {
+}: AddToCartButtonPlaceholderAttributes ): JSX.Element => {
 	return (
 		<button
 			className={ classnames(
@@ -234,8 +183,56 @@ const AddToCartButtonPlaceholder = ( {
 	);
 };
 
-Block.propTypes = {
-	className: PropTypes.string,
+/**
+ * Product Button Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @param {string} [props.textAlign] Text alignment.
+ * @return {*} The component.
+ */
+export const Block = ( props: BlockAttributes ): JSX.Element => {
+	const { className, textAlign } = props;
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const colorProps = useColorProps( props );
+	const borderProps = useBorderProps( props );
+	const typographyProps = useTypographyProps( props );
+	const spacingProps = useSpacingProps( props );
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wp-block-button',
+				'wc-block-components-product-button',
+				{
+					[ `${ parentClassName }__product-add-to-cart` ]:
+						parentClassName,
+				},
+				{
+					[ `has-text-align-${ textAlign }` ]: textAlign,
+				}
+			) }
+		>
+			{ product.id ? (
+				<AddToCartButton
+					product={ product }
+					colorStyles={ colorProps }
+					borderStyles={ borderProps }
+					typographyStyles={ typographyProps }
+					spacingStyles={ spacingProps }
+				/>
+			) : (
+				<AddToCartButtonPlaceholder
+					colorStyles={ colorProps }
+					borderStyles={ borderProps }
+					typographyStyles={ typographyProps }
+					spacingStyles={ spacingProps }
+				/>
+			) }
+		</div>
+	);
 };
 
 export default withProductDataContext( Block );

assets/js/atomic/blocks/product-elements/button/constants.js → assets/js/atomic/blocks/product-elements/button/constants.tsx

@@ -4,14 +4,14 @@
 import { __ } from '@wordpress/i18n';
 import { Icon, button } from '@wordpress/icons';
 
-export const BLOCK_TITLE = __(
+export const BLOCK_TITLE: string = __(
 	'Add to Cart Button',
 	'woo-gutenberg-products-block'
 );
-export const BLOCK_ICON = (
+export const BLOCK_ICON: JSX.Element = (
 	<Icon icon={ button } className="wc-block-editor-components-block-icon" />
 );
-export const BLOCK_DESCRIPTION = __(
+export const BLOCK_DESCRIPTION: string = __(
 	'Display a call to action button which either adds the product to the cart, or links to the product page.',
 	'woo-gutenberg-products-block'
 );