Merge branch 'trunk' into release/7.9.0

Author: senadir

.github/patch-initial-checklist.md

@@ -18,8 +18,8 @@ The release pull request has been created! This checklist is a guide to follow f
 * [ ] Run `npm run package-plugin:deploy`. This will create a zip of the current branch build locally.
 * [ ] Create the testing notes for the release. 
   * [ ] For each pull request that belongs to the current release, grab the `User Facing Testing` notes from the PR's description. Be sure that the `Do not include in the Testing Notes is not flagged` checkbox is unchecked.
-  * [ ] Add the notes to `docs/testing/releases`
-  * [ ] Update the `docs/testing/releases/README.md` file index.
+  * [ ] Add the notes to `docs/internal-developers/testing/releases`
+  * [ ] Update the `docs/internal-developers/testing/releases/README.md` file index.
 * [ ] Copy a link to the release zip you created earlier into the testing notes. To generate the link you can upload the zip as an attachment in a GitHub comment and then just copy the path (without publishing the comment).
 * [ ] Commit and push the testing docs to the release branch.
 * [ ] Smoke test built release zip using the testing instructions you created:
@@ -76,7 +76,7 @@ This only needs done if the patch release needs to be included in WooCommerce Co
   - The content for the pull release can follow [this example](https://github.com/woocommerce/woocommerce/pull/27676). Essentially you link to all the important things that have already been prepared. Note, you need to make sure you link to all the related documents for the feature plugin releases since the last package version bump in Woo Core.
       - The PR's changelog should be aggregated from all the releases included in the package bump. This changelog will be used in the release notes for the WooCommerce release. That's why it should only list the PRs that have WooCoomerce Core in the WooCommerce Visibility section of their description. Don't include changes available in the feature plugin or development builds.
   - Run through the testing checklist to ensure everything works in that branch for that package bump. **Note:** Testing should include ensuring any features/new blocks that are supposed to be behind feature gating for the core merge of this package update are working as expected.
-  - Testing should include completing the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
+  - Testing should include completing the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/internal-developers/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
   - Verify and make any additional edits to the pull request description for things like: Changelog to be included with WooCommerce core, additional communication that might be needed elsewhere, additional marketing communication notes that may be needed etc.
   - After the checklist is complete and the testing is done, it will be up to the WooCommerce core team to approve and merge the pull request.
 * [ ] Make sure you join the `#woo-core-releases` Slack channel to represent Woo Blocks for the release of WooCommerce core this version is included in.

.github/release-initial-checklist.md

@@ -24,8 +24,8 @@ The release pull request has been created! This checklist is a guide to follow f
   *  Note: The zip file is functionally equivalent to what gets released except the version bump.
 * [ ] Create the testing notes for the release. 
   * [ ] For each pull request that belongs to the current release, grab the `User Facing Testing` notes from the PR's description. Be sure that the `Do not include in the Testing Notes is not flagged` checkbox is unchecked.
-  * [ ] Add the notes to `docs/testing/releases`
-  * [ ] Update the `docs/testing/releases/README.md` file index.
+  * [ ] Add the notes to `docs/internal-developers/testing/releases`
+  * [ ] Update the `docs/internal-developers/testing/releases/README.md` file index.
 * [ ] Copy a link to the release zip you created earlier into the testing notes. To generate the link you can upload the zip as an attachment in a GitHub comment and then just copy the path (without publishing the comment).
 * [ ] Commit and push the testing docs to the release branch.
 * [ ] Smoke test built release zip using the testing instructions you created:
@@ -109,7 +109,7 @@ This only needs to be done if this release is the last release of the feature pl
       Woo Blocks 7.3.0 & 7.4.0
       ```
   * Run through the testing checklist to ensure everything works in that branch for that package bump. **Note:** Testing should include ensuring any features/new blocks that are supposed to be behind feature gating for the core merge of this package update are working as expected.
-  * Testing should include completing the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
+  * Testing should include completing the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/internal-developers/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
   * Verify and make any additional edits to the pull request description for things like: Changelog to be included with WooCommerce core, additional communication that might be needed elsewhere, additional marketing communication notes that may be needed etc.
   * After the checklist is complete and the testing is done, it will be up to the WooCommerce core team to approve and merge the pull request.
 * [ ] Make sure you join the `#woo-core-releases` Slack channel to represent Woo Blocks for the release of WooCommerce core this version is included in.

.vscode/extensions.json

@@ -10,6 +10,7 @@
 		"neilbrayfield.php-docblocker",
 		"valeryanm.vscode-phpsab",
 		"editorconfig.editorconfig",
-		"stylelint.vscode-stylelint"
+		"stylelint.vscode-stylelint",
+		"DavidAnson.vscode-markdownlint"
 	]
 }

README.md

@@ -33,7 +33,7 @@ If you want to see what we're working on for future versions, or want to help ou
 -   [Blocks](./assets/js/blocks) - Documentation for specific Blocks.
 -   [Editor Components](assets/js/editor-components) - Shared components used in WooCommerce blocks for the editor (Gutenberg) UI.
 -   [WooCommerce Blocks Handbook](./docs) - Documentation for designers and developers on how to extend or contribute to blocks, and how internal developers should handle new releases.
--   [WooCommerce Blocks Storybook](https://woocommerce.github.io/woocommerce-gutenberg-products-block/) - Contains a list and demo of components used in the plugin.
+-   [WooCommerce Blocks Storybook](https://woocommerce.github.io/woocommerce-blocks/) - Contains a list and demo of components used in the plugin.
 
 ## Installing the plugin version
 

assets/js/base/components/chip/chip.tsx

@@ -12,7 +12,7 @@ export interface ChipProps {
 	/**
 	 * Text for chip content.
 	 */
-	text: string;
+	text: string | JSX.Element;
 	/**
 	 * Screenreader text for the content.
 	 */

…tive-filters/active-attribute-filters.js …ive-filters/active-attribute-filters.tsxassets/js/blocks/active-filters/active-attribute-filters.js renamed to assets/js/blocks/active-filters/active-attribute-filters.tsx assets/js/blocks/active-filters/active-attribute-filters.js renamed to assets/js/blocks/active-filters/active-attribute-filters.tsx

@@ -8,14 +8,26 @@ import {
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 import { getSettingWithCoercion } from '@woocommerce/settings';
-import { isBoolean } from '@woocommerce/types';
+import {
+	AttributeObject,
+	isAttributeQueryCollection,
+	isAttributeTermCollection,
+	isBoolean,
+} from '@woocommerce/types';
 
 /**
  * Internal dependencies
  */
 import { renderRemovableListItem, removeArgsFromFilterUrl } from './utils';
 import { removeAttributeFilterBySlug } from '../../utils/attributes-query';
 
+interface ActiveAttributeFiltersProps {
+	displayStyle: string;
+	operator: 'and' | 'in';
+	slugs: string[];
+	attributeObject: AttributeObject;
+}
+
 /**
  * Component that renders active attribute (terms) filters.
  *
@@ -26,11 +38,11 @@ import { removeAttributeFilterBySlug } from '../../utils/attributes-query';
  * @param {string} props.displayStyle    The style used for displaying the filters.
  */
 const ActiveAttributeFilters = ( {
-	attributeObject = {},
+	attributeObject,
 	slugs = [],
 	operator = 'in',
 	displayStyle,
-} ) => {
+}: ActiveAttributeFiltersProps ) => {
 	const { results, isLoading } = useCollection( {
 		namespace: '/wc/store/v1',
 		resourceName: 'products/attributes/terms',
@@ -42,7 +54,12 @@ const ActiveAttributeFilters = ( {
 		[]
 	);
 
-	if ( isLoading ) {
+	if (
+		isLoading ||
+		! Array.isArray( results ) ||
+		! isAttributeTermCollection( results ) ||
+		! isAttributeQueryCollection( productAttributes )
+	) {
 		return null;
 	}
 
@@ -69,7 +86,7 @@ const ActiveAttributeFilters = ( {
 						return null;
 					}
 
-					let prefix = '';
+					let prefix: string | JSX.Element = '';
 
 					if ( index > 0 && operator === 'and' ) {
 						prefix = (
@@ -92,7 +109,7 @@ const ActiveAttributeFilters = ( {
 								);
 
 								// If only one attribute was selected, we remove both filter and query type from the URL.
-								if ( currentAttribute.slug.length === 1 ) {
+								if ( currentAttribute?.slug.length === 1 ) {
 									return removeArgsFromFilterUrl(
 										`query_type_${ attributeObject.name }`,
 										`filter_${ attributeObject.name }`

assets/js/blocks/active-filters/attributes.ts

@@ -0,0 +1,11 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const blockAttributes = {
+	heading: {
+		type: 'string',
+		default: __( 'Active filters', 'woo-gutenberg-products-block' ),
+	},
+};

assets/js/blocks/active-filters/block.js assets/js/blocks/active-filters/block.tsxassets/js/blocks/active-filters/block.js renamed to assets/js/blocks/active-filters/block.tsx

@@ -8,7 +8,13 @@ import { useMemo, useEffect } from '@wordpress/element';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import Label from '@woocommerce/base-components/label';
-import { isBoolean } from '@woocommerce/types';
+import {
+	isAttributeQueryCollection,
+	isBoolean,
+	isRatingQueryCollection,
+	isStockStatusQueryCollection,
+	isStockStatusOptions,
+} from '@woocommerce/types';
 import { getUrlParameter } from '@woocommerce/utils';
 
 /**
@@ -23,6 +29,7 @@ import {
 	cleanFilterUrl,
 } from './utils';
 import ActiveAttributeFilters from './active-attribute-filters';
+import { Attributes } from './types';
 
 /**
  * Component displaying active filters.
@@ -34,6 +41,9 @@ import ActiveAttributeFilters from './active-attribute-filters';
 const ActiveFiltersBlock = ( {
 	attributes: blockAttributes,
 	isEditor = false,
+}: {
+	attributes: Attributes;
+	isEditor?: boolean;
 } ) => {
 	const filteringForPhpTemplate = getSettingWithCoercion(
 		'is_rendering_php_template',
@@ -53,28 +63,34 @@ const ActiveFiltersBlock = ( {
 
 	const STOCK_STATUS_OPTIONS = getSetting( 'stockStatusOptions', [] );
 	const activeStockStatusFilters = useMemo( () => {
-		if ( productStockStatus.length > 0 ) {
-			return productStockStatus.map( ( slug ) => {
-				return renderRemovableListItem( {
-					type: __( 'Stock Status', 'woo-gutenberg-products-block' ),
-					name: STOCK_STATUS_OPTIONS[ slug ],
-					removeCallback: () => {
-						if ( filteringForPhpTemplate ) {
-							return removeArgsFromFilterUrl( {
-								filter_stock_status: slug,
-							} );
+		if (
+			productStockStatus.length === 0 ||
+			! isStockStatusQueryCollection( productStockStatus ) ||
+			! isStockStatusOptions( STOCK_STATUS_OPTIONS )
+		) {
+			return null;
+		}
+
+		return productStockStatus.map( ( slug ) => {
+			return renderRemovableListItem( {
+				type: __( 'Stock Status', 'woo-gutenberg-products-block' ),
+				name: STOCK_STATUS_OPTIONS[ slug ],
+				removeCallback: () => {
+					if ( filteringForPhpTemplate ) {
+						return removeArgsFromFilterUrl( {
+							filter_stock_status: slug,
+						} );
+					}
+					const newStatuses = productStockStatus.filter(
+						( status ) => {
+							return status !== slug;
 						}
-						const newStatuses = productStockStatus.filter(
-							( status ) => {
-								return status !== slug;
-							}
-						);
-						setProductStockStatus( newStatuses );
-					},
-					displayStyle: blockAttributes.displayStyle,
-				} );
+					);
+					setProductStockStatus( newStatuses );
+				},
+				displayStyle: blockAttributes.displayStyle,
 			} );
-		}
+		} );
 	}, [
 		STOCK_STATUS_OPTIONS,
 		productStockStatus,
@@ -109,10 +125,19 @@ const ActiveFiltersBlock = ( {
 	] );
 
 	const activeAttributeFilters = useMemo( () => {
+		if ( ! isAttributeQueryCollection( productAttributes ) ) {
+			return null;
+		}
+
 		return productAttributes.map( ( attribute ) => {
 			const attributeObject = getAttributeFromTaxonomy(
 				attribute.attribute
 			);
+
+			if ( ! attributeObject ) {
+				return null;
+			}
+
 			return (
 				<ActiveAttributeFilters
 					attributeObject={ attributeObject }
@@ -151,35 +176,35 @@ const ActiveFiltersBlock = ( {
 	}, [ filteringForPhpTemplate, productRatings, setProductRatings ] );
 
 	const activeRatingFilters = useMemo( () => {
-		if ( productRatings.length > 0 ) {
-			return productRatings.map( ( slug ) => {
-				return renderRemovableListItem( {
-					type: __( 'Rating', 'woo-gutenberg-products-block' ),
-					name: sprintf(
-						/* translators: %s is referring to the average rating value */
-						__(
-							'Rated %s out of 5',
-							'woo-gutenberg-products-block'
-						),
-						slug
-					),
-					removeCallback: () => {
-						if ( filteringForPhpTemplate ) {
-							return removeArgsFromFilterUrl( {
-								rating_filter: slug,
-							} );
-						}
-						const newRatings = productRatings.filter(
-							( rating ) => {
-								return rating !== slug;
-							}
-						);
-						setProductRatings( newRatings );
-					},
-					displayStyle: blockAttributes.displayStyle,
-				} );
-			} );
+		if (
+			productRatings.length === 0 ||
+			! isRatingQueryCollection( productRatings )
+		) {
+			return null;
 		}
+
+		return productRatings.map( ( slug ) => {
+			return renderRemovableListItem( {
+				type: __( 'Rating', 'woo-gutenberg-products-block' ),
+				name: sprintf(
+					/* translators: %s is referring to the average rating value */
+					__( 'Rated %s out of 5', 'woo-gutenberg-products-block' ),
+					slug
+				),
+				removeCallback: () => {
+					if ( filteringForPhpTemplate ) {
+						return removeArgsFromFilterUrl( {
+							rating_filter: slug,
+						} );
+					}
+					const newRatings = productRatings.filter( ( rating ) => {
+						return rating !== slug;
+					} );
+					setProductRatings( newRatings );
+				},
+				displayStyle: blockAttributes.displayStyle,
+			} );
+		} );
 	}, [
 		productRatings,
 		setProductRatings,
@@ -201,7 +226,8 @@ const ActiveFiltersBlock = ( {
 		return null;
 	}
 
-	const TagName = `h${ blockAttributes.headingLevel }`;
+	const TagName =
+		`h${ blockAttributes.headingLevel }` as keyof JSX.IntrinsicElements;
 	const hasFilterableProducts = getSettingWithCoercion(
 		'has_filterable_products',
 		false,

assets/js/blocks/active-filters/edit.js assets/js/blocks/active-filters/edit.tsxassets/js/blocks/active-filters/edit.js renamed to assets/js/blocks/active-filters/edit.tsx

@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
 import BlockTitle from '@woocommerce/editor-components/block-title';
+import type { BlockEditProps } from '@wordpress/blocks';
 import {
 	Disabled,
 	PanelBody,
@@ -18,9 +19,13 @@ import {
 /**
  * Internal dependencies
  */
-import Block from './block.js';
+import Block from './block';
+import type { Attributes } from './types';
 
-const Edit = ( { attributes, setAttributes } ) => {
+const Edit = ( {
+	attributes,
+	setAttributes,
+}: BlockEditProps< Attributes > ) => {
 	const { className, displayStyle, heading, headingLevel } = attributes;
 
 	const blockProps = useBlockProps( {
@@ -42,7 +47,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 							'woo-gutenberg-products-block'
 						) }
 						value={ displayStyle }
-						onChange={ ( value ) =>
+						onChange={ ( value: Attributes[ 'displayStyle' ] ) =>
 							setAttributes( {
 								displayStyle: value,
 							} )
@@ -74,7 +79,7 @@ const Edit = ( { attributes, setAttributes } ) => {
 						minLevel={ 2 }
 						maxLevel={ 7 }
 						selectedLevel={ headingLevel }
-						onChange={ ( newLevel ) =>
+						onChange={ ( newLevel: Attributes[ 'headingLevel' ] ) =>
 							setAttributes( { headingLevel: newLevel } )
 						}
 					/>
@@ -90,7 +95,9 @@ const Edit = ( { attributes, setAttributes } ) => {
 				className="wc-block-active-filters__title"
 				headingLevel={ headingLevel }
 				heading={ heading }
-				onChange={ ( value ) => setAttributes( { heading: value } ) }
+				onChange={ ( value: Attributes[ 'heading' ] ) =>
+					setAttributes( { heading: value } )
+				}
 			/>
 			<Disabled>
 				<Block attributes={ attributes } isEditor={ true } />