Merge branch 'trunk' into release/9.6.0

Author: tarhi-saad

assets/js/atomic/blocks/index.js

@@ -13,3 +13,4 @@ import './product-elements/category-list';
 import './product-elements/tag-list';
 import './product-elements/stock-indicator';
 import './product-elements/add-to-cart';
+import './product-elements/product-image-gallery';

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

@@ -83,6 +83,7 @@ export const Block = ( props: Props ): JSX.Element | null => {
 			align={ textAlign }
 			className={ wrapperClassName }
 			regularPriceStyle={ style }
+			priceStyle={ style }
 			priceClassName={ priceClassName }
 			currency={ currency }
 			price={ prices.price }

assets/js/atomic/blocks/product-elements/product-image-gallery/block.json

@@ -0,0 +1,17 @@
+{
+	"name": "woocommerce/product-image-gallery",
+	"version": "1.0.0",
+	"title": "Product Image Gallery",
+	"icon": "gallery",
+	"description": "Display a product's images.",
+	"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/product-image-gallery/edit.tsx

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+import { isEmptyObject } from '@woocommerce/types';
+import { useBlockProps } from '@wordpress/block-editor';
+import { BlockAttributes } from '@wordpress/blocks';
+import { Disabled } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+const Placeholder = () => {
+	return (
+		<div className="wc-block-editor-product-gallery">
+			<img
+				src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
+				alt="Placeholder"
+			/>
+			<div className="wc-block-editor-product-gallery__other-images">
+				{ [ ...Array( 4 ).keys() ].map( ( index ) => {
+					return (
+						<img
+							key={ index }
+							src={ `${ WC_BLOCKS_IMAGE_URL }block-placeholders/product-image-gallery.svg` }
+							alt="Placeholder"
+						/>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+};
+
+type Context = {
+	postId: string;
+	postType: string;
+	queryId: string;
+};
+
+interface Props {
+	attributes: BlockAttributes;
+	context: Context;
+}
+
+const Edit = ( { context }: Props ) => {
+	const blockProps = useBlockProps();
+
+	if ( isEmptyObject( context ) ) {
+		return (
+			<div { ...blockProps }>
+				<Disabled>
+					<Placeholder />
+				</Disabled>
+			</div>
+		);
+	}
+	// We have work on this case when we will work on the Single Product block.
+	return '';
+};
+
+export default Edit;

assets/js/atomic/blocks/product-elements/product-image-gallery/editor.scss

@@ -0,0 +1,13 @@
+.wc-block-editor-product-gallery {
+	img {
+		width: 500px;
+		height: 500px;
+	}
+	.wc-block-editor-product-gallery__other-images {
+		img {
+			width: 100px;
+			height: 100px;
+			margin: 5px;
+		}
+	}
+}

assets/js/atomic/blocks/product-elements/product-image-gallery/index.ts

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

assets/js/atomic/utils/index.js

@@ -2,3 +2,4 @@ export * from './get-block-map';
 export * from './create-blocks-from-template';
 export * from './render-parent-block';
 export * from './render-standalone-blocks';
+export * from './register-block-single-product-template';

assets/js/atomic/utils/register-block-single-product-template.ts

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { getBlockType } from '@wordpress/blocks';
+import { subscribe, select } from '@wordpress/data';
+
+export const registerBlockSingleProductTemplate = ( {
+	registerBlockFn,
+	unregisterBlockFn,
+	blockName,
+}: {
+	registerBlockFn: () => void;
+	unregisterBlockFn: () => void;
+	blockName: string;
+} ) => {
+	let currentTemplateId: string | undefined;
+
+	subscribe( () => {
+		const previousTemplateId = currentTemplateId;
+		const store = select( 'core/edit-site' );
+		currentTemplateId = store?.getEditedPostId() as string | undefined;
+
+		if ( previousTemplateId === currentTemplateId ) {
+			return;
+		}
+
+		const parsedTemplate = currentTemplateId?.split( '//' )[ 1 ];
+
+		if ( parsedTemplate === null || parsedTemplate === undefined ) {
+			return;
+		}
+
+		const block = getBlockType( blockName );
+
+		if (
+			block === undefined &&
+			parsedTemplate.includes( 'single-product' )
+		) {
+			registerBlockFn();
+		}
+
+		if ( block !== undefined ) {
+			unregisterBlockFn();
+		}
+	}, 'core/edit-site' );
+};

assets/js/base/context/hooks/payment-methods/use-payment-method-interface.ts

@@ -60,13 +60,46 @@ export const usePaymentMethodInterface = (): PaymentMethodInterface => {
 			return {
 				// The paymentStatus is exposed to third parties via the payment method interface so the API must not be changed
 				paymentStatus: {
-					isPristine: store.isPaymentPristine(),
-					isStarted: store.isPaymentStarted(),
+					get isPristine() {
+						deprecated( 'isPristine', {
+							since: '9.6.0',
+							alternative: 'isIdle',
+							plugin: 'WooCommerce Blocks',
+							link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8110',
+						} );
+						return store.isPaymentIdle();
+					}, // isPristine is the same as isIdle
+					isIdle: store.isPaymentIdle(),
+					isStarted: store.isExpressPaymentStarted(),
 					isProcessing: store.isPaymentProcessing(),
-					isFinished: store.isPaymentFinished(),
+					get isFinished() {
+						deprecated( 'isFinished', {
+							since: '9.6.0',
+							plugin: 'WooCommerce Blocks',
+							link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8110',
+						} );
+						return (
+							store.hasPaymentError() || store.isPaymentReady()
+						);
+					},
 					hasError: store.hasPaymentError(),
-					hasFailed: store.isPaymentFailed(),
-					isSuccessful: store.isPaymentSuccess(),
+					get hasFailed() {
+						deprecated( 'hasFailed', {
+							since: '9.6.0',
+							plugin: 'WooCommerce Blocks',
+							link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8110',
+						} );
+						return store.hasPaymentError();
+					},
+					get isSuccessful() {
+						deprecated( 'isSuccessful', {
+							since: '9.6.0',
+							plugin: 'WooCommerce Blocks',
+							link: 'https://github.com/woocommerce/woocommerce-blocks/pull/8110',
+						} );
+						return store.isPaymentReady();
+					},
+					isReady: store.isPaymentReady(),
 					isDoingExpressPayment: store.isExpressPaymentMethodActive(),
 				},
 				activePaymentMethod: store.getActivePaymentMethod(),

assets/js/base/context/providers/cart-checkout/checkout-processor.ts

@@ -92,7 +92,7 @@ const CheckoutProcessor = () => {
 		paymentMethodData,
 		isExpressPaymentMethodActive,
 		hasPaymentError,
-		isPaymentSuccess,
+		isPaymentReady,
 		shouldSavePayment,
 	} = useSelect( ( select ) => {
 		const store = select( PAYMENT_STORE_KEY );
@@ -102,7 +102,7 @@ const CheckoutProcessor = () => {
 			paymentMethodData: store.getPaymentMethodData(),
 			isExpressPaymentMethodActive: store.isExpressPaymentMethodActive(),
 			hasPaymentError: store.hasPaymentError(),
-			isPaymentSuccess: store.isPaymentSuccess(),
+			isPaymentReady: store.isPaymentReady(),
 			shouldSavePayment: store.getShouldSavePaymentMethod(),
 		};
 	}, [] );
@@ -130,7 +130,7 @@ const CheckoutProcessor = () => {
 	const paidAndWithoutErrors =
 		! checkoutHasError &&
 		! checkoutWillHaveError &&
-		( isPaymentSuccess || ! cartNeedsPayment ) &&
+		( isPaymentReady || ! cartNeedsPayment ) &&
 		checkoutIsProcessing;
 
 	// Determine if checkout has an error.