Single Product Block

assets/js/atomic/blocks/index.js

@@ -0,0 +1 @@
+export * from './product';

assets/js/atomic/blocks/product/button/block.js

@@ -0,0 +1,150 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import { useEffect, useRef } from '@wordpress/element';
+import { useStoreAddToCart } from '@woocommerce/base-hooks';
+import {
+	useInnerBlockConfigurationContext,
+	useProductDataContextContext,
+} from '@woocommerce/shared-context';
+import { decodeEntities } from '@wordpress/html-entities';
+import { triggerFragmentRefresh } from '@woocommerce/base-utils';
+
+const ProductButton = ( { className } ) => {
+	const { product } = useProductDataContextContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
+	const componentClass = `${ layoutStyleClassPrefix }__product-add-to-cart`;
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				componentClass,
+				'wp-block-button',
+				{
+					'is-loading': ! product,
+				}
+			) }
+		>
+			{ product ? (
+				<AddToCartButton product={ product } />
+			) : (
+				<AddToCartButtonPlaceholder />
+			) }
+		</div>
+	);
+};
+
+const AddToCartButton = ( { product } ) => {
+	const firstMount = useRef( true );
+
+	const {
+		id,
+		permalink,
+		add_to_cart: productCartDetails,
+		has_options: hasOptions,
+		is_purchasable: isPurchasable,
+		is_in_stock: isInStock,
+	} = product;
+
+	const {
+		cartQuantity,
+		addingToCart,
+		cartIsLoading,
+		addToCart,
+	} = useStoreAddToCart( id );
+
+	useEffect( () => {
+		// Avoid running on first mount when cart quantity is first set.
+		if ( firstMount.current ) {
+			firstMount.current = false;
+			return;
+		}
+		triggerFragmentRefresh();
+	}, [ cartQuantity ] );
+
+	if ( cartIsLoading ) {
+		return <AddToCartButtonPlaceholder />;
+	}
+
+	const addedToCart = Number.isFinite( cartQuantity ) && cartQuantity > 0;
+	const allowAddToCart = ! hasOptions && isPurchasable && isInStock;
+	const buttonAriaLabel = decodeEntities(
+		productCartDetails?.description || ''
+	);
+	const buttonText = addedToCart
+		? sprintf(
+				// translators: %s number of products in cart.
+				_n(
+					'%d in cart',
+					'%d in cart',
+					cartQuantity,
+					'woo-gutenberg-products-block'
+				),
+				cartQuantity
+		  )
+		: decodeEntities(
+				productCartDetails?.text ||
+					__( 'Add to cart', 'woo-gutenberg-products-block' )
+		  );
+
+	if ( ! allowAddToCart ) {
+		return (
+			<a
+				href={ permalink }
+				aria-label={ buttonAriaLabel }
+				className={ classnames(
+					'wp-block-button__link',
+					'add_to_cart_button',
+					{
+						loading: addingToCart,
+						added: addedToCart,
+					}
+				) }
+				rel="nofollow"
+			>
+				{ buttonText }
+			</a>
+		);
+	}
+
+	return (
+		<button
+			onClick={ addToCart }
+			aria-label={ buttonAriaLabel }
+			className={ classnames(
+				'wp-block-button__link',
+				'add_to_cart_button',
+				{
+					loading: addingToCart,
+					added: addedToCart,
+				}
+			) }
+			disabled={ addingToCart }
+		>
+			{ buttonText }
+		</button>
+	);
+};
+
+const AddToCartButtonPlaceholder = () => {
+	return (
+		<button
+			className={ classnames(
+				'wp-block-button__link',
+				'add_to_cart_button'
+			) }
+			disabled={ true }
+		/>
+	);
+};
+
+ProductButton.propTypes = {
+	className: PropTypes.string,
+	product: PropTypes.object,
+};
+
+export default ProductButton;

assets/js/atomic/blocks/product/button/edit.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { Disabled } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default () => {
+	return (
+		<Disabled>
+			<Block />
+		</Disabled>
+	);
+};

assets/js/atomic/blocks/product/button/frontend.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+/**
+ * Wrapper component used on the frontend.
+ */
+const FrontendBlock = () => {
+	return <Block />;
+};
+
+export default FrontendBlock;

assets/js/atomic/blocks/product/button/index.js

@@ -3,14 +3,13 @@
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
-import { Disabled } from '@wordpress/components';
 import { Icon, cart } from '@woocommerce/icons';
-import { ProductButton } from '@woocommerce/atomic-components/product';
 
 /**
  * Internal dependencies
  */
 import sharedConfig from '../shared-config';
+import edit from './edit';
 
 const blockConfig = {
 	title: __( 'Add to Cart Button', 'woo-gutenberg-products-block' ),
@@ -22,15 +21,7 @@ const blockConfig = {
 		src: <Icon srcElement={ cart } />,
 		foreground: '#96588a',
 	},
-	edit( props ) {
-		const { attributes } = props;
-
-		return (
-			<Disabled>
-				<ProductButton product={ attributes.product } />
-			</Disabled>
-		);
-	},
+	edit,
 };
 
 registerBlockType( 'woocommerce/product-button', {

assets/js/atomic/blocks/product/image/attributes.js

@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+export const blockAttributes = {
+	productLink: {
+		type: 'boolean',
+		default: true,
+	},
+	showSaleBadge: {
+		type: 'boolean',
+		default: true,
+	},
+	saleBadgeAlign: {
+		type: 'string',
+		default: 'right',
+	},
+};
+
+export default blockAttributes;

assets/js/atomic/blocks/product/image/block.js

@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { useState } from '@wordpress/element';
+import classnames from 'classnames';
+import { PLACEHOLDER_IMG_SRC } from '@woocommerce/block-settings';
+import {
+	useInnerBlockConfigurationContext,
+	useProductDataContextContext,
+} from '@woocommerce/shared-context';
+
+/**
+ * Internal dependencies
+ */
+import ProductSaleBadge from '../sale-badge/block.js';
+
+const ProductImage = ( {
+	className,
+	productLink = true,
+	showSaleBadge = true,
+	saleBadgeAlign = 'right',
+} ) => {
+	const { product } = useProductDataContextContext();
+	const { layoutStyleClassPrefix } = useInnerBlockConfigurationContext();
+	const componentClass = `${ layoutStyleClassPrefix }__product-image`;
+	const [ imageLoaded, setImageLoaded ] = useState( false );
+
+	if ( ! product ) {
+		return (
+			<div
+				className={ classnames(
+					className,
+					componentClass,
+					'is-loading'
+				) }
+			>
+				<ImagePlaceholder componentClass={ componentClass } />
+			</div>
+		);
+	}
+
+	const image =
+		product?.images && product.images.length ? product.images[ 0 ] : null;
+
+	return (
+		<div className={ classnames( className, componentClass ) }>
+			{ productLink ? (
+				<a href={ product.permalink } rel="nofollow">
+					{ showSaleBadge && (
+						<ProductSaleBadge align={ saleBadgeAlign } />
+					) }
+					<Image
+						componentClass={ componentClass }
+						image={ image }
+						onLoad={ () => setImageLoaded( true ) }
+						loaded={ imageLoaded }
+					/>
+				</a>
+			) : (
+				<>
+					{ showSaleBadge && (
+						<ProductSaleBadge align={ saleBadgeAlign } />
+					) }
+					<Image
+						componentClass={ componentClass }
+						image={ image }
+						onLoad={ () => setImageLoaded( true ) }
+						loaded={ imageLoaded }
+					/>
+				</>
+			) }
+		</div>
+	);
+};
+
+const ImagePlaceholder = ( { componentClass } ) => {
+	return (
+		<img
+			className={ classnames(
+				`${ componentClass }__image`,
+				`${ componentClass }__image_placeholder`
+			) }
+			src={ PLACEHOLDER_IMG_SRC }
+			alt=""
+		/>
+	);
+};
+
+const Image = ( { componentClass, image, onLoad, loaded } ) => {
+	const { thumbnail, srcset, sizes, alt } = image || {};
+
+	return (
+		<>
+			<img
+				className={ classnames( `${ componentClass }__image` ) }
+				src={ thumbnail }
+				srcSet={ srcset }
+				sizes={ sizes }
+				alt={ alt }
+				onLoad={ onLoad }
+				hidden={ ! loaded }
+			/>
+			{ ! loaded && (
+				<ImagePlaceholder componentClass={ componentClass } />
+			) }
+		</>
+	);
+};
+
+ProductImage.propTypes = {
+	className: PropTypes.string,
+	product: PropTypes.object,
+	productLink: PropTypes.bool,
+	showSaleBadge: PropTypes.bool,
+	saleBadgeAlign: PropTypes.string,
+};
+
+export default ProductImage;