⚛️ Introduce Product Element Blocks

assets/css/style.scss

@@ -236,7 +236,7 @@
 	}
 
 	.wc-block-grid__products .wc-block-grid__product-onsale,
-	.wc-block-layout .wc-block-components-product-sale-badge {
+	.wc-block-components-product-sale-badge {
 		background: $twentytwenty-highlights-color;
 		color: #fff;
 		font-family: $twentytwenty-headings;

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

@@ -13,7 +13,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-price',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/price" */ './product/price/block'
+			/* webpackChunkName: "atomic-block-components/price" */ './product-elements/price/block'
 		)
 	),
 } );
@@ -22,7 +22,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-image',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/image" */ './product/image/frontend'
+			/* webpackChunkName: "atomic-block-components/image" */ './product-elements/image/frontend'
 		)
 	),
 } );
@@ -31,7 +31,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-title',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/title" */ './product/title/frontend'
+			/* webpackChunkName: "atomic-block-components/title" */ './product-elements/title/frontend'
 		)
 	),
 } );
@@ -40,7 +40,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-rating',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/rating" */ './product/rating/block'
+			/* webpackChunkName: "atomic-block-components/rating" */ './product-elements/rating/block'
 		)
 	),
 } );
@@ -49,7 +49,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-button',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/button" */ './product/button/block'
+			/* webpackChunkName: "atomic-block-components/button" */ './product-elements/button/block'
 		)
 	),
 } );
@@ -58,7 +58,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-summary',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/summary" */ './product/summary/block'
+			/* webpackChunkName: "atomic-block-components/summary" */ './product-elements/summary/block'
 		)
 	),
 } );
@@ -67,7 +67,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-sale-badge',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/sale-badge" */ './product/sale-badge/block'
+			/* webpackChunkName: "atomic-block-components/sale-badge" */ './product-elements/sale-badge/block'
 		)
 	),
 } );
@@ -76,7 +76,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-sku',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/sku" */ './product/sku/block'
+			/* webpackChunkName: "atomic-block-components/sku" */ './product-elements/sku/block'
 		)
 	),
 } );
@@ -85,7 +85,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-category-list',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/category-list" */ './product/category-list/block'
+			/* webpackChunkName: "atomic-block-components/category-list" */ './product-elements/category-list/block'
 		)
 	),
 } );
@@ -94,7 +94,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-tag-list',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/tag-list" */ './product/tag-list/block'
+			/* webpackChunkName: "atomic-block-components/tag-list" */ './product-elements/tag-list/block'
 		)
 	),
 } );
@@ -103,7 +103,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-stock-indicator',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/stock-indicator" */ './product/stock-indicator/block'
+			/* webpackChunkName: "atomic-block-components/stock-indicator" */ './product-elements/stock-indicator/block'
 		)
 	),
 } );
@@ -112,7 +112,7 @@ registerBlockComponent( {
 	blockName: 'woocommerce/product-add-to-cart',
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "atomic-block-components/add-to-cart" */ './product/add-to-cart/frontend'
+			/* webpackChunkName: "atomic-block-components/add-to-cart" */ './product-elements/add-to-cart/frontend'
 		)
 	),
 } );

assets/js/atomic/blocks/index.js

@@ -1,15 +1,15 @@
 /**
  * Internal dependencies
  */
-import './product/title';
-import './product/price';
-import './product/image';
-import './product/rating';
-import './product/button';
-import './product/summary';
-import './product/sale-badge';
-import './product/sku';
-import './product/category-list';
-import './product/tag-list';
-import './product/stock-indicator';
-import './product/add-to-cart';
+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';

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

@@ -3,6 +3,10 @@ export const blockAttributes = {
 		type: 'boolean',
 		default: false,
 	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
 };
 
 export default blockAttributes;

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

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { AddToCartFormContextProvider } from '@woocommerce/base-context';
 import { useProductDataContext } from '@woocommerce/shared-context';
 import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -25,13 +26,10 @@ import {
  * @param {Object} props                     Incoming props.
  * @param {string} [props.className]         CSS Class name for the component.
  * @param {boolean} [props.showFormElements] Should form elements be shown?
- * @param {Object} [props.product]           Optional product object. Product from context will be
- *                                           used if this is not provided.
  * @return {*} The component.
  */
-const Block = ( { className, showFormElements, ...props } ) => {
-	const productDataContext = useProductDataContext();
-	const product = props.product || productDataContext.product || {};
+const Block = ( { className, showFormElements } ) => {
+	const { product } = useProductDataContext();
 	const componentClass = classnames(
 		className,
 		'wc-block-components-product-add-to-cart',
@@ -50,9 +48,7 @@ const Block = ( { className, showFormElements, ...props } ) => {
 			<div className={ componentClass }>
 				<>
 					{ showFormElements ? (
-						<AddToCartForm
-							productType={ product.type || 'simple' }
-						/>
+						<AddToCartForm productType={ product.type } />
 					) : (
 						<AddToCartButton />
 					) }
@@ -80,7 +76,6 @@ const AddToCartForm = ( { productType } ) => {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );

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', 'woo-gutenberg-products-block' );
+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.',
+	'woo-gutenberg-products-block'
+);

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

@@ -13,10 +13,11 @@ import { InspectorControls } from '@wordpress/block-editor';
  */
 import './style.scss';
 import Block from './block';
+import withProductSelector from '../shared/with-product-selector';
+import { BLOCK_TITLE, BLOCK_ICON } from './constants';
 
-export default ( { attributes, setAttributes } ) => {
-	const productDataContext = useProductDataContext();
-	const product = productDataContext.product || {};
+const Edit = ( { attributes, setAttributes } ) => {
+	const { product } = useProductDataContext();
 	const { className, showFormElements } = attributes;
 
 	return (
@@ -26,7 +27,7 @@ export default ( { attributes, setAttributes } ) => {
 				'wc-block-components-product-add-to-cart'
 			) }
 		>
-			<EditProductLink productId={ product.id || 0 } />
+			<EditProductLink productId={ product.id } />
 			{ product.type !== 'external' && (
 				<InspectorControls>
 					<PanelBody
@@ -57,3 +58,12 @@ export default ( { attributes, setAttributes } ) => {
 		</div>
 	);
 };
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		"Choose a product to display it's add to cart form.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );

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,
+} );

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

@@ -0,0 +1,43 @@
+.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;
+		width: 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;
+	}
+}
+.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;
+}

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

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

assets/js/atomic/blocks/product/button/block.js → assets/js/atomic/blocks/product-elements/button/block.js

@@ -12,6 +12,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -23,25 +24,24 @@ import './style.scss';
  *
  * @param {Object} props             Incoming props.
  * @param {string} [props.className] CSS Class name for the component.
- * @param {Object} [props.product]   Optional product object. Product from context will be used if
- *                                   this is not provided.
  * @return {*} The component.
  */
-const Block = ( { className, ...props } ) => {
+const Block = ( { className } ) => {
 	const { parentClassName } = useInnerBlockLayoutContext();
-	const productDataContext = useProductDataContext();
-	const product = props.product || productDataContext.product;
+	const { product } = useProductDataContext();
 
 	return (
 		<div
 			className={ classnames(
 				className,
 				'wp-block-button',
 				'wc-block-components-product-button',
-				`${ parentClassName }__product-add-to-cart`
+				{
+					[ `${ parentClassName }__product-add-to-cart` ]: parentClassName,
+				}
 			) }
 		>
-			{ product ? (
+			{ product.id ? (
 				<AddToCartButton product={ product } />
 			) : (
 				<AddToCartButtonPlaceholder />
@@ -142,7 +142,6 @@ const AddToCartButtonPlaceholder = () => {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );