diff --git a/assets/css/style.scss b/assets/css/style.scss
index ab4af14111a..787fcf3f1e2 100644
--- a/assets/css/style.scss
+++ b/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;
diff --git a/assets/js/atomic/blocks/component-init.js b/assets/js/atomic/blocks/component-init.js
index c3a721df8a1..7cb50775594 100644
--- a/assets/js/atomic/blocks/component-init.js
+++ b/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'
 		)
 	),
 } );
diff --git a/assets/js/atomic/blocks/index.js b/assets/js/atomic/blocks/index.js
index 1c55feb04e6..5a1ff791cbd 100644
--- a/assets/js/atomic/blocks/index.js
+++ b/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';
diff --git a/assets/js/atomic/blocks/product/add-to-cart/attributes.js b/assets/js/atomic/blocks/product-elements/add-to-cart/attributes.js
similarity index 72%
rename from assets/js/atomic/blocks/product/add-to-cart/attributes.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/attributes.js
index dd6bdd2c27f..993ebcc8ec6 100644
--- a/assets/js/atomic/blocks/product/add-to-cart/attributes.js
+++ b/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;
diff --git a/assets/js/atomic/blocks/product/add-to-cart/block.js b/assets/js/atomic/blocks/product-elements/add-to-cart/block.js
similarity index 77%
rename from assets/js/atomic/blocks/product/add-to-cart/block.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/block.js
index 59cde68d877..be555fb5029 100644
--- a/assets/js/atomic/blocks/product/add-to-cart/block.js
+++ b/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 );
diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart/constants.js b/assets/js/atomic/blocks/product-elements/add-to-cart/constants.js
new file mode 100644
index 00000000000..b01bd0f7f3b
--- /dev/null
+++ b/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'
+);
diff --git a/assets/js/atomic/blocks/product/add-to-cart/edit.js b/assets/js/atomic/blocks/product-elements/add-to-cart/edit.js
similarity index 74%
rename from assets/js/atomic/blocks/product/add-to-cart/edit.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/edit.js
index 35ad598ba62..091e68ea5d3 100644
--- a/assets/js/atomic/blocks/product/add-to-cart/edit.js
+++ b/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 );
diff --git a/assets/js/atomic/blocks/product/add-to-cart/frontend.js b/assets/js/atomic/blocks/product-elements/add-to-cart/frontend.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/frontend.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/frontend.js
diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart/index.js b/assets/js/atomic/blocks/product-elements/add-to-cart/index.js
new file mode 100644
index 00000000000..d807f143175
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/external.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/external.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/external.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/external.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/grouped/group-list/index.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped/group-list/index.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/grouped/group-list/index.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped/group-list/index.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/grouped/index.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped/index.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/grouped/index.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/grouped/index.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/index.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/index.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/index.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/index.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/simple.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/simple.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/simple.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/simple.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/variable/index.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/index.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/variable/index.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/index.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/attribute-picker.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-picker.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/attribute-picker.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-picker.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/attribute-select-control.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/index.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/index.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/index.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/style.scss b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/style.scss
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/style.scss
diff --git a/assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/utils.js b/assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/utils.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/product-types/variable/variation-attributes/utils.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/product-types/variable/variation-attributes/utils.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/shared/add-to-cart-button.js b/assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/shared/add-to-cart-button.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/shared/add-to-cart-button.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/shared/index.js b/assets/js/atomic/blocks/product-elements/add-to-cart/shared/index.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/shared/index.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/shared/index.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/shared/product-unavailable.js b/assets/js/atomic/blocks/product-elements/add-to-cart/shared/product-unavailable.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/shared/product-unavailable.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/shared/product-unavailable.js
diff --git a/assets/js/atomic/blocks/product/add-to-cart/shared/quantity-input.js b/assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js
similarity index 100%
rename from assets/js/atomic/blocks/product/add-to-cart/shared/quantity-input.js
rename to assets/js/atomic/blocks/product-elements/add-to-cart/shared/quantity-input.js
diff --git a/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss b/assets/js/atomic/blocks/product-elements/add-to-cart/style.scss
new file mode 100644
index 00000000000..e3eb377ace2
--- /dev/null
+++ b/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;
+}
diff --git a/assets/js/atomic/blocks/product-elements/button/attributes.js b/assets/js/atomic/blocks/product-elements/button/attributes.js
new file mode 100644
index 00000000000..5bac8820c40
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/button/attributes.js
@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;
diff --git a/assets/js/atomic/blocks/product/button/block.js b/assets/js/atomic/blocks/product-elements/button/block.js
similarity index 87%
rename from assets/js/atomic/blocks/product/button/block.js
rename to assets/js/atomic/blocks/product-elements/button/block.js
index 9a8c7089d22..15e1ed4483d 100644
--- a/assets/js/atomic/blocks/product/button/block.js
+++ b/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,14 +24,11 @@ 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
@@ -38,10 +36,12 @@ const Block = ( { className, ...props } ) => {
 				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 );
diff --git a/assets/js/atomic/blocks/product-elements/button/constants.js b/assets/js/atomic/blocks/product-elements/button/constants.js
new file mode 100644
index 00000000000..75a90cb397f
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+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.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product-elements/button/edit.js b/assets/js/atomic/blocks/product-elements/button/edit.js
new file mode 100644
index 00000000000..7259d387c8f
--- /dev/null
+++ b/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 it's add to cart button.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product-elements/button/index.js b/assets/js/atomic/blocks/product-elements/button/index.js
new file mode 100644
index 00000000000..305b9c520d7
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product/button/style.scss b/assets/js/atomic/blocks/product-elements/button/style.scss
similarity index 72%
rename from assets/js/atomic/blocks/product/button/style.scss
rename to assets/js/atomic/blocks/product-elements/button/style.scss
index 197205468db..aead6e03a94 100644
--- a/assets/js/atomic/blocks/product/button/style.scss
+++ b/assets/js/atomic/blocks/product-elements/button/style.scss
@@ -1,4 +1,4 @@
-.wc-block-layout .wc-block-components-product-button {
+.wp-block-button.wc-block-components-product-button {
 	word-break: break-word;
 	white-space: normal;
 	margin-top: 0;
@@ -19,7 +19,7 @@
 	}
 }
 
-.wc-block-layout--is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {
+.is-loading .wc-block-components-product-button > .wc-block-components-product-button__button {
 	@include placeholder();
 	min-width: 8em;
 	min-height: 3em;
diff --git a/assets/js/atomic/blocks/product-elements/category-list/attributes.js b/assets/js/atomic/blocks/product-elements/category-list/attributes.js
new file mode 100644
index 00000000000..5bac8820c40
--- /dev/null
+++ b/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;
diff --git a/assets/js/atomic/blocks/product/category-list/block.js b/assets/js/atomic/blocks/product-elements/category-list/block.js
similarity index 70%
rename from assets/js/atomic/blocks/product/category-list/block.js
rename to assets/js/atomic/blocks/product-elements/category-list/block.js
index 7a4ce4c4a7e..0f8ef195d36 100644
--- a/assets/js/atomic/blocks/product/category-list/block.js
+++ b/assets/js/atomic/blocks/product-elements/category-list/block.js
@@ -9,6 +9,7 @@ import {
 	useProductDataContext,
 } from '@woocommerce/shared-context';
 import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -20,16 +21,13 @@ 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 } = productDataContext || props || {};
+	const { product } = useProductDataContext();
 
-	if ( isEmpty( product ) || isEmpty( product.categories ) ) {
+	if ( isEmpty( product.categories ) ) {
 		return null;
 	}
 
@@ -38,7 +36,9 @@ const Block = ( { className, ...props } ) => {
 			className={ classnames(
 				className,
 				'wc-block-components-product-category-list',
-				`${ parentClassName }__product-category-list`
+				{
+					[ `${ parentClassName }__product-category-list` ]: parentClassName,
+				}
 			) }
 		>
 			{ __( 'Categories:', 'woo-gutenberg-products-block' ) }{ ' ' }
@@ -59,7 +59,6 @@ const Block = ( { className, ...props } ) => {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/category-list/constants.js b/assets/js/atomic/blocks/product-elements/category-list/constants.js
new file mode 100644
index 00000000000..18b53f405a2
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ folder } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display a list of categories belonging to a product.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product-elements/category-list/edit.js b/assets/js/atomic/blocks/product-elements/category-list/edit.js
new file mode 100644
index 00000000000..01fb2104a70
--- /dev/null
+++ b/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/block-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 it's categories.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product-elements/category-list/index.js b/assets/js/atomic/blocks/product-elements/category-list/index.js
new file mode 100644
index 00000000000..34c818ff92d
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product/tag-list/style.scss b/assets/js/atomic/blocks/product-elements/category-list/style.scss
similarity index 80%
rename from assets/js/atomic/blocks/product/tag-list/style.scss
rename to assets/js/atomic/blocks/product-elements/category-list/style.scss
index df535224e68..b3fa4fd4c10 100644
--- a/assets/js/atomic/blocks/product/tag-list/style.scss
+++ b/assets/js/atomic/blocks/product-elements/category-list/style.scss
@@ -1,4 +1,4 @@
-.wc-block-layout .wc-block-components-product-tag-list {
+.wc-block-components-product-category-list {
 	margin-top: 0;
 	margin-bottom: em($gap-small);
 
diff --git a/assets/js/atomic/blocks/product/image/attributes.js b/assets/js/atomic/blocks/product-elements/image/attributes.js
similarity index 85%
rename from assets/js/atomic/blocks/product/image/attributes.js
rename to assets/js/atomic/blocks/product-elements/image/attributes.js
index c1190c99448..bff0b5f4a79 100644
--- a/assets/js/atomic/blocks/product/image/attributes.js
+++ b/assets/js/atomic/blocks/product-elements/image/attributes.js
@@ -15,6 +15,10 @@ export const blockAttributes = {
 		type: 'string',
 		default: 'full-size',
 	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
 };
 
 export default blockAttributes;
diff --git a/assets/js/atomic/blocks/product/image/block.js b/assets/js/atomic/blocks/product-elements/image/block.js
similarity index 82%
rename from assets/js/atomic/blocks/product/image/block.js
rename to assets/js/atomic/blocks/product-elements/image/block.js
index 46fb1631e8a..c9a59e8bf7e 100644
--- a/assets/js/atomic/blocks/product/image/block.js
+++ b/assets/js/atomic/blocks/product-elements/image/block.js
@@ -9,6 +9,8 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+import { isEmpty } from 'lodash';
 
 /**
  * Internal dependencies
@@ -21,11 +23,10 @@ import './style.scss';
  *
  * @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.productLink]   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.
- * @param {Object} [props.product]        Optional product object. Product from context will be used if
- *                                        this is not provided.
  * @return {*} The component.
  */
 const Block = ( {
@@ -34,21 +35,21 @@ const Block = ( {
 	productLink = true,
 	showSaleBadge,
 	saleBadgeAlign = 'right',
-	...props
 } ) => {
 	const { parentClassName } = useInnerBlockLayoutContext();
-	const productDataContext = useProductDataContext();
-	const product = props.product || productDataContext.product;
+	const { product } = useProductDataContext();
 	const [ imageLoaded, setImageLoaded ] = useState( false );
 
-	if ( ! product ) {
+	if ( ! product.id ) {
 		return (
 			<div
 				className={ classnames(
 					className,
 					'wc-block-components-product-image',
 					'wc-block-components-product-image--placeholder',
-					`${ parentClassName }__product-image`
+					{
+						[ `${ parentClassName }__product-image` ]: parentClassName,
+					}
 				) }
 			>
 				<ImagePlaceholder />
@@ -56,15 +57,16 @@ const Block = ( {
 		);
 	}
 
-	const image =
-		product?.images && product.images.length ? product.images[ 0 ] : null;
+	const image = ! isEmpty( product.images ) ? product.images[ 0 ] : null;
 
 	return (
 		<div
 			className={ classnames(
 				className,
 				'wc-block-components-product-image',
-				`${ parentClassName }__product-image`
+				{
+					[ `${ parentClassName }__product-image` ]: parentClassName,
+				}
 			) }
 		>
 			{ productLink ? (
@@ -103,7 +105,9 @@ const Block = ( {
 };
 
 const ImagePlaceholder = () => {
-	return <img src={ PLACEHOLDER_IMG_SRC } alt="" />;
+	return (
+		<img src={ PLACEHOLDER_IMG_SRC } alt="" width={ 500 } height={ 500 } />
+	);
 };
 
 const Image = ( { image, onLoad, loaded, showFullSize } ) => {
@@ -135,10 +139,9 @@ const Image = ( { image, onLoad, loaded, showFullSize } ) => {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 	productLink: PropTypes.bool,
 	showSaleBadge: PropTypes.bool,
 	saleBadgeAlign: PropTypes.string,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/image/constants.js b/assets/js/atomic/blocks/product-elements/image/constants.js
new file mode 100644
index 00000000000..eeedac58c8a
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ image } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the main product image',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product/image/edit.js b/assets/js/atomic/blocks/product-elements/image/edit.js
similarity index 90%
rename from assets/js/atomic/blocks/product/image/edit.js
rename to assets/js/atomic/blocks/product-elements/image/edit.js
index 228aec31776..a0f62ec9165 100644
--- a/assets/js/atomic/blocks/product/image/edit.js
+++ b/assets/js/atomic/blocks/product-elements/image/edit.js
@@ -12,8 +12,10 @@ 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';
 
-export default ( { attributes, setAttributes } ) => {
+const Edit = ( { attributes, setAttributes } ) => {
 	const {
 		productLink,
 		imageSizing,
@@ -146,3 +148,12 @@ export default ( { attributes, setAttributes } ) => {
 		</>
 	);
 };
+
+export default withProductSelector( {
+	icon: BLOCK_ICON,
+	label: BLOCK_TITLE,
+	description: __(
+		"Choose a product to display it's image.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product/image/frontend.js b/assets/js/atomic/blocks/product-elements/image/frontend.js
similarity index 100%
rename from assets/js/atomic/blocks/product/image/frontend.js
rename to assets/js/atomic/blocks/product-elements/image/frontend.js
diff --git a/assets/js/atomic/blocks/product-elements/image/index.js b/assets/js/atomic/blocks/product-elements/image/index.js
new file mode 100644
index 00000000000..07dd162514d
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product/image/style.scss b/assets/js/atomic/blocks/product-elements/image/style.scss
similarity index 75%
rename from assets/js/atomic/blocks/product/image/style.scss
rename to assets/js/atomic/blocks/product-elements/image/style.scss
index f7401e8e6d8..bc85701726f 100644
--- a/assets/js/atomic/blocks/product/image/style.scss
+++ b/assets/js/atomic/blocks/product-elements/image/style.scss
@@ -1,5 +1,5 @@
-.editor-styles-wrapper .wc-block-layout .wc-block-grid__products .wc-block-grid__product .wc-block-components-product-image,
-.wc-block-layout .wc-block-components-product-image {
+.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;
@@ -48,6 +48,6 @@
 	}
 }
 
-.wc-block-layout--is-loading .wc-block-components-product-image {
+.is-loading .wc-block-components-product-image {
 	@include placeholder();
 }
diff --git a/assets/js/atomic/blocks/product-elements/price/attributes.js b/assets/js/atomic/blocks/product-elements/price/attributes.js
new file mode 100644
index 00000000000..7ade4214318
--- /dev/null
+++ b/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;
diff --git a/assets/js/atomic/blocks/product/price/block.js b/assets/js/atomic/blocks/product-elements/price/block.js
similarity index 89%
rename from assets/js/atomic/blocks/product/price/block.js
rename to assets/js/atomic/blocks/product-elements/price/block.js
index 1c9b05fc579..dcb261e6e66 100644
--- a/assets/js/atomic/blocks/product/price/block.js
+++ b/assets/js/atomic/blocks/product-elements/price/block.js
@@ -11,6 +11,8 @@ import {
 } from '@woocommerce/shared-context';
 import { getColorClassName, getFontSizeClass } from '@wordpress/block-editor';
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
+
 /**
  * Internal dependencies
  */
@@ -45,11 +47,9 @@ const Block = ( {
 	customColor,
 	saleColor,
 	customSaleColor,
-	...props
 } ) => {
 	const { parentClassName } = useInnerBlockLayoutContext();
-	const productDataContext = useProductDataContext();
-	const product = props.product || productDataContext.product;
+	const { product } = useProductDataContext();
 
 	const colorClass = getColorClassName( 'color', color );
 	const fontSizeClass = getFontSizeClass( fontSize );
@@ -80,20 +80,22 @@ const Block = ( {
 		fontSize: customSaleFontSize,
 	};
 
-	if ( ! product ) {
+	if ( ! product.id ) {
 		return (
 			<div
 				className={ classnames(
 					className,
 					'price',
 					'wc-block-components-product-price',
-					`${ parentClassName }__product-price`
+					{
+						[ `${ parentClassName }__product-price` ]: parentClassName,
+					}
 				) }
 			/>
 		);
 	}
 
-	const prices = product.prices || {};
+	const prices = product.prices;
 	const currency = getCurrencyFromPriceResponse( prices );
 
 	return (
@@ -102,8 +104,8 @@ const Block = ( {
 				className,
 				'price',
 				'wc-block-components-product-price',
-				`${ parentClassName }__product-price`,
 				{
+					[ `${ parentClassName }__product-price` ]: parentClassName,
 					[ `wc-block-components-product-price__align-${ align }` ]:
 						align && isFeaturePluginBuild(),
 				}
@@ -155,8 +157,10 @@ const PriceRange = ( { currency, minAmount, maxAmount, classes, style } ) => {
 		<span
 			className={ classnames(
 				'wc-block-components-product-price__value',
-				`${ parentClassName }__product-price__value`,
-				{ [ classes ]: isFeaturePluginBuild() }
+				{
+					[ `${ parentClassName }__product-price__value` ]: parentClassName,
+					[ classes ]: isFeaturePluginBuild()
+				}
 			) }
 			style={ isFeaturePluginBuild() ? style : {} }
 		>
@@ -188,8 +192,9 @@ const SalePrice = ( {
 			<del
 				className={ classnames(
 					'wc-block-components-product-price__regular',
-					`${ parentClassName }__product-price__regular`,
-					{ [ classes ]: isFeaturePluginBuild() }
+					{
+						[ `${ parentClassName }__product-price__regular` ]: parentClassName,
+						[ classes ]: isFeaturePluginBuild() }
 				) }
 				style={ isFeaturePluginBuild() ? style : {} }
 			>
@@ -201,8 +206,9 @@ const SalePrice = ( {
 			<span
 				className={ classnames(
 					'wc-block-components-product-price__value',
-					`${ parentClassName }__product-price__value`,
-					{ [ saleClasses ]: isFeaturePluginBuild() }
+					{
+						[ `${ parentClassName }__product-price__value` ]: parentClassName,
+						[ saleClasses ]: isFeaturePluginBuild() }
 				) }
 				style={ isFeaturePluginBuild() ? saleStyle : {} }
 			>
@@ -245,4 +251,4 @@ Block.propTypes = {
 	customSaleColor: PropTypes.string,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/price/constants.js b/assets/js/atomic/blocks/product-elements/price/constants.js
new file mode 100644
index 00000000000..bee87dc6221
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ bill } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the price of a product.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product/price/edit.js b/assets/js/atomic/blocks/product-elements/price/edit.js
similarity index 89%
rename from assets/js/atomic/blocks/product/price/edit.js
rename to assets/js/atomic/blocks/product-elements/price/edit.js
index fba9b11b446..58054ee4847 100644
--- a/assets/js/atomic/blocks/product/price/edit.js
+++ b/assets/js/atomic/blocks/product-elements/price/edit.js
@@ -18,6 +18,8 @@ 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,
@@ -117,6 +119,14 @@ const Price = isFeaturePluginBuild()
 			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 it's price.",
+					'woo-gutenberg-products-block'
+				),
+			} ),
 	  ] )( PriceEdit )
 	: PriceEdit;
 
diff --git a/assets/js/atomic/blocks/product-elements/price/index.js b/assets/js/atomic/blocks/product-elements/price/index.js
new file mode 100644
index 00000000000..15115a01fb5
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product-elements/price/style.scss b/assets/js/atomic/blocks/product-elements/price/style.scss
new file mode 100644
index 00000000000..c03543c9de8
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/price/style.scss
@@ -0,0 +1,28 @@
+.wc-block-components-product-price {
+	margin-top: 0;
+	margin-bottom: $gap-small;
+	display: block;
+
+	&__regular {
+		margin-right: 0.5em;
+	}
+}
+.is-loading {
+	.wc-block-components-product-price::before {
+		@include placeholder();
+		content: ".";
+		display: inline-block;
+		width: 5em;
+	}
+	/*rtl:begin:ignore*/
+	.wc-block-components-product-price__align-left {
+		text-align: left;
+	}
+	.wc-block-components-product-price__align-center {
+		text-align: center;
+	}
+	.wc-block-components-product-price__align-right {
+		text-align: right;
+	}
+	/*rtl:end:ignore*/
+}
diff --git a/assets/js/atomic/blocks/product-elements/rating/attributes.js b/assets/js/atomic/blocks/product-elements/rating/attributes.js
new file mode 100644
index 00000000000..5bac8820c40
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/rating/attributes.js
@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;
diff --git a/assets/js/atomic/blocks/product/rating/block.js b/assets/js/atomic/blocks/product-elements/rating/block.js
similarity index 75%
rename from assets/js/atomic/blocks/product/rating/block.js
rename to assets/js/atomic/blocks/product-elements/rating/block.js
index 56db48fc58f..e0e19433793 100644
--- a/assets/js/atomic/blocks/product/rating/block.js
+++ b/assets/js/atomic/blocks/product-elements/rating/block.js
@@ -8,6 +8,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -19,14 +20,11 @@ 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();
 	const rating = getAverageRating( product );
 
 	if ( ! rating ) {
@@ -48,7 +46,9 @@ const Block = ( { className, ...props } ) => {
 				className,
 				'star-rating',
 				'wc-block-components-product-rating',
-				`${ parentClassName }__product-rating`
+				{
+					[ `${ parentClassName }__product-rating` ]: parentClassName,
+				}
 			) }
 		>
 			<div
@@ -67,14 +67,13 @@ const Block = ( { className, ...props } ) => {
 
 const getAverageRating = ( product ) => {
 	// eslint-disable-next-line camelcase
-	const rating = parseFloat( product?.average_rating || 0 );
+	const rating = parseFloat( product.average_rating );
 
 	return Number.isFinite( rating ) && rating > 0 ? rating : 0;
 };
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/rating/constants.js b/assets/js/atomic/blocks/product-elements/rating/constants.js
new file mode 100644
index 00000000000..4e20ec561af
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ star } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the average rating of a product.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product-elements/rating/edit.js b/assets/js/atomic/blocks/product-elements/rating/edit.js
new file mode 100644
index 00000000000..c37381a3186
--- /dev/null
+++ b/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 it's rating.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product-elements/rating/index.js b/assets/js/atomic/blocks/product-elements/rating/index.js
new file mode 100644
index 00000000000..ce926cb1421
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product-elements/rating/style.scss b/assets/js/atomic/blocks/product-elements/rating/style.scss
new file mode 100644
index 00000000000..816673c2716
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/attributes.js b/assets/js/atomic/blocks/product-elements/sale-badge/attributes.js
new file mode 100644
index 00000000000..5bac8820c40
--- /dev/null
+++ b/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;
diff --git a/assets/js/atomic/blocks/product/sale-badge/block.js b/assets/js/atomic/blocks/product-elements/sale-badge/block.js
similarity index 72%
rename from assets/js/atomic/blocks/product/sale-badge/block.js
rename to assets/js/atomic/blocks/product-elements/sale-badge/block.js
index b586bdff490..b12056d56d9 100644
--- a/assets/js/atomic/blocks/product/sale-badge/block.js
+++ b/assets/js/atomic/blocks/product-elements/sale-badge/block.js
@@ -9,6 +9,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -21,16 +22,13 @@ import './style.scss';
  * @param {Object} props             Incoming props.
  * @param {string} [props.className] CSS Class name for the component.
  * @param {string} [props.align]     Alignment of the badge.
- * @param {Object} [props.product]   Optional product object. Product from context will be used if
- *                                   this is not provided.
  * @return {*} The component.
  */
-const Block = ( { className, align, ...props } ) => {
+const Block = ( { className, align } ) => {
 	const { parentClassName } = useInnerBlockLayoutContext();
-	const productDataContext = useProductDataContext();
-	const product = props.product || productDataContext.product;
+	const { product } = useProductDataContext();
 
-	if ( ! product || ! product.on_sale ) {
+	if ( ! product.id || ! product.on_sale ) {
 		return null;
 	}
 
@@ -45,7 +43,9 @@ const Block = ( { className, align, ...props } ) => {
 				'wc-block-components-product-sale-badge',
 				className,
 				alignClass,
-				`${ parentClassName }__product-onsale`
+				{
+					[ `${ parentClassName }__product-onsale` ]: parentClassName,
+				}
 			) }
 		>
 			<Label
@@ -62,7 +62,6 @@ const Block = ( { className, align, ...props } ) => {
 Block.propTypes = {
 	className: PropTypes.string,
 	align: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/constants.js b/assets/js/atomic/blocks/product-elements/sale-badge/constants.js
new file mode 100644
index 00000000000..7a028914156
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ tag } />;
+export const BLOCK_DESCRIPTION = __(
+	'Displays an on-sale badge if the product is on-sale.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/edit.js b/assets/js/atomic/blocks/product-elements/sale-badge/edit.js
new file mode 100644
index 00000000000..31da4565711
--- /dev/null
+++ b/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 it's sale-badge.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product-elements/sale-badge/index.js b/assets/js/atomic/blocks/product-elements/sale-badge/index.js
new file mode 100644
index 00000000000..f25e2a8636c
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product/sale-badge/style.scss b/assets/js/atomic/blocks/product-elements/sale-badge/style.scss
similarity index 100%
rename from assets/js/atomic/blocks/product/sale-badge/style.scss
rename to assets/js/atomic/blocks/product-elements/sale-badge/style.scss
diff --git a/assets/js/atomic/blocks/product/save.js b/assets/js/atomic/blocks/product-elements/save.js
similarity index 100%
rename from assets/js/atomic/blocks/product/save.js
rename to assets/js/atomic/blocks/product-elements/save.js
diff --git a/assets/js/atomic/blocks/product/shared-config.js b/assets/js/atomic/blocks/product-elements/shared/config.js
similarity index 65%
rename from assets/js/atomic/blocks/product/shared-config.js
rename to assets/js/atomic/blocks/product-elements/shared/config.js
index f9f0065ad94..166661e195a 100644
--- a/assets/js/atomic/blocks/product/shared-config.js
+++ b/assets/js/atomic/blocks/product-elements/shared/config.js
@@ -3,17 +3,17 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Icon, grid } from '@woocommerce/icons';
-
+import { isExperimentalBuild } from '@woocommerce/block-settings';
 /**
  * Internal dependencies
  */
-import save from './save';
+import save from '../save';
 
 /**
  * Holds default config for this collection of blocks.
  */
 export default {
-	category: 'woocommerce',
+	category: 'woocommerce-product-elements',
 	keywords: [ __( 'WooCommerce', 'woo-gutenberg-products-block' ) ],
 	icon: {
 		src: <Icon srcElement={ grid } />,
@@ -22,7 +22,9 @@ export default {
 	supports: {
 		html: false,
 	},
-	parent: [ 'woocommerce/all-products', 'woocommerce/single-product' ],
+	parent: isExperimentalBuild()
+		? null
+		: [ '@woocommerce/all-products', '@woocommerce/single-product' ],
 	save,
 	deprecated: [
 		{
diff --git a/assets/js/atomic/blocks/product-elements/shared/editor.scss b/assets/js/atomic/blocks/product-elements/shared/editor.scss
new file mode 100644
index 00000000000..763110f6414
--- /dev/null
+++ b/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 #e2e4e7;
+
+	.wc-atomic-blocks-product__edit-card-title {
+		margin: 0 0 $gap;
+	}
+}
diff --git a/assets/js/atomic/blocks/product-elements/shared/with-product-selector.js b/assets/js/atomic/blocks/product-elements/shared/with-product-selector.js
new file mode 100644
index 00000000000..f715d78a4be
--- /dev/null
+++ b/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/block-components/product-control';
+import { Placeholder, Button, Toolbar } from '@wordpress/components';
+import { BlockControls } from '@wordpress/block-editor';
+import TextToolbarButton from '@woocommerce/block-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
+								isDefault
+								disabled={ ! productId }
+								onClick={ () => {
+									setIsEditing( false );
+								} }
+							>
+								{ __( 'Done', 'woo-gutenberg-products-block' ) }
+							</Button>
+						</div>
+					</Placeholder>
+				) : (
+					<>
+						<BlockControls>
+							<Toolbar>
+								<TextToolbarButton
+									onClick={ () => setIsEditing( true ) }
+								>
+									{ __(
+										'Switch product…',
+										'woo-gutenberg-products-block'
+									) }
+								</TextToolbarButton>
+							</Toolbar>
+						</BlockControls>
+						<OriginalComponent { ...props } />
+					</>
+				) }
+			</>
+		);
+	};
+};
+
+export default withProductSelector;
diff --git a/assets/js/atomic/blocks/product-elements/sku/attributes.js b/assets/js/atomic/blocks/product-elements/sku/attributes.js
new file mode 100644
index 00000000000..5bac8820c40
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/sku/attributes.js
@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;
diff --git a/assets/js/atomic/blocks/product/sku/block.js b/assets/js/atomic/blocks/product-elements/sku/block.js
similarity index 65%
rename from assets/js/atomic/blocks/product/sku/block.js
rename to assets/js/atomic/blocks/product-elements/sku/block.js
index 1fca424db7d..08bdabd22e6 100644
--- a/assets/js/atomic/blocks/product/sku/block.js
+++ b/assets/js/atomic/blocks/product-elements/sku/block.js
@@ -8,6 +8,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -19,15 +20,12 @@ 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 sku = product.sku || '';
+	const { product } = useProductDataContext();
+	const sku = product.sku;
 
 	if ( ! sku ) {
 		return null;
@@ -38,7 +36,9 @@ const Block = ( { className, ...props } ) => {
 			className={ classnames(
 				className,
 				'wc-block-components-product-sku',
-				`${ parentClassName }__product-sku`
+				{
+					[ `${ parentClassName }__product-sku` ]: parentClassName,
+				}
 			) }
 		>
 			{ __( 'SKU:', 'woo-gutenberg-products-block' ) }{ ' ' }
@@ -49,7 +49,6 @@ const Block = ( { className, ...props } ) => {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/sku/constants.js b/assets/js/atomic/blocks/product-elements/sku/constants.js
new file mode 100644
index 00000000000..1b7eff4b1c9
--- /dev/null
+++ b/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', 'woo-gutenberg-products-block' );
+export const BLOCK_ICON = <Icon srcElement={ barcode } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the SKU of a product.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product-elements/sku/edit.js b/assets/js/atomic/blocks/product-elements/sku/edit.js
new file mode 100644
index 00000000000..34f5d69d2bb
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/sku/edit.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/block-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 it's SKU.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product-elements/sku/index.js b/assets/js/atomic/blocks/product-elements/sku/index.js
new file mode 100644
index 00000000000..f85eeaa97dc
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product-elements/sku/style.scss b/assets/js/atomic/blocks/product-elements/sku/style.scss
new file mode 100644
index 00000000000..7da83fbfc84
--- /dev/null
+++ b/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);
+}
diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js b/assets/js/atomic/blocks/product-elements/stock-indicator/attributes.js
new file mode 100644
index 00000000000..5bac8820c40
--- /dev/null
+++ b/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;
diff --git a/assets/js/atomic/blocks/product/stock-indicator/block.js b/assets/js/atomic/blocks/product-elements/stock-indicator/block.js
similarity index 78%
rename from assets/js/atomic/blocks/product/stock-indicator/block.js
rename to assets/js/atomic/blocks/product-elements/stock-indicator/block.js
index 68089e9808a..df6a1e30a61 100644
--- a/assets/js/atomic/blocks/product/stock-indicator/block.js
+++ b/assets/js/atomic/blocks/product-elements/stock-indicator/block.js
@@ -8,7 +8,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
-import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -20,16 +20,13 @@ 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();
 
-	if ( isEmpty( product ) || ! product.is_purchasable ) {
+	if ( ! product.id || ! product.is_purchasable ) {
 		return null;
 	}
 
@@ -42,8 +39,8 @@ const Block = ( { className, ...props } ) => {
 			className={ classnames(
 				className,
 				'wc-block-components-product-stock-indicator',
-				`${ parentClassName }__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,
@@ -78,7 +75,6 @@ const stockText = ( inStock, isBackordered ) => {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/constants.js b/assets/js/atomic/blocks/product-elements/stock-indicator/constants.js
new file mode 100644
index 00000000000..3ad73527728
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ box } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display product stock status.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/edit.js b/assets/js/atomic/blocks/product-elements/stock-indicator/edit.js
new file mode 100644
index 00000000000..a91c9bb986a
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/stock-indicator/edit.js
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import EditProductLink from '@woocommerce/block-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 it's stock.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/index.js b/assets/js/atomic/blocks/product-elements/stock-indicator/index.js
new file mode 100644
index 00000000000..62cac88e23a
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss b/assets/js/atomic/blocks/product-elements/stock-indicator/style.scss
new file mode 100644
index 00000000000..d6615c0afb5
--- /dev/null
+++ b/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: $valid-green;
+	}
+	&--out-of-stock {
+		color: $error-red;
+	}
+	&--low-stock,
+	&--available-on-backorder {
+		color: $notice-yellow;
+	}
+}
diff --git a/assets/js/atomic/blocks/product-elements/summary/attributes.js b/assets/js/atomic/blocks/product-elements/summary/attributes.js
new file mode 100644
index 00000000000..5bac8820c40
--- /dev/null
+++ b/assets/js/atomic/blocks/product-elements/summary/attributes.js
@@ -0,0 +1,8 @@
+export const blockAttributes = {
+	productId: {
+		type: 'number',
+		default: 0,
+	},
+};
+
+export default blockAttributes;
diff --git a/assets/js/atomic/blocks/product/summary/block.js b/assets/js/atomic/blocks/product-elements/summary/block.js
similarity index 72%
rename from assets/js/atomic/blocks/product/summary/block.js
rename to assets/js/atomic/blocks/product-elements/summary/block.js
index 095bfe55291..aeb3dad5414 100644
--- a/assets/js/atomic/blocks/product/summary/block.js
+++ b/assets/js/atomic/blocks/product-elements/summary/block.js
@@ -9,6 +9,7 @@ import {
 	useInnerBlockLayoutContext,
 	useProductDataContext,
 } from '@woocommerce/shared-context';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -20,21 +21,21 @@ 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 } = productDataContext || props;
+	const { product } = useProductDataContext();
 
 	if ( ! product ) {
 		return (
 			<div
 				className={ classnames(
 					className,
-					`wc-block-components-product-summary`
+					`wc-block-components-product-summary`,
+					{
+						[ `${ parentClassName }__product-summary` ]: parentClassName,
+					}
 				) }
 			/>
 		);
@@ -55,7 +56,9 @@ const Block = ( { className, ...props } ) => {
 			className={ classnames(
 				className,
 				`wc-block-components-product-summary`,
-				`${ parentClassName }__product-summary`
+				{
+					[ `${ parentClassName }__product-summary` ]: parentClassName,
+				}
 			) }
 			source={ source }
 			maxLength={ 150 }
@@ -66,7 +69,6 @@ const Block = ( { className, ...props } ) => {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/summary/constants.js b/assets/js/atomic/blocks/product-elements/summary/constants.js
new file mode 100644
index 00000000000..e17973f6f9c
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ notes } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display a short description about a product.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product-elements/summary/edit.js b/assets/js/atomic/blocks/product-elements/summary/edit.js
new file mode 100644
index 00000000000..219c75d975f
--- /dev/null
+++ b/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 it's short description.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product-elements/summary/index.js b/assets/js/atomic/blocks/product-elements/summary/index.js
new file mode 100644
index 00000000000..3dde876d36e
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product/summary/style.scss b/assets/js/atomic/blocks/product-elements/summary/style.scss
similarity index 50%
rename from assets/js/atomic/blocks/product/summary/style.scss
rename to assets/js/atomic/blocks/product-elements/summary/style.scss
index 8c9f06613dd..57cb2515126 100644
--- a/assets/js/atomic/blocks/product/summary/style.scss
+++ b/assets/js/atomic/blocks/product-elements/summary/style.scss
@@ -1,9 +1,8 @@
-.wc-block-layout .wc-block-components-product-summary {
+.wc-block-components-product-summary {
 	margin-top: 0;
 	margin-bottom: $gap-small;
 }
-
-.wc-block-layout--is-loading .wc-block-components-product-summary::before {
+.is-loading .wc-block-components-product-summary::before {
 	@include placeholder();
 	content: ".";
 	display: block;
diff --git a/assets/js/atomic/blocks/product-elements/tag-list/attributes.js b/assets/js/atomic/blocks/product-elements/tag-list/attributes.js
new file mode 100644
index 00000000000..5bac8820c40
--- /dev/null
+++ b/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;
diff --git a/assets/js/atomic/blocks/product/tag-list/block.js b/assets/js/atomic/blocks/product-elements/tag-list/block.js
similarity index 70%
rename from assets/js/atomic/blocks/product/tag-list/block.js
rename to assets/js/atomic/blocks/product-elements/tag-list/block.js
index 8c9e83f3b47..2c493568973 100644
--- a/assets/js/atomic/blocks/product/tag-list/block.js
+++ b/assets/js/atomic/blocks/product-elements/tag-list/block.js
@@ -9,6 +9,7 @@ import {
 	useProductDataContext,
 } from '@woocommerce/shared-context';
 import { isEmpty } from 'lodash';
+import { withProductDataContext } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
@@ -20,16 +21,13 @@ 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 } = productDataContext || props || {};
+	const { product } = useProductDataContext();
 
-	if ( isEmpty( product ) || isEmpty( product.tags ) ) {
+	if ( isEmpty( product.tags ) ) {
 		return null;
 	}
 
@@ -38,7 +36,9 @@ const Block = ( { className, ...props } ) => {
 			className={ classnames(
 				className,
 				'wc-block-components-product-tag-list',
-				`${ parentClassName }__product-tag-list`
+				{
+					[ `${ parentClassName }__product-tag-list` ]: parentClassName,
+				}
 			) }
 		>
 			{ __( 'Tags:', 'woo-gutenberg-products-block' ) }{ ' ' }
@@ -59,7 +59,6 @@ const Block = ( { className, ...props } ) => {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/tag-list/constants.js b/assets/js/atomic/blocks/product-elements/tag-list/constants.js
new file mode 100644
index 00000000000..ae597ac8e50
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ tag } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display a list of tags belonging to a product.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product-elements/tag-list/edit.js b/assets/js/atomic/blocks/product-elements/tag-list/edit.js
new file mode 100644
index 00000000000..f9cceb38c72
--- /dev/null
+++ b/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/block-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 it's tags.",
+		'woo-gutenberg-products-block'
+	),
+} )( Edit );
diff --git a/assets/js/atomic/blocks/product-elements/tag-list/index.js b/assets/js/atomic/blocks/product-elements/tag-list/index.js
new file mode 100644
index 00000000000..3b46c1c13b5
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product/category-list/style.scss b/assets/js/atomic/blocks/product-elements/tag-list/style.scss
similarity index 79%
rename from assets/js/atomic/blocks/product/category-list/style.scss
rename to assets/js/atomic/blocks/product-elements/tag-list/style.scss
index 75cde06d99e..1102b7d30cc 100644
--- a/assets/js/atomic/blocks/product/category-list/style.scss
+++ b/assets/js/atomic/blocks/product-elements/tag-list/style.scss
@@ -1,4 +1,4 @@
-.wc-block-layout .wc-block-components-product-category-list {
+.wc-block-components-product-tag-list {
 	margin-top: 0;
 	margin-bottom: em($gap-small);
 
diff --git a/assets/js/atomic/blocks/product/title/attributes.js b/assets/js/atomic/blocks/product-elements/title/attributes.js
similarity index 91%
rename from assets/js/atomic/blocks/product/title/attributes.js
rename to assets/js/atomic/blocks/product-elements/title/attributes.js
index 2cb706f82e6..a0a08cdc0e7 100644
--- a/assets/js/atomic/blocks/product/title/attributes.js
+++ b/assets/js/atomic/blocks/product-elements/title/attributes.js
@@ -12,6 +12,10 @@ let blockAttributes = {
 		type: 'boolean',
 		default: true,
 	},
+	productId: {
+		type: 'number',
+		default: 0,
+	},
 };
 
 if ( isFeaturePluginBuild() ) {
diff --git a/assets/js/atomic/blocks/product/title/block.js b/assets/js/atomic/blocks/product-elements/title/block.js
similarity index 89%
rename from assets/js/atomic/blocks/product/title/block.js
rename to assets/js/atomic/blocks/product-elements/title/block.js
index 04cc35f2cf4..fea8e4aada3 100644
--- a/assets/js/atomic/blocks/product/title/block.js
+++ b/assets/js/atomic/blocks/product-elements/title/block.js
@@ -11,6 +11,8 @@ import {
 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';
+
 /**
  * Internal dependencies
  */
@@ -41,11 +43,9 @@ export const Block = ( {
 	customColor,
 	fontSize,
 	customFontSize,
-	...props
 } ) => {
 	const { parentClassName } = useInnerBlockLayoutContext();
-	const productDataContext = useProductDataContext();
-	const product = props.product || productDataContext.product;
+	const { product } = useProductDataContext();
 	const TagName = `h${ headingLevel }`;
 
 	const colorClass = getColorClassName( 'color', color );
@@ -58,19 +58,20 @@ export const Block = ( {
 		[ fontSizeClass ]: fontSizeClass,
 	} );
 
-	if ( ! product ) {
+	if ( ! product.id ) {
 		return (
 			<TagName
 				// @ts-ignore
 				className={ classnames(
 					className,
 					'wc-block-components-product-title',
-					`${ parentClassName }__product-title`,
 					{
+						[ `${ parentClassName }__product-title` ]: parentClassName,
 						[ `wc-block-components-product-title--align-${ align }` ]:
 							align && isFeaturePluginBuild(),
+						[ titleClasses ]: isFeaturePluginBuild()
 					},
-					{ [ titleClasses ]: isFeaturePluginBuild() }
+
 				) }
 				style={ gatedStyledText( {
 					color: customColor,
@@ -88,11 +89,11 @@ export const Block = ( {
 			className={ classnames(
 				className,
 				'wc-block-components-product-title',
-				`${ parentClassName }__product-title`,
 				{
+					[ `${ parentClassName }__product-title` ]: parentClassName,
 					[ `wc-block-components-product-title__align-${ align }` ]:
 						align && isFeaturePluginBuild(),
-				}
+				},
 			) }
 		>
 			{ productLink ? (
@@ -118,7 +119,6 @@ export const Block = ( {
 
 Block.propTypes = {
 	className: PropTypes.string,
-	product: PropTypes.object,
 	headingLevel: PropTypes.number,
 	productLink: PropTypes.bool,
 	align: PropTypes.string,
@@ -128,4 +128,4 @@ Block.propTypes = {
 	customFontSize: PropTypes.number,
 };
 
-export default Block;
+export default withProductDataContext( Block );
diff --git a/assets/js/atomic/blocks/product-elements/title/constants.js b/assets/js/atomic/blocks/product-elements/title/constants.js
new file mode 100644
index 00000000000..c762cf9c343
--- /dev/null
+++ b/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',
+	'woo-gutenberg-products-block'
+);
+export const BLOCK_ICON = <Icon srcElement={ bookmark } />;
+export const BLOCK_DESCRIPTION = __(
+	'Display the title of a product.',
+	'woo-gutenberg-products-block'
+);
diff --git a/assets/js/atomic/blocks/product/title/edit.js b/assets/js/atomic/blocks/product-elements/title/edit.js
similarity index 89%
rename from assets/js/atomic/blocks/product/title/edit.js
rename to assets/js/atomic/blocks/product-elements/title/edit.js
index 2519778044e..0360d64d414 100644
--- a/assets/js/atomic/blocks/product/title/edit.js
+++ b/assets/js/atomic/blocks/product-elements/title/edit.js
@@ -20,6 +20,8 @@ import HeadingToolbar from '@woocommerce/block-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,
@@ -115,6 +117,14 @@ const Title = isFeaturePluginBuild()
 	? compose( [
 			withFontSizes( 'fontSize' ),
 			withColors( 'color', { textColor: 'color' } ),
+			withProductSelector( {
+				icon: BLOCK_ICON,
+				label: BLOCK_TITLE,
+				description: __(
+					"Choose a product to display it's title.",
+					'woo-gutenberg-products-block'
+				),
+			} ),
 	  ] )( TitleEdit )
 	: TitleEdit;
 
diff --git a/assets/js/atomic/blocks/product/title/frontend.js b/assets/js/atomic/blocks/product-elements/title/frontend.js
similarity index 100%
rename from assets/js/atomic/blocks/product/title/frontend.js
rename to assets/js/atomic/blocks/product-elements/title/frontend.js
diff --git a/assets/js/atomic/blocks/product-elements/title/index.js b/assets/js/atomic/blocks/product-elements/title/index.js
new file mode 100644
index 00000000000..78c4cfcc5dd
--- /dev/null
+++ b/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,
+} );
diff --git a/assets/js/atomic/blocks/product-elements/title/style.scss b/assets/js/atomic/blocks/product-elements/title/style.scss
new file mode 100644
index 00000000000..47dd2c6800c
--- /dev/null
+++ b/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*/
diff --git a/assets/js/atomic/blocks/product/add-to-cart/index.js b/assets/js/atomic/blocks/product/add-to-cart/index.js
deleted file mode 100644
index abea93b1b02..00000000000
--- a/assets/js/atomic/blocks/product/add-to-cart/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
-import { Icon, cart } from '@woocommerce/icons';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-import attributes from './attributes';
-
-const blockConfig = {
-	title: __( 'Add to Cart', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Displays an add to cart button. Optionally displays other add to cart form elements.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ cart } />,
-		foreground: '#96588a',
-	},
-	edit,
-	attributes,
-};
-
-registerExperimentalBlockType( 'woocommerce/product-add-to-cart', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/add-to-cart/style.scss b/assets/js/atomic/blocks/product/add-to-cart/style.scss
deleted file mode 100644
index f27a561e9b3..00000000000
--- a/assets/js/atomic/blocks/product/add-to-cart/style.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.wc-block-layout {
-	.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;
-	}
-}
diff --git a/assets/js/atomic/blocks/product/button/edit.js b/assets/js/atomic/blocks/product/button/edit.js
deleted file mode 100644
index b1392ef042e..00000000000
--- a/assets/js/atomic/blocks/product/button/edit.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * External dependencies
- */
-import { Disabled } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default ( { attributes } ) => {
-	return (
-		<Disabled>
-			<Block { ...attributes } />
-		</Disabled>
-	);
-};
diff --git a/assets/js/atomic/blocks/product/button/index.js b/assets/js/atomic/blocks/product/button/index.js
deleted file mode 100644
index b49f1f44f2e..00000000000
--- a/assets/js/atomic/blocks/product/button/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
-import { Icon, cart } from '@woocommerce/icons';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Add to Cart Button', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display a call to action button which either adds the product to the cart, or links to the product page.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ cart } />,
-		foreground: '#96588a',
-	},
-	edit,
-};
-
-registerBlockType( 'woocommerce/product-button', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/category-list/edit.js b/assets/js/atomic/blocks/product/category-list/edit.js
deleted file mode 100644
index 91b94049427..00000000000
--- a/assets/js/atomic/blocks/product/category-list/edit.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { Disabled } from '@wordpress/components';
-import EditProductLink from '@woocommerce/block-components/edit-product-link';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default ( { attributes } ) => {
-	return (
-		<>
-			<EditProductLink />
-			<Disabled>
-				<Block { ...attributes } />
-			</Disabled>
-		</>
-	);
-};
diff --git a/assets/js/atomic/blocks/product/category-list/index.js b/assets/js/atomic/blocks/product/category-list/index.js
deleted file mode 100644
index 81e52074ca7..00000000000
--- a/assets/js/atomic/blocks/product/category-list/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
-import { Icon, folder } from '@woocommerce/icons';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Product Category List', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display a list of categories belonging to a product.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ folder } />,
-		foreground: '#96588a',
-	},
-	edit,
-};
-
-registerExperimentalBlockType( 'woocommerce/product-category-list', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/image/index.js b/assets/js/atomic/blocks/product/image/index.js
deleted file mode 100644
index 73f820bae1b..00000000000
--- a/assets/js/atomic/blocks/product/image/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
-import { Icon, image } from '@woocommerce/icons';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import attributes from './attributes';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Product Image', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display the main product image',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ image } />,
-		foreground: '#96588a',
-	},
-	attributes,
-	edit,
-};
-
-registerBlockType( 'woocommerce/product-image', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/price/style.scss b/assets/js/atomic/blocks/product/price/style.scss
deleted file mode 100644
index cd1cab4f5ba..00000000000
--- a/assets/js/atomic/blocks/product/price/style.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.wc-block-layout {
-	.wc-block-components-product-price {
-		margin-top: 0;
-		margin-bottom: $gap-small;
-		display: block;
-
-		&__regular {
-			margin-right: 0.5em;
-		}
-	}
-	&--is-loading {
-		.wc-block-components-product-price::before {
-			@include placeholder();
-			content: ".";
-			display: inline-block;
-			width: 5em;
-		}
-	}
-	/*rtl:begin:ignore*/
-	.wc-block-components-product-price__align-left {
-		text-align: left;
-	}
-	.wc-block-components-product-price__align-center {
-		text-align: center;
-	}
-	.wc-block-components-product-price__align-right {
-		text-align: right;
-	}
-	/*rtl:end:ignore*/
-}
diff --git a/assets/js/atomic/blocks/product/rating/edit.js b/assets/js/atomic/blocks/product/rating/edit.js
deleted file mode 100644
index 51221c94b92..00000000000
--- a/assets/js/atomic/blocks/product/rating/edit.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default ( { attributes } ) => {
-	return <Block { ...attributes } />;
-};
diff --git a/assets/js/atomic/blocks/product/rating/index.js b/assets/js/atomic/blocks/product/rating/index.js
deleted file mode 100644
index 561c2f9eca5..00000000000
--- a/assets/js/atomic/blocks/product/rating/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
-import { Icon, star } from '@woocommerce/icons';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Product Rating', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display the average rating of a product.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ star } />,
-		foreground: '#96588a',
-	},
-	edit,
-};
-
-registerBlockType( 'woocommerce/product-rating', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/rating/style.scss b/assets/js/atomic/blocks/product/rating/style.scss
deleted file mode 100644
index efb101c18ca..00000000000
--- a/assets/js/atomic/blocks/product/rating/style.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.wc-block-layout {
-	.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;
-		}
-	}
-}
diff --git a/assets/js/atomic/blocks/product/sale-badge/edit.js b/assets/js/atomic/blocks/product/sale-badge/edit.js
deleted file mode 100644
index 51221c94b92..00000000000
--- a/assets/js/atomic/blocks/product/sale-badge/edit.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default ( { attributes } ) => {
-	return <Block { ...attributes } />;
-};
diff --git a/assets/js/atomic/blocks/product/sale-badge/index.js b/assets/js/atomic/blocks/product/sale-badge/index.js
deleted file mode 100644
index e4f12071db0..00000000000
--- a/assets/js/atomic/blocks/product/sale-badge/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
-import { Icon, tag } from '@woocommerce/icons';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'On-Sale Badge', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Displays an on-sale badge if the product is on-sale.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ tag } />,
-		foreground: '#96588a',
-	},
-	supports: {
-		html: false,
-	},
-	edit,
-};
-
-registerBlockType( 'woocommerce/product-sale-badge', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/sku/edit.js b/assets/js/atomic/blocks/product/sku/edit.js
deleted file mode 100644
index 65ac513bb71..00000000000
--- a/assets/js/atomic/blocks/product/sku/edit.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import EditProductLink from '@woocommerce/block-components/edit-product-link';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default ( { attributes } ) => {
-	return (
-		<>
-			<EditProductLink />
-			<Block { ...attributes } />
-		</>
-	);
-};
diff --git a/assets/js/atomic/blocks/product/sku/index.js b/assets/js/atomic/blocks/product/sku/index.js
deleted file mode 100644
index a77d0663b35..00000000000
--- a/assets/js/atomic/blocks/product/sku/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, barcode } from '@woocommerce/icons';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Product SKU', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display the SKU of a product.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ barcode } />,
-		foreground: '#96588a',
-	},
-	edit,
-};
-
-registerExperimentalBlockType( 'woocommerce/product-sku', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/sku/style.scss b/assets/js/atomic/blocks/product/sku/style.scss
deleted file mode 100644
index 3754d6bb1e4..00000000000
--- a/assets/js/atomic/blocks/product/sku/style.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.wc-block-layout {
-	.wc-block-components-product-sku {
-		margin-top: 0;
-		margin-bottom: $gap-small;
-		display: block;
-		text-transform: uppercase;
-		@include font-size(small);
-	}
-}
diff --git a/assets/js/atomic/blocks/product/stock-indicator/edit.js b/assets/js/atomic/blocks/product/stock-indicator/edit.js
deleted file mode 100644
index 65ac513bb71..00000000000
--- a/assets/js/atomic/blocks/product/stock-indicator/edit.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * External dependencies
- */
-import EditProductLink from '@woocommerce/block-components/edit-product-link';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default ( { attributes } ) => {
-	return (
-		<>
-			<EditProductLink />
-			<Block { ...attributes } />
-		</>
-	);
-};
diff --git a/assets/js/atomic/blocks/product/stock-indicator/index.js b/assets/js/atomic/blocks/product/stock-indicator/index.js
deleted file mode 100644
index c3934632e0e..00000000000
--- a/assets/js/atomic/blocks/product/stock-indicator/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
-import { Icon, box } from '@woocommerce/icons';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Product Stock Indicator', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display product stock status.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ box } />,
-		foreground: '#96588a',
-	},
-	edit,
-};
-
-registerExperimentalBlockType( 'woocommerce/product-stock-indicator', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/stock-indicator/style.scss b/assets/js/atomic/blocks/product/stock-indicator/style.scss
deleted file mode 100644
index b45ac6e7b9b..00000000000
--- a/assets/js/atomic/blocks/product/stock-indicator/style.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.wc-block-layout {
-	.wc-block-components-product-stock-indicator {
-		margin-top: 0;
-		margin-bottom: em($gap-small);
-		display: block;
-		@include font-size(small);
-
-		&--in-stock {
-			color: $valid-green;
-		}
-		&--out-of-stock {
-			color: $error-red;
-		}
-		&--low-stock,
-		&--available-on-backorder {
-			color: $notice-yellow;
-		}
-	}
-}
diff --git a/assets/js/atomic/blocks/product/summary/edit.js b/assets/js/atomic/blocks/product/summary/edit.js
deleted file mode 100644
index 51221c94b92..00000000000
--- a/assets/js/atomic/blocks/product/summary/edit.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default ( { attributes } ) => {
-	return <Block { ...attributes } />;
-};
diff --git a/assets/js/atomic/blocks/product/summary/index.js b/assets/js/atomic/blocks/product/summary/index.js
deleted file mode 100644
index 2cb024f2b44..00000000000
--- a/assets/js/atomic/blocks/product/summary/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { registerBlockType } from '@wordpress/blocks';
-import { Icon, notes } from '@woocommerce/icons';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Product Summary', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display a short description about a product.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ notes } />,
-		foreground: '#96588a',
-	},
-	edit,
-};
-
-registerBlockType( 'woocommerce/product-summary', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/tag-list/edit.js b/assets/js/atomic/blocks/product/tag-list/edit.js
deleted file mode 100644
index 91b94049427..00000000000
--- a/assets/js/atomic/blocks/product/tag-list/edit.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { Disabled } from '@wordpress/components';
-import EditProductLink from '@woocommerce/block-components/edit-product-link';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default ( { attributes } ) => {
-	return (
-		<>
-			<EditProductLink />
-			<Disabled>
-				<Block { ...attributes } />
-			</Disabled>
-		</>
-	);
-};
diff --git a/assets/js/atomic/blocks/product/tag-list/index.js b/assets/js/atomic/blocks/product/tag-list/index.js
deleted file mode 100644
index 9375783fb00..00000000000
--- a/assets/js/atomic/blocks/product/tag-list/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, tag } from '@woocommerce/icons';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Product Tag List', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display a list of tags belonging to a product.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ tag } />,
-		foreground: '#96588a',
-	},
-	edit,
-};
-
-registerExperimentalBlockType( 'woocommerce/product-tag-list', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/title/index.js b/assets/js/atomic/blocks/product/title/index.js
deleted file mode 100644
index fc3fa8032b3..00000000000
--- a/assets/js/atomic/blocks/product/title/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { Icon, heading } from '@woocommerce/icons';
-import { registerBlockType } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import sharedConfig from '../shared-config';
-import attributes from './attributes';
-import edit from './edit';
-
-const blockConfig = {
-	title: __( 'Product Title', 'woo-gutenberg-products-block' ),
-	description: __(
-		'Display the name of a product.',
-		'woo-gutenberg-products-block'
-	),
-	icon: {
-		src: <Icon srcElement={ heading } />,
-		foreground: '#96588a',
-	},
-	attributes,
-	edit,
-};
-
-registerBlockType( 'woocommerce/product-title', {
-	...sharedConfig,
-	...blockConfig,
-} );
diff --git a/assets/js/atomic/blocks/product/title/style.scss b/assets/js/atomic/blocks/product/title/style.scss
deleted file mode 100644
index a1b34a21ead..00000000000
--- a/assets/js/atomic/blocks/product/title/style.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.wc-block-layout {
-	.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*/
-}
diff --git a/assets/js/atomic/utils/index.js b/assets/js/atomic/utils/index.js
index f8222574b29..006dc93e745 100644
--- a/assets/js/atomic/utils/index.js
+++ b/assets/js/atomic/utils/index.js
@@ -3,3 +3,4 @@ export * from './create-blocks-from-template.js';
 export * from './render-parent-block.js';
 export * from './render-inner-blocks.js';
 export * from './block-styling.js';
+export * from './render-standalone-blocks.js';
diff --git a/assets/js/atomic/utils/render-inner-blocks.js b/assets/js/atomic/utils/render-inner-blocks.js
index 0b7c4b016a4..75005fcc9ee 100644
--- a/assets/js/atomic/utils/render-inner-blocks.js
+++ b/assets/js/atomic/utils/render-inner-blocks.js
@@ -25,7 +25,10 @@ export const renderInnerBlocks = ( {
 	const blockMap = getBlockMap( parentBlockName );
 
 	return Array.from( children ).map( ( el, index ) => {
-		const componentProps = el.dataset;
+		const componentProps = {
+			...el.dataset,
+			key: `${ parentBlockName }_${ depth }_${ index }`,
+		};
 
 		const componentChildren =
 			el.children && el.children.length
@@ -54,7 +57,7 @@ export const renderInnerBlocks = ( {
 
 		return (
 			<Suspense
-				key={ `${ parentBlockName }_${ depth }_${ index }` }
+				key={ `${ parentBlockName }_${ depth }_${ index }_suspense` }
 				fallback={ <div className="wc-block-placeholder" /> }
 			>
 				<LayoutComponent { ...componentProps }>
diff --git a/assets/js/atomic/utils/render-standalone-blocks.js b/assets/js/atomic/utils/render-standalone-blocks.js
new file mode 100644
index 00000000000..6ffe28a0461
--- /dev/null
+++ b/assets/js/atomic/utils/render-standalone-blocks.js
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { renderFrontend } from '@woocommerce/base-utils';
+
+/**
+ * Internal dependencies
+ */
+import { getBlockMap } from './get-block-map';
+
+export const renderStandaloneBlocks = () => {
+	const blockMap = getBlockMap( '' );
+
+	Object.keys( blockMap ).forEach( ( blockName ) => {
+		const selector = '.wp-block-' + blockName.replace( '/', '-' );
+
+		const getProps = ( el ) => {
+			return el.dataset;
+		};
+
+		renderFrontend( {
+			Block: blockMap[ blockName ],
+			selector,
+			getProps,
+		} );
+	} );
+};
diff --git a/assets/js/base/components/product-list-item/index.js b/assets/js/base/components/product-list-item/index.js
index e6b03744f94..42701ad190a 100644
--- a/assets/js/base/components/product-list-item/index.js
+++ b/assets/js/base/components/product-list-item/index.js
@@ -15,10 +15,13 @@ const ProductListItem = ( { product, attributes, instanceId } ) => {
 	const { layoutConfig } = attributes;
 	const { parentClassName, parentName } = useInnerBlockLayoutContext();
 	const isLoading = Object.keys( product ).length === 0;
-	const classes = classnames( `${ parentClassName }__product`, {
-		'is-loading': isLoading,
-		'wc-block-layout--is-loading': isLoading, // This can be removed when switching to inner block rendering.
-	} );
+	const classes = classnames(
+		`${ parentClassName }__product`,
+		'wc-block-layout',
+		{
+			'is-loading': isLoading,
+		}
+	);
 
 	return (
 		<li className={ classes } aria-hidden={ isLoading }>
diff --git a/assets/js/base/context/add-to-cart-form-context.js b/assets/js/base/context/add-to-cart-form-context.js
index beea39ddbff..36c793fa43d 100644
--- a/assets/js/base/context/add-to-cart-form-context.js
+++ b/assets/js/base/context/add-to-cart-form-context.js
@@ -57,9 +57,10 @@ export const useAddToCartFormContext = () => {
  */
 export const AddToCartFormContextProvider = ( {
 	children,
-	product,
+	product: productProp,
 	showFormElements,
 } ) => {
+	const product = productProp || {};
 	const productId = product.id || 0;
 	const [ variationId, setVariationId ] = useState( 0 );
 	const [ variationData, setVariationData ] = useState( {} );
diff --git a/assets/js/base/utils/render-frontend.js b/assets/js/base/utils/render-frontend.js
index b659eeddb90..52e4b505202 100644
--- a/assets/js/base/utils/render-frontend.js
+++ b/assets/js/base/utils/render-frontend.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from 'react-dom';
+import { render, Suspense } from '@wordpress/element';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 
 /**
@@ -34,7 +34,11 @@ export const renderFrontend = ( {
 
 			render(
 				<BlockErrorBoundary { ...errorBoundaryProps }>
-					<Block { ...props } attributes={ attributes } />
+					<Suspense
+						fallback={ <div className="wc-block-placeholder" /> }
+					>
+						<Block { ...props } attributes={ attributes } />
+					</Suspense>
 				</BlockErrorBoundary>,
 				el
 			);
diff --git a/assets/js/blocks/products/all-products/edit.js b/assets/js/blocks/products/all-products/edit.js
index 193223dee6f..c376e3d8806 100644
--- a/assets/js/blocks/products/all-products/edit.js
+++ b/assets/js/blocks/products/all-products/edit.js
@@ -208,7 +208,7 @@ class Editor extends Component {
 						parentName="woocommerce/all-products"
 						parentClassName="wc-block-grid"
 					>
-						<div className="wc-block-grid has-1-columns">
+						<div className="wc-block-grid wc-block-layout has-1-columns">
 							<ul className="wc-block-grid__products">
 								<li className="wc-block-grid__product">
 									<ProductDataContextProvider
diff --git a/assets/js/blocks/single-product/block.js b/assets/js/blocks/single-product/block.js
index 8474412bcbc..3896362cb63 100644
--- a/assets/js/blocks/single-product/block.js
+++ b/assets/js/blocks/single-product/block.js
@@ -16,15 +16,17 @@ import { BLOCK_NAME } from './constants';
  * The Single Product Block.
  */
 const Block = ( { isLoading, product, children } ) => {
-	const className = 'wc-block-single-product';
+	const className = 'wc-block-single-product wc-block-layout';
 
 	return (
 		<InnerBlockLayoutContextProvider
 			parentName={ BLOCK_NAME }
 			parentClassName={ className }
-			isLoading={ isLoading }
 		>
-			<ProductDataContextProvider product={ product }>
+			<ProductDataContextProvider
+				product={ product }
+				isLoading={ isLoading }
+			>
 				<div className={ className }>{ children }</div>
 			</ProductDataContextProvider>
 		</InnerBlockLayoutContextProvider>
diff --git a/assets/js/blocks/single-product/edit/layout-editor.js b/assets/js/blocks/single-product/edit/layout-editor.js
index 58f5c06f428..9866e4dd27c 100644
--- a/assets/js/blocks/single-product/edit/layout-editor.js
+++ b/assets/js/blocks/single-product/edit/layout-editor.js
@@ -26,7 +26,7 @@ import {
  * Component to handle edit mode of the "Single Product Block".
  */
 const LayoutEditor = ( { isLoading, product, clientId } ) => {
-	const baseClassName = 'wc-block-single-product';
+	const baseClassName = 'wc-block-single-product wc-block-layout';
 	const { replaceInnerBlocks } = useDispatch( 'core/block-editor' );
 
 	const resetInnerBlocks = useCallback( () => {
@@ -41,9 +41,11 @@ const LayoutEditor = ( { isLoading, product, clientId } ) => {
 		<InnerBlockLayoutContextProvider
 			parentName={ BLOCK_NAME }
 			parentClassName={ baseClassName }
-			isLoading={ isLoading }
 		>
-			<ProductDataContextProvider product={ product }>
+			<ProductDataContextProvider
+				product={ product }
+				isLoading={ isLoading }
+			>
 				<InspectorControls>
 					<PanelBody
 						title={ __( 'Layout', 'woo-gutenberg-products-block' ) }
diff --git a/assets/js/blocks/single-product/frontend.js b/assets/js/blocks/single-product/frontend.js
index 58e5bce0ec8..413c5d4cafb 100644
--- a/assets/js/blocks/single-product/frontend.js
+++ b/assets/js/blocks/single-product/frontend.js
@@ -3,7 +3,10 @@
  */
 import { StoreNoticesProvider } from '@woocommerce/base-context';
 import { getValidBlockAttributes } from '@woocommerce/base-utils';
-import { renderParentBlock } from '@woocommerce/atomic-utils';
+import {
+	renderParentBlock,
+	renderStandaloneBlocks,
+} from '@woocommerce/atomic-utils';
 
 /**
  * Internal dependencies
@@ -37,3 +40,5 @@ renderParentBlock( {
 	selector: '.wp-block-woocommerce-single-product',
 	getProps,
 } );
+
+renderStandaloneBlocks();
diff --git a/assets/js/components/text-toolbar-button/index.js b/assets/js/components/text-toolbar-button/index.js
index 646f219d3e0..c42ea4789fb 100644
--- a/assets/js/components/text-toolbar-button/index.js
+++ b/assets/js/components/text-toolbar-button/index.js
@@ -9,7 +9,7 @@ import classnames from 'classnames';
  */
 import './style.scss';
 
-function TextToolbarButton( { className, ...props } ) {
+function TextToolbarButton( { className = '', ...props } ) {
 	const classes = classnames( 'wc-block-text-toolbar-button', className );
 	return <Button className={ classes } { ...props } />;
 }
diff --git a/assets/js/components/text-toolbar-button/style.scss b/assets/js/components/text-toolbar-button/style.scss
index ea927342f45..4a40c71b8d1 100644
--- a/assets/js/components/text-toolbar-button/style.scss
+++ b/assets/js/components/text-toolbar-button/style.scss
@@ -7,3 +7,7 @@
 		color: $white;
 	}
 }
+.block-editor-block-toolbar__slot {
+	// prevents text toolbar items shrinking to avoid other buttons overlapping.
+	flex-shrink: 0;
+}
diff --git a/assets/js/icons/index.js b/assets/js/icons/index.js
index b6ead2dcbec..d0f76de36ef 100644
--- a/assets/js/icons/index.js
+++ b/assets/js/icons/index.js
@@ -2,9 +2,11 @@ export { default as Icon } from './icon';
 
 export { default as arrowBack } from './library/arrow-back';
 export { default as arrowDownAlt2 } from './library/arrow-down-alt2';
+export { default as atom } from './library/atom';
 export { default as bank } from './library/bank';
 export { default as barcode } from './library/barcode';
 export { default as bill } from './library/bill';
+export { default as bookmark } from './library/bookmark';
 export { default as box } from './library/box';
 export { default as card } from './library/card';
 export { default as cart } from './library/cart';
diff --git a/assets/js/icons/library/atom.js b/assets/js/icons/library/atom.js
new file mode 100644
index 00000000000..706f018e612
--- /dev/null
+++ b/assets/js/icons/library/atom.js
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { SVG } from 'wordpress-components';
+
+const atom = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path d="M12 11a1 1 0 011 1 1 1 0 01-1 1 1 1 0 01-1-1 1 1 0 011-1M4.2 4.2c1.5-1.4 4.5-.8 7.8 1.4 3.3-2.2 6.4-2.8 7.8-1.4 1.4 1.5.8 4.5-1.4 7.8 2.2 3.3 2.8 6.4 1.4 7.8-1.4 1.4-4.6.8-7.8-1.4-3.3 2.2-6.3 2.8-7.8 1.4-1.4-1.4-.8-4.6 1.4-7.8-2.2-3.3-2.8-6.3-1.4-7.8m11.3 4.3a29 29 0 011.7 1.8c1.4-2 2-4 1.2-4.7-.8-.7-2.6-.2-4.7 1.2l1.8 1.7m-7 7a29 29 0 01-1.7-1.8c-1.4 2-2 4-1.2 4.7.8.7 2.6.2 4.7-1.2a29 29 0 01-1.8-1.7M5.6 5.6c-.7.8-.2 2.6 1.2 4.7a29 29 0 013.5-3.5c-2-1.4-4-2-4.7-1.2m4.3 8.5l2.1 2a28.1 28.1 0 004-4.1 28.1 28.1 0 00-4-4 28.1 28.1 0 00-4 4l1.9 2.1m8.5 4.3c.7-.8.2-2.6-1.2-4.7a29 29 0 01-3.5 3.5c2 1.4 4 2 4.7 1.2z" />
+	</SVG>
+);
+
+export default atom;
diff --git a/assets/js/icons/library/bookmark.js b/assets/js/icons/library/bookmark.js
new file mode 100644
index 00000000000..bd5150ef7f4
--- /dev/null
+++ b/assets/js/icons/library/bookmark.js
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { SVG } from 'wordpress-components';
+
+const bookmark = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<path fill="none" d="M0 0h24v24H0z" />
+		<path d="M17 3H7a2 2 0 00-2 2v16l7-3 7 3V5a2 2 0 00-2-2z" />
+	</SVG>
+);
+
+export default bookmark;
diff --git a/assets/js/index.js b/assets/js/index.js
index e6ac6539b23..9404d7f22a8 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -3,7 +3,7 @@
  */
 import { getCategories, setCategories } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { woo, Icon } from '@woocommerce/icons';
+import { woo, atom, Icon } from '@woocommerce/icons';
 
 /**
  * Internal dependencies
@@ -14,11 +14,21 @@ import './filters/block-list-block';
 import './filters/get-block-attributes';
 
 setCategories( [
-	...getCategories().filter( ( { slug } ) => slug !== 'woocommerce' ),
-	// Add a WooCommerce block category
+	...getCategories().filter(
+		( { slug } ) =>
+			slug !== 'woocommerce' && slug !== 'woocommerce-product-elements'
+	),
 	{
 		slug: 'woocommerce',
 		title: __( 'WooCommerce', 'woo-gutenberg-products-block' ),
 		icon: <Icon srcElement={ woo } />,
 	},
+	{
+		slug: 'woocommerce-product-elements',
+		title: __(
+			'WooCommerce Product Elements',
+			'woo-gutenberg-products-block'
+		),
+		icon: <Icon srcElement={ atom } style={ { fill: '#874FB9' } } />,
+	},
 ] );
diff --git a/assets/js/shared/context/inner-block-layout-context.js b/assets/js/shared/context/inner-block-layout-context.js
index fbe7fec756a..df4f765873c 100644
--- a/assets/js/shared/context/inner-block-layout-context.js
+++ b/assets/js/shared/context/inner-block-layout-context.js
@@ -3,7 +3,6 @@
  */
 import PropTypes from 'prop-types';
 import { createContext, useContext } from '@wordpress/element';
-import classnames from 'classnames';
 
 /**
  * This context is a configuration object used for connecting
@@ -24,24 +23,15 @@ export const useInnerBlockLayoutContext = () =>
 export const InnerBlockLayoutContextProvider = ( {
 	parentName = '',
 	parentClassName = '',
-	isLoading = false,
 	children,
 } ) => {
 	const contextValue = {
 		parentName,
 		parentClassName,
-		isLoading,
 	};
-
 	return (
 		<InnerBlockLayoutContext.Provider value={ contextValue }>
-			<div
-				className={ classnames( 'wc-block-layout', {
-					'wc-block-layout--is-loading': isLoading,
-				} ) }
-			>
-				{ children }
-			</div>
+			{ children }
 		</InnerBlockLayoutContext.Provider>
 	);
 };
diff --git a/assets/js/shared/context/product-data-context.js b/assets/js/shared/context/product-data-context.js
index 657f7335c32..1726d497f6e 100644
--- a/assets/js/shared/context/product-data-context.js
+++ b/assets/js/shared/context/product-data-context.js
@@ -4,25 +4,84 @@
 import PropTypes from 'prop-types';
 import { createContext, useContext } from '@wordpress/element';
 
+/**
+ * Default product shape matching API response.
+ */
+const defaultProductData = {
+	id: 0,
+	name: '',
+	parent: 0,
+	type: 'simple',
+	variation: '',
+	permalink: '',
+	sku: '',
+	short_description: '',
+	description: '',
+	on_sale: false,
+	prices: {
+		currency_code: 'USD',
+		currency_symbol: '$',
+		currency_minor_unit: 2,
+		currency_decimal_separator: '.',
+		currency_thousand_separator: ',',
+		currency_prefix: '$',
+		currency_suffix: '',
+		price: '0',
+		regular_price: '0',
+		sale_price: '0',
+		price_range: null,
+	},
+	price_html: '',
+	average_rating: '0',
+	review_count: 0,
+	images: [],
+	categories: [],
+	tags: [],
+	attributes: [],
+	variations: [],
+	has_options: false,
+	is_purchasable: false,
+	is_in_stock: false,
+	is_on_backorder: false,
+	low_stock_remaining: null,
+	sold_individually: false,
+	quantity_limit: 99,
+	add_to_cart: {
+		text: 'Add to cart',
+		description: 'Add to cart',
+		url: '',
+	},
+};
+
 /**
  * This context is used to pass product data down to all children blocks in a given tree.
  *
  * @member {Object} ProductDataContext A react context object
  */
 const ProductDataContext = createContext( {
-	product: null,
+	product: defaultProductData,
+	hasContext: false,
 } );
 
 export const useProductDataContext = () => useContext( ProductDataContext );
 
-export const ProductDataContextProvider = ( { product = null, children } ) => {
+export const ProductDataContextProvider = ( {
+	product = null,
+	children,
+	isLoading = false,
+} ) => {
 	const contextValue = {
-		product,
+		product: product || defaultProductData,
+		hasContext: true,
 	};
 
 	return (
 		<ProductDataContext.Provider value={ contextValue }>
-			{ children }
+			{ isLoading ? (
+				<div className="is-loading">{ children }</div>
+			) : (
+				children
+			) }
 		</ProductDataContext.Provider>
 	);
 };
diff --git a/assets/js/shared/hocs/index.js b/assets/js/shared/hocs/index.js
new file mode 100644
index 00000000000..39d783f86e9
--- /dev/null
+++ b/assets/js/shared/hocs/index.js
@@ -0,0 +1 @@
+export * from './with-product-data-context';
diff --git a/assets/js/shared/hocs/with-product-data-context.js b/assets/js/shared/hocs/with-product-data-context.js
new file mode 100644
index 00000000000..430f0a34beb
--- /dev/null
+++ b/assets/js/shared/hocs/with-product-data-context.js
@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+import {
+	ProductDataContextProvider,
+	useProductDataContext,
+} from '@woocommerce/shared-context';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Loads the product from the API and adds to the context provider.
+ *
+ * @param {Object} props Component props.
+ */
+const OriginalComponentWithContext = ( props ) => {
+	const { productId, OriginalComponent } = props;
+	const [ product, setProduct ] = useState( null );
+	const [ isLoading, setIsLoading ] = useState( true );
+
+	useEffect( () => {
+		if ( !! props.product ) {
+			setProduct( props.product );
+			setIsLoading( false );
+		}
+	}, [ props.product ] );
+
+	useEffect( () => {
+		if ( productId > 0 ) {
+			setIsLoading( true );
+			apiFetch( {
+				path: `/wc/store/products/${ productId }`,
+			} )
+				.then( ( receivedProduct ) => {
+					setProduct( receivedProduct );
+				} )
+				.catch( async () => {
+					setProduct( null );
+				} )
+				.finally( () => {
+					setIsLoading( false );
+				} );
+		}
+	}, [ productId ] );
+
+	if ( ! isLoading && ! product ) {
+		return null;
+	}
+
+	return (
+		<ProductDataContextProvider product={ product } isLoading={ isLoading }>
+			<OriginalComponent { ...props } />
+		</ProductDataContextProvider>
+	);
+};
+
+/**
+ * This HOC sees if the Block is wrapped in Product Data Context, and if not, wraps it with context
+ * based on the productId attribute, if set.
+ *
+ * @param {Function} OriginalComponent Component being wrapped.
+ */
+export const withProductDataContext = ( OriginalComponent ) => {
+	return ( props ) => {
+		const productDataContext = useProductDataContext();
+
+		// If a product prop was provided, use this as the context for the tree.
+		if ( !! props.product || ! productDataContext.hasContext ) {
+			return (
+				<OriginalComponentWithContext
+					{ ...props }
+					OriginalComponent={ OriginalComponent }
+				/>
+			);
+		}
+
+		return <OriginalComponent { ...props } />;
+	};
+};
diff --git a/bin/webpack-configs.js b/bin/webpack-configs.js
index 5e8abb77a91..e38a4b33d50 100644
--- a/bin/webpack-configs.js
+++ b/bin/webpack-configs.js
@@ -87,7 +87,11 @@ const getCoreConfig = ( options = {} ) => {
 			new ProgressBarPlugin(
 				getProgressBarPluginConfig( 'Core', options.fileSuffix )
 			),
-			new DependencyExtractionWebpackPlugin( { injectPolyfill: true } ),
+			new DependencyExtractionWebpackPlugin( {
+				injectPolyfill: true,
+				requestToExternal,
+				requestToHandle,
+			} ),
 			new CreateFileWebpack( {
 				path: './',
 				// file name
diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js
index 6ca8698d1b3..02374d6281a 100644
--- a/bin/webpack-entries.js
+++ b/bin/webpack-entries.js
@@ -103,6 +103,7 @@ const entries = {
 		wcBlocksData: './assets/js/data/index.js',
 		wcBlocksMiddleware: './assets/js/middleware/index.js',
 		wcSharedContext: './assets/js/shared/context/index.js',
+		wcSharedHocs: './assets/js/shared/hocs/index.js',
 	},
 	main: {
 		// Shared blocks code
diff --git a/bin/webpack-helpers.js b/bin/webpack-helpers.js
index 75f7386c557..d155b2b7123 100644
--- a/bin/webpack-helpers.js
+++ b/bin/webpack-helpers.js
@@ -11,6 +11,7 @@ const wcDepMap = {
 	'@woocommerce/settings': [ 'wc', 'wcSettings' ],
 	'@woocommerce/block-data': [ 'wc', 'wcBlocksData' ],
 	'@woocommerce/shared-context': [ 'wc', 'wcSharedContext' ],
+	'@woocommerce/shared-hocs': [ 'wc', 'wcSharedHocs' ],
 };
 
 const wcHandleMap = {
@@ -19,6 +20,7 @@ const wcHandleMap = {
 	'@woocommerce/block-settings': 'wc-settings',
 	'@woocommerce/block-data': 'wc-blocks-data-store',
 	'@woocommerce/shared-context': 'wc-shared-context',
+	'@woocommerce/shared-hocs': 'wc-shared-hocs',
 };
 
 const getAlias = ( options = {} ) => {
diff --git a/src/Assets.php b/src/Assets.php
index 1eb115d4cf5..e205ed6b9a2 100644
--- a/src/Assets.php
+++ b/src/Assets.php
@@ -53,6 +53,7 @@ public static function register_assets() {
 		$asset_api->register_script( 'wc-vendors', $asset_api->get_block_asset_build_path( 'vendors' ), [], false );
 		$asset_api->register_script( 'wc-blocks-registry', 'build/wc-blocks-registry.js', [], false );
 		$asset_api->register_script( 'wc-shared-context', 'build/wc-shared-context.js', [], false );
+		$asset_api->register_script( 'wc-shared-hocs', 'build/wc-shared-hocs.js', [], false );
 
 		// Inline data.
 		wp_add_inline_script(
diff --git a/src/BlockTypes/AbstractBlock.php b/src/BlockTypes/AbstractBlock.php
index 2ed75497878..06d553fa21d 100644
--- a/src/BlockTypes/AbstractBlock.php
+++ b/src/BlockTypes/AbstractBlock.php
@@ -57,6 +57,7 @@ public function register_block_type() {
 				'editor_script' => 'wc-' . $this->block_name,
 				'editor_style'  => 'wc-block-editor',
 				'style'         => 'wc-block-style',
+				'supports'      => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/AbstractDynamicBlock.php b/src/BlockTypes/AbstractDynamicBlock.php
index 7d556a5b1df..bc037da79d7 100644
--- a/src/BlockTypes/AbstractDynamicBlock.php
+++ b/src/BlockTypes/AbstractDynamicBlock.php
@@ -40,6 +40,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'attributes'      => $this->get_attributes(),
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/ActiveFilters.php b/src/BlockTypes/ActiveFilters.php
index 6777c2600b4..0c02d99ba71 100644
--- a/src/BlockTypes/ActiveFilters.php
+++ b/src/BlockTypes/ActiveFilters.php
@@ -35,6 +35,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'script'          => 'wc-' . $this->block_name . '-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/AllProducts.php b/src/BlockTypes/AllProducts.php
index 7ac57031518..c4933cb5508 100644
--- a/src/BlockTypes/AllProducts.php
+++ b/src/BlockTypes/AllProducts.php
@@ -32,6 +32,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'script'          => 'wc-' . $this->block_name . '-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/AllReviews.php b/src/BlockTypes/AllReviews.php
index f8b669ea288..08d47171a58 100644
--- a/src/BlockTypes/AllReviews.php
+++ b/src/BlockTypes/AllReviews.php
@@ -34,6 +34,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'script'          => 'wc-' . $this->block_name . '-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/AtomicBlock.php b/src/BlockTypes/AtomicBlock.php
index b67495712e5..7aca65acbd1 100644
--- a/src/BlockTypes/AtomicBlock.php
+++ b/src/BlockTypes/AtomicBlock.php
@@ -33,6 +33,7 @@ public function register_block_type() {
 			$this->namespace . '/' . $this->block_name,
 			array(
 				'render_callback' => array( $this, 'render' ),
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/AttributeFilter.php b/src/BlockTypes/AttributeFilter.php
index ecdee85d3b7..52ffccc309c 100644
--- a/src/BlockTypes/AttributeFilter.php
+++ b/src/BlockTypes/AttributeFilter.php
@@ -35,6 +35,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'script'          => 'wc-' . $this->block_name . '-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/Cart.php b/src/BlockTypes/Cart.php
index 4fdc2d6b093..5d7357d01f6 100644
--- a/src/BlockTypes/Cart.php
+++ b/src/BlockTypes/Cart.php
@@ -36,6 +36,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => [ 'wc-block-style', 'wc-block-vendors-style' ],
 				'script'          => 'wc-' . $this->block_name . '-block-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/Checkout.php b/src/BlockTypes/Checkout.php
index b1173653248..586f3aeff7f 100644
--- a/src/BlockTypes/Checkout.php
+++ b/src/BlockTypes/Checkout.php
@@ -37,6 +37,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'script'          => 'wc-' . $this->block_name . '-block-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/PriceFilter.php b/src/BlockTypes/PriceFilter.php
index 08f2dce83d3..6c748007650 100644
--- a/src/BlockTypes/PriceFilter.php
+++ b/src/BlockTypes/PriceFilter.php
@@ -35,6 +35,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'script'          => 'wc-' . $this->block_name . '-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/ReviewsByCategory.php b/src/BlockTypes/ReviewsByCategory.php
index 34a38beddd6..5ba10d3e9f4 100644
--- a/src/BlockTypes/ReviewsByCategory.php
+++ b/src/BlockTypes/ReviewsByCategory.php
@@ -34,6 +34,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'script'          => 'wc-' . $this->block_name . '-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/ReviewsByProduct.php b/src/BlockTypes/ReviewsByProduct.php
index b024a8c45c1..14072e916b2 100644
--- a/src/BlockTypes/ReviewsByProduct.php
+++ b/src/BlockTypes/ReviewsByProduct.php
@@ -34,6 +34,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => 'wc-block-style',
 				'script'          => 'wc-' . $this->block_name . '-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/src/BlockTypes/SingleProduct.php b/src/BlockTypes/SingleProduct.php
index ff9a02f77f7..168ebedcafa 100644
--- a/src/BlockTypes/SingleProduct.php
+++ b/src/BlockTypes/SingleProduct.php
@@ -34,6 +34,7 @@ public function register_block_type() {
 				'editor_style'    => 'wc-block-editor',
 				'style'           => [ 'wc-block-style', 'wc-block-vendors-style' ],
 				'script'          => 'wc-' . $this->block_name . '-frontend',
+				'supports'        => [],
 			)
 		);
 	}
diff --git a/tests/js/jest.config.json b/tests/js/jest.config.json
index 8afb39d8663..1c34b04336b 100644
--- a/tests/js/jest.config.json
+++ b/tests/js/jest.config.json
@@ -6,9 +6,7 @@
 		"!**/vendor/**",
 		"!**/test/**"
 	],
-	"moduleDirectories": [
-		"node_modules"
-	],
+	"moduleDirectories": [ "node_modules" ],
 	"moduleNameMapper": {
 		"@woocommerce/atomic-blocks": "assets/js/atomic/blocks",
 		"@woocommerce/atomic-utils": "assets/js/atomic/utils",
@@ -26,6 +24,7 @@
 		"@woocommerce/block-data": "assets/js/data",
 		"@woocommerce/resource-previews": "assets/js/previews",
 		"@woocommerce/shared-context": "assets/js/shared/context",
+		"@woocommerce/shared-hocs": "assets/js/shared/hocs",
 		"@woocommerce/blocks-test-utils": "tests/utils"
 	},
 	"setupFiles": [
@@ -42,13 +41,11 @@
 		"<rootDir>/node_modules/",
 		"<rootDir>/vendor/"
 	],
-	"transformIgnorePatterns": [
-		"node_modules/(?!(simple-html-tokenizer)/)"
-	],
+	"transformIgnorePatterns": [ "node_modules/(?!(simple-html-tokenizer)/)" ],
 	"testEnvironment": "jest-environment-jsdom-sixteen",
 	"preset": "@wordpress/jest-preset-default",
 	"transform": {
 		"^.+\\.js$": "<rootDir>/tests/js/jestPreprocess.js"
 	},
 	"verbose": true
-}
\ No newline at end of file
+}