Merge branch 'trunk' into update/interactivity-api-store-ssr

.github/workflows/check-doc-links-config.json

@@ -0,0 +1,20 @@
+{
+	"httpHeaders": [
+		{
+			"urls": [
+				"https://github.com/",
+				"https://guides.github.com/",
+				"https://help.github.com/",
+				"https://docs.github.com/"
+			],
+			"headers": {
+				"Accept-Encoding": "zstd, br, gzip, deflate"
+			}
+		}
+	],
+	"ignorePatterns": [
+		{
+		"pattern": "^http://localhost"
+		}
+	]
+}

.github/workflows/check-doc-links.yml

@@ -0,0 +1,28 @@
+name: Check Markdown links
+
+on:
+    workflow_dispatch:
+    pull_request:
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.ref }}
+    cancel-in-progress: true
+
+permissions: {}
+
+jobs:
+    markdown-link-check:
+        runs-on: ubuntu-latest
+        permissions:
+            contents: read
+        steps:
+            - uses: actions/checkout@v3
+            - uses: gaurav-nelson/github-action-markdown-link-check@v1
+              with:
+                  use-quiet-mode: 'yes'
+                  use-verbose-mode: 'no'
+                  config-file: '.github/workflows/check-doc-links-config.json'
+                  folder-path: './docs'
+                  file-path: './README.md'
+                  max-depth: 3
+                  base-branch: 'trunk'

assets/js/atomic/blocks/index.js

@@ -13,5 +13,7 @@ import './product-elements/category-list';
 import './product-elements/tag-list';
 import './product-elements/stock-indicator';
 import './product-elements/add-to-cart';
+import './product-elements/add-to-cart-form';
 import './product-elements/product-image-gallery';
 import './product-elements/product-details';
+import './product-elements/related-products';

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

@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { Icon, button } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+registerBlockSingleProductTemplate( {
+	registerBlockFn: () => {
+		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
+		registerBlockType( metadata, {
+			icon: {
+				src: (
+					<Icon
+						icon={ button }
+						className="wc-block-editor-components-block-icon"
+					/>
+				),
+			},
+			edit,
+			save() {
+				return null;
+			},
+		} );
+	},
+	unregisterBlockFn: () => {
+		unregisterBlockType( metadata.name );
+	},
+	blockName: metadata.name,
+} );

assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss

@@ -0,0 +1,6 @@
+.wp-block-add-to-cart-form {
+	.woocommerce-Price-amount.amount,
+	.woocommerce-grouped-product-list-item__price del {
+		font-size: var(--wp--preset--font-size--large);
+	}
+}

assets/js/atomic/blocks/product-elements/price/attributes.ts

@@ -14,7 +14,7 @@ export const blockAttributes: BlockAttributes = {
 	},
 	textAlign: {
 		type: 'string',
-		default: 'center',
+		default: '',
 	},
 };
 

assets/js/atomic/blocks/product-elements/rating/attributes.ts

@@ -14,7 +14,7 @@ export const blockAttributes: BlockAttributes = {
 	},
 	textAlign: {
 		type: 'string',
-		default: 'center',
+		default: '',
 	},
 };
 

assets/js/atomic/blocks/product-elements/related-products/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/related-products",
+	"version": "1.0.0",
+	"title": "Related Products",
+	"icon": "product",
+	"description": "Display related products.",
+	"category": "woocommerce",
+	"supports": {
+		"align": true,
+		"reusable": false
+	},
+	"keywords": [ "WooCommerce" ],
+	"usesContext": [ "postId", "postType", "queryId" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2,
+	"$schema": "https://schemas.wp.org/trunk/block.json"
+}

assets/js/atomic/blocks/product-elements/related-products/edit.tsx

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import {
+	BLOCK_ATTRIBUTES,
+	INNER_BLOCKS_TEMPLATE,
+} from '@woocommerce/blocks/product-query/variations';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlockTemplate } from '@wordpress/blocks';
+import { Disabled, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const Edit = () => {
+	const TEMPLATE: InnerBlockTemplate[] = [
+		[ 'core/query', BLOCK_ATTRIBUTES, INNER_BLOCKS_TEMPLATE ],
+	];
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Disabled>
+				<Notice
+					className={ 'wc-block-editor-related-products__notice' }
+					status={ 'warning' }
+					isDismissible={ false }
+				>
+					<p>
+						{ __(
+							'These products will vary depending on the main product in the page',
+							'woo-gutenberg-products-block'
+						) }
+					</p>
+				</Notice>
+			</Disabled>
+			<InnerBlocks template={ TEMPLATE } />
+		</div>
+	);
+};
+
+export default Edit;

assets/js/atomic/blocks/product-elements/related-products/editor.scss

@@ -0,0 +1,4 @@
+.wc-block-editor-related-products__notice {
+	margin: 10px auto;
+	max-width: max-content;
+}

assets/js/atomic/blocks/product-elements/related-products/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { box as icon } from '@wordpress/icons';
+import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
+import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+registerBlockSingleProductTemplate( {
+	registerBlockFn: () => {
+		// @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
+		registerBlockType( metadata, {
+			icon,
+			edit,
+			save,
+		} );
+	},
+	unregisterBlockFn: () => {
+		unregisterBlockType( metadata.name );
+	},
+	blockName: metadata.name,
+} );

assets/js/atomic/blocks/product-elements/related-products/save.tsx

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const Save = () => {
+	const blockProps = useBlockProps.save();
+
+	return (
+		<div { ...blockProps }>
+			{ /* @ts-expect-error: `InnerBlocks.Content` is a component that is typed in WordPress core*/ }
+			<InnerBlocks.Content />
+		</div>
+	);
+};
+
+export default Save;

assets/js/atomic/utils/render-parent-block.tsx

@@ -137,7 +137,7 @@ const renderInnerBlocks = ( {
 	children,
 	// Current depth of the children. Used to ensure keys are unique.
 	depth = 1,
-}: renderInnerBlocksProps ): ( JSX.Element | null )[] | null => {
+}: renderInnerBlocksProps ): ( string | JSX.Element | null )[] | null => {
 	if ( ! children || children.length === 0 ) {
 		return null;
 	}
@@ -147,11 +147,10 @@ const renderInnerBlocks = ( {
 		 * convert the HTMLElement to a React component.
 		 */
 		const { blockName = '', ...componentProps } = {
-			key: `${ block }_${ depth }_${ index }`,
 			...( node instanceof HTMLElement ? node.dataset : {} ),
 			className: node instanceof Element ? node?.className : '',
 		};
-
+		const componentKey = `${ block }_${ depth }_${ index }`;
 		const InnerBlockComponent = getBlockComponentFromMap(
 			blockName,
 			blockMap
@@ -190,13 +189,20 @@ const renderInnerBlocks = ( {
 				  } )
 				: undefined;
 
+			// We pass props here rather than componentProps to avoid the data attributes being renamed.
 			return renderedChildren
 				? cloneElement(
 						parsedElement,
-						componentProps,
+						{
+							key: componentKey,
+							...( parsedElement?.props || {} ),
+						},
 						renderedChildren
 				  )
-				: cloneElement( parsedElement, componentProps );
+				: cloneElement( parsedElement, {
+						key: componentKey,
+						...( parsedElement?.props || {} ),
+				  } );
 		}
 
 		// This will wrap inner blocks with the provided wrapper. If no wrapper is provided, we default to Fragment.
@@ -215,7 +221,10 @@ const renderInnerBlocks = ( {
 					showErrorBlock={ CURRENT_USER_IS_ADMIN as boolean }
 				>
 					<InnerBlockComponentWrapper>
-						<InnerBlockComponent { ...componentProps }>
+						<InnerBlockComponent
+							key={ componentKey }
+							{ ...componentProps }
+						>
 							{
 								/**
 								 * Within this Inner Block Component we also need to recursively render it's children. This

assets/js/base/components/cart-checkout/shipping-calculator/index.tsx

@@ -30,9 +30,10 @@ const ShippingCalculator = ( {
 	addressFields = [ 'country', 'state', 'city', 'postcode' ],
 }: ShippingCalculatorProps ): JSX.Element => {
 	const { shippingAddress } = useCustomerData();
+	const noticeContext = 'wc/cart/shipping-calculator';
 	return (
 		<div className="wc-block-components-shipping-calculator">
-			<StoreNoticesContainer context={ 'wc/cart/shipping-calculator' } />
+			<StoreNoticesContainer context={ noticeContext } />
 			<ShippingCalculatorAddress
 				address={ shippingAddress }
 				addressFields={ addressFields }

assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx

@@ -7,6 +7,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import type { ReactElement } from 'react';
 import { Panel } from '@woocommerce/blocks-checkout';
 import Label from '@woocommerce/base-components/label';
+import { useCallback } from '@wordpress/element';
 import {
 	useShippingData,
 	useStoreEvents,
@@ -89,17 +90,20 @@ export const ShippingRatesControlPackage = ( {
 			) }
 		</>
 	);
-
-	const packageRatesProps = {
-		className,
-		noResultsMessage,
-		rates: packageData.shipping_rates,
-		onSelectRate: ( newShippingRateId: string ) => {
+	const onSelectRate = useCallback(
+		( newShippingRateId: string ) => {
 			selectShippingRate( newShippingRateId, packageId );
 			dispatchCheckoutEvent( 'set-selected-shipping-rate', {
 				shippingRateId: newShippingRateId,
 			} );
 		},
+		[ dispatchCheckoutEvent, packageId, selectShippingRate ]
+	);
+	const packageRatesProps = {
+		className,
+		noResultsMessage,
+		rates: packageData.shipping_rates,
+		onSelectRate,
 		selectedRate: packageData.shipping_rates.find(
 			( rate ) => rate.selected
 		),