Merge branch 'trunk' into upkeep/9524

Author: Sidsector9

.github/workflows/unit-tests.yml

@@ -80,28 +80,38 @@ jobs:
       ##
       - name: Set up PHP
         uses: shivammathur/setup-php@v2
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         with:
           php-version: '${{ matrix.php }}'
           ini-file: development
           coverage: none
 
       # Ensure that Composer installs the correct versions of packages.
       - name: Override PHP version in composer.json
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           composer config platform.php ${{ matrix.php }}
           composer update
 
       - name: Install npm dependencies
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           npm ci
           npm run build
           
       - name: Docker debug information
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           docker -v
           docker-compose -v
           
       - name: General debug information
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           npm --version
           node --version
@@ -111,12 +121,18 @@ jobs:
           locale -a
           
       - name: Start Docker environment
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: npm run wp-env start --update
 
       - name: Log running Docker containers
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: docker ps -a
 
       - name: Docker container debug information
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: |
           npm run wp-env run tests-mysql mysql -- --version
           npm run wp-env run tests-wordpress "php --version"
@@ -125,4 +141,6 @@ jobs:
           npm run wp-env run tests-wordpress "locale -a"
           
       - name: Run PHPUnit tests
+        # 8.1 and 8.2 are temporarily disabled as docker-images for those cause the errors when pipeline is running
+        if: ${{ matrix.php == '7.4' || matrix.php == '8.0' }}
         run: npm run test:php

README.md

@@ -4,7 +4,8 @@
 [![View](https://img.shields.io/badge/Project%20Components-brightgreen.svg?style=flat)](https://woocommerce.github.io/woocommerce-blocks/)
 ![JavaScript and CSS Linting](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/JavaScript%20and%20CSS%20Linting/badge.svg?branch=trunk)
 ![PHP Coding Standards](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/PHP%20Coding%20Standards/badge.svg?branch=trunk)
-![Automated tests](https://github.com/woocommerce/woocommerce-gutenberg-products-block/workflows/Automated%20tests/badge.svg?branch=trunk)
+![Unit Tests](https://github.com/woocommerce/woocommerce-blocks/workflows/E2E%20tests/badge.svg?branch=trunk)
+![E2E Tests](https://github.com/woocommerce/woocommerce-blocks/workflows/Unit%20Tests/badge.svg?branch=trunk)
 
 This is the feature plugin for WooCommerce + Gutenberg. This plugin serves as a space to iterate and explore new Blocks and updates to existing blocks for WooCommerce, and how WooCommerce might work with the block editor.
 

assets/js/base/components/cart-checkout/totals/shipping/shipping-address.tsx

@@ -48,7 +48,7 @@ export const ShippingAddress = ( {
 			) : (
 				<ShippingLocation formattedLocation={ formattedLocation } />
 			) }
-			{ showCalculator && ! prefersCollection ? (
+			{ showCalculator && (
 				<CalculatorButton
 					label={ __(
 						'Change address',
@@ -57,7 +57,7 @@ export const ShippingAddress = ( {
 					isShippingCalculatorOpen={ isShippingCalculatorOpen }
 					setIsShippingCalculatorOpen={ setIsShippingCalculatorOpen }
 				/>
-			) : null }
+			) }
 		</>
 	);
 };

assets/js/blocks/active-filters/block.tsx

@@ -6,7 +6,6 @@ import { useQueryStateByKey } from '@woocommerce/base-context/hooks';
 import { getSetting, getSettingWithCoercion } from '@woocommerce/settings';
 import { useMemo, useEffect, useState } from '@wordpress/element';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 import Label from '@woocommerce/base-components/label';
 import {
 	isAttributeQueryCollection,
@@ -18,6 +17,7 @@ import {
 import { getUrlParameter } from '@woocommerce/utils';
 import FilterTitlePlaceholder from '@woocommerce/base-components/filter-placeholder';
 import { useIsMounted } from '@woocommerce/base-hooks';
+import type { BlockAttributes } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -34,23 +34,26 @@ import {
 } from './utils';
 import ActiveAttributeFilters from './active-attribute-filters';
 import FilterPlaceholders from './filter-placeholders';
-import { Attributes } from './types';
 import { useSetWraperVisibility } from '../filter-wrapper/context';
 
+interface ActiveFiltersBlockProps {
+	/**
+	 * The attributes for this block.
+	 */
+	attributes: BlockAttributes;
+	/**
+	 * Whether it's in the editor or frontend display.
+	 */
+	isEditor: boolean;
+}
+
 /**
  * Component displaying active filters.
- *
- * @param {Object}  props            Incoming props for the component.
- * @param {Object}  props.attributes Incoming attributes for the block.
- * @param {boolean} props.isEditor   Whether or not in the editor context.
  */
 const ActiveFiltersBlock = ( {
 	attributes: blockAttributes,
 	isEditor = false,
-}: {
-	attributes: Attributes;
-	isEditor?: boolean;
-} ) => {
+}: ActiveFiltersBlockProps ) => {
 	const setWrapperVisibility = useSetWraperVisibility();
 	const isMounted = useIsMounted();
 	const componentHasMounted = isMounted();
@@ -413,15 +416,4 @@ const ActiveFiltersBlock = ( {
 	);
 };
 
-ActiveFiltersBlock.propTypes = {
-	/**
-	 * The attributes for this block.
-	 */
-	attributes: PropTypes.object.isRequired,
-	/**
-	 * Whether it's in the editor or frontend display.
-	 */
-	isEditor: PropTypes.bool,
-};
-
 export default ActiveFiltersBlock;

assets/js/blocks/reviews/reviews-by-product/edit.js renamed to assets/js/blocks/reviews/reviews-by-product/edit.tsx

@@ -10,9 +10,8 @@ import {
 	withSpokenMessages,
 } from '@wordpress/components';
 import { SearchListItem } from '@woocommerce/editor-components/search-list-control';
-import PropTypes from 'prop-types';
 import ProductControl from '@woocommerce/editor-components/product-control';
-import { Icon, commentContent } from '@wordpress/icons';
+import { commentContent, Icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -24,20 +23,13 @@ import {
 	getSharedReviewContentControls,
 	getSharedReviewListControls,
 } from '../edit-utils.js';
+import { ReviewsByProductEditorProps } from './types';
 
-/**
- * Component to handle edit mode of "Reviews by Product".
- *
- * @param {Object}            props                Incoming props for the component.
- * @param {Object}            props.attributes     Incoming block attributes.
- * @param {function(any):any} props.debouncedSpeak
- * @param {function(any):any} props.setAttributes  Setter for block attributes.
- */
 const ReviewsByProductEditor = ( {
 	attributes,
 	debouncedSpeak,
 	setAttributes,
-} ) => {
+}: ReviewsByProductEditorProps ) => {
 	const { editMode, productId } = attributes;
 
 	const renderProductControlItem = ( args ) => {
@@ -189,21 +181,4 @@ const ReviewsByProductEditor = ( {
 	);
 };
 
-ReviewsByProductEditor.propTypes = {
-	/**
-	 * The attributes for this block.
-	 */
-	attributes: PropTypes.object.isRequired,
-	/**
-	 * The register block name.
-	 */
-	name: PropTypes.string.isRequired,
-	/**
-	 * A callback to update attributes.
-	 */
-	setAttributes: PropTypes.func.isRequired,
-	// from withSpokenMessages
-	debouncedSpeak: PropTypes.func.isRequired,
-};
-
 export default withSpokenMessages( ReviewsByProductEditor );

assets/js/blocks/reviews/reviews-by-product/types.ts

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { BlockEditProps } from '@wordpress/blocks';
+
+interface ReviewByProductAttributes {
+	editMode: boolean;
+	productId: number;
+}
+
+export interface ReviewsByProductEditorProps
+	extends BlockEditProps< ReviewByProductAttributes > {
+	attributes: ReviewByProductAttributes;
+	debouncedSpeak: ( message: string ) => void;
+}

assets/js/editor-components/grid-layout-control/index.js renamed to assets/js/editor-components/grid-layout-control/index.tsx

@@ -2,10 +2,13 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import PropTypes from 'prop-types';
 import { RangeControl, ToggleControl } from '@wordpress/components';
 
-const clamp = ( number, boundOne, boundTwo ) => {
+interface ClampProps {
+	( number: number, boundOne: number, boundTwo?: number ): number;
+}
+
+const clamp: ClampProps = ( number, boundOne, boundTwo ) => {
 	if ( ! boundTwo ) {
 		return Math.max( number, boundOne ) === boundOne ? number : boundOne;
 	} else if ( Math.min( number, boundOne ) === number ) {
@@ -16,6 +19,17 @@ const clamp = ( number, boundOne, boundTwo ) => {
 	return number;
 };
 
+interface GridLayoutControlProps {
+	columns: number;
+	rows: number;
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+	alignButtons: boolean;
+	minColumns?: number;
+	maxColumns?: number;
+	minRows?: number;
+	maxRows?: number;
+}
+
 /**
  * A combination of range controls for product grid layout settings.
  *
@@ -38,13 +52,13 @@ const GridLayoutControl = ( {
 	maxColumns = 6,
 	minRows = 1,
 	maxRows = 6,
-} ) => {
+}: GridLayoutControlProps ) => {
 	return (
 		<>
 			<RangeControl
 				label={ __( 'Columns', 'woo-gutenberg-products-block' ) }
 				value={ columns }
-				onChange={ ( value ) => {
+				onChange={ ( value: number ) => {
 					const newValue = clamp( value, minColumns, maxColumns );
 					setAttributes( {
 						columns: Number.isNaN( newValue ) ? '' : newValue,
@@ -56,7 +70,7 @@ const GridLayoutControl = ( {
 			<RangeControl
 				label={ __( 'Rows', 'woo-gutenberg-products-block' ) }
 				value={ rows }
-				onChange={ ( value ) => {
+				onChange={ ( value: number ) => {
 					const newValue = clamp( value, minRows, maxRows );
 					setAttributes( {
 						rows: Number.isNaN( newValue ) ? '' : newValue,
@@ -90,22 +104,4 @@ const GridLayoutControl = ( {
 	);
 };
 
-GridLayoutControl.propTypes = {
-	// The current columns count.
-	columns: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] )
-		.isRequired,
-	// The current rows count.
-	rows: PropTypes.oneOfType( [ PropTypes.number, PropTypes.string ] )
-		.isRequired,
-	// Whether or not buttons are aligned horizontally across items.
-	alignButtons: PropTypes.bool.isRequired,
-	// Callback to update the layout settings.
-	setAttributes: PropTypes.func.isRequired,
-	// Min and max constraints.
-	minColumns: PropTypes.number,
-	maxColumns: PropTypes.number,
-	minRows: PropTypes.number,
-	maxRows: PropTypes.number,
-};
-
 export default GridLayoutControl;

assets/js/icons/library/mini-cart-alt.tsx

@@ -4,32 +4,17 @@
 import { SVG } from '@wordpress/primitives';
 
 const miniCartAlt = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<defs>
-			<mask
-				id="mask"
-				x="0"
-				y="0"
-				width="24.01"
-				height="24"
-				maskUnits="userSpaceOnUse"
-			>
-				<g
-					id="path-1-inside-1_928_1005"
-					data-name="path-1-inside-1 928 1005"
-				>
-					<path
-						d="M2,2V4H4l3.6,7.6L6.3,14A2,2,0,0,0,8,17H20V15H8l1.1-2h7.5a1.9,1.9,0,0,0,1.7-1l3.6-6.5A1,1,0,0,0,21,4H6.2L5.3,2ZM8,18a2,2,0,1,0,2,2A2,2,0,0,0,8,18Zm8,2a2,2,0,1,1,2,2A2,2,0,0,1,16,20Z"
-						fill="#fff"
-						fillRule="evenodd"
-					/>
-				</g>
-			</mask>
-		</defs>
-		<g mask="url(#mask)">
-			<path d="M2,4H0V6H2ZM2,2V0H0V2ZM4,4l1.8-.9L5.3,2H4Zm3.6,7.6,1.7,1,.5-.9-.4-1ZM6.3,14l-1.8-.9h0ZM20,17v2h2V17Zm0-2h2V13H20ZM8,15,6.2,14,4.6,17H8Zm1.1-2V11H7.9l-.6,1Zm9.2-1-1.8-1h0Zm3.6-6.5-1.8-1h0ZM6.2,4l-1.8.9L4.9,6H6.2ZM5.3,2l1.8-.9L6.5,0H5.3ZM4,4V2H0V4ZM4,2H2V6H4Zm5.4,8.7L5.8,3.1,2.2,4.9l3.6,7.5ZM8,15l1.3-2.4-3.5-2L4.5,13.1Zm0,0H8L4.5,13.1A4,4,0,0,0,8,19Zm12,0H8v4H20Zm-2,0v2h4V15ZM8,17H20V13H8Zm-.7-5L6.2,14l3.6,2,1.1-2Zm9.3-1H9.1v4h7.5Zm-.1,0h.1v4a4,4,0,0,0,3.5-2.1Zm3.6-6.5L16.5,11l3.6,1.9,3.5-6.5ZM21,6a1,1,0,0,1-.9-1.5l3.5,2A3,3,0,0,0,21,2ZM6.2,6H21V2H6.2ZM3.5,2.9l.9,2L8,3.1l-.9-2ZM2,4H5.3V0H2ZM8,20H8V16a4,4,0,0,0-4,4Zm0,0H4a4,4,0,0,0,4,4Zm0,0v4a4,4,0,0,0,4-4Zm0,0h4a4,4,0,0,0-4-4Zm10-4a4,4,0,0,0-4,4h4Zm4,4a4,4,0,0,0-4-4v4Zm-4,4a4,4,0,0,0,4-4H18Zm-4-4a4,4,0,0,0,4,4V20H14Z" />
-		</g>
-		<circle cx="20.2" cy="4.7" r="3.8" />
+	<SVG
+		viewBox="0 0 24 24"
+		version="1.1"
+		id="svg713"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<defs id="defs705" />
+		<path
+			id="path882"
+			d="m 19.199219,1.4501954 a 3.8,3.8 0 0 0 -3.72461,3.0996093 H 5.1992188 l -0.8984376,-2 H 1 v 2 h 2 l 3.5996094,7.5996093 -1.2988282,2.400391 a 2,2 0 0 0 1.6992188,3 h 12 v -2 H 7 l 1.0996094,-2 h 7.4999996 a 1.9,1.9 0 0 0 1.701172,-1 L 19.240234,9.0458985 A 3.8,3.8 0 0 0 23,5.2490235 3.8,3.8 0 0 0 19.199219,1.4501954 Z M 6.1757812,6.5087891 h 9.4433598 c 0.02007,0.055814 0.0433,0.1034655 0.06445,0.15625 a 3.8,3.8 0 0 0 0.08398,0.2050781 c 0.07333,0.1598062 0.153258,0.3011377 0.236328,0.4335937 0.194879,0.3107365 0.413084,0.5552137 0.646485,0.7578126 a 3.8,3.8 0 0 0 0.324218,0.2558593 3.8,3.8 0 0 0 0.228516,0.1601563 l -1.71093,3.0722659 H 8.5175781 Z M 7,18.549805 a 2,2 0 1 0 2,2 2,2 0 0 0 -2,-2 z m 10,0 a 2,2 0 0 0 -2,2 2,2 0 0 0 2,2 2,2 0 0 0 0.617188,-3.902344 A 2,2 0 0 0 17,18.549805 Z"
+		/>
 	</SVG>
 );