initial commit

packages/woocommerce-blocks/assets/js/atomic/blocks/component-init.js

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import { registerBlockComponent } from '@woocommerce/blocks-registry';
+import { lazy } from '@wordpress/element';
+import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
+
+// Modify webpack publicPath at runtime based on location of WordPress Plugin.
+// eslint-disable-next-line no-undef,camelcase
+__webpack_public_path__ = WC_BLOCKS_BUILD_URL;
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-price',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/price" */ './product-elements/price/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-image',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/image" */ './product-elements/image/frontend'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-title',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/title" */ './product-elements/title/frontend'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-rating',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/rating" */ './product-elements/rating/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-button',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/button" */ './product-elements/button/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-summary',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/summary" */ './product-elements/summary/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-sale-badge',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/sale-badge" */ './product-elements/sale-badge/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-sku',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/sku" */ './product-elements/sku/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-category-list',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/category-list" */ './product-elements/category-list/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-tag-list',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/tag-list" */ './product-elements/tag-list/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-stock-indicator',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/stock-indicator" */ './product-elements/stock-indicator/block'
+		)
+	),
+} );
+
+registerBlockComponent( {
+	blockName: 'woocommerce/product-add-to-cart',
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "atomic-block-components/add-to-cart" */ './product-elements/add-to-cart/frontend'
+		)
+	),
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/index.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import './product-elements/title';
+import './product-elements/price';
+import './product-elements/image';
+import './product-elements/rating';
+import './product-elements/button';
+import './product-elements/summary';
+import './product-elements/sale-badge';
+import './product-elements/sku';
+import './product-elements/category-list';
+import './product-elements/tag-list';
+import './product-elements/stock-indicator';
+import './product-elements/add-to-cart';

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/attributes.js

@@ -0,0 +1,12 @@
+export const blockAttributes = {
+	showFormElements: {
+		type: 'boolean',
+		default: false,
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/block.js

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	AddToCartFormContextProvider,
+	useAddToCartFormContext,
+} from '@woocommerce/base-context';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import { AddToCartButton } from './shared';
+import {
+	SimpleProductForm,
+	VariableProductForm,
+	ExternalProductForm,
+	GroupedProductForm,
+} from './product-types';
+
+/**
+ * Product Add to Form Block Component.
+ *
+ * @param {Object} props                     Incoming props.
+ * @param {string} [props.className]         CSS Class name for the component.
+ * @param {boolean} [props.showFormElements] Should form elements be shown?
+ * @return {*} The component.
+ */
+const Block = ( { className, showFormElements } ) => {
+	const { product } = useProductDataContext();
+	const componentClass = classnames(
+		className,
+		'wc-block-components-product-add-to-cart',
+		{
+			'wc-block-components-product-add-to-cart--placeholder': isEmpty(
+				product
+			),
+		}
+	);
+
+	return (
+		<AddToCartFormContextProvider
+			product={ product }
+			showFormElements={ showFormElements }
+		>
+			<div className={ componentClass }>
+				<AddToCartForm />
+			</div>
+		</AddToCartFormContextProvider>
+	);
+};
+
+/**
+ * Renders the add to cart form using useAddToCartFormContext.
+ */
+const AddToCartForm = () => {
+	const { showFormElements, productType } = useAddToCartFormContext();
+
+	if ( showFormElements ) {
+		if ( productType === 'variable' ) {
+			return <VariableProductForm />;
+		}
+		if ( productType === 'grouped' ) {
+			return <GroupedProductForm />;
+		}
+		if ( productType === 'external' ) {
+			return <ExternalProductForm />;
+		}
+		if ( productType === 'simple' || productType === 'variation' ) {
+			return <SimpleProductForm />;
+		}
+		return null;
+	}
+
+	return <AddToCartButton />;
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/constants.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cart, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __( 'Add to Cart', 'woocommerce' );
+export const BLOCK_ICON = <Icon srcElement={ cart } />;
+export const BLOCK_DESCRIPTION = __(
+	'Displays an add to cart button. Optionally displays other add to cart form elements.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/edit.js

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+import { useProductDataContext } from '@woocommerce/shared-context';
+import classnames from 'classnames';
+import {
+	Disabled,
+	PanelBody,
+	ToggleControl,
+	Notice,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { productSupportsAddToCartForm } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes, setAttributes } ) => {
+	const { product } = useProductDataContext();
+	const { className, showFormElements } = attributes;
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-add-to-cart'
+			) }
+		>
+			<EditProductLink productId={ product.id } />
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Layout', 'woocommerce' ) }
+				>
+					{ productSupportsAddToCartForm( product ) ? (
+						<ToggleControl
+							label={ __(
+								'Display form elements',
+								'woocommerce'
+							) }
+							help={ __(
+								'Depending on product type, allow customers to select a quantity, variations etc.',
+								'woocommerce'
+							) }
+							checked={ showFormElements }
+							onChange={ () =>
+								setAttributes( {
+									showFormElements: ! showFormElements,
+								} )
+							}
+						/>
+					) : (
+						<Notice
+							className="wc-block-components-product-add-to-cart-notice"
+							isDismissible={ false }
+							status="info"
+						>
+							{ __(
+								'This product does not support the block based add to cart form. A link to the product page will be shown instead.',
+								'woocommerce'
+							) }
+						</Notice>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</div>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its add to cart form.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/frontend.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+import attributes from './attributes';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	edit,
+	attributes,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-add-to-cart', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/external.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import AddToCartButton from '../shared/add-to-cart-button';
+
+/**
+ * External Product Add To Cart Form
+ */
+const External = () => {
+	return <AddToCartButton />;
+};
+
+export default External;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped/group-list/index.js

@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { Placeholder } from 'wordpress-components';
+
+const GroupedProducts = () => {
+	return (
+		<Placeholder className="wc-block-components-product-add-to-cart-group-list">
+			This is a placeholder for the grouped products form element.
+		</Placeholder>
+	);
+};
+
+export default GroupedProducts;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped/index.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import GroupList from './group-list';
+
+/**
+ * Grouped Product Add To Cart Form
+ */
+const Grouped = () => {
+	return <GroupList />;
+};
+
+export default Grouped;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/index.js

@@ -0,0 +1,4 @@
+export { default as SimpleProductForm } from './simple';
+export { default as VariableProductForm } from './variable/index';
+export { default as ExternalProductForm } from './external';
+export { default as GroupedProductForm } from './grouped/index';

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/simple.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import { AddToCartButton, QuantityInput, ProductUnavailable } from '../shared';
+
+/**
+ * Simple Product Add To Cart Form
+ */
+const Simple = () => {
+	const {
+		product,
+		quantity,
+		minQuantity,
+		maxQuantity,
+		dispatchActions,
+		isDisabled,
+	} = useAddToCartFormContext();
+
+	if ( product.id && ! product.is_purchasable ) {
+		return <ProductUnavailable />;
+	}
+
+	if ( product.id && ! product.is_in_stock ) {
+		return (
+			<ProductUnavailable
+				reason={ __(
+					'This product is currently out of stock and cannot be purchased.',
+					'woocommerce'
+				) }
+			/>
+		);
+	}
+
+	return (
+		<>
+			<QuantityInput
+				value={ quantity }
+				min={ minQuantity }
+				max={ maxQuantity }
+				disabled={ isDisabled }
+				onChange={ dispatchActions.setQuantity }
+			/>
+			<AddToCartButton />
+		</>
+	);
+};
+
+export default Simple;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/index.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+
+/**
+ * Internal dependencies
+ */
+import {
+	AddToCartButton,
+	QuantityInput,
+	ProductUnavailable,
+} from '../../shared';
+import VariationAttributes from './variation-attributes';
+
+/**
+ * Variable Product Add To Cart Form
+ */
+const Variable = () => {
+	const {
+		product,
+		quantity,
+		minQuantity,
+		maxQuantity,
+		dispatchActions,
+		isDisabled,
+	} = useAddToCartFormContext();
+
+	if ( product.id && ! product.is_purchasable ) {
+		return <ProductUnavailable />;
+	}
+
+	if ( product.id && ! product.is_in_stock ) {
+		return (
+			<ProductUnavailable
+				reason={ __(
+					'This product is currently out of stock and cannot be purchased.',
+					'woocommerce'
+				) }
+			/>
+		);
+	}
+
+	return (
+		<>
+			<VariationAttributes
+				product={ product }
+				dispatchers={ dispatchActions }
+			/>
+			<QuantityInput
+				value={ quantity }
+				min={ minQuantity }
+				max={ maxQuantity }
+				disabled={ isDisabled }
+				onChange={ dispatchActions.setQuantity }
+			/>
+			<AddToCartButton />
+		</>
+	);
+};
+
+export default Variable;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-picker.js

@@ -0,0 +1,116 @@
+/**
+ * External dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+import { useShallowEqual } from '@woocommerce/base-hooks';
+
+/**
+ * Internal dependencies
+ */
+import AttributeSelectControl from './attribute-select-control';
+import {
+	getVariationMatchingSelectedAttributes,
+	getActiveSelectControlOptions,
+	getDefaultAttributes,
+} from './utils';
+
+/**
+ * AttributePicker component.
+ *
+ * @param {*} props Component props.
+ */
+const AttributePicker = ( {
+	attributes,
+	variationAttributes,
+	setRequestParams,
+} ) => {
+	const currentAttributes = useShallowEqual( attributes );
+	const currentVariationAttributes = useShallowEqual( variationAttributes );
+	const [ variationId, setVariationId ] = useState( 0 );
+	const [ selectedAttributes, setSelectedAttributes ] = useState( {} );
+	const [ hasSetDefaults, setHasSetDefaults ] = useState( false );
+
+	// Get options for each attribute picker.
+	const filteredAttributeOptions = useMemo( () => {
+		return getActiveSelectControlOptions(
+			currentAttributes,
+			currentVariationAttributes,
+			selectedAttributes
+		);
+	}, [ selectedAttributes, currentAttributes, currentVariationAttributes ] );
+
+	// Set default attributes as selected.
+	useEffect( () => {
+		if ( ! hasSetDefaults ) {
+			const defaultAttributes = getDefaultAttributes( attributes );
+			if ( defaultAttributes ) {
+				setSelectedAttributes( {
+					...defaultAttributes,
+				} );
+			}
+			setHasSetDefaults( true );
+		}
+	}, [ selectedAttributes, attributes, hasSetDefaults ] );
+
+	// Select variations when selections are change.
+	useEffect( () => {
+		const hasSelectedAllAttributes =
+			Object.values( selectedAttributes ).filter(
+				( selected ) => selected !== ''
+			).length === Object.keys( currentAttributes ).length;
+
+		if ( hasSelectedAllAttributes ) {
+			setVariationId(
+				getVariationMatchingSelectedAttributes(
+					currentAttributes,
+					currentVariationAttributes,
+					selectedAttributes
+				)
+			);
+		} else if ( variationId > 0 ) {
+			// Unset variation when form is incomplete.
+			setVariationId( 0 );
+		}
+	}, [
+		selectedAttributes,
+		variationId,
+		currentAttributes,
+		currentVariationAttributes,
+	] );
+
+	// Set requests params as variation ID and data changes.
+	useEffect( () => {
+		setRequestParams( {
+			id: variationId,
+			variation: Object.keys( selectedAttributes ).map(
+				( attributeName ) => {
+					return {
+						attribute: attributeName,
+						value: selectedAttributes[ attributeName ],
+					};
+				}
+			),
+		} );
+	}, [ setRequestParams, variationId, selectedAttributes ] );
+
+	return (
+		<div className="wc-block-components-product-add-to-cart-attribute-picker">
+			{ Object.keys( currentAttributes ).map( ( attributeName ) => (
+				<AttributeSelectControl
+					key={ attributeName }
+					attributeName={ attributeName }
+					options={ filteredAttributeOptions[ attributeName ] }
+					value={ selectedAttributes[ attributeName ] }
+					onChange={ ( selected ) => {
+						setSelectedAttributes( {
+							...selectedAttributes,
+							[ attributeName ]: selected,
+						} );
+					} }
+				/>
+			) ) }
+		</div>
+	);
+};
+
+export default AttributePicker;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js

@@ -0,0 +1,91 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
+import { SelectControl } from 'wordpress-components';
+import { useEffect } from 'react';
+import classnames from 'classnames';
+import {
+	ValidationInputError,
+	useValidationContext,
+} from '@woocommerce/base-context';
+
+// Default option for select boxes.
+const selectAnOption = {
+	value: '',
+	label: __( 'Select an option', 'woocommerce' ),
+};
+
+/**
+ * VariationAttributeSelect component.
+ *
+ * @param {*} props Component props.
+ */
+const AttributeSelectControl = ( {
+	attributeName,
+	options = [],
+	value = '',
+	onChange = () => {},
+	errorMessage = __(
+		'Please select a value.',
+		'woocommerce'
+	),
+} ) => {
+	const {
+		getValidationError,
+		setValidationErrors,
+		clearValidationError,
+	} = useValidationContext();
+	const errorId = attributeName;
+	const error = getValidationError( errorId ) || {};
+
+	useEffect( () => {
+		if ( value ) {
+			clearValidationError( errorId );
+		} else {
+			setValidationErrors( {
+				[ errorId ]: {
+					message: errorMessage,
+					hidden: true,
+				},
+			} );
+		}
+	}, [
+		value,
+		errorId,
+		errorMessage,
+		clearValidationError,
+		setValidationErrors,
+	] );
+
+	// Remove validation errors when unmounted.
+	useEffect( () => () => void clearValidationError( errorId ), [
+		errorId,
+		clearValidationError,
+	] );
+
+	return (
+		<div className="wc-block-components-product-add-to-cart-attribute-picker__container">
+			<SelectControl
+				label={ decodeEntities( attributeName ) }
+				value={ value || '' }
+				options={ [ selectAnOption, ...options ] }
+				onChange={ onChange }
+				required={ true }
+				className={ classnames(
+					'wc-block-components-product-add-to-cart-attribute-picker__select',
+					{
+						'has-error': error.message && ! error.hidden,
+					}
+				) }
+			/>
+			<ValidationInputError
+				propertyName={ errorId }
+				elementId={ errorId }
+			/>
+		</div>
+	);
+};
+
+export default AttributeSelectControl;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import AttributePicker from './attribute-picker';
+import { getAttributes, getVariationAttributes } from './utils';
+
+/**
+ * VariationAttributes component.
+ *
+ * @param {Object} props             Incoming props
+ * @param {Object} props.product     Product
+ * @param {Object} props.dispatchers An object where values are dispatching functions.
+ */
+const VariationAttributes = ( { product, dispatchers } ) => {
+	const attributes = getAttributes( product.attributes );
+	const variationAttributes = getVariationAttributes( product.variations );
+	if (
+		Object.keys( attributes ).length === 0 ||
+		variationAttributes.length === 0
+	) {
+		return null;
+	}
+
+	return (
+		<AttributePicker
+			attributes={ attributes }
+			variationAttributes={ variationAttributes }
+			setRequestParams={ dispatchers.setRequestParams }
+		/>
+	);
+};
+
+export default VariationAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss

@@ -0,0 +1,33 @@
+.wc-block-components-product-add-to-cart-attribute-picker {
+	margin: 0;
+	flex-basis: 100%;
+
+	label {
+		display: block;
+		@include font-size(regular);
+	}
+
+	.wc-block-components-product-add-to-cart-attribute-picker__container {
+		position: relative;
+	}
+
+	.wc-block-components-product-add-to-cart-attribute-picker__select {
+		margin: 0 0 em($gap-small) 0;
+
+		select {
+			min-width: 60%;
+			min-height: 1.75em;
+		}
+
+		&.has-error {
+			margin-bottom: $gap-large;
+
+			select {
+				border-color: $alert-red;
+				&:focus {
+					outline-color: $alert-red;
+				}
+			}
+		}
+	}
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/test/index.js

@@ -0,0 +1,479 @@
+/**
+ * Internal dependencies
+ */
+import {
+	getAttributes,
+	getVariationAttributes,
+	getVariationsMatchingSelectedAttributes,
+	getVariationMatchingSelectedAttributes,
+	getActiveSelectControlOptions,
+	getDefaultAttributes,
+} from '../utils';
+
+const rawAttributeData = [
+	{
+		id: 1,
+		name: 'Color',
+		taxonomy: 'pa_color',
+		has_variations: true,
+		terms: [
+			{
+				id: 22,
+				name: 'Blue',
+				slug: 'blue',
+				default: true,
+			},
+			{
+				id: 23,
+				name: 'Green',
+				slug: 'green',
+				default: false,
+			},
+			{
+				id: 24,
+				name: 'Red',
+				slug: 'red',
+				default: false,
+			},
+		],
+	},
+	{
+		id: 0,
+		name: 'Logo',
+		taxonomy: null,
+		has_variations: true,
+		terms: [
+			{
+				id: 0,
+				name: 'Yes',
+				slug: 'Yes',
+				default: true,
+			},
+			{
+				id: 0,
+				name: 'No',
+				slug: 'No',
+				default: false,
+			},
+		],
+	},
+	{
+		id: 0,
+		name: 'Non-variable attribute',
+		taxonomy: null,
+		has_variations: false,
+		terms: [
+			{
+				id: 0,
+				name: 'Test',
+				slug: 'Test',
+				default: false,
+			},
+			{
+				id: 0,
+				name: 'Test 2',
+				slug: 'Test 2',
+				default: false,
+			},
+		],
+	},
+];
+
+const rawVariations = [
+	{
+		id: 35,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'blue',
+			},
+			{
+				name: 'Logo',
+				value: 'Yes',
+			},
+		],
+	},
+	{
+		id: 28,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'red',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+	{
+		id: 29,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'green',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+	{
+		id: 30,
+		attributes: [
+			{
+				name: 'Color',
+				value: 'blue',
+			},
+			{
+				name: 'Logo',
+				value: 'No',
+			},
+		],
+	},
+];
+
+const formattedAttributes = {
+	Color: {
+		id: 1,
+		name: 'Color',
+		taxonomy: 'pa_color',
+		has_variations: true,
+		terms: [
+			{
+				id: 22,
+				name: 'Blue',
+				slug: 'blue',
+				default: true,
+			},
+			{
+				id: 23,
+				name: 'Green',
+				slug: 'green',
+				default: false,
+			},
+			{
+				id: 24,
+				name: 'Red',
+				slug: 'red',
+				default: false,
+			},
+		],
+	},
+	Size: {
+		id: 2,
+		name: 'Size',
+		taxonomy: 'pa_size',
+		has_variations: true,
+		terms: [
+			{
+				id: 25,
+				name: 'Large',
+				slug: 'large',
+				default: false,
+			},
+			{
+				id: 26,
+				name: 'Medium',
+				slug: 'medium',
+				default: true,
+			},
+			{
+				id: 27,
+				name: 'Small',
+				slug: 'small',
+				default: false,
+			},
+		],
+	},
+};
+
+describe( 'Testing utils', () => {
+	describe( 'Testing getAttributes()', () => {
+		it( 'returns empty object if there are no attributes', () => {
+			const attributes = getAttributes( null );
+			expect( attributes ).toStrictEqual( {} );
+		} );
+		it( 'returns list of attributes when given valid data', () => {
+			const attributes = getAttributes( rawAttributeData );
+			expect( attributes ).toStrictEqual( {
+				Color: {
+					id: 1,
+					name: 'Color',
+					taxonomy: 'pa_color',
+					has_variations: true,
+					terms: [
+						{
+							id: 22,
+							name: 'Blue',
+							slug: 'blue',
+							default: true,
+						},
+						{
+							id: 23,
+							name: 'Green',
+							slug: 'green',
+							default: false,
+						},
+						{
+							id: 24,
+							name: 'Red',
+							slug: 'red',
+							default: false,
+						},
+					],
+				},
+				Logo: {
+					id: 0,
+					name: 'Logo',
+					taxonomy: null,
+					has_variations: true,
+					terms: [
+						{
+							id: 0,
+							name: 'Yes',
+							slug: 'Yes',
+							default: true,
+						},
+						{
+							id: 0,
+							name: 'No',
+							slug: 'No',
+							default: false,
+						},
+					],
+				},
+			} );
+		} );
+	} );
+	describe( 'Testing getVariationAttributes()', () => {
+		it( 'returns empty object if there are no variations', () => {
+			const variationAttributes = getVariationAttributes( null );
+			expect( variationAttributes ).toStrictEqual( {} );
+		} );
+		it( 'returns list of attribute names and value pairs when given valid data', () => {
+			const variationAttributes = getVariationAttributes( rawVariations );
+			expect( variationAttributes ).toStrictEqual( {
+				'id:35': {
+					id: 35,
+					attributes: {
+						Color: 'blue',
+						Logo: 'Yes',
+					},
+				},
+				'id:28': {
+					id: 28,
+					attributes: {
+						Color: 'red',
+						Logo: 'No',
+					},
+				},
+				'id:29': {
+					id: 29,
+					attributes: {
+						Color: 'green',
+						Logo: 'No',
+					},
+				},
+				'id:30': {
+					id: 30,
+					attributes: {
+						Color: 'blue',
+						Logo: 'No',
+					},
+				},
+			} );
+		} );
+	} );
+	describe( 'Testing getVariationsMatchingSelectedAttributes()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns all variations, in the correct order, if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 35, 28, 29, 30 ] );
+		} );
+
+		it( 'returns correct subset of variations after a selection', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 35, 30 ] );
+		} );
+
+		it( 'returns correct subset of variations after all selections', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+				Logo: 'No',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [ 30 ] );
+		} );
+
+		it( 'returns no results if selection does not match or is invalid', () => {
+			const selectedAttributes = {
+				Color: 'brown',
+			};
+			const matches = getVariationsMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( [] );
+		} );
+	} );
+	describe( 'Testing getVariationMatchingSelectedAttributes()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns first match if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 35 );
+		} );
+
+		it( 'returns first match after single selection', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 35 );
+		} );
+
+		it( 'returns correct match after all selections', () => {
+			const selectedAttributes = {
+				Color: 'blue',
+				Logo: 'No',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 30 );
+		} );
+
+		it( 'returns no match if invalid', () => {
+			const selectedAttributes = {
+				Color: 'brown',
+			};
+			const matches = getVariationMatchingSelectedAttributes(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( matches ).toStrictEqual( 0 );
+		} );
+	} );
+	describe( 'Testing getActiveSelectControlOptions()', () => {
+		const attributes = getAttributes( rawAttributeData );
+		const variationAttributes = getVariationAttributes( rawVariations );
+
+		it( 'returns all possible options if no selections have been made yet', () => {
+			const selectedAttributes = {};
+			const controlOptions = getActiveSelectControlOptions(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( controlOptions ).toStrictEqual( {
+				Color: [
+					{
+						value: 'blue',
+						label: 'Blue',
+					},
+					{
+						value: 'green',
+						label: 'Green',
+					},
+					{
+						value: 'red',
+						label: 'Red',
+					},
+				],
+				Logo: [
+					{
+						value: 'Yes',
+						label: 'Yes',
+					},
+					{
+						value: 'No',
+						label: 'No',
+					},
+				],
+			} );
+		} );
+
+		it( 'returns only valid options if color is selected', () => {
+			const selectedAttributes = {
+				Color: 'green',
+			};
+			const controlOptions = getActiveSelectControlOptions(
+				attributes,
+				variationAttributes,
+				selectedAttributes
+			);
+			expect( controlOptions ).toStrictEqual( {
+				Color: [
+					{
+						value: 'blue',
+						label: 'Blue',
+					},
+					{
+						value: 'green',
+						label: 'Green',
+					},
+					{
+						value: 'red',
+						label: 'Red',
+					},
+				],
+				Logo: [
+					{
+						value: 'No',
+						label: 'No',
+					},
+				],
+			} );
+		} );
+	} );
+	describe( 'Testing getDefaultAttributes()', () => {
+		const defaultAttributes = getDefaultAttributes( formattedAttributes );
+
+		it( 'should return default attributes in the format that is ready for setting state', () => {
+			expect( defaultAttributes ).toStrictEqual( {
+				Color: 'blue',
+				Size: 'medium',
+			} );
+		} );
+
+		it( 'should return an empty object if given unexpected values', () => {
+			expect( getDefaultAttributes( [] ) ).toStrictEqual( {} );
+			expect( getDefaultAttributes( null ) ).toStrictEqual( {} );
+			expect( getDefaultAttributes( undefined ) ).toStrictEqual( {} );
+		} );
+	} );
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/utils.js

@@ -0,0 +1,240 @@
+/**
+ * External dependencies
+ */
+import { keyBy } from 'lodash';
+import { decodeEntities } from '@wordpress/html-entities';
+import { isObject } from '@woocommerce/types';
+
+/**
+ * Key an array of attributes by name,
+ *
+ * @param {Object} attributes Attributes array.
+ */
+export const getAttributes = ( attributes ) => {
+	return attributes
+		? keyBy(
+				Object.values( attributes ).filter(
+					( { has_variations: hasVariations } ) => hasVariations
+				),
+				'name'
+		  )
+		: {};
+};
+
+/**
+ * Format variations from the API into a map of just the attribute names and values.
+ *
+ * Note, each item is keyed by the variation ID with an id: prefix. This is to prevent the object
+ * being reordered when iterated.
+ *
+ * @param {Object} variations List of Variation objects and attributes keyed by variation ID.
+ */
+export const getVariationAttributes = ( variations ) => {
+	if ( ! variations ) {
+		return {};
+	}
+
+	const attributesMap = {};
+
+	variations.forEach( ( { id, attributes } ) => {
+		attributesMap[ `id:${ id }` ] = {
+			id,
+			attributes: attributes.reduce( ( acc, { name, value } ) => {
+				acc[ name ] = value;
+				return acc;
+			}, {} ),
+		};
+	} );
+
+	return attributesMap;
+};
+
+/**
+ * Given a list of variations and a list of attribute values, return variations which match.
+ *
+ * Allows an attribute to be excluded by name. This is used to filter displayed options for
+ * individual attribute selects.
+ *
+ * @param {Object} attributes List of attribute names and terms.
+ * @param {Object} variationAttributes Attributes for each variation keyed by variation ID.
+ * @param {Object} selectedAttributes Attribute Name Value pairs of current selections by the user.
+ * @return {Array} List of matching variation IDs.
+ */
+export const getVariationsMatchingSelectedAttributes = (
+	attributes,
+	variationAttributes,
+	selectedAttributes
+) => {
+	const variationIds = Object.values( variationAttributes ).map(
+		( { id: variationId } ) => {
+			return variationId;
+		}
+	);
+
+	// If nothing is selected yet, just return all variations.
+	if (
+		Object.values( selectedAttributes ).every( ( value ) => value === '' )
+	) {
+		return variationIds;
+	}
+
+	const attributeNames = Object.keys( attributes );
+
+	return variationIds.filter( ( variationId ) =>
+		attributeNames.every( ( attributeName ) => {
+			const selectedAttribute = selectedAttributes[ attributeName ] || '';
+			const variationAttribute =
+				variationAttributes[ 'id:' + variationId ].attributes[
+					attributeName
+				];
+
+			// If there is no selected attribute, consider this a match.
+			if ( selectedAttribute === '' ) {
+				return true;
+			}
+			// If the variation attributes for this attribute are set to null, it matches all values.
+			if ( variationAttribute === null ) {
+				return true;
+			}
+			// Otherwise, only match if the selected values are the same.
+			return variationAttribute === selectedAttribute;
+		} )
+	);
+};
+
+/**
+ * Given a list of variations and a list of attribute values, returns the first matched variation ID.
+ *
+ * @param {Object} attributes List of attribute names and terms.
+ * @param {Object} variationAttributes Attributes for each variation keyed by variation ID.
+ * @param {Object} selectedAttributes Attribute Name Value pairs of current selections by the user.
+ * @return {number} Variation ID.
+ */
+export const getVariationMatchingSelectedAttributes = (
+	attributes,
+	variationAttributes,
+	selectedAttributes
+) => {
+	const matchingVariationIds = getVariationsMatchingSelectedAttributes(
+		attributes,
+		variationAttributes,
+		selectedAttributes
+	);
+	return matchingVariationIds[ 0 ] || 0;
+};
+
+/**
+ * Given a list of terms, filter them and return valid options for the select boxes.
+ *
+ * @see getActiveSelectControlOptions
+ * @param {Object} attributeTerms List of attribute term objects.
+ * @param {?Array} validAttributeTerms Valid values if selections have been made already.
+ * @return {Array} Value/Label pairs of select box options.
+ */
+const getValidSelectControlOptions = (
+	attributeTerms,
+	validAttributeTerms = null
+) => {
+	return Object.values( attributeTerms )
+		.map( ( { name, slug } ) => {
+			if (
+				validAttributeTerms === null ||
+				validAttributeTerms.includes( null ) ||
+				validAttributeTerms.includes( slug )
+			) {
+				return {
+					value: slug,
+					label: decodeEntities( name ),
+				};
+			}
+			return null;
+		} )
+		.filter( Boolean );
+};
+
+/**
+ * Given a list of terms, filter them and return active options for the select boxes. This factors in
+ * which options should be hidden due to current selections.
+ *
+ * @param {Object} attributes List of attribute names and terms.
+ * @param {Object} variationAttributes Attributes for each variation keyed by variation ID.
+ * @param {Object} selectedAttributes Attribute Name Value pairs of current selections by the user.
+ * @return {Object} Select box options.
+ */
+export const getActiveSelectControlOptions = (
+	attributes,
+	variationAttributes,
+	selectedAttributes
+) => {
+	const options = {};
+	const attributeNames = Object.keys( attributes );
+	const hasSelectedAttributes =
+		Object.values( selectedAttributes ).filter( Boolean ).length > 0;
+
+	attributeNames.forEach( ( attributeName ) => {
+		const currentAttribute = attributes[ attributeName ];
+		const selectedAttributesExcludingCurrentAttribute = {
+			...selectedAttributes,
+			[ attributeName ]: null,
+		};
+		// This finds matching variations for selected attributes apart from this one. This will be
+		// used to get valid attribute terms of the current attribute narrowed down by those matching
+		// variation IDs. For example, if I had Large Blue Shirts and Medium Red Shirts, I want to only
+		// show Red shirts if Medium is selected.
+		const matchingVariationIds = hasSelectedAttributes
+			? getVariationsMatchingSelectedAttributes(
+					attributes,
+					variationAttributes,
+					selectedAttributesExcludingCurrentAttribute
+			  )
+			: null;
+		// Uses the above matching variation IDs to get the attributes from just those variations.
+		const validAttributeTerms =
+			matchingVariationIds !== null
+				? matchingVariationIds.map(
+						( varId ) =>
+							variationAttributes[ 'id:' + varId ].attributes[
+								attributeName
+							]
+				  )
+				: null;
+		// Intersects attributes with valid attributes.
+		options[ attributeName ] = getValidSelectControlOptions(
+			currentAttribute.terms,
+			validAttributeTerms
+		);
+	} );
+
+	return options;
+};
+
+/**
+ * Return the default values of the given attributes in a format ready to be set in state.
+ *
+ * @param {Object} attributes List of attribute names and terms.
+ * @return {Object} Default attributes.
+ */
+export const getDefaultAttributes = ( attributes = {} ) => {
+	if ( ! isObject( attributes ) ) {
+		return {};
+	}
+
+	const attributeNames = Object.keys( attributes );
+	const defaultsToSet = {};
+
+	if ( attributeNames.length === 0 ) {
+		return defaultsToSet;
+	}
+
+	attributeNames.forEach( ( attributeName ) => {
+		const currentAttribute = attributes[ attributeName ];
+		const defaultValue = currentAttribute.terms.filter(
+			( term ) => term.default
+		);
+		if ( defaultValue.length > 0 ) {
+			defaultsToSet[ currentAttribute.name ] = defaultValue[ 0 ]?.slug;
+		}
+	} );
+
+	return defaultsToSet;
+};

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import { __, _n, sprintf } from '@wordpress/i18n';
+import Button from '@woocommerce/base-components/button';
+import { Icon, done as doneIcon } from '@woocommerce/icons';
+import { useState, useEffect } from '@wordpress/element';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
+import {
+	useStoreEvents,
+	useStoreAddToCart,
+} from '@woocommerce/base-context/hooks';
+import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
+
+/**
+ * Add to Cart Form Button Component.
+ */
+const AddToCartButton = () => {
+	const {
+		showFormElements,
+		productIsPurchasable,
+		productHasOptions,
+		product,
+		productType,
+		isDisabled,
+		isProcessing,
+		eventRegistration,
+		hasError,
+		dispatchActions,
+	} = useAddToCartFormContext();
+	const { parentName } = useInnerBlockLayoutContext();
+	const { dispatchStoreEvent } = useStoreEvents();
+	const { cartQuantity } = useStoreAddToCart( product.id || 0 );
+	const [ addedToCart, setAddedToCart ] = useState( false );
+	const addToCartButtonData = product.add_to_cart || {
+		url: '',
+		text: '',
+	};
+
+	// Subscribe to emitter for after processing.
+	useEffect( () => {
+		const onSuccess = () => {
+			if ( ! hasError ) {
+				setAddedToCart( true );
+			}
+			return true;
+		};
+		const unsubscribeProcessing = eventRegistration.onAddToCartAfterProcessingWithSuccess(
+			onSuccess,
+			0
+		);
+		return () => {
+			unsubscribeProcessing();
+		};
+	}, [ eventRegistration, hasError ] );
+
+	/**
+	 * We can show a real button if we are:
+	 *
+	 *  	a) Showing a full add to cart form.
+	 * 		b) The product doesn't have options and can therefore be added directly to the cart.
+	 * 		c) The product is purchasable.
+	 *
+	 * Otherwise we show a link instead.
+	 */
+	const showButton =
+		( showFormElements ||
+			( ! productHasOptions && productType === 'simple' ) ) &&
+		productIsPurchasable;
+
+	return showButton ? (
+		<ButtonComponent
+			className="wc-block-components-product-add-to-cart-button"
+			quantityInCart={ cartQuantity }
+			isDisabled={ isDisabled }
+			isProcessing={ isProcessing }
+			isDone={ addedToCart }
+			onClick={ () => {
+				dispatchActions.submitForm();
+				dispatchStoreEvent( 'cart-add-item', {
+					product,
+					listName: parentName,
+				} );
+			} }
+		/>
+	) : (
+		<LinkComponent
+			className="wc-block-components-product-add-to-cart-button"
+			href={ addToCartButtonData.url }
+			text={
+				addToCartButtonData.text ||
+				__( 'View Product', 'woocommerce' )
+			}
+			onClick={ () => {
+				dispatchStoreEvent( 'product-view-link', {
+					product,
+					listName: parentName,
+				} );
+			} }
+		/>
+	);
+};
+
+/**
+ * Button component for non-purchasable products.
+ *
+ * @param {Object} props           Incoming props.
+ * @param {string} props.className Css classnames.
+ * @param {string} props.href      Link for button.
+ * @param {string} props.text      Text content for button.
+ * @param {function():any} props.onClick Callback to execute when button is clicked.
+ */
+const LinkComponent = ( { className, href, text, onClick } ) => {
+	return (
+		<Button
+			className={ className }
+			href={ href }
+			onClick={ onClick }
+			rel="nofollow"
+		>
+			{ text }
+		</Button>
+	);
+};
+
+/**
+ * Button for purchasable products.
+ *
+ * @param {Object} props                 Incoming props for component
+ * @param {string} props.className       Incoming css class name.
+ * @param {number} props.quantityInCart  Quantity of item in cart.
+ * @param {boolean} props.isProcessing   Whether processing action is occurring.
+ * @param {boolean} props.isDisabled     Whether the button is disabled or not.
+ * @param {boolean} props.isDone         Whether processing is done.
+ * @param {function():any} props.onClick Callback to execute when button is clicked.
+ */
+const ButtonComponent = ( {
+	className,
+	quantityInCart,
+	isProcessing,
+	isDisabled,
+	isDone,
+	onClick,
+} ) => {
+	return (
+		<Button
+			className={ className }
+			disabled={ isDisabled }
+			showSpinner={ isProcessing }
+			onClick={ onClick }
+		>
+			{ isDone && quantityInCart > 0
+				? sprintf(
+						/* translators: %s number of products in cart. */
+						_n(
+							'%d in cart',
+							'%d in cart',
+							quantityInCart,
+							'woocommerce'
+						),
+						quantityInCart
+				  )
+				: __( 'Add to cart', 'woocommerce' ) }
+			{ !! isDone && (
+				<Icon
+					srcElement={ doneIcon }
+					alt={ __( 'Done', 'woocommerce' ) }
+				/>
+			) }
+		</Button>
+	);
+};
+
+export default AddToCartButton;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/index.js

@@ -0,0 +1,3 @@
+export { default as AddToCartButton } from './add-to-cart-button';
+export { default as QuantityInput } from './quantity-input';
+export { default as ProductUnavailable } from './product-unavailable';

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/product-unavailable.js

@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+const ProductUnavailable = ( {
+	reason = __(
+		'Sorry, this product cannot be purchased.',
+		'woocommerce'
+	),
+} ) => {
+	return (
+		<div className="wc-block-components-product-add-to-cart-unavailable">
+			{ reason }
+		</div>
+	);
+};
+
+export default ProductUnavailable;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js

@@ -0,0 +1,28 @@
+/**
+ * Quantity Input Component.
+ *
+ * @param {Object}         props          Incoming props for component
+ * @param {boolean}        props.disabled Whether input is disabled or not.
+ * @param {number}         props.min      Minimum value for input.
+ * @param {number}         props.max      Maximum value for input.
+ * @param {number}         props.value    Value for input.
+ * @param {function():any} props.onChange Function to call on input change event.
+ */
+const QuantityInput = ( { disabled, min, max, value, onChange } ) => {
+	return (
+		<input
+			className="wc-block-components-product-add-to-cart-quantity"
+			type="number"
+			value={ value }
+			min={ min }
+			max={ max }
+			hidden={ max === 1 }
+			disabled={ disabled }
+			onChange={ ( e ) => {
+				onChange( e.target.value );
+			} }
+		/>
+	);
+};
+
+export default QuantityInput;

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

@@ -0,0 +1,49 @@
+.wc-block-components-product-add-to-cart {
+	margin: 0;
+	display: flex;
+	flex-wrap: wrap;
+
+	.wc-block-components-product-add-to-cart-button {
+		margin: 0 0 em($gap-small) 0;
+
+		.wc-block-components-button__text {
+			display: block;
+
+			> svg {
+				fill: currentColor;
+				vertical-align: top;
+				width: 1.5em;
+				height: 1.5em;
+				margin: -0.25em 0 -0.25em 0.5em;
+			}
+		}
+	}
+
+	.wc-block-components-product-add-to-cart-quantity {
+		margin: 0 1em em($gap-small) 0;
+		flex-basis: 5em;
+		padding: 0.618em;
+		background: $white;
+		border: 1px solid #ccc;
+		border-radius: 2px;
+		color: #43454b;
+		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125);
+		text-align: center;
+	}
+}
+
+.is-loading .wc-block-components-product-add-to-cart,
+.wc-block-components-product-add-to-cart--placeholder {
+	.wc-block-components-product-add-to-cart-quantity,
+	.wc-block-components-product-add-to-cart-button {
+		@include placeholder();
+	}
+}
+
+.wc-block-grid .wc-block-components-product-add-to-cart {
+	justify-content: center;
+}
+
+.wc-block-components-product-add-to-cart-notice {
+	margin: 0;
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/block.js

@@ -0,0 +1,145 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { __, _n, sprintf } from '@wordpress/i18n';
+import {
+	useStoreEvents,
+	useStoreAddToCart,
+} from '@woocommerce/base-context/hooks';
+import { decodeEntities } from '@wordpress/html-entities';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product Button Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( { className } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wp-block-button',
+				'wc-block-components-product-button',
+				{
+					[ `${ parentClassName }__product-add-to-cart` ]: parentClassName,
+				}
+			) }
+		>
+			{ product.id ? (
+				<AddToCartButton product={ product } />
+			) : (
+				<AddToCartButtonPlaceholder />
+			) }
+		</div>
+	);
+};
+
+const AddToCartButton = ( { product } ) => {
+	const {
+		id,
+		permalink,
+		add_to_cart: productCartDetails,
+		has_options: hasOptions,
+		is_purchasable: isPurchasable,
+		is_in_stock: isInStock,
+	} = product;
+	const { dispatchStoreEvent } = useStoreEvents();
+	const { cartQuantity, addingToCart, addToCart } = useStoreAddToCart( id );
+
+	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,
+					'woocommerce'
+				),
+				cartQuantity
+		  )
+		: decodeEntities(
+				productCartDetails?.text ||
+					__( 'Add to cart', 'woocommerce' )
+		  );
+
+	const ButtonTag = allowAddToCart ? 'button' : 'a';
+	const buttonProps = {};
+
+	if ( ! allowAddToCart ) {
+		buttonProps.href = permalink;
+		buttonProps.rel = 'nofollow';
+		buttonProps.onClick = () => {
+			dispatchStoreEvent( 'product-view-link', {
+				product,
+			} );
+		};
+	} else {
+		buttonProps.onClick = () => {
+			addToCart();
+			dispatchStoreEvent( 'cart-add-item', {
+				product,
+			} );
+		};
+	}
+
+	return (
+		<ButtonTag
+			aria-label={ buttonAriaLabel }
+			className={ classnames(
+				'wp-block-button__link',
+				'add_to_cart_button',
+				'wc-block-components-product-button__button',
+				{
+					loading: addingToCart,
+					added: addedToCart,
+				}
+			) }
+			disabled={ addingToCart }
+			{ ...buttonProps }
+		>
+			{ buttonText }
+		</ButtonTag>
+	);
+};
+
+const AddToCartButtonPlaceholder = () => {
+	return (
+		<button
+			className={ classnames(
+				'wp-block-button__link',
+				'add_to_cart_button',
+				'wc-block-components-product-button__button',
+				'wc-block-components-product-button__button--placeholder'
+			) }
+			disabled={ true }
+		/>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { cart, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Add to Cart Button',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ cart } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display a call to action button which either adds the product to the cart, or links to the product page.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/edit.js

@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Disabled } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return (
+		<Disabled>
+			<Block { ...attributes } />
+		</Disabled>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its add to cart button.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-button', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/button/style.scss

@@ -0,0 +1,36 @@
+.wp-block-button.wc-block-components-product-button {
+	word-break: break-word;
+	white-space: normal;
+	margin-top: 0;
+	margin-bottom: $gap-small;
+
+	.wc-block-components-product-button__button {
+		word-break: break-word;
+		white-space: normal;
+		margin: 0 auto;
+		display: inline-flex;
+		justify-content: center;
+	}
+
+	.wc-block-components-product-button__button--placeholder {
+		@include placeholder();
+		min-width: 8em;
+		min-height: 3em;
+	}
+}
+
+.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {
+	@include placeholder();
+	min-width: 8em;
+	min-height: 3em;
+}
+
+
+.theme-twentytwentyone {
+	// Prevent buttons appearing disabled in the editor.
+	.editor-styles-wrapper .wc-block-components-product-button .wp-block-button__link {
+		background-color: var(--button--color-background);
+		color: var(--button--color-text);
+		border-color: var(--button--color-background);
+	}
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/block.js

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product Category Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( { className } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	if ( isEmpty( product.categories ) ) {
+		return null;
+	}
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-category-list',
+				{
+					[ `${ parentClassName }__product-category-list` ]: parentClassName,
+				}
+			) }
+		>
+			{ __( 'Categories:', 'woocommerce' ) }{ ' ' }
+			<ul>
+				{ Object.values( product.categories ).map(
+					( { name, link, slug } ) => {
+						return (
+							<li key={ `category-list-item-${ slug }` }>
+								<a href={ link }>{ name }</a>
+							</li>
+						);
+					}
+				) }
+			</ul>
+		</div>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { folder, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Category List',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ folder } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display a list of categories belonging to a product.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/edit.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Disabled } from '@wordpress/components';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return (
+		<>
+			<EditProductLink />
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its categories.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-category-list', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/category-list/style.scss

@@ -0,0 +1,23 @@
+.wc-block-components-product-category-list {
+	margin-top: 0;
+	margin-bottom: em($gap-small);
+
+	ul {
+		margin: 0;
+		padding: 0;
+		display: inline;
+
+		li {
+			display: inline;
+			list-style: none;
+		}
+
+		li::after {
+			content: ", ";
+		}
+
+		li:last-child::after {
+			content: "";
+		}
+	}
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/attributes.js

@@ -0,0 +1,24 @@
+export const blockAttributes = {
+	showProductLink: {
+		type: 'boolean',
+		default: true,
+	},
+	showSaleBadge: {
+		type: 'boolean',
+		default: true,
+	},
+	saleBadgeAlign: {
+		type: 'string',
+		default: 'right',
+	},
+	imageSizing: {
+		type: 'string',
+		default: 'full-size',
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/block.js

@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { useState, Fragment } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import classnames from 'classnames';
+import { PLACEHOLDER_IMG_SRC } from '@woocommerce/settings';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import ProductSaleBadge from './../sale-badge/block';
+import './style.scss';
+
+/**
+ * Product Image Block Component.
+ *
+ * @param {Object} props                  Incoming props.
+ * @param {string} [props.className]      CSS Class name for the component.
+ * @param {string} [props.imageSizing]    Size of image to use.
+ * @param {boolean} [props.showProductLink]   Whether or not to display a link to the product page.
+ * @param {boolean} [props.showSaleBadge] Whether or not to display the on sale badge.
+ * @param {string} [props.saleBadgeAlign] How should the sale badge be aligned if displayed.
+ * @return {*} The component.
+ */
+export const Block = ( {
+	className,
+	imageSizing = 'full-size',
+	showProductLink = true,
+	showSaleBadge,
+	saleBadgeAlign = 'right',
+} ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const [ imageLoaded, setImageLoaded ] = useState( false );
+	const { dispatchStoreEvent } = useStoreEvents();
+
+	if ( ! product.id ) {
+		return (
+			<div
+				className={ classnames(
+					className,
+					'wc-block-components-product-image',
+					'wc-block-components-product-image--placeholder',
+					{
+						[ `${ parentClassName }__product-image` ]: parentClassName,
+					}
+				) }
+			>
+				<ImagePlaceholder />
+			</div>
+		);
+	}
+	const hasProductImages = !! product.images.length;
+	const image = hasProductImages ? product.images[ 0 ] : null;
+	const ParentComponent = showProductLink ? 'a' : Fragment;
+	const anchorLabel = sprintf(
+		/* translators: %s is referring to the product name */
+		__( 'Link to %s', 'woocommerce' ),
+		product.name
+	);
+	const anchorProps = {
+		href: product.permalink,
+		rel: 'nofollow',
+		...( ! hasProductImages && { 'aria-label': anchorLabel } ),
+		onClick: () => {
+			dispatchStoreEvent( 'product-view-link', {
+				product,
+			} );
+		},
+	};
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-image',
+				{
+					[ `${ parentClassName }__product-image` ]: parentClassName,
+				}
+			) }
+		>
+			<ParentComponent { ...( showProductLink && anchorProps ) }>
+				{ !! showSaleBadge && (
+					<ProductSaleBadge
+						align={ saleBadgeAlign }
+						product={ product }
+					/>
+				) }
+				<Image
+					fallbackAlt={ product.name }
+					image={ image }
+					onLoad={ () => setImageLoaded( true ) }
+					loaded={ imageLoaded }
+					showFullSize={ imageSizing !== 'cropped' }
+				/>
+			</ParentComponent>
+		</div>
+	);
+};
+
+const ImagePlaceholder = () => {
+	return (
+		<img src={ PLACEHOLDER_IMG_SRC } alt="" width={ 500 } height={ 500 } />
+	);
+};
+
+const Image = ( { image, onLoad, loaded, showFullSize, fallbackAlt } ) => {
+	const { thumbnail, src, srcset, sizes, alt } = image || {};
+	const imageProps = {
+		alt: alt || fallbackAlt,
+		onLoad,
+		hidden: ! loaded,
+		src: thumbnail,
+		...( showFullSize && { src, srcSet: srcset, sizes } ),
+	};
+
+	return (
+		<>
+			{ imageProps.src && (
+				/* eslint-disable-next-line jsx-a11y/alt-text */
+				<img data-testid="product-image" { ...imageProps } />
+			) }
+			{ ! loaded && <ImagePlaceholder /> }
+		</>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+	fallbackAlt: PropTypes.string,
+	showProductLink: PropTypes.bool,
+	showSaleBadge: PropTypes.bool,
+	saleBadgeAlign: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { image, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Image',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ image } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the main product image',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/edit.js

@@ -0,0 +1,159 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import { createInterpolateElement } from '@wordpress/element';
+import ToggleButtonControl from '@woocommerce/editor-components/toggle-button-control';
+import { getAdminLink } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes, setAttributes } ) => {
+	const {
+		showProductLink,
+		imageSizing,
+		showSaleBadge,
+		saleBadgeAlign,
+	} = attributes;
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Content', 'woocommerce' ) }
+				>
+					<ToggleControl
+						label={ __(
+							'Link to Product Page',
+							'woocommerce'
+						) }
+						help={ __(
+							'Links the image to the single product listing.',
+							'woocommerce'
+						) }
+						checked={ showProductLink }
+						onChange={ () =>
+							setAttributes( {
+								showProductLink: ! showProductLink,
+							} )
+						}
+					/>
+					<ToggleControl
+						label={ __(
+							'Show On-Sale Badge',
+							'woocommerce'
+						) }
+						help={ __(
+							'Overlay a "sale" badge if the product is on-sale.',
+							'woocommerce'
+						) }
+						checked={ showSaleBadge }
+						onChange={ () =>
+							setAttributes( {
+								showSaleBadge: ! showSaleBadge,
+							} )
+						}
+					/>
+					{ showSaleBadge && (
+						<ToggleButtonControl
+							label={ __(
+								'Sale Badge Alignment',
+								'woocommerce'
+							) }
+							value={ saleBadgeAlign }
+							options={ [
+								{
+									label: __(
+										'Left',
+										'woocommerce'
+									),
+									value: 'left',
+								},
+								{
+									label: __(
+										'Center',
+										'woocommerce'
+									),
+									value: 'center',
+								},
+								{
+									label: __(
+										'Right',
+										'woocommerce'
+									),
+									value: 'right',
+								},
+							] }
+							onChange={ ( value ) =>
+								setAttributes( { saleBadgeAlign: value } )
+							}
+						/>
+					) }
+					<ToggleButtonControl
+						label={ __(
+							'Image Sizing',
+							'woocommerce'
+						) }
+						help={ createInterpolateElement(
+							__(
+								'Product image cropping can be modified in the <a>Customizer</a>.',
+								'woocommerce'
+							),
+							{
+								a: (
+									// eslint-disable-next-line jsx-a11y/anchor-has-content
+									<a
+										href={ `${ getAdminLink(
+											'customize.php'
+										) }?autofocus[panel]=woocommerce&autofocus[section]=woocommerce_product_images` }
+										target="_blank"
+										rel="noopener noreferrer"
+									/>
+								),
+							}
+						) }
+						value={ imageSizing }
+						options={ [
+							{
+								label: __(
+									'Full Size',
+									'woocommerce'
+								),
+								value: 'full-size',
+							},
+							{
+								label: __(
+									'Cropped',
+									'woocommerce'
+								),
+								value: 'cropped',
+							},
+						] }
+						onChange={ ( value ) =>
+							setAttributes( { imageSizing: value } )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its image.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/frontend.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-image', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/style.scss

@@ -0,0 +1,53 @@
+.editor-styles-wrapper .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image,
+.wc-block-components-product-image {
+	margin-top: 0;
+	margin-bottom: $gap-small;
+	text-decoration: none;
+	display: block;
+	position: relative;
+
+	a {
+		text-decoration: none;
+		border: 0;
+		outline: 0;
+		box-shadow: none;
+	}
+
+	img {
+		vertical-align: middle;
+		width: 100%;
+
+		&[hidden] {
+			display: none;
+		}
+	}
+
+	.wc-block-components-product-sale-badge {
+		&--align-left {
+			position: absolute;
+			left: $gap-smaller*0.5;
+			top: $gap-smaller*0.5;
+			right: auto;
+			margin: 0;
+		}
+		&--align-center {
+			position: absolute;
+			top: $gap-smaller*0.5;
+			left: 50%;
+			right: auto;
+			transform: translateX(-50%);
+			margin: 0;
+		}
+		&--align-right {
+			position: absolute;
+			right: $gap-smaller*0.5;
+			top: $gap-smaller*0.5;
+			left: auto;
+			margin: 0;
+		}
+	}
+}
+
+.is-loading .wc-block-components-product-image {
+	@include placeholder();
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/image/test/block.test.js

@@ -0,0 +1,139 @@
+/**
+ * External dependencies
+ */
+import { render, fireEvent } from '@testing-library/react';
+import { ProductDataContextProvider } from '@woocommerce/shared-context';
+
+/**
+ * Internal dependencies
+ */
+import { Block } from '../block';
+
+jest.mock( '@woocommerce/block-settings', () => ( {
+	__esModule: true,
+	PLACEHOLDER_IMG_SRC: 'placeholder.jpg',
+} ) );
+
+const productWithoutImages = {
+	name: 'Test product',
+	id: 1,
+	fallbackAlt: 'Test product',
+	permalink: 'http://test.com/product/test-product/',
+	images: [],
+};
+
+const productWithImages = {
+	name: 'Test product',
+	id: 1,
+	fallbackAlt: 'Test product',
+	permalink: 'http://test.com/product/test-product/',
+	images: [
+		{
+			id: 56,
+			src: 'logo-1.jpg',
+			thumbnail: 'logo-1-324x324.jpg',
+			srcset:
+				'logo-1.jpg 800w, logo-1-300x300.jpg 300w, logo-1-150x150.jpg 150w, logo-1-768x767.jpg 768w, logo-1-324x324.jpg 324w, logo-1-416x415.jpg 416w, logo-1-100x100.jpg 100w',
+			sizes: '(max-width: 800px) 100vw, 800px',
+			name: 'logo-1.jpg',
+			alt: '',
+		},
+		{
+			id: 55,
+			src: 'beanie-with-logo-1.jpg',
+			thumbnail: 'beanie-with-logo-1-324x324.jpg',
+			srcset:
+				'beanie-with-logo-1.jpg 800w, beanie-with-logo-1-300x300.jpg 300w, beanie-with-logo-1-150x150.jpg 150w, beanie-with-logo-1-768x768.jpg 768w, beanie-with-logo-1-324x324.jpg 324w, beanie-with-logo-1-416x416.jpg 416w, beanie-with-logo-1-100x100.jpg 100w',
+			sizes: '(max-width: 800px) 100vw, 800px',
+			name: 'beanie-with-logo-1.jpg',
+			alt: '',
+		},
+	],
+};
+
+describe( 'Product Image Block', () => {
+	describe( 'with product link', () => {
+		test( 'should render an anchor with the product image', () => {
+			const component = render(
+				<ProductDataContextProvider product={ productWithImages }>
+					<Block showProductLink={ true } />
+				</ProductDataContextProvider>
+			);
+
+			// use testId as alt is added after image is loaded
+			const image = component.getByTestId( 'product-image' );
+			fireEvent.load( image );
+
+			const productImage = component.getByAltText(
+				productWithImages.name
+			);
+			expect( productImage.getAttribute( 'src' ) ).toBe(
+				productWithImages.images[ 0 ].src
+			);
+
+			const anchor = productImage.closest( 'a' );
+			expect( anchor.getAttribute( 'href' ) ).toBe(
+				productWithImages.permalink
+			);
+		} );
+
+		test( 'should render an anchor with the placeholder image', () => {
+			const component = render(
+				<ProductDataContextProvider product={ productWithoutImages }>
+					<Block showProductLink={ true } />
+				</ProductDataContextProvider>
+			);
+
+			const placeholderImage = component.getByAltText( '' );
+			expect( placeholderImage.getAttribute( 'src' ) ).toBe(
+				'placeholder.jpg'
+			);
+
+			const anchor = placeholderImage.closest( 'a' );
+			expect( anchor.getAttribute( 'href' ) ).toBe(
+				productWithoutImages.permalink
+			);
+			expect( anchor.getAttribute( 'aria-label' ) ).toBe(
+				`Link to ${ productWithoutImages.name }`
+			);
+		} );
+	} );
+
+	describe( 'without product link', () => {
+		test( 'should render the product image without an anchor wrapper', () => {
+			const component = render(
+				<ProductDataContextProvider product={ productWithImages }>
+					<Block showProductLink={ false } />
+				</ProductDataContextProvider>
+			);
+			const image = component.getByTestId( 'product-image' );
+			fireEvent.load( image );
+
+			const productImage = component.getByAltText(
+				productWithImages.name
+			);
+			expect( productImage.getAttribute( 'src' ) ).toBe(
+				productWithImages.images[ 0 ].src
+			);
+
+			const anchor = productImage.closest( 'a' );
+			expect( anchor ).toBe( null );
+		} );
+
+		test( 'should render the placeholder image without an anchor wrapper', () => {
+			const component = render(
+				<ProductDataContextProvider product={ productWithoutImages }>
+					<Block showProductLink={ false } />
+				</ProductDataContextProvider>
+			);
+
+			const placeholderImage = component.getByAltText( '' );
+			expect( placeholderImage.getAttribute( 'src' ) ).toBe(
+				'placeholder.jpg'
+			);
+
+			const anchor = placeholderImage.closest( 'a' );
+			expect( anchor ).toBe( null );
+		} );
+	} );
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/attributes.js

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+let blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+if ( isFeaturePluginBuild() ) {
+	blockAttributes = {
+		...blockAttributes,
+		align: {
+			type: 'string',
+		},
+		fontSize: {
+			type: 'string',
+		},
+		customFontSize: {
+			type: 'number',
+		},
+		saleFontSize: {
+			type: 'string',
+		},
+		customSaleFontSize: {
+			type: 'number',
+		},
+		color: {
+			type: 'string',
+		},
+		saleColor: {
+			type: 'string',
+		},
+		customColor: {
+			type: 'string',
+		},
+		customSaleColor: {
+			type: 'string',
+		},
+	};
+}
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/block.js

@@ -0,0 +1,135 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import ProductPrice from '@woocommerce/base-components/product-price';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { getColorClassName, getFontSizeClass } from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Product Price Block Component.
+ *
+ * @param {Object} props                          Incoming props.
+ * @param {string} [props.className]              CSS Class name for the component.
+ * @param {string} [props.align]                  Text alignment.
+ * @param {string} [props.fontSize]               Normal Price font size name.
+ * @param {number} [props.customFontSize]         Normal Price custom font size.
+ * @param {string} [props.saleFontSize]           Original Price font size name.
+ * @param {number} [props.customSaleFontSize]     Original Price custom font size.
+ * @param {string} [props.color]                  Normal Price text color.
+ * @param {string} [props.customColor]            Normal Price custom text color.
+ * @param {string} [props.saleColor]              Original Price text color.
+ * @param {string} [props.customSaleColor]        Original Price custom text color.
+ * context will be used if this is not provided.
+ * @return {*} The component.
+ */
+const Block = ( {
+	className,
+	align,
+	fontSize,
+	customFontSize,
+	saleFontSize,
+	customSaleFontSize,
+	color,
+	customColor,
+	saleColor,
+	customSaleColor,
+} ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	const wrapperClassName = classnames( className, {
+		[ `${ parentClassName }__product-price` ]: parentClassName,
+	} );
+
+	if ( ! product.id ) {
+		return <ProductPrice align={ align } className={ wrapperClassName } />;
+	}
+
+	const colorClass = getColorClassName( 'color', color );
+	const fontSizeClass = getFontSizeClass( fontSize );
+	const saleColorClass = getColorClassName( 'color', saleColor );
+	const saleFontSizeClass = getFontSizeClass( saleFontSize );
+
+	const classes = classnames( {
+		'has-text-color': color || customColor,
+		'has-font-size': fontSize || customFontSize,
+		[ colorClass ]: colorClass,
+		[ fontSizeClass ]: fontSizeClass,
+	} );
+
+	const saleClasses = classnames( {
+		'has-text-color': saleColor || customSaleColor,
+		'has-font-size': saleFontSize || customSaleFontSize,
+		[ saleColorClass ]: saleColorClass,
+		[ saleFontSizeClass ]: saleFontSizeClass,
+	} );
+
+	const style = {
+		color: customColor,
+		fontSize: customFontSize,
+	};
+
+	const saleStyle = {
+		color: customSaleColor,
+		fontSize: customSaleFontSize,
+	};
+
+	const prices = product.prices;
+	const currency = getCurrencyFromPriceResponse( prices );
+	const isOnSale = prices.price !== prices.regular_price;
+	const priceClassName = isOnSale
+		? classnames( {
+				[ `${ parentClassName }__product-price__value` ]: parentClassName,
+				[ saleClasses ]: isFeaturePluginBuild(),
+		  } )
+		: classnames( {
+				[ `${ parentClassName }__product-price__value` ]: parentClassName,
+				[ classes ]: isFeaturePluginBuild(),
+		  } );
+	const priceStyle = isOnSale ? saleStyle : style;
+
+	return (
+		<ProductPrice
+			align={ align }
+			className={ wrapperClassName }
+			currency={ currency }
+			price={ prices.price }
+			priceClassName={ priceClassName }
+			priceStyle={ isFeaturePluginBuild() ? priceStyle : {} }
+			// Range price props
+			minPrice={ prices?.price_range?.min_amount }
+			maxPrice={ prices?.price_range?.max_amount }
+			// This is the regular or original price when the `price` value is a sale price.
+			regularPrice={ prices.regular_price }
+			regularPriceClassName={ classnames( {
+				[ `${ parentClassName }__product-price__regular` ]: parentClassName,
+				[ classes ]: isFeaturePluginBuild(),
+			} ) }
+			regularPriceStyle={ isFeaturePluginBuild() ? style : {} }
+		/>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+	product: PropTypes.object,
+	align: PropTypes.string,
+	fontSize: PropTypes.string,
+	customFontSize: PropTypes.number,
+	saleFontSize: PropTypes.string,
+	customSaleFontSize: PropTypes.number,
+	color: PropTypes.string,
+	customColor: PropTypes.string,
+	saleColor: PropTypes.string,
+	customSaleColor: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { bill, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Price',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ bill } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the price of a product.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/edit.js

@@ -0,0 +1,133 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { PanelBody, BaseControl } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import {
+	InspectorControls,
+	BlockControls,
+	AlignmentToolbar,
+	withColors,
+	ColorPalette,
+	FontSizePicker,
+	withFontSizes,
+} from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const TextControl = ( {
+	fontSize,
+	setFontSize,
+	color,
+	setColor,
+	colorLabel,
+} ) => (
+	<>
+		<FontSizePicker value={ fontSize.size } onChange={ setFontSize } />
+		{ /* ColorPalette doesn't accept an id. */
+		/* eslint-disable-next-line @wordpress/no-base-control-with-label-without-id */ }
+		<BaseControl label={ colorLabel }>
+			<ColorPalette
+				value={ color.color }
+				onChange={ setColor }
+				label={ __( 'Color' ) }
+			/>
+		</BaseControl>
+	</>
+);
+const PriceEdit = ( {
+	fontSize,
+	saleFontSize,
+	setFontSize,
+	setSaleFontSize,
+	color,
+	saleColor,
+	setColor,
+	setSaleColor,
+	attributes,
+	setAttributes,
+} ) => {
+	const { align } = attributes;
+	return (
+		<>
+			{ isFeaturePluginBuild() && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { align: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
+			<InspectorControls>
+				{ isFeaturePluginBuild() && (
+					<>
+						<PanelBody
+							title={ __(
+								'Price',
+								'woocommerce'
+							) }
+						>
+							<TextControl
+								color={ color }
+								setColor={ setColor }
+								fontSize={ fontSize }
+								setFontSize={ setFontSize }
+								colorLabel={ __(
+									'Color',
+									'woocommerce'
+								) }
+							/>
+						</PanelBody>
+						<PanelBody
+							title={ __(
+								'Sale price',
+								'woocommerce'
+							) }
+						>
+							<TextControl
+								color={ saleColor }
+								setColor={ setSaleColor }
+								fontSize={ saleFontSize }
+								setFontSize={ setSaleFontSize }
+								colorLabel={ __(
+									'Color',
+									'woocommerce'
+								) }
+							/>
+						</PanelBody>
+					</>
+				) }
+			</InspectorControls>
+			<Block { ...attributes } />
+		</>
+	);
+};
+
+const Price = isFeaturePluginBuild()
+	? compose( [
+			withFontSizes( 'fontSize' ),
+			withFontSizes( 'saleFontSize' ),
+			withFontSizes( 'originalFontSize' ),
+			withColors( 'color', { textColor: 'color' } ),
+			withColors( 'saleColor', { textColor: 'saleColor' } ),
+			withColors( 'originalColor', { textColor: 'originalColor' } ),
+			withProductSelector( {
+				icon: BLOCK_ICON,
+				label: BLOCK_TITLE,
+				description: __(
+					'Choose a product to display its price.',
+					'woocommerce'
+				),
+			} ),
+	  ] )( PriceEdit )
+	: PriceEdit;
+
+export default Price;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/price/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import edit from './edit';
+import attributes from './attributes';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-price', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/block.js

@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { __, sprintf } from '@wordpress/i18n';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product Rating Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( { className } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const rating = getAverageRating( product );
+
+	if ( ! rating ) {
+		return null;
+	}
+
+	const starStyle = {
+		width: ( rating / 5 ) * 100 + '%',
+	};
+
+	const ratingText = sprintf(
+		/* translators: %f is referring to the average rating value */
+		__( 'Rated %f out of 5', 'woocommerce' ),
+		rating
+	);
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-rating',
+				{
+					[ `${ parentClassName }__product-rating` ]: parentClassName,
+				}
+			) }
+		>
+			<div
+				className={ classnames(
+					'wc-block-components-product-rating__stars',
+					`${ parentClassName }__product-rating__stars`
+				) }
+				role="img"
+				aria-label={ ratingText }
+			>
+				<span style={ starStyle }>{ ratingText }</span>
+			</div>
+		</div>
+	);
+};
+
+const getAverageRating = ( product ) => {
+	const rating = parseFloat( product.average_rating );
+
+	return Number.isFinite( rating ) && rating > 0 ? rating : 0;
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { star, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Rating',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ star } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the average rating of a product.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/edit.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return <Block { ...attributes } />;
+};
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its rating.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-rating', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/rating/style.scss

@@ -0,0 +1,52 @@
+.wc-block-components-product-rating {
+	display: block;
+	margin-top: 0;
+	margin-bottom: $gap-small;
+
+	&__stars {
+		overflow: hidden;
+		position: relative;
+		width: 5.3em;
+		height: 1.618em;
+		line-height: 1.618;
+		font-size: 1em;
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
+		font-family: star;
+		font-weight: 400;
+		margin: 0 auto;
+		text-align: left;
+
+		&::before {
+			content: "\53\53\53\53\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			opacity: 0.5;
+			color: #aaa;
+			white-space: nowrap;
+		}
+		span {
+			overflow: hidden;
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			padding-top: 1.5em;
+		}
+		span::before {
+			content: "\53\53\53\53\53";
+			top: 0;
+			left: 0;
+			right: 0;
+			position: absolute;
+			color: #000;
+			white-space: nowrap;
+		}
+	}
+}
+.wc-block-single-product {
+	.wc-block-components-product-rating__stars {
+		margin: 0;
+	}
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/block.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
+import Label from '@woocommerce/base-components/label';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product Sale Badge Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @param {string} [props.align]     Alignment of the badge.
+ * @return {*} The component.
+ */
+const Block = ( { className, align } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	if ( ! product.id || ! product.on_sale ) {
+		return null;
+	}
+
+	const alignClass =
+		typeof align === 'string'
+			? `wc-block-components-product-sale-badge--align-${ align }`
+			: '';
+
+	return (
+		<div
+			className={ classnames(
+				'wc-block-components-product-sale-badge',
+				className,
+				alignClass,
+				{
+					[ `${ parentClassName }__product-onsale` ]: parentClassName,
+				}
+			) }
+		>
+			<Label
+				label={ __( 'Sale', 'woocommerce' ) }
+				screenReaderLabel={ __(
+					'Product on sale',
+					'woocommerce'
+				) }
+			/>
+		</div>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+	align: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { tag, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'On-Sale Badge',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ tag } />;
+export const BLOCK_DESCRIPTION = __(
+	'Displays an on-sale badge if the product is on-sale.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/edit.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return <Block { ...attributes } />;
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its sale-badge.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/index.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	supports: {
+		html: false,
+	},
+	attributes,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-sale-badge', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sale-badge/style.scss

@@ -0,0 +1,16 @@
+.wc-block-components-product-sale-badge {
+	margin: 0 auto $gap-small;
+	@include font-size(small);
+	padding: em($gap-smallest) em($gap-small);
+	display: inline-block;
+	width: auto;
+	border: 1px solid #43454b;
+	border-radius: 3px;
+	color: #43454b;
+	background: #fff;
+	text-align: center;
+	text-transform: uppercase;
+	font-weight: 600;
+	z-index: 9;
+	position: static;
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/save.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const save = ( { attributes } ) => {
+	return (
+		<div className={ classnames( 'is-loading', attributes.className ) } />
+	);
+};
+
+export default save;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/config.tsx

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, grid } from '@woocommerce/icons';
+import { isExperimentalBuild } from '@woocommerce/block-settings';
+import type { BlockConfiguration } from '@wordpress/blocks';
+/**
+ * Internal dependencies
+ */
+import save from '../save';
+
+/**
+ * Holds default config for this collection of blocks.
+ * attributes and title are omitted here as these are added on an individual block level.
+ */
+const sharedConfig: Omit< BlockConfiguration, 'attributes' | 'title' > = {
+	category: 'woocommerce-product-elements',
+	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
+	icon: {
+		src: <Icon srcElement={ grid } />,
+		foreground: '#96588a',
+	},
+	supports: {
+		html: false,
+	},
+	parent: isExperimentalBuild()
+		? undefined
+		: [ '@woocommerce/all-products', '@woocommerce/single-product' ],
+	save,
+	deprecated: [
+		{
+			attributes: {},
+			save(): null {
+				return null;
+			},
+		},
+	],
+};
+
+export default sharedConfig;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/editor.scss

@@ -0,0 +1,11 @@
+.wc-atomic-blocks-product__selection {
+	width: 100%;
+}
+.wc-atomic-blocks-product__edit-card {
+	padding: 16px;
+	border-top: 1px solid $gray-200;
+
+	.wc-atomic-blocks-product__edit-card-title {
+		margin: 0 0 $gap;
+	}
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/shared/with-product-selector.js

@@ -0,0 +1,90 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import ProductControl from '@woocommerce/editor-components/product-control';
+import { Placeholder, Button, ToolbarGroup } from '@wordpress/components';
+import { BlockControls } from '@wordpress/block-editor';
+import TextToolbarButton from '@woocommerce/editor-components/text-toolbar-button';
+import { useProductDataContext } from '@woocommerce/shared-context';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+/**
+ * This HOC shows a product selection interface if context is not present in the editor.
+ *
+ * @param {Object} selectorArgs Options for the selector.
+ *
+ */
+const withProductSelector = ( selectorArgs ) => ( OriginalComponent ) => {
+	return ( props ) => {
+		const productDataContext = useProductDataContext();
+		const { attributes, setAttributes } = props;
+		const { productId } = attributes;
+		const [ isEditing, setIsEditing ] = useState( ! productId );
+
+		if ( productDataContext.hasContext ) {
+			return <OriginalComponent { ...props } />;
+		}
+
+		return (
+			<>
+				{ isEditing ? (
+					<Placeholder
+						icon={ selectorArgs.icon || '' }
+						label={ selectorArgs.label || '' }
+						className="wc-atomic-blocks-product"
+					>
+						{ !! selectorArgs.description && (
+							<div>{ selectorArgs.description }</div>
+						) }
+						<div className="wc-atomic-blocks-product__selection">
+							<ProductControl
+								selected={ productId || 0 }
+								showVariations
+								onChange={ ( value = [] ) => {
+									setAttributes( {
+										productId: value[ 0 ]
+											? value[ 0 ].id
+											: 0,
+									} );
+								} }
+							/>
+							<Button
+								isSecondary
+								disabled={ ! productId }
+								onClick={ () => {
+									setIsEditing( false );
+								} }
+							>
+								{ __( 'Done', 'woocommerce' ) }
+							</Button>
+						</div>
+					</Placeholder>
+				) : (
+					<>
+						<BlockControls>
+							<ToolbarGroup>
+								<TextToolbarButton
+									onClick={ () => setIsEditing( true ) }
+								>
+									{ __(
+										'Switch product…',
+										'woocommerce'
+									) }
+								</TextToolbarButton>
+							</ToolbarGroup>
+						</BlockControls>
+						<OriginalComponent { ...props } />
+					</>
+				) }
+			</>
+		);
+	};
+};
+
+export default withProductSelector;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/block.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product SKU Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( { className } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const sku = product.sku;
+
+	if ( ! sku ) {
+		return null;
+	}
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-sku',
+				{
+					[ `${ parentClassName }__product-sku` ]: parentClassName,
+				}
+			) }
+		>
+			{ __( 'SKU:', 'woocommerce' ) }{ ' ' }
+			<strong>{ sku }</strong>
+		</div>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/constants.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { barcode, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __( 'Product SKU', 'woocommerce' );
+export const BLOCK_ICON = <Icon srcElement={ barcode } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the SKU of a product.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/edit.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return (
+		<>
+			<EditProductLink />
+			<Block { ...attributes } />
+		</>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its SKU.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-sku', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/sku/style.scss

@@ -0,0 +1,7 @@
+.wc-block-components-product-sku {
+	margin-top: 0;
+	margin-bottom: $gap-small;
+	display: block;
+	text-transform: uppercase;
+	@include font-size(small);
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/block.js

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product Stock Indicator Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( { className } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	if ( ! product.id || ! product.is_purchasable ) {
+		return null;
+	}
+
+	const inStock = !! product.is_in_stock;
+	const lowStock = product.low_stock_remaining;
+	const isBackordered = product.is_on_backorder;
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-stock-indicator',
+				{
+					[ `${ parentClassName }__stock-indicator` ]: parentClassName,
+					'wc-block-components-product-stock-indicator--in-stock': inStock,
+					'wc-block-components-product-stock-indicator--out-of-stock': ! inStock,
+					'wc-block-components-product-stock-indicator--low-stock': !! lowStock,
+					'wc-block-components-product-stock-indicator--available-on-backorder': !! isBackordered,
+				}
+			) }
+		>
+			{ lowStock
+				? lowStockText( lowStock )
+				: stockText( inStock, isBackordered ) }
+		</div>
+	);
+};
+
+const lowStockText = ( lowStock ) => {
+	return sprintf(
+		/* translators: %d stock amount (number of items in stock for product) */
+		__( '%d left in stock', 'woocommerce' ),
+		lowStock
+	);
+};
+
+const stockText = ( inStock, isBackordered ) => {
+	if ( isBackordered ) {
+		return __( 'Available on backorder', 'woocommerce' );
+	}
+
+	return inStock
+		? __( 'In Stock', 'woocommerce' )
+		: __( 'Out of Stock', 'woocommerce' );
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { box, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Stock Indicator',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ box } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display product stock status.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/edit.js

@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return (
+		<>
+			<EditProductLink />
+			<Block { ...attributes } />
+		</>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its stock.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-stock-indicator', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss

@@ -0,0 +1,17 @@
+.wc-block-components-product-stock-indicator {
+	margin-top: 0;
+	margin-bottom: em($gap-small);
+	display: block;
+	@include font-size(small);
+
+	&--in-stock {
+		color: $in-stock-color;
+	}
+	&--out-of-stock {
+		color: $no-stock-color;
+	}
+	&--low-stock,
+	&--available-on-backorder {
+		color: $low-stock-color;
+	}
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/block.js

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Summary from '@woocommerce/base-components/summary';
+import { blocksConfig } from '@woocommerce/block-settings';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product Summary Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( { className } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	if ( ! product ) {
+		return (
+			<div
+				className={ classnames(
+					className,
+					`wc-block-components-product-summary`,
+					{
+						[ `${ parentClassName }__product-summary` ]: parentClassName,
+					}
+				) }
+			/>
+		);
+	}
+
+	const source = product.short_description
+		? product.short_description
+		: product.description;
+
+	if ( ! source ) {
+		return null;
+	}
+
+	return (
+		<Summary
+			className={ classnames(
+				className,
+				`wc-block-components-product-summary`,
+				{
+					[ `${ parentClassName }__product-summary` ]: parentClassName,
+				}
+			) }
+			source={ source }
+			maxLength={ 150 }
+			countType={ blocksConfig.wordCountType || 'words' }
+		/>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { notes, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Summary',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ notes } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display a short description about a product.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/edit.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return <Block { ...attributes } />;
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its short description.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-summary', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/summary/style.scss

@@ -0,0 +1,11 @@
+.wc-block-components-product-summary {
+	margin-top: 0;
+	margin-bottom: $gap-small;
+}
+.is-loading .wc-block-components-product-summary::before {
+	@include placeholder();
+	content: ".";
+	display: block;
+	width: 100%;
+	height: 6em;
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/attributes.js

@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/block.js

@@ -0,0 +1,64 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product Tag List Block Component.
+ *
+ * @param {Object} props             Incoming props.
+ * @param {string} [props.className] CSS Class name for the component.
+ * @return {*} The component.
+ */
+const Block = ( { className } ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+
+	if ( isEmpty( product.tags ) ) {
+		return null;
+	}
+
+	return (
+		<div
+			className={ classnames(
+				className,
+				'wc-block-components-product-tag-list',
+				{
+					[ `${ parentClassName }__product-tag-list` ]: parentClassName,
+				}
+			) }
+		>
+			{ __( 'Tags:', 'woocommerce' ) }{ ' ' }
+			<ul>
+				{ Object.values( product.tags ).map(
+					( { name, link, slug } ) => {
+						return (
+							<li key={ `tag-list-item-${ slug }` }>
+								<a href={ link }>{ name }</a>
+							</li>
+						);
+					}
+				) }
+			</ul>
+		</div>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { tag, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Tag List',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ tag } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display a list of tags belonging to a product.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/edit.js

@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Disabled } from '@wordpress/components';
+import EditProductLink from '@woocommerce/editor-components/edit-product-link';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const Edit = ( { attributes } ) => {
+	return (
+		<>
+			<EditProductLink />
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</>
+	);
+};
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		'Choose a product to display its tags.',
+		'woocommerce'
+	),
+} )( Edit );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerExperimentalBlockType( 'woocommerce/product-tag-list', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/tag-list/style.scss

@@ -0,0 +1,23 @@
+.wc-block-components-product-tag-list {
+	margin-top: 0;
+	margin-bottom: em($gap-small);
+
+	ul {
+		margin: 0;
+		padding: 0;
+		display: inline;
+
+		li {
+			display: inline;
+			list-style: none;
+		}
+
+		li::after {
+			content: ", ";
+		}
+
+		li:last-child::after {
+			content: "";
+		}
+	}
+}

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/attributes.js

@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+let blockAttributes = {
+	headingLevel: {
+		type: 'number',
+		default: 2,
+	},
+	showProductLink: {
+		type: 'boolean',
+		default: true,
+	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+if ( isFeaturePluginBuild() ) {
+	blockAttributes = {
+		...blockAttributes,
+		align: {
+			type: 'string',
+		},
+		color: {
+			type: 'string',
+		},
+		customColor: {
+			type: 'string',
+		},
+		fontSize: {
+			type: 'string',
+		},
+		customFontSize: {
+			type: 'number',
+		},
+	};
+}
+export default blockAttributes;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/block.js

@@ -0,0 +1,130 @@
+/**
+ * External dependencies
+ */
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import {
+	useInnerBlockLayoutContext,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { getColorClassName, getFontSizeClass } from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { gatedStyledText } from '@woocommerce/atomic-utils';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import ProductName from '@woocommerce/base-components/product-name';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * Product Title Block Component.
+ *
+ * @param {Object}  props                  Incoming props.
+ * @param {string}  [props.className]      CSS Class name for the component.
+ * @param {number}  [props.headingLevel]   Heading level (h1, h2 etc)
+ * @param {boolean} [props.showProductLink]    Whether or not to display a link to the product page.
+ * @param {string}  [props.align]          Title alignment.
+ * @param {string}  [props.color]          Title color name.
+ * @param {string}  [props.customColor]    Custom title color value.
+ * @param {string}  [props.fontSize]       Title font size name.
+ * @param {number } [props.customFontSize] Custom font size value.
+ * will be used if this is not provided.
+ * @return {*} The component.
+ */
+export const Block = ( {
+	className,
+	headingLevel = 2,
+	showProductLink = true,
+	align,
+	color,
+	customColor,
+	fontSize,
+	customFontSize,
+} ) => {
+	const { parentClassName } = useInnerBlockLayoutContext();
+	const { product } = useProductDataContext();
+	const { dispatchStoreEvent } = useStoreEvents();
+	const TagName = `h${ headingLevel }`;
+
+	const colorClass = getColorClassName( 'color', color );
+	const fontSizeClass = getFontSizeClass( fontSize );
+
+	const titleClasses = classnames( {
+		'has-text-color': color || customColor,
+		'has-font-size': fontSize || customFontSize,
+		[ colorClass ]: colorClass,
+		[ fontSizeClass ]: fontSizeClass,
+	} );
+
+	if ( ! product.id ) {
+		return (
+			<TagName
+				// @ts-ignore
+				className={ classnames(
+					className,
+					'wc-block-components-product-title',
+					{
+						[ `${ parentClassName }__product-title` ]: parentClassName,
+						[ `wc-block-components-product-title--align-${ align }` ]:
+							align && isFeaturePluginBuild(),
+						[ titleClasses ]: isFeaturePluginBuild(),
+					}
+				) }
+				style={ gatedStyledText( {
+					color: customColor,
+					fontSize: customFontSize,
+				} ) }
+			/>
+		);
+	}
+
+	return (
+		// @ts-ignore
+		<TagName
+			className={ classnames(
+				className,
+				'wc-block-components-product-title',
+				{
+					[ `${ parentClassName }__product-title` ]: parentClassName,
+					[ `wc-block-components-product-title--align-${ align }` ]:
+						align && isFeaturePluginBuild(),
+				}
+			) }
+		>
+			<ProductName
+				className={ classnames( {
+					[ titleClasses ]: isFeaturePluginBuild(),
+				} ) }
+				disabled={ ! showProductLink }
+				name={ product.name }
+				permalink={ product.permalink }
+				rel={ showProductLink ? 'nofollow' : null }
+				style={ gatedStyledText( {
+					color: customColor,
+					fontSize: customFontSize,
+				} ) }
+				onClick={ () => {
+					dispatchStoreEvent( 'product-view-link', {
+						product,
+					} );
+				} }
+			/>
+		</TagName>
+	);
+};
+
+Block.propTypes = {
+	className: PropTypes.string,
+	headingLevel: PropTypes.number,
+	showProductLink: PropTypes.bool,
+	align: PropTypes.string,
+	color: PropTypes.string,
+	customColor: PropTypes.string,
+	fontSize: PropTypes.string,
+	customFontSize: PropTypes.number,
+};
+
+export default withProductDataContext( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/constants.js

@@ -0,0 +1,15 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { bookmark, Icon } from '@woocommerce/icons';
+
+export const BLOCK_TITLE = __(
+	'Product Title',
+	'woocommerce'
+);
+export const BLOCK_ICON = <Icon srcElement={ bookmark } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the title of a product.',
+	'woocommerce'
+);

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/edit.js

@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Disabled, PanelBody, ToggleControl } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+import {
+	InspectorControls,
+	BlockControls,
+	AlignmentToolbar,
+	withColors,
+	PanelColorSettings,
+	FontSizePicker,
+	withFontSizes,
+} from '@wordpress/block-editor';
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import HeadingToolbar from '@woocommerce/editor-components/heading-toolbar';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
+
+const TitleEdit = ( {
+	color,
+	fontSize,
+	setFontSize,
+	setColor,
+	attributes,
+	setAttributes,
+} ) => {
+	const { headingLevel, showProductLink, align } = attributes;
+	return (
+		<>
+			<BlockControls>
+				<HeadingToolbar
+					isCollapsed={ true }
+					minLevel={ 1 }
+					maxLevel={ 7 }
+					selectedLevel={ headingLevel }
+					onChange={ ( newLevel ) =>
+						setAttributes( { headingLevel: newLevel } )
+					}
+				/>
+				{ isFeaturePluginBuild() && (
+					<AlignmentToolbar
+						value={ align }
+						onChange={ ( newAlign ) => {
+							setAttributes( { align: newAlign } );
+						} }
+					/>
+				) }
+			</BlockControls>
+			<InspectorControls>
+				<PanelBody
+					title={ __( 'Content', 'woocommerce' ) }
+				>
+					<ToggleControl
+						label={ __(
+							'Link to Product Page',
+							'woocommerce'
+						) }
+						help={ __(
+							'Links the image to the single product listing.',
+							'woocommerce'
+						) }
+						checked={ showProductLink }
+						onChange={ () =>
+							setAttributes( {
+								showProductLink: ! showProductLink,
+							} )
+						}
+					/>
+				</PanelBody>
+				{ isFeaturePluginBuild() && (
+					<>
+						<PanelBody
+							title={ __(
+								'Text settings',
+								'woocommerce'
+							) }
+						>
+							<FontSizePicker
+								value={ fontSize.size }
+								onChange={ setFontSize }
+							/>
+						</PanelBody>
+						<PanelColorSettings
+							title={ __(
+								'Color settings',
+								'woocommerce'
+							) }
+							colorSettings={ [
+								{
+									value: color.color,
+									onChange: setColor,
+									label: __(
+										'Text color',
+										'woocommerce'
+									),
+								},
+							] }
+						></PanelColorSettings>
+					</>
+				) }
+			</InspectorControls>
+			<Disabled>
+				<Block { ...attributes } />
+			</Disabled>
+		</>
+	);
+};
+
+const Title = isFeaturePluginBuild()
+	? compose( [
+			withFontSizes( 'fontSize' ),
+			withColors( 'color', { textColor: 'color' } ),
+			withProductSelector( {
+				icon: BLOCK_ICON,
+				label: BLOCK_TITLE,
+				description: __(
+					'Choose a product to display its title.',
+					'woocommerce'
+				),
+			} ),
+	  ] )( TitleEdit )
+	: TitleEdit;
+
+export default Title;

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/frontend.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import withFilteredAttributes from '@woocommerce/base-hocs/with-filtered-attributes';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/index.js

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import sharedConfig from '../shared/config';
+import attributes from './attributes';
+import edit from './edit';
+import {
+	BLOCK_TITLE as title,
+	BLOCK_ICON as icon,
+	BLOCK_DESCRIPTION as description,
+} from './constants';
+
+const blockConfig = {
+	title,
+	description,
+	icon: {
+		src: icon,
+		foreground: '#874FB9',
+	},
+	attributes,
+	edit,
+};
+
+registerBlockType( 'woocommerce/product-title', {
+	...sharedConfig,
+	...blockConfig,
+} );

packages/woocommerce-blocks/assets/js/atomic/blocks/product-elements/title/style.scss

@@ -0,0 +1,35 @@
+.wc-block-components-product-title {
+	margin-top: 0;
+	margin-bottom: $gap-small;
+}
+.wc-block-grid .wc-block-components-product-title {
+	line-height: 1.5;
+	font-weight: 700;
+	padding: 0;
+	color: inherit;
+	font-size: inherit;
+	display: block;
+}
+.is-loading {
+	.wc-block-components-product-title::before {
+		@include placeholder();
+		content: ".";
+		display: inline-block;
+		width: 7em;
+	}
+	.wc-block-grid .wc-block-components-product-title::before {
+		width: 10em;
+	}
+}
+
+/*rtl:begin:ignore*/
+.wc-block-components-product-title--align-left {
+	text-align: left;
+}
+.wc-block-components-product-title--align-center {
+	text-align: center;
+}
+.wc-block-components-product-title--align-right {
+	text-align: right;
+}
+/*rtl:end:ignore*/

packages/woocommerce-blocks/assets/js/atomic/utils/block-styling.js

@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+
+export const gatedStyledText = ( { color, fontSize } ) =>
+	isFeaturePluginBuild()
+		? {
+				color,
+				fontSize,
+		  }
+		: {};

packages/woocommerce-blocks/assets/js/atomic/utils/create-blocks-from-template.js

@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+/**
+ * Creates blocks for a given inner blocks Template.
+ *
+ * @param {Array} template Inner Blocks Template.
+ */
+export const createBlocksFromTemplate = ( template ) => {
+	return template.map( ( [ name, atts = {}, innerBlocks = [] ] ) => {
+		const children = innerBlocks
+			? createBlocksFromTemplate( innerBlocks )
+			: [];
+		return createBlock( name, atts, children );
+	} );
+};

packages/woocommerce-blocks/assets/js/atomic/utils/get-block-map.js

@@ -0,0 +1,17 @@
+/**
+ * External dependencies
+ */
+import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
+
+/**
+ * Internal dependencies
+ */
+import '../blocks/component-init';
+
+/**
+ * Map named Blocks to defined React Components to render on the frontend.
+ *
+ * @param {string} blockName Name of the parent block.
+ */
+export const getBlockMap = ( blockName ) =>
+	getRegisteredBlockComponents( blockName );