Merge branch 'trunk' into add/trigger-billing-event-on-shippin

.eslintrc.js

@@ -52,6 +52,7 @@ module.exports = {
 			'prop-types',
 			'react',
 			'requireindex',
+			'react-transition-group',
 		],
 		'import/resolver': {
 			node: {},

.github/monitor-typescript-errors/index.js

@@ -1,9 +1,8 @@
 const fs = require( 'fs' );
 const { getOctokit, context } = require( '@actions/github' );
-const { setFailed, getInput, setOutput } = require( '@actions/core' );
+const { getInput, setOutput } = require( '@actions/core' );
 const { parseXml, getFilesWithNewErrors } = require( './utils/xml' );
 const { generateMarkdownMessage } = require( './utils/markdown' );
-const { addRecord } = require( './utils/airtable' );
 const { addComment } = require( './utils/github' );
 
 const runner = async () => {
@@ -58,13 +57,17 @@ const runner = async () => {
 		}
 	}
 
-	if ( process.env[ 'CURRENT_BRANCH' ] === 'trunk' ) {
-		try {
-			await addRecord( currentCheckStyleFileContentParsed.totalErrors );
-		} catch ( error ) {
-			setFailed( error );
-		}
-	}
+	/**
+	 * @todo: Airtable integration is failing auth, so we're disabling it for now.
+	 * Issue opened: https://github.com/woocommerce/woocommerce-blocks/issues/8961
+	 */
+	// if ( process.env[ 'CURRENT_BRANCH' ] === 'trunk' ) {
+	// 	try {
+	// 		await addRecord( currentCheckStyleFileContentParsed.totalErrors );
+	// 	} catch ( error ) {
+	// 		setFailed( error );
+	// 	}
+	// }
 };
 
 runner();

.github/patch-initial-checklist.md

@@ -13,6 +13,7 @@ The release pull request has been created! This checklist is a guide to follow f
     -   [ ] Check the changelog matches the one in the pull request description above.
 -   [ ] Run `npm run change-versions` to update the version numbers in several files. Write the version number you are releasing: {{version}}.
 -   [ ] Update compatibility sections (if applicable).
+-   [ ] Cherry-pick into the release branch all fixes that need to be included in this release (assuming they were merged into `trunk`).
 -   [ ] Push above changes to the release branch.
 
 ## Create the Testing Notes
@@ -62,10 +63,7 @@ Each porter is responsible for testing the PRs that fall under the focus of thei
 
 ## After Deploy
 
--   [ ] Merge this branch back into the base branch.
-    -   If the base branch was `trunk`, and this release was deployed to WordPress.org, then merge the branch into `trunk`.
-    -   If the base branch is the release branch this patch release is for, then merge branch into release branch and then merge the release branch back to `trunk` if the patch release is the latest released version. Otherwise just merge back into the release branch.
--   [ ] If you merged the branch to `trunk`, then update version on the `trunk` branch to be for the next version of the plugin and include the `dev` suffix (e.g. something like [`2.6-dev`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/commit/e27f053e7be0bf7c1d376f5bdb9d9999190ce158)) for the next version.
+-   [ ] Port to `trunk` the changes to the changelog, testing steps and required versions that you did in the previous steps. You can do so copy-and-pasting the changes in a new commit directly to `trunk`, or cherry-picking the commits that introduced those changes.
 -   [ ] Update the schedules p2 with the shipped date for the release (PdToLP-K-p2).
 -   [ ] Edit the GitHub milestone of the release you just shipped and add the current date as the due date (this is used to track ship date as well).
 
@@ -92,8 +90,11 @@ This only needs done if the patch release needs to be included in WooCommerce Co
         -   It lists all the WooCommerce Blocks versions that are being included since the last version that you edited in `plugins/woocommerce/composer.json`. Each version should have a link for the `Release PR`, `Testing instructions` and `Release post` (if available).
         -   The changelog should be aggregated from all the releases included in the package bump and grouped per type: `Enhancements`, `Bug Fixes`, `Various` etc. 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 ensure 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/internal-developers/testing/smoke-testing.md). It's up to you to verify that those tests have been done.
+-   [ ] Build WC core from that branch with `pnpm run --filter='woocommerce' build ` (you might need to [install the dependencies first](https://github.com/woocommerce/woocommerce#prerequisites)) and:
+
+    -   [ ] Make sure the correct version of WC Blocks is being loaded. This can be done testing at least one of the testing steps from the release.
+    -   [ ] Complete the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/internal-developers/testing/smoke-testing.md).
+
 -   [ ] 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.
 
     -   [ ] Assign the corresponding WC version milestone to the PR
@@ -111,3 +112,4 @@ You only need to post public release announcements and update relevant public fa
     -   Don't forget to use category `WooCommerce Blocks Release Notes` for the post.
 -   [ ] Announce the release internally (`#woo-announcements` slack).
 -   [ ] Go through the description of the release pull request and edit it to update all the sections and checklist instructions there.
+-   [ ] Close this PR.

.github/release-initial-checklist.md

@@ -78,7 +78,7 @@ Each porter is responsible for testing the PRs that fall under the focus of thei
 
 ## After Workflow completes
 
--   [ ] Merge this pull request back into `trunk`. This may have merge conflicts needing resolved if there are any cherry-picked commits in the release branch.
+-   [ ] Port to `trunk` the changes to the changelog, testing steps and required versions that you did in the previous steps. You can do so copy-and-pasting the changes in a new commit directly to `trunk`, or cherry-picking the commits that introduced those changes.
 -   [ ] Run `npm run change-versions` to update the version in `trunk` to the next version of the plugin and include the `dev` suffix. For example, if you released 2.5.0, you should update the version in `trunk` to 2.6.0-dev.
 -   [ ] Update the schedules p2 with the shipped date for the release (PdToLP-K-p2).
 -   [ ] Edit the GitHub milestone of the release you just shipped and add the current date as the due date (this is used to track ship date as well).
@@ -106,11 +106,16 @@ This only needs to be done if this release is the last release of the feature pl
     -   The PR description can follow [this example](https://github.com/woocommerce/woocommerce/pull/32627).
         -   It lists all the WooCommerce Blocks versions that are being included since the last version that you edited in `plugins/woocommerce/composer.json`. Each version should have a link for the `Release PR`, `Testing instructions` and `Release post` (if available).
         -   The changelog should be aggregated from all the releases included in the package bump and grouped per type: `Enhancements`, `Bug Fixes`, `Various` etc. 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 ensure 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/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.
-        -   [ ] Assign the corresponding WC version milestone to the PR
-        -   [ ] After the checklist is complete and the testing is done, select the porter of your team to review the PR. Once approved, make sure you merge the PR.
+
+
+-   [ ] Build WC core from that branch with `pnpm run --filter='woocommerce' build ` (you might need to [install the dependencies first](https://github.com/woocommerce/woocommerce#prerequisites)) and:
+
+    -   [ ] Make sure the correct version of WC Blocks is being loaded. This can be done testing at least one of the testing steps from the release.
+    -   [ ] Complete the [Smoke testing checklist](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/docs/internal-developers/testing/smoke-testing.md).
+
+-   [ ] 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.
+    -   [ ] Assign the corresponding WC version milestone to the PR
+    -   [ ] After the checklist is complete and the testing is done, select the porter of your team to review the PR. Once approved, make sure you merge the PR.
 
 -   [ ] 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.
 -   [ ] Search the release thread of the WooCommerce core version in WooCommerce P2 (example: p6q8Tx-2gl-p2).
@@ -137,3 +142,4 @@ This only needs to be done if this release is the last release of the feature pl
     -   [WCCOM product page](https://woocommerce.com/products/woocommerce-gutenberg-products-block/)
     -   [WooCommerce blocks main documentation page](https://docs.woocommerce.com/document/woocommerce-blocks/)
 -   [ ] Go through the description of the release pull request and edit it to update all the sections and checklist instructions there.
+-   [ ] Close this PR.

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

@@ -5,6 +5,7 @@
 	"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.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
+	"usesContext": ["postId"],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2,
 	"$schema": "https://schemas.wp.org/trunk/block.json"

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

@@ -3,7 +3,9 @@
  */
 import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { Button, Disabled, Notice } from '@wordpress/components';
+import { Button, Disabled, Tooltip } from '@wordpress/components';
+import { Skeleton } from '@woocommerce/base-components/skeleton';
+
 /**
  * Internal dependencies
  */
@@ -19,31 +21,34 @@ const Edit = () => {
 
 	return (
 		<div { ...blockProps }>
-			<Disabled>
-				<Notice
-					className={ 'wc-block-add-to-cart-form__notice' }
-					status={ 'warning' }
-					isDismissible={ false }
-				>
-					<p>
-						{ __(
-							'Customers will see product add-to-cart options displayed here, dependent on the product type.',
-							'woo-gutenberg-products-block'
-						) }
-					</p>
-				</Notice>
-				<input
-					type={ 'number' }
-					value={ '1' }
-					className={ 'wc-block-add-to-cart-form__quantity' }
-				/>
-				<Button
-					variant={ 'primary' }
-					className={ 'wc-block-add-to-cart-form__button' }
-				>
-					{ __( 'Add to cart', 'woo-gutenberg-products-block' ) }
-				</Button>
-			</Disabled>
+			<Tooltip
+				text="Customer will see product add-to-cart options in this space, dependend on the product type. "
+				position="bottom right"
+			>
+				<div className="wc-block-editor-container">
+					<Skeleton numberOfLines={ 3 } />
+					<Disabled>
+						<input
+							type={ 'number' }
+							value={ '1' }
+							className={
+								'wc-block-editor-add-to-cart-form__quantity'
+							}
+						/>
+						<Button
+							variant={ 'primary' }
+							className={
+								'wc-block-editor-add-to-cart-form__button'
+							}
+						>
+							{ __(
+								'Add to cart',
+								'woo-gutenberg-products-block'
+							) }
+						</Button>
+					</Disabled>
+				</div>
+			</Tooltip>
 		</div>
 	);
 };

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

@@ -1,15 +1,10 @@
-.wc-block-add-to-cart-form {
+.wc-block-editor-add-to-cart-form {
 	display: flex;
-	flex-direction: row;
+	flex-direction: column;
+	row-gap: $default-block-margin;
 }
 
-.wc-block-add-to-cart-form__notice.components-notice {
-	margin: 10px 0;
-	color: $black;
-	max-width: 60%;
-}
-
-input.wc-block-add-to-cart-form__quantity[type="number"] {
+input.wc-block-editor-add-to-cart-form__quantity[type="number"] {
 	max-width: 50px;
 	min-height: 23px;
 	float: left;
@@ -28,3 +23,10 @@ button.components-button.wc-block-add-to-cart-form__button {
 	padding: 20px 30px;
 	border-radius: 0;
 }
+
+.wc-block-editor-container {
+	cursor: help;
+	gap: 10px;
+	display: flex;
+	flex-direction: column;
+}

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 import { Icon, button } from '@wordpress/icons';
 
 /**
@@ -11,26 +10,24 @@ import { Icon, button } from '@wordpress/icons';
 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;
-			},
-		} );
+const blockSettings = {
+	edit,
+	icon: {
+		src: (
+			<Icon
+				icon={ button }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
 	},
-	unregisterBlockFn: () => {
-		unregisterBlockType( metadata.name );
+	ancestor: [ 'woocommerce/single-product' ],
+	save() {
+		return null;
 	},
+};
+
+registerBlockSingleProductTemplate( {
 	blockName: metadata.name,
+	blockMetadata: metadata,
+	blockSettings,
 } );

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

@@ -28,6 +28,10 @@ export const blockAttributes: BlockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	isDescendentOfSingleProductBlock: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

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

@@ -20,6 +20,10 @@ export const blockAttributes: BlockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	isDescendentOfSingleProductBlock: {
+		type: 'boolean',
+		default: false,
+	},
 };
 
 export default blockAttributes;

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

@@ -54,7 +54,8 @@ export const Block = ( props: Props ): JSX.Element | null => {
 		colorProps.className,
 		{
 			[ `${ parentClassName }__product-price` ]: parentClassName,
-		}
+		},
+		typographyProps.className
 	);
 
 	if ( ! product.id && ! isDescendentOfSingleProductTemplate ) {

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

@@ -27,6 +27,9 @@ interface BlockAttributes {
 
 interface Attributes {
 	textAlign: 'left' | 'center' | 'right';
+	isDescendentOfSingleProduct: boolean;
+	isDescendentOfSingleProductBlock: boolean;
+	productId: number;
 }
 
 interface Context {
@@ -80,7 +83,9 @@ const PriceEdit = ( {
 	);
 
 	const showProductSelector =
-		! isDescendentOfQueryLoop && ! isDescendentOfSingleProductTemplate;
+		! isDescendentOfQueryLoop &&
+		! isDescendentOfSingleProductTemplate &&
+		! attributes.isDescendentOfSingleProductBlock;
 
 	if ( ! showProductSelector ) {
 		return (

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

@@ -14,21 +14,25 @@ export const supports = {
 	...( isFeaturePluginBuild() && {
 		color: {
 			text: true,
-			background: false,
+			background: true,
 			link: false,
 			__experimentalSkipSerialization: true,
 		},
 		typography: {
 			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
 			__experimentalFontWeight: true,
 			__experimentalFontStyle: true,
 			__experimentalSkipSerialization: true,
+			__experimentalLetterSpacing: true,
 		},
 		__experimentalSelector: '.wc-block-components-product-price',
 	} ),
 	...( typeof __experimentalGetSpacingClassesAndStyles === 'function' && {
 		spacing: {
 			margin: true,
+			padding: true,
 		},
 	} ),
 };

assets/js/atomic/blocks/product-elements/product-details/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { registerBlockSingleProductTemplate } from '@woocommerce/atomic-utils';
-import { registerBlockType, unregisterBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -11,14 +10,11 @@ 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, {
-			edit,
-		} );
-	},
-	unregisterBlockFn: () => {
-		unregisterBlockType( metadata.name );
-	},
 	blockName: metadata.name,
+	// @ts-expect-error: `metadata` currently does not have a type definition in WordPress core
+	blockMetadata: metadata,
+	blockSettings: {
+		edit,
+		ancestor: [ 'woocommerce/single-product' ],
+	},
 } );