From a6e069a9cdbc6d937303861f89d80caf5ed906d8 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Wed, 16 Mar 2022 17:28:57 +0000
Subject: [PATCH 01/29] Sub/Total/Fee inner blocks

---
 .../totals/footer-item/index.tsx              |   9 +-
 .../cart-express-payment-block/frontend.tsx   |   6 +
 .../cart-line-items-block/frontend.tsx        |   6 +
 .../attributes.tsx                            |  22 +++
 .../cart-order-summary-block-old/block.json   |  26 ++++
 .../block.tsx                                 |   0
 .../cart-order-summary-block-old/edit.tsx     | 114 ++++++++++++++
 .../cart-order-summary-block-old/frontend.tsx |  12 ++
 .../cart-order-summary-block-old/index.tsx    |  27 ++++
 .../cart-order-summary-block/edit.tsx         | 141 ++++++------------
 .../cart-order-summary-block/frontend.tsx     |  23 ++-
 .../cart/inner-blocks/component-metadata.ts   |  30 ++++
 .../cart-checkout/cart/inner-blocks/index.tsx |   3 +
 .../order-summary-fee-block/block.json        |  22 +++
 .../order-summary-fee-block/block.tsx         |  21 +++
 .../order-summary-fee-block/edit.tsx          |  33 ++++
 .../order-summary-fee-block/frontend.tsx      |   6 +
 .../order-summary-fee-block/index.tsx         |  24 +++
 .../order-summary-subtotal-block/block.json   |  22 +++
 .../order-summary-subtotal-block/block.tsx    |  21 +++
 .../order-summary-subtotal-block/edit.tsx     |  33 ++++
 .../order-summary-subtotal-block/frontend.tsx |   6 +
 .../order-summary-subtotal-block/index.tsx    |  24 +++
 .../order-summary-total-block/block.json      |  22 +++
 .../order-summary-total-block/block.tsx       |  21 +++
 .../order-summary-total-block/edit.tsx        |  33 ++++
 .../order-summary-total-block/frontend.tsx    |   6 +
 .../order-summary-total-block/index.tsx       |  24 +++
 .../cart/inner-blocks/register-components.ts  |  91 ++++++-----
 packages/checkout/blocks-registry/types.ts    |   1 +
 tsconfig.json                                 |   2 +-
 31 files changed, 696 insertions(+), 135 deletions(-)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/attributes.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.json
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{cart-order-summary-block => cart-order-summary-block-old}/block.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/index.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.json
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/index.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.json
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/index.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.json
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/index.tsx

diff --git a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
index 26da5945def..ffbd1a9c54f 100644
--- a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import classNames from 'classnames';
 import { createInterpolateElement } from '@wordpress/element';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import {
@@ -30,6 +31,8 @@ export interface TotalsFooterItemProps {
 	 * convenience, but will use only these two properties.
 	 */
 	values: LooselyMustHave< CartResponseTotals, 'total_price' | 'total_tax' >;
+	// CSS classname.
+	className?: string;
 }
 
 /**
@@ -42,6 +45,7 @@ export interface TotalsFooterItemProps {
 const TotalsFooterItem = ( {
 	currency,
 	values,
+	className,
 }: TotalsFooterItemProps ): JSX.Element => {
 	const SHOW_TAXES =
 		getSetting< boolean >( 'taxesEnabled', true ) &&
@@ -64,7 +68,10 @@ const TotalsFooterItem = ( {
 
 	return (
 		<TotalsItem
-			className="wc-block-components-totals-footer-item"
+			className={ classNames(
+				'wc-block-components-totals-footer-item',
+				className
+			) }
 			currency={ currency }
 			label={ label }
 			value={ parseInt( totalPrice, 10 ) }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/attributes.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/attributes.tsx
new file mode 100644
index 00000000000..5a449d32bfa
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/attributes.tsx
@@ -0,0 +1,22 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+export default {
+	isShippingCalculatorEnabled: {
+		type: 'boolean',
+		default: getSetting( 'isShippingCalculatorEnabled', true ),
+	},
+	showRateAfterTaxName: {
+		type: 'boolean',
+		default: getSetting( 'displayCartPricesIncludingTax', false ),
+	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.json
new file mode 100644
index 00000000000..9809675908e
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.json
@@ -0,0 +1,26 @@
+{
+	"name": "woocommerce/cart-order-summary-block",
+	"version": "1.0.0",
+	"title": "Order Summary",
+	"description": "Show customers a summary of their order.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false,
+		"inserter": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-totals-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/edit.tsx
new file mode 100644
index 00000000000..1f4b764d7cc
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/edit.tsx
@@ -0,0 +1,114 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { getSetting } from '@woocommerce/settings';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		showRateAfterTaxName: boolean;
+		isShippingCalculatorEnabled: boolean;
+		className: string;
+		lock: {
+			move: boolean;
+			remove: boolean;
+		};
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const {
+		showRateAfterTaxName,
+		isShippingCalculatorEnabled,
+		className,
+	} = attributes;
+	const blockProps = useBlockProps();
+	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
+	const displayItemizedTaxes = getSetting(
+		'displayItemizedTaxes',
+		false
+	) as boolean;
+	const displayCartPricesIncludingTax = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	) as boolean;
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				{ getSetting( 'shippingEnabled', true ) && (
+					<PanelBody
+						title={ __(
+							'Shipping rates',
+							'woo-gutenberg-products-block'
+						) }
+					>
+						<ToggleControl
+							label={ __(
+								'Shipping calculator',
+								'woo-gutenberg-products-block'
+							) }
+							help={ __(
+								'Allow customers to estimate shipping by entering their address.',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ isShippingCalculatorEnabled }
+							onChange={ () =>
+								setAttributes( {
+									isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
+								} )
+							}
+						/>
+					</PanelBody>
+				) }
+				{ taxesEnabled &&
+					displayItemizedTaxes &&
+					! displayCartPricesIncludingTax && (
+						<PanelBody
+							title={ __(
+								'Taxes',
+								'woo-gutenberg-products-block'
+							) }
+						>
+							<ToggleControl
+								label={ __(
+									'Show rate after tax name',
+									'woo-gutenberg-products-block'
+								) }
+								help={ __(
+									'Show the percentage rate alongside each tax line in the summary.',
+									'woo-gutenberg-products-block'
+								) }
+								checked={ showRateAfterTaxName }
+								onChange={ () =>
+									setAttributes( {
+										showRateAfterTaxName: ! showRateAfterTaxName,
+									} )
+								}
+							/>
+						</PanelBody>
+					) }
+			</InspectorControls>
+			<Noninteractive>
+				<Block
+					className={ className }
+					showRateAfterTaxName={ showRateAfterTaxName }
+					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
+				/>
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/frontend.tsx
new file mode 100644
index 00000000000..b6c773996b2
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/frontend.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/index.tsx
new file mode 100644
index 00000000000..72010b2cccc
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/index.tsx
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import attributes from './attributes';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes,
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
index 1f4b764d7cc..90e4dee76fe 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -1,114 +1,61 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { getSetting } from '@woocommerce/settings';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import type { TemplateArray } from '@wordpress/blocks';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+import {
+	innerBlockAreas,
+	ExperimentalOrderMeta,
+} from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
  */
-import Block from './block';
+import { useForcedLayout, getAllowedBlocks } from '../../../shared';
 
-export const Edit = ( {
-	attributes,
-	setAttributes,
-}: {
-	attributes: {
-		showRateAfterTaxName: boolean;
-		isShippingCalculatorEnabled: boolean;
-		className: string;
-		lock: {
-			move: boolean;
-			remove: boolean;
-		};
-	};
-	setAttributes: ( attributes: Record< string, unknown > ) => void;
-} ): JSX.Element => {
-	const {
-		showRateAfterTaxName,
-		isShippingCalculatorEnabled,
-		className,
-	} = attributes;
+export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps();
-	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
-	const displayItemizedTaxes = getSetting(
-		'displayItemizedTaxes',
-		false
-	) as boolean;
-	const displayCartPricesIncludingTax = getSetting(
-		'displayCartPricesIncludingTax',
-		false
-	) as boolean;
+	const allowedBlocks = getAllowedBlocks(
+		innerBlockAreas.CART_ORDER_SUMMARY
+	);
+	const defaultTemplate = [
+		[ 'woocommerce/order-summary-subtotal-block', {}, [] ],
+		[ 'woocommerce/order-summary-fee-block', {}, [] ],
+		[ 'woocommerce/order-summary-total-block', {}, [] ],
+	] as TemplateArray;
+	// Prepare props to pass to the ExperimentalOrderMeta slot fill.
+	// We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
+	const slotFillProps = {
+		extensions,
+		cart,
+		context: 'woocommerce/cart',
+	};
+
+	useForcedLayout( {
+		clientId,
+		registeredBlocks: allowedBlocks,
+		defaultTemplate,
+	} );
+
 	return (
 		<div { ...blockProps }>
-			<InspectorControls>
-				{ getSetting( 'shippingEnabled', true ) && (
-					<PanelBody
-						title={ __(
-							'Shipping rates',
-							'woo-gutenberg-products-block'
-						) }
-					>
-						<ToggleControl
-							label={ __(
-								'Shipping calculator',
-								'woo-gutenberg-products-block'
-							) }
-							help={ __(
-								'Allow customers to estimate shipping by entering their address.',
-								'woo-gutenberg-products-block'
-							) }
-							checked={ isShippingCalculatorEnabled }
-							onChange={ () =>
-								setAttributes( {
-									isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
-								} )
-							}
-						/>
-					</PanelBody>
-				) }
-				{ taxesEnabled &&
-					displayItemizedTaxes &&
-					! displayCartPricesIncludingTax && (
-						<PanelBody
-							title={ __(
-								'Taxes',
-								'woo-gutenberg-products-block'
-							) }
-						>
-							<ToggleControl
-								label={ __(
-									'Show rate after tax name',
-									'woo-gutenberg-products-block'
-								) }
-								help={ __(
-									'Show the percentage rate alongside each tax line in the summary.',
-									'woo-gutenberg-products-block'
-								) }
-								checked={ showRateAfterTaxName }
-								onChange={ () =>
-									setAttributes( {
-										showRateAfterTaxName: ! showRateAfterTaxName,
-									} )
-								}
-							/>
-						</PanelBody>
-					) }
-			</InspectorControls>
-			<Noninteractive>
-				<Block
-					className={ className }
-					showRateAfterTaxName={ showRateAfterTaxName }
-					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
-				/>
-			</Noninteractive>
+			<InnerBlocks
+				allowedBlocks={ allowedBlocks }
+				template={ defaultTemplate }
+				templateLock="insert"
+			/>
+			<ExperimentalOrderMeta.Slot { ...slotFillProps } />
 		</div>
 	);
 };
 
 export const Save = (): JSX.Element => {
-	return <div { ...useBlockProps.save() } />;
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
index b6c773996b2..ae9c685b368 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
@@ -1,12 +1,31 @@
 /**
  * External dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import Title from '@woocommerce/base-components/title';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 
 /**
  * Internal dependencies
  */
-import Block from './block';
 import attributes from './attributes';
 
-export default withFilteredAttributes( attributes )( Block );
+const FrontendBlock = ( {
+	children,
+	className,
+}: {
+	children: JSX.Element | JSX.Element[];
+	className: string;
+} ): JSX.Element | null => {
+	return (
+		<div className={ className }>
+			<Title headingLevel="2" className="wc-block-cart__totals-title">
+				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
+			</Title>
+			<TotalsWrapper>{ children }</TotalsWrapper>
+		</div>
+	);
+};
+
+export default withFilteredAttributes( attributes )( FrontendBlock );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts
new file mode 100644
index 00000000000..f24fc5def65
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts
@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import FILLED_CART from './filled-cart-block/block.json';
+import EMPTY_CART from './empty-cart-block/block.json';
+import CART_ITEMS from './cart-items-block/block.json';
+import CART_EXPRESS_PAYMENT from './cart-express-payment-block/block.json';
+import CART_LINE_ITEMS from './cart-line-items-block/block.json';
+import CART_ORDER_SUMMARY from './cart-order-summary-block/block.json';
+import CART_TOTALS from './cart-totals-block/block.json';
+import PROCEED_TO_CHECKOUT from './proceed-to-checkout-block/block.json';
+import CART_ACCEPTED_PAYMENT_METHODS from './cart-accepted-payment-methods-block/block.json';
+import ORDER_SUMMARY_SUBTOTAL from './order-summary-subtotal-block/block.json';
+import ORDER_SUMMARY_TOTAL from './order-summary-total-block/block.json';
+import ORDER_SUMMARY_FEE from './order-summary-fee-block/block.json';
+
+export default {
+	FILLED_CART,
+	EMPTY_CART,
+	CART_ITEMS,
+	CART_EXPRESS_PAYMENT,
+	CART_LINE_ITEMS,
+	CART_ORDER_SUMMARY,
+	CART_TOTALS,
+	PROCEED_TO_CHECKOUT,
+	CART_ACCEPTED_PAYMENT_METHODS,
+	ORDER_SUMMARY_SUBTOTAL,
+	ORDER_SUMMARY_TOTAL,
+	ORDER_SUMMARY_FEE,
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
index 651ab6fec45..8b6906cbc72 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
@@ -10,3 +10,6 @@ import './cart-express-payment-block';
 import './proceed-to-checkout-block';
 import './empty-cart-block';
 import './cart-accepted-payment-methods-block';
+import './order-summary-subtotal-block';
+import './order-summary-total-block';
+import './order-summary-fee-block';
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.json
new file mode 100644
index 00000000000..3a12b715fee
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.json
@@ -0,0 +1,22 @@
+{
+	"name": "woocommerce/order-summary-fee-block",
+	"version": "1.0.0",
+	"title": "Fees",
+	"description": "Shows the cart fee row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.tsx
new file mode 100644
index 00000000000..0b8b68197a1
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.tsx
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { TotalsFees } from '@woocommerce/blocks-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartFees, cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsFees
+			className={ className }
+			currency={ totalsCurrency }
+			cartFees={ cartFees }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/edit.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/index.tsx
new file mode 100644
index 00000000000..0256217391b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, customPostType } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ customPostType }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.json
new file mode 100644
index 00000000000..2392ad05a3f
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.json
@@ -0,0 +1,22 @@
+{
+	"name": "woocommerce/order-summary-subtotal-block",
+	"version": "1.0.0",
+	"title": "Subtotal",
+	"description": "Shows the cart subtotal row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.tsx
new file mode 100644
index 00000000000..bc4d50449f5
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.tsx
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { Subtotal } from '@woocommerce/blocks-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<Subtotal
+			className={ className }
+			currency={ totalsCurrency }
+			values={ cartTotals }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/edit.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/index.tsx
new file mode 100644
index 00000000000..0256217391b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, customPostType } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ customPostType }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.json
new file mode 100644
index 00000000000..71ac21590c9
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.json
@@ -0,0 +1,22 @@
+{
+	"name": "woocommerce/order-summary-total-block",
+	"version": "1.0.0",
+	"title": "Total",
+	"description": "Shows the cart total row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.tsx
new file mode 100644
index 00000000000..8a62ba5ad3c
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.tsx
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsFooterItem
+			className={ className }
+			currency={ totalsCurrency }
+			values={ cartTotals }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/edit.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/index.tsx
new file mode 100644
index 00000000000..0256217391b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, customPostType } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ customPostType }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
index 09de5c2e619..4f5c29916d1 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
@@ -5,118 +5,141 @@ import { lazy } from '@wordpress/element';
 import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
 import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
 
+/**
+ * Internal dependencies
+ */
+import metadata from './component-metadata';
+
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
 __webpack_public_path__ = WC_BLOCKS_BUILD_URL;
 
-/**
- * Internal dependencies
- */
-import filledCartMetadata from './filled-cart-block/block.json';
-import emptyCartMetadata from './empty-cart-block/block.json';
-import cartItemsMetadata from './cart-items-block/block.json';
-import cartExpressPaymentMetadata from './cart-express-payment-block/block.json';
-import cartLineItemsMetadata from './cart-line-items-block/block.json';
-import cartOrderSummaryMetadata from './cart-order-summary-block/block.json';
-import cartTotalsMetadata from './cart-totals-block/block.json';
-import cartProceedToCheckoutMetadata from './proceed-to-checkout-block/block.json';
-import cartAcceptedPaymentMethodsMetadata from './cart-accepted-payment-methods-block/block.json';
+registerCheckoutBlock( {
+	metadata: metadata.FILLED_CART,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/filled-cart" */
+			'./filled-cart-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.EMPTY_CART,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/empty-cart" */
+			'./empty-cart-block/frontend'
+		)
+	),
+} );
 
 registerCheckoutBlock( {
-	metadata: filledCartMetadata,
+	metadata: metadata.FILLED_CART,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend'
+			/* webpackChunkName: "cart-blocks/filled-cart" */
+			'./filled-cart-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: emptyCartMetadata,
+	metadata: metadata.CART_ITEMS,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend'
+			/* webpackChunkName: "cart-blocks/cart-items" */
+			'./cart-items-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: filledCartMetadata,
+	metadata: metadata.CART_LINE_ITEMS,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend'
+			/* webpackChunkName: "cart-blocks/cart-line-items" */
+			'./cart-line-items-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: emptyCartMetadata,
+	metadata: metadata.CART_TOTALS,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend'
+			/* webpackChunkName: "cart-blocks/cart-totals" */
+			'./cart-totals-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: cartItemsMetadata,
+	metadata: metadata.CART_ORDER_SUMMARY,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/items" */ './cart-items-block/frontend'
+			/* webpackChunkName: "cart-blocks/cart-order-summary" */
+			'./cart-order-summary-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: cartLineItemsMetadata,
+	metadata: metadata.CART_EXPRESS_PAYMENT,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/line-items" */ './cart-line-items-block/block'
+			/* webpackChunkName: "cart-blocks/cart-express-payment" */
+			'./cart-express-payment-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: cartTotalsMetadata,
+	metadata: metadata.PROCEED_TO_CHECKOUT,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/totals" */ './cart-totals-block/frontend'
+			/* webpackChunkName: "cart-blocks/proceed-to-checkout" */
+			'./proceed-to-checkout-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: cartOrderSummaryMetadata,
+	metadata: metadata.CART_ACCEPTED_PAYMENT_METHODS,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/order-summary" */ './cart-order-summary-block/frontend'
+			/* webpackChunkName: "cart-blocks/cart-accepted-payment-methods" */
+			'./cart-accepted-payment-methods-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: cartExpressPaymentMetadata,
+	metadata: metadata.ORDER_SUMMARY_FEE,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/express-payment" */ './cart-express-payment-block/block'
+			/* webpackChunkName: "cart-blocks/order-summary-fee" */
+			'./order-summary-fee-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: cartProceedToCheckoutMetadata,
+	metadata: metadata.ORDER_SUMMARY_SUBTOTAL,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/checkout-button" */ './proceed-to-checkout-block/frontend'
+			/* webpackChunkName: "cart-blocks/order-summary-subtotal" */
+			'./order-summary-subtotal-block/frontend'
 		)
 	),
 } );
 
 registerCheckoutBlock( {
-	metadata: cartAcceptedPaymentMethodsMetadata,
+	metadata: metadata.ORDER_SUMMARY_TOTAL,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/accepted-payment-methods" */ './cart-accepted-payment-methods-block/frontend'
+			/* webpackChunkName: "cart-blocks/order-summary-total" */
+			'./order-summary-total-block/frontend'
 		)
 	),
 } );
diff --git a/packages/checkout/blocks-registry/types.ts b/packages/checkout/blocks-registry/types.ts
index 54ad70a2a5f..70a70cc16e0 100644
--- a/packages/checkout/blocks-registry/types.ts
+++ b/packages/checkout/blocks-registry/types.ts
@@ -23,6 +23,7 @@ export enum innerBlockAreas {
 	EMPTY_MINI_CART = 'woocommerce/empty-mini-cart-contents-block',
 	FILLED_MINI_CART = 'woocommerce/filled-mini-cart-contents-block',
 	MINI_CART_ITEMS = 'woocommerce/mini-cart-items-block',
+	CART_ORDER_SUMMARY = 'woocommerce/cart-order-summary-block',
 }
 
 interface CheckoutBlockOptionsMetadata extends Partial< BlockConfiguration > {
diff --git a/tsconfig.json b/tsconfig.json
index d071e6cc45b..4068973ad86 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,7 +2,7 @@
 	"extends": "./tsconfig.base.json",
 	"include": [
 		"./assets/js/**/*",
-		"./assets/js/blocks/checkout/**/block.json",
+		"./assets/js/blocks/**/block.json",
 		"./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/**/block.json",
 		"./storybook/**/*"
 	],

From 4240f525eb783f500afe068539ce56ad835d0cce Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Thu, 17 Mar 2022 13:59:26 +0000
Subject: [PATCH 02/29] Row blocks within the inner block

---
 .../base/components/sidebar-layout/style.scss |  3 +-
 .../coupon-form/block.json                    | 22 +++++
 .../coupon-form/block.tsx                     | 26 ++++++
 .../coupon-form}/edit.tsx                     |  0
 .../coupon-form}/frontend.tsx                 |  0
 .../coupon-form}/index.tsx                    |  0
 .../discount/block.json                       | 22 +++++
 .../discount/block.tsx                        | 41 ++++++++
 .../discount}/edit.tsx                        |  0
 .../discount}/frontend.tsx                    |  0
 .../discount}/index.tsx                       |  0
 .../cart-order-summary-block/edit.tsx         | 22 ++---
 .../fee}/block.json                           |  0
 .../fee}/block.tsx                            |  0
 .../fee}/edit.tsx                             |  0
 .../fee}/frontend.tsx                         |  0
 .../fee}/index.tsx                            |  0
 .../cart-order-summary-block/frontend.tsx     |  4 +-
 .../cart-order-summary-block/index.tsx        |  7 ++
 .../cart-order-summary-block/register.ts      | 93 +++++++++++++++++++
 .../shipping/block.json                       | 22 +++++
 .../shipping/block.tsx                        | 29 ++++++
 .../shipping/edit.tsx                         | 33 +++++++
 .../shipping/frontend.tsx                     |  6 ++
 .../shipping/index.tsx                        | 24 +++++
 .../cart-order-summary-block/slotfills.tsx    | 34 +++++++
 .../subtotal}/block.json                      |  0
 .../subtotal}/block.tsx                       |  0
 .../subtotal/edit.tsx                         | 33 +++++++
 .../subtotal/frontend.tsx                     |  6 ++
 .../subtotal/index.tsx                        | 24 +++++
 .../cart-order-summary-block/taxes/block.json | 22 +++++
 .../cart-order-summary-block/taxes/block.tsx  | 35 +++++++
 .../cart-order-summary-block/taxes/edit.tsx   | 33 +++++++
 .../taxes/frontend.tsx                        |  6 ++
 .../cart-order-summary-block/taxes/index.tsx  | 24 +++++
 .../total}/block.json                         |  0
 .../total}/block.tsx                          |  0
 .../cart-order-summary-block/total/edit.tsx   | 33 +++++++
 .../total/frontend.tsx                        |  6 ++
 .../cart-order-summary-block/total/index.tsx  | 24 +++++
 .../cart/inner-blocks/component-metadata.ts   |  8 --
 .../cart-checkout/cart/inner-blocks/index.tsx |  3 -
 .../cart/inner-blocks/register-components.ts  | 41 +-------
 .../js/blocks/cart-checkout/cart/style.scss   |  4 +
 .../components/totals/item/style.scss         | 21 ++++-
 .../components/totals/taxes/index.tsx         | 15 ++-
 .../components/totals/taxes/style.scss        | 10 --
 48 files changed, 646 insertions(+), 90 deletions(-)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.tsx
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-fee-block => cart-order-summary-block/coupon-form}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-fee-block => cart-order-summary-block/coupon-form}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-fee-block => cart-order-summary-block/coupon-form}/index.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.tsx
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-subtotal-block => cart-order-summary-block/discount}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-subtotal-block => cart-order-summary-block/discount}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-subtotal-block => cart-order-summary-block/discount}/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-fee-block => cart-order-summary-block/fee}/block.json (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-fee-block => cart-order-summary-block/fee}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-total-block => cart-order-summary-block/fee}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-total-block => cart-order-summary-block/fee}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-total-block => cart-order-summary-block/fee}/index.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-subtotal-block => cart-order-summary-block/subtotal}/block.json (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-subtotal-block => cart-order-summary-block/subtotal}/block.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-total-block => cart-order-summary-block/total}/block.json (100%)
 rename assets/js/blocks/cart-checkout/cart/inner-blocks/{order-summary-total-block => cart-order-summary-block/total}/block.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx
 delete mode 100644 packages/checkout/components/totals/taxes/style.scss

diff --git a/assets/js/base/components/sidebar-layout/style.scss b/assets/js/base/components/sidebar-layout/style.scss
index 107915bd2bd..35b092cb778 100644
--- a/assets/js/base/components/sidebar-layout/style.scss
+++ b/assets/js/base/components/sidebar-layout/style.scss
@@ -52,7 +52,8 @@
 
 		.wc-block-components-panel {
 			.wc-block-components-totals-item {
-				padding: 0;
+				padding-left: 0;
+				padding-right: 0;
 			}
 		}
 	}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json
new file mode 100644
index 00000000000..01a0e51058a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json
@@ -0,0 +1,22 @@
+{
+	"name": "woocommerce/order-summary-coupon-form-block",
+	"version": "1.0.0",
+	"title": "Coupon Form",
+	"description": "Shows the apply coupon form.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.tsx
new file mode 100644
index 00000000000..1579bf61de1
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.tsx
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
+import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
+import { getSetting } from '@woocommerce/settings';
+
+const Block = ( { className }: { className: string } ): JSX.Element | null => {
+	const couponsEnabled = getSetting( 'couponsEnabled', true );
+
+	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons();
+
+	if ( ! couponsEnabled ) {
+		return null;
+	}
+
+	return (
+		<TotalsCoupon
+			className={ className }
+			onSubmit={ applyCoupon }
+			isLoading={ isApplyingCoupon }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/edit.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/frontend.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/index.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json
new file mode 100644
index 00000000000..0061705938c
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json
@@ -0,0 +1,22 @@
+{
+	"name": "woocommerce/order-summary-discount-block",
+	"version": "1.0.0",
+	"title": "Discount",
+	"description": "Shows the cart discount row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.tsx
new file mode 100644
index 00000000000..cdb03716f5d
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.tsx
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { TotalsDiscount } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import {
+	useStoreCartCoupons,
+	useStoreCart,
+} from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { DiscountSlotFill } from '../slotfills';
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartTotals } = useStoreCart();
+
+	const {
+		removeCoupon,
+		isRemovingCoupon,
+		appliedCoupons,
+	} = useStoreCartCoupons();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<>
+			<TotalsDiscount
+				className={ className }
+				cartCoupons={ appliedCoupons }
+				currency={ totalsCurrency }
+				isRemovingCoupon={ isRemovingCoupon }
+				removeCoupon={ removeCoupon }
+				values={ cartTotals }
+			/>
+			<DiscountSlotFill />
+		</>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/edit.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/frontend.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/index.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
index 90e4dee76fe..31cd1647dd1 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -3,16 +3,13 @@
  */
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import type { TemplateArray } from '@wordpress/blocks';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
-import {
-	innerBlockAreas,
-	ExperimentalOrderMeta,
-} from '@woocommerce/blocks-checkout';
+import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 
 /**
  * Internal dependencies
  */
 import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import { OrderMetaSlotFill } from './slotfills';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps();
@@ -22,17 +19,12 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const defaultTemplate = [
 		[ 'woocommerce/order-summary-subtotal-block', {}, [] ],
 		[ 'woocommerce/order-summary-fee-block', {}, [] ],
+		[ 'woocommerce/order-summary-discount-block', {}, [] ],
+		[ 'woocommerce/order-summary-coupon-form-block', {}, [] ],
+		[ 'woocommerce/order-summary-shipping-block', {}, [] ],
+		[ 'woocommerce/order-summary-taxes-block', {}, [] ],
 		[ 'woocommerce/order-summary-total-block', {}, [] ],
 	] as TemplateArray;
-	// Prepare props to pass to the ExperimentalOrderMeta slot fill.
-	// We need to pluck out receiveCart.
-	// eslint-disable-next-line no-unused-vars
-	const { extensions, receiveCart, ...cart } = useStoreCart();
-	const slotFillProps = {
-		extensions,
-		cart,
-		context: 'woocommerce/cart',
-	};
 
 	useForcedLayout( {
 		clientId,
@@ -47,7 +39,7 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 				template={ defaultTemplate }
 				templateLock="insert"
 			/>
-			<ExperimentalOrderMeta.Slot { ...slotFillProps } />
+			<OrderMetaSlotFill />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.json
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-fee-block/block.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/edit.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/frontend.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/index.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
index ae9c685b368..1e449722d79 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
@@ -10,6 +10,7 @@ import { withFilteredAttributes } from '@woocommerce/shared-hocs';
  * Internal dependencies
  */
 import attributes from './attributes';
+import { OrderMetaSlotFill } from './slotfills';
 
 const FrontendBlock = ( {
 	children,
@@ -23,7 +24,8 @@ const FrontendBlock = ( {
 			<Title headingLevel="2" className="wc-block-cart__totals-title">
 				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
 			</Title>
-			<TotalsWrapper>{ children }</TotalsWrapper>
+			{ children }
+			<OrderMetaSlotFill />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
index 72010b2cccc..f91dc62cc44 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
@@ -11,6 +11,13 @@ import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 import { Edit, Save } from './edit';
 import attributes from './attributes';
 import metadata from './block.json';
+import './subtotal';
+import './fee';
+import './total';
+import './discount';
+import './shipping';
+import './coupon-form';
+import './taxes';
 
 registerFeaturePluginBlockType( metadata, {
 	icon: {
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
new file mode 100644
index 00000000000..c7637f8c93c
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
+import { lazy } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+/**
+ * Called to register frontend components.
+ */
+registerCheckoutBlock( {
+	metadata,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary" */
+			'./frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './subtotal/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary-subtotal" */
+			'./subtotal/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './fee/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary-fee" */
+			'./fee/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './total/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary-total" */
+			'./total/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './discount/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary-discount" */
+			'./discount/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './shipping/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary-shipping" */
+			'./shipping/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './coupon-form/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary-coupon-form" */
+			'./coupon-form/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './taxes/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary-taxes" */
+			'./taxes/frontend'
+		)
+	),
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
new file mode 100644
index 00000000000..951d49a4fa1
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
@@ -0,0 +1,22 @@
+{
+	"name": "woocommerce/order-summary-shipping-block",
+	"version": "1.0.0",
+	"title": "Shipping",
+	"description": "Shows the cart shipping row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx
new file mode 100644
index 00000000000..bdce55826ef
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+const Block = ( { className }: { className: string } ): JSX.Element | null => {
+	const isShippingCalculatorEnabled = true; // @todo move elsewhere.
+	const { cartTotals, cartNeedsShipping } = useStoreCart();
+
+	if ( ! cartNeedsShipping ) {
+		return null;
+	}
+
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsShipping
+			className={ className }
+			showCalculator={ isShippingCalculatorEnabled }
+			showRateSelector={ true }
+			values={ cartTotals }
+			currency={ totalsCurrency }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx
new file mode 100644
index 00000000000..0256217391b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, customPostType } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ customPostType }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/slotfills.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
new file mode 100644
index 00000000000..0845f0799dc
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+import {
+	ExperimentalOrderMeta,
+	ExperimentalDiscountsMeta,
+} from '@woocommerce/blocks-checkout';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+export const OrderMetaSlotFill = (): JSX.Element => {
+	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
+	const slotFillProps = {
+		extensions,
+		cart,
+		context: 'woocommerce/cart',
+	};
+
+	return <ExperimentalOrderMeta.Slot { ...slotFillProps } />;
+};
+
+export const DiscountSlotFill = (): JSX.Element => {
+	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
+	const discountsSlotFillProps = {
+		extensions,
+		cart,
+		context: 'woocommerce/cart',
+	};
+
+	return <ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.json
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-subtotal-block/block.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx
new file mode 100644
index 00000000000..0256217391b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, customPostType } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ customPostType }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json
new file mode 100644
index 00000000000..82790c065ab
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json
@@ -0,0 +1,22 @@
+{
+	"name": "woocommerce/order-summary-taxes-block",
+	"version": "1.0.0",
+	"title": "Taxes",
+	"description": "Shows the cart taxes row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		}
+	},
+	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx
new file mode 100644
index 00000000000..d9328f815b9
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { TotalsTaxes } from '@woocommerce/blocks-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { getSetting } from '@woocommerce/settings';
+
+const Block = ( { className }: { className: string } ): JSX.Element | null => {
+	const showRateAfterTaxName = true; // @todo move
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+	const displayCartPricesIncludingTax = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	);
+
+	if (
+		displayCartPricesIncludingTax ||
+		parseInt( cartTotals.total_tax, 10 ) <= 0
+	) {
+		return null;
+	}
+
+	return (
+		<TotalsTaxes
+			className={ className }
+			showRateAfterTaxName={ showRateAfterTaxName }
+			currency={ totalsCurrency }
+			values={ cartTotals }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx
new file mode 100644
index 00000000000..0256217391b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, customPostType } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ customPostType }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.json
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/order-summary-total-block/block.tsx
rename to assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx
new file mode 100644
index 00000000000..0256217391b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, customPostType } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ customPostType }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts
index f24fc5def65..7744cc4d283 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts
@@ -6,13 +6,9 @@ import EMPTY_CART from './empty-cart-block/block.json';
 import CART_ITEMS from './cart-items-block/block.json';
 import CART_EXPRESS_PAYMENT from './cart-express-payment-block/block.json';
 import CART_LINE_ITEMS from './cart-line-items-block/block.json';
-import CART_ORDER_SUMMARY from './cart-order-summary-block/block.json';
 import CART_TOTALS from './cart-totals-block/block.json';
 import PROCEED_TO_CHECKOUT from './proceed-to-checkout-block/block.json';
 import CART_ACCEPTED_PAYMENT_METHODS from './cart-accepted-payment-methods-block/block.json';
-import ORDER_SUMMARY_SUBTOTAL from './order-summary-subtotal-block/block.json';
-import ORDER_SUMMARY_TOTAL from './order-summary-total-block/block.json';
-import ORDER_SUMMARY_FEE from './order-summary-fee-block/block.json';
 
 export default {
 	FILLED_CART,
@@ -20,11 +16,7 @@ export default {
 	CART_ITEMS,
 	CART_EXPRESS_PAYMENT,
 	CART_LINE_ITEMS,
-	CART_ORDER_SUMMARY,
 	CART_TOTALS,
 	PROCEED_TO_CHECKOUT,
 	CART_ACCEPTED_PAYMENT_METHODS,
-	ORDER_SUMMARY_SUBTOTAL,
-	ORDER_SUMMARY_TOTAL,
-	ORDER_SUMMARY_FEE,
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
index 8b6906cbc72..651ab6fec45 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
@@ -10,6 +10,3 @@ import './cart-express-payment-block';
 import './proceed-to-checkout-block';
 import './empty-cart-block';
 import './cart-accepted-payment-methods-block';
-import './order-summary-subtotal-block';
-import './order-summary-total-block';
-import './order-summary-fee-block';
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
index 4f5c29916d1..db096861acd 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
@@ -9,6 +9,7 @@ import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
  * Internal dependencies
  */
 import metadata from './component-metadata';
+import './cart-order-summary-block/register';
 
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
@@ -74,16 +75,6 @@ registerCheckoutBlock( {
 	),
 } );
 
-registerCheckoutBlock( {
-	metadata: metadata.CART_ORDER_SUMMARY,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary" */
-			'./cart-order-summary-block/frontend'
-		)
-	),
-} );
-
 registerCheckoutBlock( {
 	metadata: metadata.CART_EXPRESS_PAYMENT,
 	component: lazy( () =>
@@ -113,33 +104,3 @@ registerCheckoutBlock( {
 		)
 	),
 } );
-
-registerCheckoutBlock( {
-	metadata: metadata.ORDER_SUMMARY_FEE,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-fee" */
-			'./order-summary-fee-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: metadata.ORDER_SUMMARY_SUBTOTAL,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-subtotal" */
-			'./order-summary-subtotal-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: metadata.ORDER_SUMMARY_TOTAL,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-total" */
-			'./order-summary-total-block/frontend'
-		)
-	),
-} );
diff --git a/assets/js/blocks/cart-checkout/cart/style.scss b/assets/js/blocks/cart-checkout/cart/style.scss
index 987a14b4c60..d3539cf4097 100644
--- a/assets/js/blocks/cart-checkout/cart/style.scss
+++ b/assets/js/blocks/cart-checkout/cart/style.scss
@@ -266,6 +266,10 @@ table.wc-block-cart-items {
 
 	.wc-block-cart__payment-options {
 		padding: $gap 0 0;
+
+		&:empty {
+			padding: 0;
+		}
 	}
 }
 
diff --git a/packages/checkout/components/totals/item/style.scss b/packages/checkout/components/totals/item/style.scss
index a355b41135c..8c7b5c0e536 100644
--- a/packages/checkout/components/totals/item/style.scss
+++ b/packages/checkout/components/totals/item/style.scss
@@ -1,11 +1,26 @@
 .wc-block-components-totals-item {
 	display: flex;
 	flex-wrap: wrap;
-	margin: em($gap-small) 0 0;
+}
+
+.wc-block-components-totals-item,
+.wc-block-components-totals-coupon,
+.wc-block-components-totals-shipping {
+	@include with-translucent-border(1px 0 0);
+	margin: 0;
 	width: 100%;
+	padding-top: $gap;
+	padding-bottom: $gap;
+
+	// First row in list.
+	&:first-child::after {
+		border-top: 0;
+	}
 
-	&:first-child {
-		margin-top: 0;
+	// Nested items.
+	> .wc-block-components-totals-item {
+		padding-top: 0;
+		padding-bottom: 0;
 	}
 }
 
diff --git a/packages/checkout/components/totals/taxes/index.tsx b/packages/checkout/components/totals/taxes/index.tsx
index ed9f7bfe5bd..3e204bf154d 100644
--- a/packages/checkout/components/totals/taxes/index.tsx
+++ b/packages/checkout/components/totals/taxes/index.tsx
@@ -12,7 +12,6 @@ import { ReactElement } from 'react';
  * Internal dependencies
  */
 import TotalsItem from '../item';
-import './style.scss';
 
 interface Values {
 	tax_lines: CartTotalsTaxLineItem[];
@@ -48,12 +47,7 @@ const TotalsTaxes = ( {
 
 	const itemisedTaxItems: ReactElement | null =
 		showItemisedTaxes && taxLines.length > 0 ? (
-			<div
-				className={ classnames(
-					'wc-block-components-totals-taxes',
-					className
-				) }
-			>
+			<>
 				{ taxLines.map( ( { name, rate, price }, i ) => {
 					const label = `${ name }${
 						showRateAfterTaxName ? ` ${ rate }` : ''
@@ -61,14 +55,17 @@ const TotalsTaxes = ( {
 					return (
 						<TotalsItem
 							key={ `tax-line-${ i }` }
-							className="wc-block-components-totals-taxes__grouped-rate"
+							className={ classnames(
+								'wc-block-components-totals-taxes',
+								className
+							) }
 							currency={ currency }
 							label={ label }
 							value={ parseInt( price, 10 ) }
 						/>
 					);
 				} ) }{ ' ' }
-			</div>
+			</>
 		) : null;
 
 	return showItemisedTaxes ? (
diff --git a/packages/checkout/components/totals/taxes/style.scss b/packages/checkout/components/totals/taxes/style.scss
deleted file mode 100644
index fbaecd4d0ea..00000000000
--- a/packages/checkout/components/totals/taxes/style.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.wc-block-components-totals-item.wc-block-components-totals-taxes__grouped-rate {
-	margin: $gap-smallest 0;
-	&:first-child {
-		margin-top: 0;
-	}
-
-	&:last-child {
-		margin-bottom: 0;
-	}
-}

From c0895884c387170eb0932a7ee9cbbb417329ca38 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Thu, 17 Mar 2022 14:30:25 +0000
Subject: [PATCH 03/29] Update icons

---
 .../coupon-form/index.tsx                     |  4 +-
 .../discount/index.tsx                        |  5 +-
 .../cart-order-summary-block/edit.tsx         |  5 ++
 .../cart-order-summary-block/fee/index.tsx    |  5 +-
 .../cart-order-summary-block/frontend.tsx     |  1 -
 .../shipping/attributes.tsx                   | 18 +++++++
 .../shipping/block.json                       |  9 ++--
 .../shipping/block.tsx                        |  9 +++-
 .../shipping/edit.tsx                         | 46 ++++++++++++++--
 .../shipping/frontend.tsx                     |  8 ++-
 .../shipping/index.tsx                        |  7 ++-
 .../subtotal/index.tsx                        |  5 +-
 .../taxes/attributes.tsx                      | 18 +++++++
 .../cart-order-summary-block/taxes/block.tsx  |  9 +++-
 .../cart-order-summary-block/taxes/edit.tsx   | 52 +++++++++++++++++--
 .../taxes/frontend.tsx                        |  8 ++-
 .../cart-order-summary-block/taxes/index.tsx  |  7 ++-
 .../cart-order-summary-block/total/index.tsx  |  5 +-
 18 files changed, 191 insertions(+), 30 deletions(-)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx

diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/index.tsx
index 0256217391b..5badfa89545 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Icon, customPostType } from '@wordpress/icons';
+import { Icon, tag } from '@wordpress/icons';
 import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
@@ -14,7 +14,7 @@ registerFeaturePluginBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
-				icon={ customPostType }
+				icon={ tag }
 				className="wc-block-editor-components-block-icon"
 			/>
 		),
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/index.tsx
index 0256217391b..ce580c46483 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/index.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Icon, customPostType } from '@wordpress/icons';
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
 import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
@@ -14,7 +15,7 @@ registerFeaturePluginBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
-				icon={ customPostType }
+				icon={ totals }
 				className="wc-block-editor-components-block-icon"
 			/>
 		),
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
index 31cd1647dd1..6e6a3025bc1 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -4,6 +4,8 @@
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import type { TemplateArray } from '@wordpress/blocks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
+import { __ } from '@wordpress/i18n';
+import Title from '@woocommerce/base-components/title';
 
 /**
  * Internal dependencies
@@ -34,6 +36,9 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 
 	return (
 		<div { ...blockProps }>
+			<Title headingLevel="2" className="wc-block-cart__totals-title">
+				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
+			</Title>
 			<InnerBlocks
 				allowedBlocks={ allowedBlocks }
 				template={ defaultTemplate }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/index.tsx
index 0256217391b..ce580c46483 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/index.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Icon, customPostType } from '@wordpress/icons';
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
 import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
@@ -14,7 +15,7 @@ registerFeaturePluginBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
-				icon={ customPostType }
+				icon={ totals }
 				className="wc-block-editor-components-block-icon"
 			/>
 		),
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
index 1e449722d79..1cfb85da5a9 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 import Title from '@woocommerce/base-components/title';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
new file mode 100644
index 00000000000..e27242576ee
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+export default {
+	isShippingCalculatorEnabled: {
+		type: 'boolean',
+		default: getSetting( 'isShippingCalculatorEnabled', true ),
+	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
index 951d49a4fa1..135c6b34b87 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
@@ -11,9 +11,12 @@
 		"reusable": false
 	},
 	"attributes": {
-		"className": {
-			"type": "string",
-			"default": ""
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": true
+			}
 		}
 	},
 	"parent": [ "woocommerce/cart-order-summary-block" ],
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx
index bdce55826ef..7a39ce7a478 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx
@@ -5,8 +5,13 @@ import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
-const Block = ( { className }: { className: string } ): JSX.Element | null => {
-	const isShippingCalculatorEnabled = true; // @todo move elsewhere.
+const Block = ( {
+	className,
+	isShippingCalculatorEnabled,
+}: {
+	className: string;
+	isShippingCalculatorEnabled: boolean;
+} ): JSX.Element | null => {
 	const { cartTotals, cartNeedsShipping } = useStoreCart();
 
 	if ( ! cartNeedsShipping ) {
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
index 9a85bfb013b..3c57c86614c 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
@@ -1,8 +1,11 @@
 /**
  * External dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { getSetting } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
@@ -11,18 +14,55 @@ import Block from './block';
 
 export const Edit = ( {
 	attributes,
+	setAttributes,
 }: {
 	attributes: {
+		isShippingCalculatorEnabled: boolean;
 		className: string;
+		lock: {
+			move: boolean;
+			remove: boolean;
+		};
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const { className } = attributes;
+	const { isShippingCalculatorEnabled, className } = attributes;
+	const shippingEnabled = getSetting( 'shippingEnabled', true );
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
+			<InspectorControls>
+				{ shippingEnabled && (
+					<PanelBody
+						title={ __(
+							'Shipping rates',
+							'woo-gutenberg-products-block'
+						) }
+					>
+						<ToggleControl
+							label={ __(
+								'Shipping calculator',
+								'woo-gutenberg-products-block'
+							) }
+							help={ __(
+								'Allow customers to estimate shipping by entering their address.',
+								'woo-gutenberg-products-block'
+							) }
+							checked={ isShippingCalculatorEnabled }
+							onChange={ () =>
+								setAttributes( {
+									isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
+								} )
+							}
+						/>
+					</PanelBody>
+				) }
+			</InspectorControls>
 			<Noninteractive>
-				<Block className={ className } />
+				<Block
+					className={ className }
+					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
+				/>
 			</Noninteractive>
 		</div>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx
index 4fc9ad2897a..b6c773996b2 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx
@@ -1,6 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
 /**
  * Internal dependencies
  */
 import Block from './block';
+import attributes from './attributes';
 
-export default Block;
+export default withFilteredAttributes( attributes )( Block );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx
index 0256217391b..72010b2cccc 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx
@@ -1,24 +1,27 @@
 /**
  * External dependencies
  */
-import { Icon, customPostType } from '@wordpress/icons';
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
 import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
+import attributes from './attributes';
 import metadata from './block.json';
 
 registerFeaturePluginBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
-				icon={ customPostType }
+				icon={ totals }
 				className="wc-block-editor-components-block-icon"
 			/>
 		),
 	},
+	attributes,
 	edit: Edit,
 	save: Save,
 } );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx
index 0256217391b..ce580c46483 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Icon, customPostType } from '@wordpress/icons';
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
 import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
@@ -14,7 +15,7 @@ registerFeaturePluginBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
-				icon={ customPostType }
+				icon={ totals }
 				className="wc-block-editor-components-block-icon"
 			/>
 		),
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx
new file mode 100644
index 00000000000..ecb4a15c3b4
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+export default {
+	showRateAfterTaxName: {
+		type: 'boolean',
+		default: getSetting( 'displayCartPricesIncludingTax', false ),
+	},
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx
index d9328f815b9..ef3917d9b82 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx
@@ -6,8 +6,13 @@ import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 
-const Block = ( { className }: { className: string } ): JSX.Element | null => {
-	const showRateAfterTaxName = true; // @todo move
+const Block = ( {
+	className,
+	showRateAfterTaxName,
+}: {
+	className: string;
+	showRateAfterTaxName: boolean;
+} ): JSX.Element | null => {
 	const { cartTotals } = useStoreCart();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 	const displayCartPricesIncludingTax = getSetting(
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
index 9a85bfb013b..0d19855d8d4 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
@@ -1,8 +1,11 @@
 /**
  * External dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { getSetting } from '@woocommerce/settings';
 
 /**
  * Internal dependencies
@@ -11,18 +14,61 @@ import Block from './block';
 
 export const Edit = ( {
 	attributes,
+	setAttributes,
 }: {
 	attributes: {
 		className: string;
+		showRateAfterTaxName: boolean;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const { className } = attributes;
+	const { className, showRateAfterTaxName } = attributes;
 	const blockProps = useBlockProps();
+	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
+	const displayItemizedTaxes = getSetting(
+		'displayItemizedTaxes',
+		false
+	) as boolean;
+	const displayCartPricesIncludingTax = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	) as boolean;
 	return (
 		<div { ...blockProps }>
+			<InspectorControls>
+				{ taxesEnabled &&
+					displayItemizedTaxes &&
+					! displayCartPricesIncludingTax && (
+						<PanelBody
+							title={ __(
+								'Taxes',
+								'woo-gutenberg-products-block'
+							) }
+						>
+							<ToggleControl
+								label={ __(
+									'Show rate after tax name',
+									'woo-gutenberg-products-block'
+								) }
+								help={ __(
+									'Show the percentage rate alongside each tax line in the summary.',
+									'woo-gutenberg-products-block'
+								) }
+								checked={ showRateAfterTaxName }
+								onChange={ () =>
+									setAttributes( {
+										showRateAfterTaxName: ! showRateAfterTaxName,
+									} )
+								}
+							/>
+						</PanelBody>
+					) }
+			</InspectorControls>
 			<Noninteractive>
-				<Block className={ className } />
+				<Block
+					className={ className }
+					showRateAfterTaxName={ showRateAfterTaxName }
+				/>
 			</Noninteractive>
 		</div>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx
index 4fc9ad2897a..b6c773996b2 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx
@@ -1,6 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
 /**
  * Internal dependencies
  */
 import Block from './block';
+import attributes from './attributes';
 
-export default Block;
+export default withFilteredAttributes( attributes )( Block );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx
index 0256217391b..72010b2cccc 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx
@@ -1,24 +1,27 @@
 /**
  * External dependencies
  */
-import { Icon, customPostType } from '@wordpress/icons';
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
 import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
+import attributes from './attributes';
 import metadata from './block.json';
 
 registerFeaturePluginBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
-				icon={ customPostType }
+				icon={ totals }
 				className="wc-block-editor-components-block-icon"
 			/>
 		),
 	},
+	attributes,
 	edit: Edit,
 	save: Save,
 } );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx
index 0256217391b..ce580c46483 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx
@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Icon, customPostType } from '@wordpress/icons';
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
 import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
@@ -14,7 +15,7 @@ registerFeaturePluginBlockType( metadata, {
 	icon: {
 		src: (
 			<Icon
-				icon={ customPostType }
+				icon={ totals }
 				className="wc-block-editor-components-block-icon"
 			/>
 		),

From fce51434c033060e6b9aa2760f929be42bc893ea Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Thu, 17 Mar 2022 16:05:14 +0000
Subject: [PATCH 04/29] Resolve stying issues

---
 assets/js/blocks/cart-checkout/cart/editor.scss    | 11 +++++++++++
 .../cart-order-summary-block/discount/edit.tsx     |  5 +----
 .../cart-order-summary-block/fee/edit.tsx          |  5 +----
 .../cart-order-summary-block/shipping/edit.tsx     | 11 ++++-------
 .../cart-order-summary-block/subtotal/edit.tsx     |  5 +----
 .../cart-order-summary-block/taxes/edit.tsx        | 11 ++++-------
 .../cart-order-summary-block/total/edit.tsx        |  5 +----
 .../checkout/components/totals/item/style.scss     | 14 ++------------
 8 files changed, 25 insertions(+), 42 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/cart/editor.scss b/assets/js/blocks/cart-checkout/cart/editor.scss
index d3d93d5b5b2..537347ad7a3 100644
--- a/assets/js/blocks/cart-checkout/cart/editor.scss
+++ b/assets/js/blocks/cart-checkout/cart/editor.scss
@@ -29,3 +29,14 @@ body.wc-lock-selected-block--remove {
 		position: relative;
 	}
 }
+
+.wp-block-woocommerce-cart-order-summary-block {
+	.block-editor-block-list__layout > div {
+		margin: 0 !important;
+	}
+	.wc-block-components-totals-item,
+	.wc-block-components-totals-coupon,
+	.wc-block-components-totals-shipping {
+		box-sizing: border-box;
+	}
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/edit.tsx
index 9a85bfb013b..5b589f4f095 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/edit.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
  * Internal dependencies
@@ -21,9 +20,7 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
-			<Noninteractive>
-				<Block className={ className } />
-			</Noninteractive>
+			<Block className={ className } />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/edit.tsx
index 9a85bfb013b..5b589f4f095 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/edit.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
  * Internal dependencies
@@ -21,9 +20,7 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
-			<Noninteractive>
-				<Block className={ className } />
-			</Noninteractive>
+			<Block className={ className } />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
index 3c57c86614c..5bfea5bd18c 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
 
@@ -58,12 +57,10 @@ export const Edit = ( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<Noninteractive>
-				<Block
-					className={ className }
-					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
-				/>
-			</Noninteractive>
+			<Block
+				className={ className }
+				isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
+			/>
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx
index 9a85bfb013b..5b589f4f095 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
  * Internal dependencies
@@ -21,9 +20,7 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
-			<Noninteractive>
-				<Block className={ className } />
-			</Noninteractive>
+			<Block className={ className } />
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
index 0d19855d8d4..d7b925202c9 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
 
@@ -64,12 +63,10 @@ export const Edit = ( {
 						</PanelBody>
 					) }
 			</InspectorControls>
-			<Noninteractive>
-				<Block
-					className={ className }
-					showRateAfterTaxName={ showRateAfterTaxName }
-				/>
-			</Noninteractive>
+			<Block
+				className={ className }
+				showRateAfterTaxName={ showRateAfterTaxName }
+			/>
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
index 9a85bfb013b..5b589f4f095 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { useBlockProps } from '@wordpress/block-editor';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
  * Internal dependencies
@@ -21,9 +20,7 @@ export const Edit = ( {
 	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
-			<Noninteractive>
-				<Block className={ className } />
-			</Noninteractive>
+			<Block className={ className } />
 		</div>
 	);
 };
diff --git a/packages/checkout/components/totals/item/style.scss b/packages/checkout/components/totals/item/style.scss
index 8c7b5c0e536..02838e8687a 100644
--- a/packages/checkout/components/totals/item/style.scss
+++ b/packages/checkout/components/totals/item/style.scss
@@ -3,7 +3,8 @@
 	flex-wrap: wrap;
 }
 
-.wc-block-components-totals-item,
+.wp-block > .wc-block-components-totals-item,
+.wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-item,
 .wc-block-components-totals-coupon,
 .wc-block-components-totals-shipping {
 	@include with-translucent-border(1px 0 0);
@@ -11,17 +12,6 @@
 	width: 100%;
 	padding-top: $gap;
 	padding-bottom: $gap;
-
-	// First row in list.
-	&:first-child::after {
-		border-top: 0;
-	}
-
-	// Nested items.
-	> .wc-block-components-totals-item {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
 }
 
 .wc-block-components-totals-item__label {

From ef752e350fa67c636e8ac9eb7ed0e678dbf3429f Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 18 Mar 2022 12:00:23 +0000
Subject: [PATCH 05/29] Remove old block

---
 .../attributes.tsx                            |  22 ---
 .../cart-order-summary-block-old/block.json   |  26 ----
 .../cart-order-summary-block-old/block.tsx    | 125 ------------------
 .../cart-order-summary-block-old/edit.tsx     | 114 ----------------
 .../cart-order-summary-block-old/frontend.tsx |  12 --
 .../cart-order-summary-block-old/index.tsx    |  27 ----
 6 files changed, 326 deletions(-)
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/attributes.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.json
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/edit.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/frontend.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/index.tsx

diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/attributes.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/attributes.tsx
deleted file mode 100644
index 5a449d32bfa..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/attributes.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { getSetting } from '@woocommerce/settings';
-
-export default {
-	isShippingCalculatorEnabled: {
-		type: 'boolean',
-		default: getSetting( 'isShippingCalculatorEnabled', true ),
-	},
-	showRateAfterTaxName: {
-		type: 'boolean',
-		default: getSetting( 'displayCartPricesIncludingTax', false ),
-	},
-	lock: {
-		type: 'object',
-		default: {
-			move: true,
-			remove: true,
-		},
-	},
-};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.json
deleted file mode 100644
index 9809675908e..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.json
+++ /dev/null
@@ -1,26 +0,0 @@
-{
-	"name": "woocommerce/cart-order-summary-block",
-	"version": "1.0.0",
-	"title": "Order Summary",
-	"description": "Show customers a summary of their order.",
-	"category": "woocommerce",
-	"supports": {
-		"align": false,
-		"html": false,
-		"multiple": false,
-		"reusable": false,
-		"inserter": false
-	},
-	"attributes": {
-		"lock": {
-			"type": "object",
-			"default": {
-				"remove": true,
-				"move": true
-			}
-		}
-	},
-	"parent": [ "woocommerce/cart-totals-block" ],
-	"textdomain": "woo-gutenberg-products-block",
-	"apiVersion": 2
-}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.tsx
deleted file mode 100644
index fa7bdfc6f77..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/block.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	TotalsCoupon,
-	TotalsDiscount,
-	TotalsFooterItem,
-	TotalsShipping,
-} from '@woocommerce/base-components/cart-checkout';
-import {
-	Subtotal,
-	TotalsFees,
-	TotalsTaxes,
-	TotalsWrapper,
-	ExperimentalOrderMeta,
-	ExperimentalDiscountsMeta,
-} from '@woocommerce/blocks-checkout';
-import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import {
-	useStoreCartCoupons,
-	useStoreCart,
-} from '@woocommerce/base-context/hooks';
-import { getSetting } from '@woocommerce/settings';
-import Title from '@woocommerce/base-components/title';
-
-/**
- * Internal dependencies
- */
-
-const Block = ( {
-	className,
-	showRateAfterTaxName = false,
-	isShippingCalculatorEnabled = true,
-}: {
-	className: string;
-	showRateAfterTaxName: boolean;
-	isShippingCalculatorEnabled: boolean;
-} ): JSX.Element => {
-	const { cartFees, cartTotals, cartNeedsShipping } = useStoreCart();
-
-	const {
-		applyCoupon,
-		removeCoupon,
-		isApplyingCoupon,
-		isRemovingCoupon,
-		appliedCoupons,
-	} = useStoreCartCoupons();
-
-	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
-
-	// Prepare props to pass to the ExperimentalOrderMeta slot fill.
-	// We need to pluck out receiveCart.
-	// eslint-disable-next-line no-unused-vars
-	const { extensions, receiveCart, ...cart } = useStoreCart();
-	const slotFillProps = {
-		extensions,
-		cart,
-		context: 'woocommerce/cart',
-	};
-
-	const discountsSlotFillProps = {
-		extensions,
-		cart,
-		context: 'woocommerce/cart',
-	};
-
-	return (
-		<div className={ className }>
-			<Title headingLevel="2" className="wc-block-cart__totals-title">
-				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
-			</Title>
-			<TotalsWrapper>
-				<Subtotal currency={ totalsCurrency } values={ cartTotals } />
-				<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
-				<TotalsDiscount
-					cartCoupons={ appliedCoupons }
-					currency={ totalsCurrency }
-					isRemovingCoupon={ isRemovingCoupon }
-					removeCoupon={ removeCoupon }
-					values={ cartTotals }
-				/>
-			</TotalsWrapper>
-			{ getSetting( 'couponsEnabled', true ) && (
-				<TotalsWrapper>
-					<TotalsCoupon
-						onSubmit={ applyCoupon }
-						isLoading={ isApplyingCoupon }
-					/>
-				</TotalsWrapper>
-			) }
-			<ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />
-			{ cartNeedsShipping && (
-				<TotalsWrapper>
-					<TotalsShipping
-						showCalculator={ isShippingCalculatorEnabled }
-						showRateSelector={ true }
-						values={ cartTotals }
-						currency={ totalsCurrency }
-					/>
-				</TotalsWrapper>
-			) }
-			{ ! getSetting( 'displayCartPricesIncludingTax', false ) &&
-				parseInt( cartTotals.total_tax, 10 ) > 0 && (
-					<TotalsWrapper>
-						<TotalsTaxes
-							showRateAfterTaxName={ showRateAfterTaxName }
-							currency={ totalsCurrency }
-							values={ cartTotals }
-						/>
-					</TotalsWrapper>
-				) }
-			<TotalsWrapper>
-				<TotalsFooterItem
-					currency={ totalsCurrency }
-					values={ cartTotals }
-				/>
-			</TotalsWrapper>
-
-			<ExperimentalOrderMeta.Slot { ...slotFillProps } />
-		</div>
-	);
-};
-
-export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/edit.tsx
deleted file mode 100644
index 1f4b764d7cc..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/edit.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import { __ } from '@wordpress/i18n';
-import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { getSetting } from '@woocommerce/settings';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export const Edit = ( {
-	attributes,
-	setAttributes,
-}: {
-	attributes: {
-		showRateAfterTaxName: boolean;
-		isShippingCalculatorEnabled: boolean;
-		className: string;
-		lock: {
-			move: boolean;
-			remove: boolean;
-		};
-	};
-	setAttributes: ( attributes: Record< string, unknown > ) => void;
-} ): JSX.Element => {
-	const {
-		showRateAfterTaxName,
-		isShippingCalculatorEnabled,
-		className,
-	} = attributes;
-	const blockProps = useBlockProps();
-	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
-	const displayItemizedTaxes = getSetting(
-		'displayItemizedTaxes',
-		false
-	) as boolean;
-	const displayCartPricesIncludingTax = getSetting(
-		'displayCartPricesIncludingTax',
-		false
-	) as boolean;
-	return (
-		<div { ...blockProps }>
-			<InspectorControls>
-				{ getSetting( 'shippingEnabled', true ) && (
-					<PanelBody
-						title={ __(
-							'Shipping rates',
-							'woo-gutenberg-products-block'
-						) }
-					>
-						<ToggleControl
-							label={ __(
-								'Shipping calculator',
-								'woo-gutenberg-products-block'
-							) }
-							help={ __(
-								'Allow customers to estimate shipping by entering their address.',
-								'woo-gutenberg-products-block'
-							) }
-							checked={ isShippingCalculatorEnabled }
-							onChange={ () =>
-								setAttributes( {
-									isShippingCalculatorEnabled: ! isShippingCalculatorEnabled,
-								} )
-							}
-						/>
-					</PanelBody>
-				) }
-				{ taxesEnabled &&
-					displayItemizedTaxes &&
-					! displayCartPricesIncludingTax && (
-						<PanelBody
-							title={ __(
-								'Taxes',
-								'woo-gutenberg-products-block'
-							) }
-						>
-							<ToggleControl
-								label={ __(
-									'Show rate after tax name',
-									'woo-gutenberg-products-block'
-								) }
-								help={ __(
-									'Show the percentage rate alongside each tax line in the summary.',
-									'woo-gutenberg-products-block'
-								) }
-								checked={ showRateAfterTaxName }
-								onChange={ () =>
-									setAttributes( {
-										showRateAfterTaxName: ! showRateAfterTaxName,
-									} )
-								}
-							/>
-						</PanelBody>
-					) }
-			</InspectorControls>
-			<Noninteractive>
-				<Block
-					className={ className }
-					showRateAfterTaxName={ showRateAfterTaxName }
-					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
-				/>
-			</Noninteractive>
-		</div>
-	);
-};
-
-export const Save = (): JSX.Element => {
-	return <div { ...useBlockProps.save() } />;
-};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/frontend.tsx
deleted file mode 100644
index b6c773996b2..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/frontend.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * External dependencies
- */
-import { withFilteredAttributes } from '@woocommerce/shared-hocs';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-import attributes from './attributes';
-
-export default withFilteredAttributes( attributes )( Block );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/index.tsx
deleted file mode 100644
index 72010b2cccc..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block-old/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * External dependencies
- */
-import { totals } from '@woocommerce/icons';
-import { Icon } from '@wordpress/icons';
-import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
-
-/**
- * Internal dependencies
- */
-import { Edit, Save } from './edit';
-import attributes from './attributes';
-import metadata from './block.json';
-
-registerFeaturePluginBlockType( metadata, {
-	icon: {
-		src: (
-			<Icon
-				icon={ totals }
-				className="wc-block-editor-components-block-icon"
-			/>
-		),
-	},
-	attributes,
-	edit: Edit,
-	save: Save,
-} );

From 58c41adc6c8e5203e5409389758f97a4fc2caff1 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 18 Mar 2022 12:27:39 +0000
Subject: [PATCH 06/29] Pin totals row

---
 .../cart-order-summary-block/edit.tsx         | 10 ++++++-
 .../cart-order-summary-block/frontend.tsx     | 10 +++++++
 .../cart-order-summary-block/index.tsx        |  1 -
 .../cart-order-summary-block/register.ts      | 10 -------
 .../shipping/edit.tsx                         | 11 ++++---
 .../cart-order-summary-block/total/block.json | 22 --------------
 .../cart-order-summary-block/total/block.tsx  | 21 -------------
 .../cart-order-summary-block/total/edit.tsx   | 30 -------------------
 .../total/frontend.tsx                        |  6 ----
 .../cart-order-summary-block/total/index.tsx  | 25 ----------------
 10 files changed, 26 insertions(+), 120 deletions(-)
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.json
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/frontend.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx

diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
index 6e6a3025bc1..b2ecb0a3a72 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -6,6 +6,9 @@ import type { TemplateArray } from '@wordpress/blocks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { __ } from '@wordpress/i18n';
 import Title from '@woocommerce/base-components/title';
+import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
@@ -15,6 +18,8 @@ import { OrderMetaSlotFill } from './slotfills';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps();
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 	const allowedBlocks = getAllowedBlocks(
 		innerBlockAreas.CART_ORDER_SUMMARY
 	);
@@ -25,7 +30,6 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 		[ 'woocommerce/order-summary-coupon-form-block', {}, [] ],
 		[ 'woocommerce/order-summary-shipping-block', {}, [] ],
 		[ 'woocommerce/order-summary-taxes-block', {}, [] ],
-		[ 'woocommerce/order-summary-total-block', {}, [] ],
 	] as TemplateArray;
 
 	useForcedLayout( {
@@ -44,6 +48,10 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 				template={ defaultTemplate }
 				templateLock="insert"
 			/>
+			<TotalsFooterItem
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
 			<OrderMetaSlotFill />
 		</div>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
index 1cfb85da5a9..f5534b0c837 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
@@ -4,6 +4,9 @@
 import { __ } from '@wordpress/i18n';
 import Title from '@woocommerce/base-components/title';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
@@ -18,12 +21,19 @@ const FrontendBlock = ( {
 	children: JSX.Element | JSX.Element[];
 	className: string;
 } ): JSX.Element | null => {
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
 	return (
 		<div className={ className }>
 			<Title headingLevel="2" className="wc-block-cart__totals-title">
 				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
 			</Title>
 			{ children }
+			<TotalsFooterItem
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
 			<OrderMetaSlotFill />
 		</div>
 	);
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
index f91dc62cc44..6953f6866f9 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
@@ -13,7 +13,6 @@ import attributes from './attributes';
 import metadata from './block.json';
 import './subtotal';
 import './fee';
-import './total';
 import './discount';
 import './shipping';
 import './coupon-form';
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
index c7637f8c93c..d84087efa69 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
@@ -42,16 +42,6 @@ registerCheckoutBlock( {
 	),
 } );
 
-registerCheckoutBlock( {
-	metadata: require( './total/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary-total" */
-			'./total/frontend'
-		)
-	),
-} );
-
 registerCheckoutBlock( {
 	metadata: require( './discount/block.json' ),
 	component: lazy( () =>
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
index 5bfea5bd18c..cde7d378002 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
@@ -5,6 +5,7 @@ import { __ } from '@wordpress/i18n';
 import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
 
 /**
  * Internal dependencies
@@ -57,10 +58,12 @@ export const Edit = ( {
 					</PanelBody>
 				) }
 			</InspectorControls>
-			<Block
-				className={ className }
-				isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
-			/>
+			<Noninteractive>
+				<Block
+					className={ className }
+					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
+				/>
+			</Noninteractive>
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.json
deleted file mode 100644
index 71ac21590c9..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.json
+++ /dev/null
@@ -1,22 +0,0 @@
-{
-	"name": "woocommerce/order-summary-total-block",
-	"version": "1.0.0",
-	"title": "Total",
-	"description": "Shows the cart total row.",
-	"category": "woocommerce",
-	"supports": {
-		"align": false,
-		"html": false,
-		"multiple": false,
-		"reusable": false
-	},
-	"attributes": {
-		"className": {
-			"type": "string",
-			"default": ""
-		}
-	},
-	"parent": [ "woocommerce/cart-order-summary-block" ],
-	"textdomain": "woo-gutenberg-products-block",
-	"apiVersion": 2
-}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.tsx
deleted file mode 100644
index 8a62ba5ad3c..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/block.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
-import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
-
-const Block = ( { className }: { className: string } ): JSX.Element => {
-	const { cartTotals } = useStoreCart();
-	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
-
-	return (
-		<TotalsFooterItem
-			className={ className }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
-	);
-};
-
-export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
deleted file mode 100644
index 5b589f4f095..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/edit.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * External dependencies
- */
-import { useBlockProps } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export const Edit = ( {
-	attributes,
-}: {
-	attributes: {
-		className: string;
-	};
-	setAttributes: ( attributes: Record< string, unknown > ) => void;
-} ): JSX.Element => {
-	const { className } = attributes;
-	const blockProps = useBlockProps();
-	return (
-		<div { ...blockProps }>
-			<Block className={ className } />
-		</div>
-	);
-};
-
-export const Save = (): JSX.Element => {
-	return <div { ...useBlockProps.save() } />;
-};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/frontend.tsx
deleted file mode 100644
index 4fc9ad2897a..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/frontend.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Internal dependencies
- */
-import Block from './block';
-
-export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx
deleted file mode 100644
index ce580c46483..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/total/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * External dependencies
- */
-import { totals } from '@woocommerce/icons';
-import { Icon } from '@wordpress/icons';
-import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
-
-/**
- * Internal dependencies
- */
-import { Edit, Save } from './edit';
-import metadata from './block.json';
-
-registerFeaturePluginBlockType( metadata, {
-	icon: {
-		src: (
-			<Icon
-				icon={ totals }
-				className="wc-block-editor-components-block-icon"
-			/>
-		),
-	},
-	edit: Edit,
-	save: Save,
-} );

From 1fef92d44f5cefc55a38c8ba1a436253cf25c50b Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 18 Mar 2022 12:43:21 +0000
Subject: [PATCH 07/29] Locking logic update

---
 .../coupon-form/block.json                    |  7 ++++
 .../discount/block.json                       |  7 ++++
 .../cart-order-summary-block/edit.tsx         |  1 -
 .../cart-order-summary-block/fee/block.json   |  7 ++++
 .../shipping/attributes.tsx                   |  2 +-
 .../shipping/block.json                       |  2 +-
 .../subtotal/block.json                       |  7 ++++
 .../taxes/attributes.tsx                      |  2 +-
 .../cart-order-summary-block/taxes/block.json |  7 ++++
 assets/js/previews/cart.ts                    | 35 +++++++++++++++----
 10 files changed, 67 insertions(+), 10 deletions(-)

diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json
index 01a0e51058a..d161c5ee9ee 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json
@@ -14,6 +14,13 @@
 		"className": {
 			"type": "string",
 			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": false,
+				"move": false
+			}
 		}
 	},
 	"parent": [ "woocommerce/cart-order-summary-block" ],
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json
index 0061705938c..3c2f247dba4 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json
@@ -14,6 +14,13 @@
 		"className": {
 			"type": "string",
 			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
 		}
 	},
 	"parent": [ "woocommerce/cart-order-summary-block" ],
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
index b2ecb0a3a72..2ee844284da 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -46,7 +46,6 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 			<InnerBlocks
 				allowedBlocks={ allowedBlocks }
 				template={ defaultTemplate }
-				templateLock="insert"
 			/>
 			<TotalsFooterItem
 				currency={ totalsCurrency }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json
index 3a12b715fee..375103810b3 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json
@@ -14,6 +14,13 @@
 		"className": {
 			"type": "string",
 			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
 		}
 	},
 	"parent": [ "woocommerce/cart-order-summary-block" ],
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
index e27242576ee..be711022ad7 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
@@ -11,8 +11,8 @@ export default {
 	lock: {
 		type: 'object',
 		default: {
-			move: true,
 			remove: true,
+			move: false,
 		},
 	},
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
index 135c6b34b87..de64bcf5fbc 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
@@ -15,7 +15,7 @@
 			"type": "object",
 			"default": {
 				"remove": true,
-				"move": true
+				"move": false
 			}
 		}
 	},
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json
index 2392ad05a3f..faf87e39946 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json
@@ -14,6 +14,13 @@
 		"className": {
 			"type": "string",
 			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
 		}
 	},
 	"parent": [ "woocommerce/cart-order-summary-block" ],
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx
index ecb4a15c3b4..36d83faee28 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx
@@ -11,8 +11,8 @@ export default {
 	lock: {
 		type: 'object',
 		default: {
-			move: true,
 			remove: true,
+			move: false,
 		},
 	},
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json
index 82790c065ab..4bd6bed98c1 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json
@@ -14,6 +14,13 @@
 		"className": {
 			"type": "string",
 			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
 		}
 	},
 	"parent": [ "woocommerce/cart-order-summary-block" ],
diff --git a/assets/js/previews/cart.ts b/assets/js/previews/cart.ts
index ad933766153..4a06a8a0e0b 100644
--- a/assets/js/previews/cart.ts
+++ b/assets/js/previews/cart.ts
@@ -172,7 +172,30 @@ export const previewCart: CartResponse = {
 			extensions: {},
 		},
 	],
-	fees: [],
+	fees: [
+		{
+			id: 'fee',
+			name: __( 'Fee', 'woo-gutenberg-products-block' ),
+			totals: {
+				currency_code: 'USD',
+				currency_symbol: '$',
+				currency_minor_unit: 2,
+				currency_decimal_separator: '.',
+				currency_thousand_separator: ',',
+				currency_prefix: '$',
+				currency_suffix: '',
+				total: '100',
+				total_tax: '20',
+				tax_lines: [
+					{
+						name: __( 'Sales tax', 'woo-gutenberg-products-block' ),
+						rate: '20%',
+						price: '20',
+					},
+				],
+			},
+		},
+	],
 	items_count: 3,
 	items_weight: 0,
 	needs_payment: true,
@@ -213,19 +236,19 @@ export const previewCart: CartResponse = {
 		currency_suffix: '',
 		total_items: '4000',
 		total_items_tax: '800',
-		total_fees: '0',
-		total_fees_tax: '0',
+		total_fees: '100',
+		total_fees_tax: '20',
 		total_discount: '0',
 		total_discount_tax: '0',
 		total_shipping: '0',
 		total_shipping_tax: '0',
-		total_tax: '800',
-		total_price: '4800',
+		total_tax: '820',
+		total_price: '4920',
 		tax_lines: [
 			{
 				name: __( 'Sales tax', 'woo-gutenberg-products-block' ),
 				rate: '20%',
-				price: '800',
+				price: '820',
 			},
 		],
 	},

From 4a5bf74201068bb86a32eae89a8314c56e672883 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 18 Mar 2022 13:22:03 +0000
Subject: [PATCH 08/29] Heading inner block

---
 .../cart-order-summary-block/edit.tsx         | 11 +++--
 .../cart-order-summary-block/frontend.tsx     |  3 --
 .../heading/attributes.ts                     | 18 +++++++
 .../heading/block.json                        | 33 +++++++++++++
 .../heading/block.tsx                         | 24 ++++++++++
 .../cart-order-summary-block/heading/edit.tsx | 48 +++++++++++++++++++
 .../heading/editor.scss                       |  6 +++
 .../heading/frontend.tsx                      | 12 +++++
 .../heading/index.tsx                         | 25 ++++++++++
 .../cart-order-summary-block/index.tsx        |  1 +
 .../cart-order-summary-block/register.ts      | 10 ++++
 .../shipping/attributes.tsx                   |  2 +-
 12 files changed, 185 insertions(+), 8 deletions(-)
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/attributes.ts
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.json
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/edit.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/editor.scss
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/frontend.tsx
 create mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/index.tsx

diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
index 2ee844284da..a187178aa9d 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -5,7 +5,6 @@ import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
 import type { TemplateArray } from '@wordpress/blocks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { __ } from '@wordpress/i18n';
-import Title from '@woocommerce/base-components/title';
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
@@ -24,6 +23,13 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 		innerBlockAreas.CART_ORDER_SUMMARY
 	);
 	const defaultTemplate = [
+		[
+			'woocommerce/order-summary-heading-block',
+			{
+				content: __( 'Cart totals', 'woo-gutenberg-products-block' ),
+			},
+			[],
+		],
 		[ 'woocommerce/order-summary-subtotal-block', {}, [] ],
 		[ 'woocommerce/order-summary-fee-block', {}, [] ],
 		[ 'woocommerce/order-summary-discount-block', {}, [] ],
@@ -40,9 +46,6 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 
 	return (
 		<div { ...blockProps }>
-			<Title headingLevel="2" className="wc-block-cart__totals-title">
-				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
-			</Title>
 			<InnerBlocks
 				allowedBlocks={ allowedBlocks }
 				template={ defaultTemplate }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
index f5534b0c837..e1e38c093b0 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
@@ -26,9 +26,6 @@ const FrontendBlock = ( {
 
 	return (
 		<div className={ className }>
-			<Title headingLevel="2" className="wc-block-cart__totals-title">
-				{ __( 'Cart totals', 'woo-gutenberg-products-block' ) }
-			</Title>
 			{ children }
 			<TotalsFooterItem
 				currency={ totalsCurrency }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/attributes.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/attributes.ts
new file mode 100644
index 00000000000..fedd2b0abac
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/attributes.ts
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export default {
+	content: {
+		type: 'string',
+		default: __( 'Heading', 'woo-gutenberg-products-block' ),
+	},
+	lock: {
+		type: 'object',
+		default: {
+			remove: false,
+			move: false,
+		},
+	},
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.json b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.json
new file mode 100644
index 00000000000..1b71ae94392
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.json
@@ -0,0 +1,33 @@
+{
+	"name": "woocommerce/order-summary-heading-block",
+	"version": "1.0.0",
+	"title": "Heading",
+	"description": "Shows the heading row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"content": {
+			"type": "string",
+			"default": "Heading"
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": false,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.tsx
new file mode 100644
index 00000000000..015c29f8f97
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import Title from '@woocommerce/base-components/title';
+import classnames from 'classnames';
+
+const Block = ( {
+	className,
+	content = '',
+}: {
+	className: string;
+	content: string;
+} ): JSX.Element => {
+	return (
+		<Title
+			headingLevel="2"
+			className={ classnames( className, 'wc-block-cart__totals-title' ) }
+		>
+			{ content }
+		</Title>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/edit.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/edit.tsx
new file mode 100644
index 00000000000..2b9c7e08b6a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/edit.tsx
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import { PlainText, useBlockProps } from '@wordpress/block-editor';
+import Title from '@woocommerce/base-components/title';
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './editor.scss';
+
+export const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		content: string;
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { content = '', className = '' } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Title
+				headingLevel="2"
+				className={ classnames(
+					className,
+					'wc-block-cart__totals-title'
+				) }
+			>
+				<PlainText
+					className={ '' }
+					value={ content }
+					onChange={ ( value ) =>
+						setAttributes( { content: value } )
+					}
+				/>
+			</Title>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/editor.scss b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/editor.scss
new file mode 100644
index 00000000000..d97967f24ee
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/editor.scss
@@ -0,0 +1,6 @@
+.wp-block-woocommerce-order-summary-heading-block {
+	textarea {
+		text-align: right;
+		text-transform: uppercase;
+	}
+}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/frontend.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/frontend.tsx
new file mode 100644
index 00000000000..b6c773996b2
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/frontend.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
index 6953f6866f9..62571ff2328 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
@@ -17,6 +17,7 @@ import './discount';
 import './shipping';
 import './coupon-form';
 import './taxes';
+import './heading';
 
 registerFeaturePluginBlockType( metadata, {
 	icon: {
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
index d84087efa69..f07253c19e5 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
@@ -81,3 +81,13 @@ registerCheckoutBlock( {
 		)
 	),
 } );
+
+registerCheckoutBlock( {
+	metadata: require( './heading/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary-heading" */
+			'./heading/frontend'
+		)
+	),
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
index be711022ad7..e27242576ee 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
+++ b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
@@ -11,8 +11,8 @@ export default {
 	lock: {
 		type: 'object',
 		default: {
+			move: true,
 			remove: true,
-			move: false,
 		},
 	},
 };

From f049f47fad6cb743c631818d0d7103c998e094d3 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 18 Mar 2022 16:10:36 +0000
Subject: [PATCH 09/29] Refactor where inner blocks are defined

---
 .../cart-checkout/order-summary/index.tsx     |  10 +-
 .../shipping-rates-control-package/style.scss |  10 --
 .../cart-order-summary-block/attributes.tsx   |  22 ----
 .../cart-order-summary-block/slotfills.tsx    |  34 ------
 .../inner-blocks/cart-items/block.json        |  29 +++++
 .../inner-blocks/cart-items/block.tsx         |  13 ++
 .../cart-items}/edit.tsx                      |   0
 .../cart-items}/frontend.tsx                  |   0
 .../inner-blocks/cart-items/index.tsx         |  25 ++++
 .../coupon-form/block.json                    |   5 +-
 .../coupon-form/block.tsx                     |   0
 .../coupon-form/edit.tsx                      |   0
 .../coupon-form}/frontend.tsx                 |   0
 .../coupon-form/index.tsx                     |   0
 .../discount/block.json                       |   5 +-
 .../discount/block.tsx                        |  20 ++-
 .../fee => inner-blocks/discount}/edit.tsx    |   0
 .../discount}/frontend.tsx                    |   0
 .../discount/index.tsx                        |   0
 .../fee/block.json                            |   5 +-
 .../fee/block.tsx                             |   0
 .../subtotal => inner-blocks/fee}/edit.tsx    |   0
 .../fee}/frontend.tsx                         |   0
 .../fee/index.tsx                             |   0
 .../heading/attributes.ts                     |   0
 .../heading/block.json                        |   0
 .../heading/block.tsx                         |   0
 .../heading/edit.tsx                          |   0
 .../heading/editor.scss                       |   2 +
 .../heading/frontend.tsx                      |   0
 .../heading/index.tsx                         |   0
 .../cart-checkout/inner-blocks/index.tsx      |  11 ++
 .../register.ts                               |  42 +++----
 .../shipping/attributes.tsx                   |   0
 .../shipping/block.json                       |   5 +-
 .../shipping/block.tsx                        |   0
 .../shipping/edit.tsx                         |   0
 .../shipping/frontend.tsx                     |   0
 .../shipping/index.tsx                        |   0
 .../subtotal/block.json                       |   5 +-
 .../subtotal/block.tsx                        |   0
 .../inner-blocks/subtotal/edit.tsx            |  30 +++++
 .../subtotal}/frontend.tsx                    |   0
 .../subtotal/index.tsx                        |   0
 .../taxes/attributes.tsx                      |   0
 .../taxes/block.json                          |   5 +-
 .../taxes/block.tsx                           |   0
 .../taxes/edit.tsx                            |   0
 .../taxes/frontend.tsx                        |   0
 .../taxes/index.tsx                           |   0
 .../mini-cart-products-table-block/block.tsx  |   2 +-
 .../{cart-checkout => }/cart/attributes.js    |   0
 .../blocks/{cart-checkout => }/cart/block.js  |   0
 .../cart-line-item-row.tsx                    |   0
 .../cart/cart-line-items-table/index.tsx      |   0
 .../{cart-checkout => }/cart/context.ts       |   0
 .../blocks/{cart-checkout => }/cart/edit.js   |   2 +-
 .../{cart-checkout => }/cart/editor.scss      |   1 +
 .../{cart-checkout => }/cart/frontend.js      |   0
 .../blocks/{cart-checkout => }/cart/index.js  |  12 +-
 .../block.json                                |   0
 .../block.tsx                                 |   0
 .../edit.tsx                                  |   0
 .../frontend.tsx                              |   0
 .../index.tsx                                 |   0
 .../cart-express-payment-block/block.json     |   0
 .../cart-express-payment-block/block.tsx      |   2 +-
 .../cart-express-payment-block/edit.tsx       |   0
 .../cart-express-payment-block/editor.scss    |   0
 .../cart-express-payment-block}/frontend.tsx  |   0
 .../cart-express-payment-block/index.tsx      |   0
 .../inner-blocks/cart-items-block/block.json  |   0
 .../inner-blocks/cart-items-block/edit.tsx    |   5 +-
 .../cart-items-block/frontend.tsx             |   0
 .../inner-blocks/cart-items-block/index.tsx   |   0
 .../cart-line-items-block/block.json          |   0
 .../cart-line-items-block/block.tsx           |   0
 .../cart-line-items-block/edit.tsx            |   0
 .../cart-line-items-block/frontend.tsx        |   6 +
 .../cart-line-items-block/index.tsx           |   0
 .../cart-order-summary}/block.json            |   0
 .../inner-blocks/cart-order-summary}/edit.tsx |   5 +-
 .../cart-order-summary}/frontend.tsx          |   6 +-
 .../cart-order-summary}/index.tsx             |   9 --
 .../cart-order-summary/slotfills.tsx          |  18 +++
 .../inner-blocks/cart-totals-block/block.json |   0
 .../inner-blocks/cart-totals-block/edit.tsx   |   5 +-
 .../cart-totals-block/frontend.tsx            |   0
 .../inner-blocks/cart-totals-block/index.tsx  |   0
 .../inner-blocks/cart-totals-block/style.scss |   0
 .../cart/inner-blocks/component-metadata.ts   |   2 +
 .../inner-blocks/empty-cart-block/block.json  |   0
 .../inner-blocks/empty-cart-block/edit.tsx    |   5 +-
 .../empty-cart-block/frontend.tsx             |   0
 .../empty-cart-block/icon-data-uri.js         |   0
 .../inner-blocks/empty-cart-block/index.tsx   |   0
 .../inner-blocks/empty-cart-block/style.scss  |   0
 .../inner-blocks/filled-cart-block/block.json |   0
 .../inner-blocks/filled-cart-block/edit.tsx   |   5 +-
 .../filled-cart-block/editor.scss             |   0
 .../filled-cart-block/frontend.tsx            |   0
 .../inner-blocks/filled-cart-block/index.tsx  |   0
 .../cart/inner-blocks/index.tsx               |   2 +-
 .../proceed-to-checkout-block/attributes.tsx  |   0
 .../proceed-to-checkout-block/block.json      |   0
 .../proceed-to-checkout-block/block.tsx       |   0
 .../proceed-to-checkout-block/edit.tsx        |   0
 .../proceed-to-checkout-block/frontend.tsx    |   0
 .../proceed-to-checkout-block/index.tsx       |   0
 .../proceed-to-checkout-block/style.scss      |   0
 .../cart/inner-blocks/register-components.ts  |  12 +-
 .../{cart-checkout => }/cart/style.scss       |   0
 .../{cart-checkout => }/cart/test/block.js    |   4 +-
 .../blocks/{cart-checkout => }/cart/types.ts  |   0
 .../attributes.tsx                            |   9 --
 .../checkout-order-summary-block/block.tsx    | 114 ------------------
 .../checkout-order-summary-block/edit.tsx     | 110 ++++++++---------
 .../checkout-order-summary-block/frontend.tsx |  35 ++++++
 .../slotfills.tsx                             |  18 +++
 .../checkout-totals-block/edit.tsx            |  10 +-
 .../inner-blocks/component-metadata.ts        |  30 +++++
 .../inner-blocks/register-components.ts       |  48 +++-----
 assets/js/blocks/checkout/styles/editor.scss  |  12 ++
 assets/js/index.js                            |   1 +
 bin/webpack-entries.js                        |   4 +-
 package.json                                  |   6 +-
 packages/checkout/blocks-registry/types.ts    |   1 +
 packages/checkout/components/panel/style.scss |   2 -
 .../components/totals/item/style.scss         |   2 +
 129 files changed, 413 insertions(+), 370 deletions(-)
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/attributes.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
 create mode 100644 assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.json
 create mode 100644 assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.tsx
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block/discount => inner-blocks/cart-items}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-accepted-payment-methods-block => inner-blocks/cart-items}/frontend.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/inner-blocks/cart-items/index.tsx
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/coupon-form/block.json (83%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/coupon-form/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/coupon-form/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-express-payment-block => inner-blocks/coupon-form}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/coupon-form/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/discount/block.json (83%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/discount/block.tsx (57%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block/fee => inner-blocks/discount}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-line-items-block => inner-blocks/discount}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/discount/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/fee/block.json (82%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/fee/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block/subtotal => inner-blocks/fee}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block/coupon-form => inner-blocks/fee}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/fee/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/heading/attributes.ts (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/heading/block.json (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/heading/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/heading/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/heading/editor.scss (77%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/heading/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/heading/index.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/inner-blocks/index.tsx
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/register.ts (64%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/shipping/attributes.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/shipping/block.json (81%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/shipping/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/shipping/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/shipping/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/shipping/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/subtotal/block.json (83%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/subtotal/block.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/inner-blocks/subtotal/edit.tsx
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block/discount => inner-blocks/subtotal}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/subtotal/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/taxes/attributes.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/taxes/block.json (82%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/taxes/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/taxes/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/taxes/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/{cart/inner-blocks/cart-order-summary-block => inner-blocks}/taxes/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/attributes.js (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/block.js (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/cart-line-items-table/cart-line-item-row.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/cart-line-items-table/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/context.ts (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/edit.js (99%)
 rename assets/js/blocks/{cart-checkout => }/cart/editor.scss (96%)
 rename assets/js/blocks/{cart-checkout => }/cart/frontend.js (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/index.js (91%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-accepted-payment-methods-block/block.json (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block/fee => cart/inner-blocks/cart-accepted-payment-methods-block}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-accepted-payment-methods-block/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-express-payment-block/block.json (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-express-payment-block/block.tsx (87%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-express-payment-block/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-express-payment-block/editor.scss (100%)
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal => cart/inner-blocks/cart-express-payment-block}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-express-payment-block/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-items-block/block.json (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-items-block/edit.tsx (92%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-items-block/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-items-block/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-line-items-block/block.json (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-line-items-block/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-line-items-block/edit.tsx (100%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-line-items-block/frontend.tsx
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-line-items-block/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block => cart/inner-blocks/cart-order-summary}/block.json (100%)
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block => cart/inner-blocks/cart-order-summary}/edit.tsx (95%)
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block => cart/inner-blocks/cart-order-summary}/frontend.tsx (74%)
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block => cart/inner-blocks/cart-order-summary}/index.tsx (72%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-totals-block/block.json (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-totals-block/edit.tsx (93%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-totals-block/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-totals-block/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/cart-totals-block/style.scss (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/component-metadata.ts (89%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/empty-cart-block/block.json (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/empty-cart-block/edit.tsx (96%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/empty-cart-block/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/empty-cart-block/icon-data-uri.js (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/empty-cart-block/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/empty-cart-block/style.scss (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/filled-cart-block/block.json (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/filled-cart-block/edit.tsx (94%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/filled-cart-block/editor.scss (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/filled-cart-block/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/filled-cart-block/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/index.tsx (89%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/proceed-to-checkout-block/block.json (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/proceed-to-checkout-block/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/proceed-to-checkout-block/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/proceed-to-checkout-block/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/proceed-to-checkout-block/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/proceed-to-checkout-block/style.scss (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/inner-blocks/register-components.ts (89%)
 rename assets/js/blocks/{cart-checkout => }/cart/style.scss (100%)
 rename assets/js/blocks/{cart-checkout => }/cart/test/block.js (97%)
 rename assets/js/blocks/{cart-checkout => }/cart/types.ts (100%)
 delete mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/block.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/component-metadata.ts

diff --git a/assets/js/base/components/cart-checkout/order-summary/index.tsx b/assets/js/base/components/cart-checkout/order-summary/index.tsx
index 435bf0adc14..ca8cf0a51a6 100644
--- a/assets/js/base/components/cart-checkout/order-summary/index.tsx
+++ b/assets/js/base/components/cart-checkout/order-summary/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import classnames from 'classnames';
 import { useContainerWidthContext } from '@woocommerce/base-context';
 import { Panel } from '@woocommerce/blocks-checkout';
 import type { CartItem } from '@woocommerce/types';
@@ -13,21 +14,26 @@ import OrderSummaryItem from './order-summary-item';
 import './style.scss';
 
 interface OrderSummaryProps {
+	className: string;
 	cartItems: CartItem[];
 }
 
 const OrderSummary = ( {
+	className = '',
 	cartItems = [],
 }: OrderSummaryProps ): null | JSX.Element => {
 	const { isLarge, hasContainerWidth } = useContainerWidthContext();
 
 	if ( ! hasContainerWidth ) {
-		return null;
+		//return null;
 	}
 
 	return (
 		<Panel
-			className="wc-block-components-order-summary"
+			className={ classnames(
+				'wc-block-components-order-summary',
+				className
+			) }
 			initialOpen={ isLarge }
 			hasBorder={ false }
 			title={
diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss b/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
index d3495745880..76698c37ea6 100644
--- a/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
+++ b/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
@@ -42,13 +42,3 @@
 	content: ", ";
 	white-space: pre;
 }
-
-// Target the shipping selection in checkout only, the Cart block has enough spacing because of the buttons on the panel.
-.wc-block-checkout .wc-block-components-shipping-rates-control__package {
-	margin-bottom: em($gap-large);
-
-	&:last-of-type {
-		margin-bottom: 0;
-	}
-
-}
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/attributes.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/attributes.tsx
deleted file mode 100644
index 5a449d32bfa..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/attributes.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * External dependencies
- */
-import { getSetting } from '@woocommerce/settings';
-
-export default {
-	isShippingCalculatorEnabled: {
-		type: 'boolean',
-		default: getSetting( 'isShippingCalculatorEnabled', true ),
-	},
-	showRateAfterTaxName: {
-		type: 'boolean',
-		default: getSetting( 'displayCartPricesIncludingTax', false ),
-	},
-	lock: {
-		type: 'object',
-		default: {
-			move: true,
-			remove: true,
-		},
-	},
-};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/slotfills.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
deleted file mode 100644
index 0845f0799dc..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	ExperimentalOrderMeta,
-	ExperimentalDiscountsMeta,
-} from '@woocommerce/blocks-checkout';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
-
-export const OrderMetaSlotFill = (): JSX.Element => {
-	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
-	// eslint-disable-next-line no-unused-vars
-	const { extensions, receiveCart, ...cart } = useStoreCart();
-	const slotFillProps = {
-		extensions,
-		cart,
-		context: 'woocommerce/cart',
-	};
-
-	return <ExperimentalOrderMeta.Slot { ...slotFillProps } />;
-};
-
-export const DiscountSlotFill = (): JSX.Element => {
-	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
-	// eslint-disable-next-line no-unused-vars
-	const { extensions, receiveCart, ...cart } = useStoreCart();
-	const discountsSlotFillProps = {
-		extensions,
-		cart,
-		context: 'woocommerce/cart',
-	};
-
-	return <ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />;
-};
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.json b/assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.json
new file mode 100644
index 00000000000..6323f92485b
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/order-summary-cart-items-block",
+	"version": "1.0.0",
+	"title": "Cart Items",
+	"description": "Shows cart items.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/checkout-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.tsx
new file mode 100644
index 00000000000..f7d4dc15b5d
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.tsx
@@ -0,0 +1,13 @@
+/**
+ * External dependencies
+ */
+import { OrderSummary } from '@woocommerce/base-components/cart-checkout';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartItems } = useStoreCart();
+
+	return <OrderSummary className={ className } cartItems={ cartItems } />;
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/cart-items/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/cart-items/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/cart-items/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/cart-items/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/cart-items/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/cart-items/index.tsx
new file mode 100644
index 00000000000..3601a61418a
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/inner-blocks/cart-items/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { cart } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ cart }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json b/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.json
similarity index 83%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.json
index d161c5ee9ee..c35980de02b 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.json
+++ b/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.json
@@ -23,7 +23,10 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"parent": [
+		"woocommerce/cart-order-summary-block",
+		"woocommerce/checkout-order-summary-block"
+	],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/coupon-form/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/coupon-form/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/coupon-form/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json b/assets/js/blocks/cart-checkout/inner-blocks/discount/block.json
similarity index 83%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/discount/block.json
index 3c2f247dba4..aa9bf78b430 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.json
+++ b/assets/js/blocks/cart-checkout/inner-blocks/discount/block.json
@@ -23,7 +23,10 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"parent": [
+		"woocommerce/cart-order-summary-block",
+		"woocommerce/checkout-order-summary-block"
+	],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/discount/block.tsx
similarity index 57%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/discount/block.tsx
index cdb03716f5d..245288458a6 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/discount/block.tsx
@@ -7,11 +7,23 @@ import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
+import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+import { useCheckoutContext } from '@woocommerce/base-context';
 
-/**
- * Internal dependencies
- */
-import { DiscountSlotFill } from '../slotfills';
+const DiscountSlotFill = (): JSX.Element => {
+	const { isCart } = useCheckoutContext();
+
+	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
+	const discountsSlotFillProps = {
+		extensions,
+		cart,
+		context: isCart ? 'woocommerce/cart' : 'woocommerce/checkout',
+	};
+
+	return <ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />;
+};
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/discount/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/discount/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/discount/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/discount/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/discount/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/discount/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json b/assets/js/blocks/cart-checkout/inner-blocks/fee/block.json
similarity index 82%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/fee/block.json
index 375103810b3..b6c4dbf33d0 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.json
+++ b/assets/js/blocks/cart-checkout/inner-blocks/fee/block.json
@@ -23,7 +23,10 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"parent": [
+		"woocommerce/cart-order-summary-block",
+		"woocommerce/checkout-order-summary-block"
+	],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/fee/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/fee/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/fee/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/fee/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/fee/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/coupon-form/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/fee/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/fee/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/fee/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/attributes.ts b/assets/js/blocks/cart-checkout/inner-blocks/heading/attributes.ts
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/attributes.ts
rename to assets/js/blocks/cart-checkout/inner-blocks/heading/attributes.ts
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.json b/assets/js/blocks/cart-checkout/inner-blocks/heading/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/heading/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/heading/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/heading/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/heading/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/heading/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/editor.scss b/assets/js/blocks/cart-checkout/inner-blocks/heading/editor.scss
similarity index 77%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/editor.scss
rename to assets/js/blocks/cart-checkout/inner-blocks/heading/editor.scss
index d97967f24ee..187ede2c7ca 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/editor.scss
+++ b/assets/js/blocks/cart-checkout/inner-blocks/heading/editor.scss
@@ -2,5 +2,7 @@
 	textarea {
 		text-align: right;
 		text-transform: uppercase;
+		line-height: 1;
+		height: auto;
 	}
 }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/heading/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/heading/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/heading/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/heading/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/heading/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/index.tsx
new file mode 100644
index 00000000000..18871787d73
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/inner-blocks/index.tsx
@@ -0,0 +1,11 @@
+/**
+ * Internal dependencies
+ */
+import './subtotal';
+import './fee';
+import './discount';
+import './shipping';
+import './coupon-form';
+import './taxes';
+import './heading';
+import './cart-items';
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts b/assets/js/blocks/cart-checkout/inner-blocks/register.ts
similarity index 64%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
rename to assets/js/blocks/cart-checkout/inner-blocks/register.ts
index f07253c19e5..3c9e57bfaa1 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/register.ts
+++ b/assets/js/blocks/cart-checkout/inner-blocks/register.ts
@@ -4,29 +4,11 @@
 import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
 import { lazy } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import metadata from './block.json';
-
-/**
- * Called to register frontend components.
- */
-registerCheckoutBlock( {
-	metadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary" */
-			'./frontend'
-		)
-	),
-} );
-
 registerCheckoutBlock( {
 	metadata: require( './subtotal/block.json' ),
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary-subtotal" */
+			/* webpackChunkName: "cart-blocks/order-summary-subtotal" */
 			'./subtotal/frontend'
 		)
 	),
@@ -36,7 +18,7 @@ registerCheckoutBlock( {
 	metadata: require( './fee/block.json' ),
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary-fee" */
+			/* webpackChunkName: "cart-blocks/order-summary-fee" */
 			'./fee/frontend'
 		)
 	),
@@ -46,7 +28,7 @@ registerCheckoutBlock( {
 	metadata: require( './discount/block.json' ),
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary-discount" */
+			/* webpackChunkName: "cart-blocks/order-summary-discount" */
 			'./discount/frontend'
 		)
 	),
@@ -56,7 +38,7 @@ registerCheckoutBlock( {
 	metadata: require( './shipping/block.json' ),
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary-shipping" */
+			/* webpackChunkName: "cart-blocks/order-summary-shipping" */
 			'./shipping/frontend'
 		)
 	),
@@ -66,7 +48,7 @@ registerCheckoutBlock( {
 	metadata: require( './coupon-form/block.json' ),
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary-coupon-form" */
+			/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
 			'./coupon-form/frontend'
 		)
 	),
@@ -76,7 +58,7 @@ registerCheckoutBlock( {
 	metadata: require( './taxes/block.json' ),
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary-taxes" */
+			/* webpackChunkName: "cart-blocks/order-summary-taxes" */
 			'./taxes/frontend'
 		)
 	),
@@ -86,8 +68,18 @@ registerCheckoutBlock( {
 	metadata: require( './heading/block.json' ),
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "cart-blocks/cart-order-summary-heading" */
+			/* webpackChunkName: "cart-blocks/order-summary-heading" */
 			'./heading/frontend'
 		)
 	),
 } );
+
+registerCheckoutBlock( {
+	metadata: require( './cart-items/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary-cart-items" */
+			'./cart-items/frontend'
+		)
+	),
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx b/assets/js/blocks/cart-checkout/inner-blocks/shipping/attributes.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/attributes.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/shipping/attributes.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json b/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.json
similarity index 81%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/shipping/block.json
index de64bcf5fbc..e65f078e372 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.json
+++ b/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.json
@@ -19,7 +19,10 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"parent": [
+		"woocommerce/cart-order-summary-block",
+		"woocommerce/checkout-order-summary-block"
+	],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/shipping/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/shipping/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/shipping/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/shipping/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/shipping/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/shipping/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json b/assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.json
similarity index 83%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.json
index faf87e39946..095fb118196 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.json
+++ b/assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.json
@@ -23,7 +23,10 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"parent": [
+		"woocommerce/cart-order-summary-block",
+		"woocommerce/checkout-order-summary-block"
+	],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/subtotal/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/subtotal/edit.tsx
new file mode 100644
index 00000000000..5b589f4f095
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/inner-blocks/subtotal/edit.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block className={ className } />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/subtotal/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/discount/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/subtotal/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/subtotal/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/subtotal/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx b/assets/js/blocks/cart-checkout/inner-blocks/taxes/attributes.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/attributes.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/taxes/attributes.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json b/assets/js/blocks/cart-checkout/inner-blocks/taxes/block.json
similarity index 82%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/taxes/block.json
index 4bd6bed98c1..ad30a5ecf97 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.json
+++ b/assets/js/blocks/cart-checkout/inner-blocks/taxes/block.json
@@ -23,7 +23,10 @@
 			}
 		}
 	},
-	"parent": [ "woocommerce/cart-order-summary-block" ],
+	"parent": [
+		"woocommerce/cart-order-summary-block",
+		"woocommerce/checkout-order-summary-block"
+	],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/taxes/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/taxes/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/taxes/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/taxes/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/taxes/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/taxes/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/taxes/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/taxes/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/taxes/index.tsx
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
index 49c93272b31..7edd6fef903 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 /**
  * Internal dependencies
  */
-import CartLineItemsTable from '../../../cart/cart-line-items-table';
+import CartLineItemsTable from '../../../../cart/cart-line-items-table';
 
 type MiniCartContentsBlockProps = {
 	className: string;
diff --git a/assets/js/blocks/cart-checkout/cart/attributes.js b/assets/js/blocks/cart/attributes.js
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/attributes.js
rename to assets/js/blocks/cart/attributes.js
diff --git a/assets/js/blocks/cart-checkout/cart/block.js b/assets/js/blocks/cart/block.js
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/block.js
rename to assets/js/blocks/cart/block.js
diff --git a/assets/js/blocks/cart-checkout/cart/cart-line-items-table/cart-line-item-row.tsx b/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/cart-line-items-table/cart-line-item-row.tsx
rename to assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/cart-line-items-table/index.tsx b/assets/js/blocks/cart/cart-line-items-table/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/cart-line-items-table/index.tsx
rename to assets/js/blocks/cart/cart-line-items-table/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/context.ts b/assets/js/blocks/cart/context.ts
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/context.ts
rename to assets/js/blocks/cart/context.ts
diff --git a/assets/js/blocks/cart-checkout/cart/edit.js b/assets/js/blocks/cart/edit.js
similarity index 99%
rename from assets/js/blocks/cart-checkout/cart/edit.js
rename to assets/js/blocks/cart/edit.js
index aefbbe1d671..105da9fe998 100644
--- a/assets/js/blocks/cart-checkout/cart/edit.js
+++ b/assets/js/blocks/cart/edit.js
@@ -35,7 +35,7 @@ import {
 	useViewSwitcher,
 	useBlockPropsWithLocking,
 	useForcedLayout,
-} from '../shared';
+} from '../cart-checkout/shared';
 import { CartBlockContext } from './context';
 
 // This is adds a class to body to signal if the selected block is locked
diff --git a/assets/js/blocks/cart-checkout/cart/editor.scss b/assets/js/blocks/cart/editor.scss
similarity index 96%
rename from assets/js/blocks/cart-checkout/cart/editor.scss
rename to assets/js/blocks/cart/editor.scss
index 537347ad7a3..055c2a137af 100644
--- a/assets/js/blocks/cart-checkout/cart/editor.scss
+++ b/assets/js/blocks/cart/editor.scss
@@ -36,6 +36,7 @@ body.wc-lock-selected-block--remove {
 	}
 	.wc-block-components-totals-item,
 	.wc-block-components-totals-coupon,
+	.wc-block-components-order-summary,
 	.wc-block-components-totals-shipping {
 		box-sizing: border-box;
 	}
diff --git a/assets/js/blocks/cart-checkout/cart/frontend.js b/assets/js/blocks/cart/frontend.js
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/frontend.js
rename to assets/js/blocks/cart/frontend.js
diff --git a/assets/js/blocks/cart-checkout/cart/index.js b/assets/js/blocks/cart/index.js
similarity index 91%
rename from assets/js/blocks/cart-checkout/cart/index.js
rename to assets/js/blocks/cart/index.js
index af58ae1aad8..f7364d5af34 100644
--- a/assets/js/blocks/cart-checkout/cart/index.js
+++ b/assets/js/blocks/cart/index.js
@@ -63,12 +63,7 @@ const settings = {
 				);
 			},
 			migrate: ( attributes, innerBlocks ) => {
-				const {
-					isShippingCalculatorEnabled,
-					showRateAfterTaxName,
-					checkoutPageId,
-					align,
-				} = attributes;
+				const { checkoutPageId, align } = attributes;
 				return [
 					attributes,
 					[
@@ -83,10 +78,7 @@ const settings = {
 									[
 										createBlock(
 											'woocommerce/cart-order-summary-block',
-											{
-												isShippingCalculatorEnabled,
-												showRateAfterTaxName,
-											}
+											{}
 										),
 										createBlock(
 											'woocommerce/cart-express-payment-block'
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.json b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/fee/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-accepted-payment-methods-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.json b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
similarity index 87%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
index a7f4116b874..ccb0659b1a9 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
@@ -7,7 +7,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import { CartExpressPayment } from '../../../payment-methods';
+import { CartExpressPayment } from '../../../cart-checkout/payment-methods';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const { cartNeedsPayment } = useStoreCart();
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/editor.scss b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/editor.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/editor.scss
rename to assets/js/blocks/cart/inner-blocks/cart-express-payment-block/editor.scss
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/subtotal/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-express-payment-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-express-payment-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-express-payment-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/block.json b/assets/js/blocks/cart/inner-blocks/cart-items-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-items-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-items-block/edit.tsx
similarity index 92%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-items-block/edit.tsx
index fc4df087b9d..e823d38f0bd 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-items-block/edit.tsx
@@ -8,7 +8,10 @@ import type { TemplateArray } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps( { className: 'wc-block-cart__main' } );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-items-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-items-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-items-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-items-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-items-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/block.json b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-line-items-block/edit.tsx
diff --git a/assets/js/blocks/cart/inner-blocks/cart-line-items-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-line-items-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-line-items-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
similarity index 95%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
index a187178aa9d..dbbd1296c75 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
@@ -12,7 +12,10 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
 /**
  * Internal dependencies
  */
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
 import { OrderMetaSlotFill } from './slotfills';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
similarity index 74%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
index e1e38c093b0..30ae7b8b5db 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
@@ -1,9 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import Title from '@woocommerce/base-components/title';
-import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
@@ -11,7 +8,6 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
 /**
  * Internal dependencies
  */
-import attributes from './attributes';
 import { OrderMetaSlotFill } from './slotfills';
 
 const FrontendBlock = ( {
@@ -36,4 +32,4 @@ const FrontendBlock = ( {
 	);
 };
 
-export default withFilteredAttributes( attributes )( FrontendBlock );
+export default FrontendBlock;
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/index.tsx
similarity index 72%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary/index.tsx
index 62571ff2328..ce580c46483 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/index.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/index.tsx
@@ -9,15 +9,7 @@ import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
-import attributes from './attributes';
 import metadata from './block.json';
-import './subtotal';
-import './fee';
-import './discount';
-import './shipping';
-import './coupon-form';
-import './taxes';
-import './heading';
 
 registerFeaturePluginBlockType( metadata, {
 	icon: {
@@ -28,7 +20,6 @@ registerFeaturePluginBlockType( metadata, {
 			/>
 		),
 	},
-	attributes,
 	edit: Edit,
 	save: Save,
 } );
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
new file mode 100644
index 00000000000..7d571acc750
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+export const OrderMetaSlotFill = (): JSX.Element => {
+	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
+	const slotFillProps = {
+		extensions,
+		cart,
+		context: 'woocommerce/cart',
+	};
+
+	return <ExperimentalOrderMeta.Slot { ...slotFillProps } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/block.json b/assets/js/blocks/cart/inner-blocks/cart-totals-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-totals-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx
similarity index 93%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx
index 615fc753539..178eb1077a8 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-totals-block/edit.tsx
@@ -10,7 +10,10 @@ import type { TemplateArray } from '@wordpress/blocks';
  * Internal dependencies
  */
 import './style.scss';
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
 
 export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps( { className: 'wc-block-cart__sidebar' } );
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-totals-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-totals-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/style.scss b/assets/js/blocks/cart/inner-blocks/cart-totals-block/style.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-totals-block/style.scss
rename to assets/js/blocks/cart/inner-blocks/cart-totals-block/style.scss
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts b/assets/js/blocks/cart/inner-blocks/component-metadata.ts
similarity index 89%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts
rename to assets/js/blocks/cart/inner-blocks/component-metadata.ts
index 7744cc4d283..e3373a713d4 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/component-metadata.ts
+++ b/assets/js/blocks/cart/inner-blocks/component-metadata.ts
@@ -9,6 +9,7 @@ import CART_LINE_ITEMS from './cart-line-items-block/block.json';
 import CART_TOTALS from './cart-totals-block/block.json';
 import PROCEED_TO_CHECKOUT from './proceed-to-checkout-block/block.json';
 import CART_ACCEPTED_PAYMENT_METHODS from './cart-accepted-payment-methods-block/block.json';
+import CART_ORDER_SUMMARY from './cart-order-summary/block.json';
 
 export default {
 	FILLED_CART,
@@ -19,4 +20,5 @@ export default {
 	CART_TOTALS,
 	PROCEED_TO_CHECKOUT,
 	CART_ACCEPTED_PAYMENT_METHODS,
+	CART_ORDER_SUMMARY,
 };
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/block.json b/assets/js/blocks/cart/inner-blocks/empty-cart-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/block.json
rename to assets/js/blocks/cart/inner-blocks/empty-cart-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx
similarity index 96%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx
index 78dc6abdb09..e63b5d8dd1b 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/empty-cart-block/edit.tsx
@@ -11,7 +11,10 @@ import { SHOP_URL } from '@woocommerce/block-settings';
 /**
  * Internal dependencies
  */
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
 import iconDataUri from './icon-data-uri.js';
 import './style.scss';
 
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/icon-data-uri.js b/assets/js/blocks/cart/inner-blocks/empty-cart-block/icon-data-uri.js
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/icon-data-uri.js
rename to assets/js/blocks/cart/inner-blocks/empty-cart-block/icon-data-uri.js
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/index.tsx b/assets/js/blocks/cart/inner-blocks/empty-cart-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/empty-cart-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/style.scss b/assets/js/blocks/cart/inner-blocks/empty-cart-block/style.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/empty-cart-block/style.scss
rename to assets/js/blocks/cart/inner-blocks/empty-cart-block/style.scss
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/block.json b/assets/js/blocks/cart/inner-blocks/filled-cart-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/block.json
rename to assets/js/blocks/cart/inner-blocks/filled-cart-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/filled-cart-block/edit.tsx
similarity index 94%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/filled-cart-block/edit.tsx
index 37b6aa952ce..06e7c325845 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/filled-cart-block/edit.tsx
@@ -11,7 +11,10 @@ import { useEditorContext } from '@woocommerce/base-context';
 /**
  * Internal dependencies
  */
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
 import './editor.scss';
 import { useCartBlockContext } from '../../context';
 
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/editor.scss b/assets/js/blocks/cart/inner-blocks/filled-cart-block/editor.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/editor.scss
rename to assets/js/blocks/cart/inner-blocks/filled-cart-block/editor.scss
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/index.tsx b/assets/js/blocks/cart/inner-blocks/filled-cart-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/filled-cart-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/filled-cart-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx b/assets/js/blocks/cart/inner-blocks/index.tsx
similarity index 89%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
rename to assets/js/blocks/cart/inner-blocks/index.tsx
index 651ab6fec45..66b14c6b2d8 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
+++ b/assets/js/blocks/cart/inner-blocks/index.tsx
@@ -5,8 +5,8 @@ import './filled-cart-block';
 import './cart-items-block';
 import './cart-line-items-block';
 import './cart-totals-block';
-import './cart-order-summary-block';
 import './cart-express-payment-block';
 import './proceed-to-checkout-block';
 import './empty-cart-block';
 import './cart-accepted-payment-methods-block';
+import './cart-order-summary';
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx
rename to assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/attributes.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/block.json b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/block.json
rename to assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.json
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/block.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/block.tsx
rename to assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/block.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/index.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/index.tsx
rename to assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/index.tsx
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/style.scss b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/style.scss
rename to assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
similarity index 89%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
rename to assets/js/blocks/cart/inner-blocks/register-components.ts
index db096861acd..4a6e96942e9 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -9,7 +9,7 @@ import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
  * Internal dependencies
  */
 import metadata from './component-metadata';
-import './cart-order-summary-block/register';
+import '../../cart-checkout/inner-blocks/register';
 
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
@@ -104,3 +104,13 @@ registerCheckoutBlock( {
 		)
 	),
 } );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary" */
+			'./cart-order-summary/frontend'
+		)
+	),
+} );
diff --git a/assets/js/blocks/cart-checkout/cart/style.scss b/assets/js/blocks/cart/style.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/style.scss
rename to assets/js/blocks/cart/style.scss
diff --git a/assets/js/blocks/cart-checkout/cart/test/block.js b/assets/js/blocks/cart/test/block.js
similarity index 97%
rename from assets/js/blocks/cart-checkout/cart/test/block.js
rename to assets/js/blocks/cart/test/block.js
index a23529e5c05..d26cbd9951d 100644
--- a/assets/js/blocks/cart-checkout/cart/test/block.js
+++ b/assets/js/blocks/cart/test/block.js
@@ -9,8 +9,8 @@ import { default as fetchMock } from 'jest-fetch-mock';
 /**
  * Internal dependencies
  */
-import { defaultCartState } from '../../../../data/default-states';
-import { allSettings } from '../../../../settings/shared/settings-init';
+import { defaultCartState } from '../../../data/default-states';
+import { allSettings } from '../../../settings/shared/settings-init';
 
 import Cart from '../block';
 
diff --git a/assets/js/blocks/cart-checkout/cart/types.ts b/assets/js/blocks/cart/types.ts
similarity index 100%
rename from assets/js/blocks/cart-checkout/cart/types.ts
rename to assets/js/blocks/cart/types.ts
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/attributes.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/attributes.tsx
index fafae01ccb0..9d34bbe9f3f 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/attributes.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/attributes.tsx
@@ -1,13 +1,4 @@
-/**
- * External dependencies
- */
-import { getSetting } from '@woocommerce/settings';
-
 export default {
-	showRateAfterTaxName: {
-		type: 'boolean',
-		default: getSetting( 'displayCartPricesIncludingTax', false ),
-	},
 	className: {
 		type: 'string',
 		default: '',
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/block.tsx
deleted file mode 100644
index 70498472e22..00000000000
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/block.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * External dependencies
- */
-import {
-	OrderSummary,
-	TotalsCoupon,
-	TotalsDiscount,
-	TotalsFooterItem,
-	TotalsShipping,
-} from '@woocommerce/base-components/cart-checkout';
-import {
-	Subtotal,
-	TotalsFees,
-	TotalsTaxes,
-	ExperimentalOrderMeta,
-	TotalsWrapper,
-	ExperimentalDiscountsMeta,
-} from '@woocommerce/blocks-checkout';
-
-import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import {
-	useStoreCartCoupons,
-	useStoreCart,
-	useShippingData,
-} from '@woocommerce/base-context/hooks';
-import { getSetting } from '@woocommerce/settings';
-
-const Block = ( {
-	showRateAfterTaxName = false,
-	className,
-}: {
-	showRateAfterTaxName: boolean;
-	className?: string;
-} ): JSX.Element => {
-	const { cartItems, cartTotals, cartCoupons, cartFees } = useStoreCart();
-	const {
-		applyCoupon,
-		removeCoupon,
-		isApplyingCoupon,
-		isRemovingCoupon,
-	} = useStoreCartCoupons();
-
-	const { needsShipping } = useShippingData();
-	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
-
-	// Prepare props to pass to the ExperimentalOrderMeta slot fill.
-	// We need to pluck out receiveCart.
-	// eslint-disable-next-line no-unused-vars
-	const { extensions, receiveCart, ...cart } = useStoreCart();
-	const slotFillProps = {
-		extensions,
-		cart,
-		context: 'woocommerce/checkout',
-	};
-
-	return (
-		<div className={ className }>
-			<TotalsWrapper>
-				<OrderSummary cartItems={ cartItems } />
-			</TotalsWrapper>
-			<TotalsWrapper>
-				<Subtotal currency={ totalsCurrency } values={ cartTotals } />
-				<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
-				<TotalsDiscount
-					cartCoupons={ cartCoupons }
-					currency={ totalsCurrency }
-					isRemovingCoupon={ isRemovingCoupon }
-					removeCoupon={ removeCoupon }
-					values={ cartTotals }
-				/>
-			</TotalsWrapper>
-			{ getSetting( 'couponsEnabled', true ) && (
-				<TotalsWrapper>
-					<TotalsCoupon
-						onSubmit={ applyCoupon }
-						initialOpen={ false }
-						isLoading={ isApplyingCoupon }
-					/>
-				</TotalsWrapper>
-			) }
-			{ needsShipping && (
-				<TotalsWrapper>
-					<TotalsShipping
-						isCheckout={ true }
-						showCalculator={ false }
-						showRateSelector={ false }
-						values={ cartTotals }
-						currency={ totalsCurrency }
-					/>
-				</TotalsWrapper>
-			) }
-			<ExperimentalDiscountsMeta.Slot { ...slotFillProps } />
-			{ ! getSetting( 'displayCartPricesIncludingTax', false ) &&
-				parseInt( cartTotals.total_tax, 10 ) > 0 && (
-					<TotalsWrapper>
-						<TotalsTaxes
-							currency={ totalsCurrency }
-							showRateAfterTaxName={ showRateAfterTaxName }
-							values={ cartTotals }
-						/>
-					</TotalsWrapper>
-				) }
-			<TotalsWrapper>
-				<TotalsFooterItem
-					currency={ totalsCurrency }
-					values={ cartTotals }
-				/>
-			</TotalsWrapper>
-			<ExperimentalOrderMeta.Slot { ...slotFillProps } />
-		</div>
-	);
-};
-
-export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
index 5ab0722ff2f..285b898234d 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
@@ -1,80 +1,64 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, ToggleControl } from '@wordpress/components';
-import { getSetting } from '@woocommerce/settings';
-import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import type { TemplateArray } from '@wordpress/blocks';
+import { innerBlockAreas } from '@woocommerce/blocks-checkout';
+import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
  */
-import Block from './block';
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
+import { OrderMetaSlotFill } from './slotfills';
 
-export const Edit = ( {
-	attributes,
-	setAttributes,
-}: {
-	attributes: {
-		showRateAfterTaxName: boolean;
-		lock: {
-			move: boolean;
-			remove: boolean;
-		};
-	};
-	setAttributes: ( attributes: Record< string, unknown > ) => void;
-} ): JSX.Element => {
+export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	const blockProps = useBlockProps();
-	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
-	const displayItemizedTaxes = getSetting(
-		'displayItemizedTaxes',
-		false
-	) as boolean;
-	const displayCartPricesIncludingTax = getSetting(
-		'displayCartPricesIncludingTax',
-		false
-	) as boolean;
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+	const allowedBlocks = getAllowedBlocks(
+		innerBlockAreas.CHECKOUT_ORDER_SUMMARY
+	);
+	const defaultTemplate = [
+		[ 'woocommerce/order-summary-cart-items-block', {}, [] ],
+		[ 'woocommerce/order-summary-subtotal-block', {}, [] ],
+		[ 'woocommerce/order-summary-fee-block', {}, [] ],
+		[ 'woocommerce/order-summary-discount-block', {}, [] ],
+		[ 'woocommerce/order-summary-coupon-form-block', {}, [] ],
+		[ 'woocommerce/order-summary-shipping-block', {}, [] ],
+		[ 'woocommerce/order-summary-taxes-block', {}, [] ],
+	] as TemplateArray;
+
+	useForcedLayout( {
+		clientId,
+		registeredBlocks: allowedBlocks,
+		defaultTemplate,
+	} );
+
 	return (
 		<div { ...blockProps }>
-			<InspectorControls>
-				{ taxesEnabled &&
-					displayItemizedTaxes &&
-					! displayCartPricesIncludingTax && (
-						<PanelBody
-							title={ __(
-								'Taxes',
-								'woo-gutenberg-products-block'
-							) }
-						>
-							<ToggleControl
-								label={ __(
-									'Show rate after tax name',
-									'woo-gutenberg-products-block'
-								) }
-								help={ __(
-									'Show the percentage rate alongside each tax line in the summary.',
-									'woo-gutenberg-products-block'
-								) }
-								checked={ attributes.showRateAfterTaxName }
-								onChange={ () =>
-									setAttributes( {
-										showRateAfterTaxName: ! attributes.showRateAfterTaxName,
-									} )
-								}
-							/>
-						</PanelBody>
-					) }
-			</InspectorControls>
-			<Noninteractive>
-				<Block
-					showRateAfterTaxName={ attributes.showRateAfterTaxName }
-				/>
-			</Noninteractive>
+			<InnerBlocks
+				allowedBlocks={ allowedBlocks }
+				template={ defaultTemplate }
+			/>
+			<TotalsFooterItem
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+			<OrderMetaSlotFill />
 		</div>
 	);
 };
 
 export const Save = (): JSX.Element => {
-	return <div { ...useBlockProps.save() } />;
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</div>
+	);
 };
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
new file mode 100644
index 00000000000..30ae7b8b5db
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+/**
+ * Internal dependencies
+ */
+import { OrderMetaSlotFill } from './slotfills';
+
+const FrontendBlock = ( {
+	children,
+	className,
+}: {
+	children: JSX.Element | JSX.Element[];
+	className: string;
+} ): JSX.Element | null => {
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<div className={ className }>
+			{ children }
+			<TotalsFooterItem
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+			<OrderMetaSlotFill />
+		</div>
+	);
+};
+
+export default FrontendBlock;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
new file mode 100644
index 00000000000..64c6fe7d1a5
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+export const OrderMetaSlotFill = (): JSX.Element => {
+	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
+	const slotFillProps = {
+		extensions,
+		cart,
+		context: 'woocommerce/checkout',
+	};
+
+	return <ExperimentalOrderMeta.Slot { ...slotFillProps } />;
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx
index ad271e3f359..b8ce3c5f412 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/edit.tsx
@@ -15,7 +15,6 @@ import {
 	useForcedLayout,
 	getAllowedBlocks,
 } from '../../../cart-checkout/shared';
-import { useCheckoutBlockContext } from '../../context';
 
 export const Edit = ( {
 	clientId,
@@ -32,17 +31,10 @@ export const Edit = ( {
 			attributes?.className
 		),
 	} );
-	const { showRateAfterTaxName } = useCheckoutBlockContext();
 	const allowedBlocks = getAllowedBlocks( innerBlockAreas.CHECKOUT_TOTALS );
 
 	const defaultTemplate = [
-		[
-			'woocommerce/checkout-order-summary-block',
-			{
-				showRateAfterTaxName,
-			},
-			[],
-		],
+		[ 'woocommerce/checkout-order-summary-block', {}, [] ],
 	] as TemplateArray;
 
 	useForcedLayout( {
diff --git a/assets/js/blocks/checkout/inner-blocks/component-metadata.ts b/assets/js/blocks/checkout/inner-blocks/component-metadata.ts
new file mode 100644
index 00000000000..0b2edcd9c42
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/component-metadata.ts
@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import CHECKOUT_ACTIONS from './checkout-actions-block/block.json';
+import CHECKOUT_BILLING_ADDRESS from './checkout-billing-address-block/block.json';
+import CHECKOUT_CONTACT_INFORMATION from './checkout-contact-information-block/block.json';
+import CHECKOUT_EXPRESS_PAYMENT from './checkout-express-payment-block/block.json';
+import CHECKOUT_FIELDS from './checkout-fields-block/block.json';
+import CHECKOUT_ORDER_NOTE from './checkout-order-note-block/block.json';
+import CHECKOUT_PAYMENT from './checkout-payment-block/block.json';
+import CHECKOUT_SHIPPING_ADDRESS from './checkout-shipping-address-block/block.json';
+import CHECKOUT_SHIPPING_METHODS from './checkout-shipping-methods-block/block.json';
+import CHECKOUT_TERMS from './checkout-terms-block/block.json';
+import CHECKOUT_TOTALS from './checkout-totals-block/block.json';
+import CHECKOUT_ORDER_SUMMARY from './checkout-order-summary-block/block.json';
+
+export default {
+	CHECKOUT_ACTIONS,
+	CHECKOUT_BILLING_ADDRESS,
+	CHECKOUT_CONTACT_INFORMATION,
+	CHECKOUT_EXPRESS_PAYMENT,
+	CHECKOUT_FIELDS,
+	CHECKOUT_ORDER_NOTE,
+	CHECKOUT_PAYMENT,
+	CHECKOUT_SHIPPING_ADDRESS,
+	CHECKOUT_SHIPPING_METHODS,
+	CHECKOUT_TERMS,
+	CHECKOUT_TOTALS,
+	CHECKOUT_ORDER_SUMMARY,
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/register-components.ts b/assets/js/blocks/checkout/inner-blocks/register-components.ts
index 83b50c31603..f08c6bb3a68 100644
--- a/assets/js/blocks/checkout/inner-blocks/register-components.ts
+++ b/assets/js/blocks/checkout/inner-blocks/register-components.ts
@@ -5,29 +5,19 @@ import { lazy } from '@wordpress/element';
 import { WC_BLOCKS_BUILD_URL } from '@woocommerce/block-settings';
 import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
 
-// Modify webpack publicPath at runtime based on location of WordPress Plugin.
-// eslint-disable-next-line no-undef,camelcase
-__webpack_public_path__ = WC_BLOCKS_BUILD_URL;
-
 /**
  * Internal dependencies
  */
-import checkoutActionsMetadata from './checkout-actions-block/block.json';
-import checkoutBillingAddressMetadata from './checkout-billing-address-block/block.json';
-import checkoutContactInformationMetadata from './checkout-contact-information-block/block.json';
-import checkoutExpressPaymentMetadata from './checkout-express-payment-block/block.json';
-import checkoutFieldsMetadata from './checkout-fields-block/block.json';
-import checkoutOrderNoteMetadata from './checkout-order-note-block/block.json';
-import checkoutOrderSummaryMetadata from './checkout-order-summary-block/block.json';
-import checkoutPaymentMetadata from './checkout-payment-block/block.json';
-import checkoutShippingAddressMetadata from './checkout-shipping-address-block/block.json';
-import checkoutShippingMethodsMetadata from './checkout-shipping-methods-block/block.json';
-import checkoutTermsMetadata from './checkout-terms-block/block.json';
-import checkoutTotalsMetadata from './checkout-totals-block/block.json';
+import metadata from './component-metadata';
+import '../../cart-checkout/inner-blocks/register';
+
+// Modify webpack publicPath at runtime based on location of WordPress Plugin.
+// eslint-disable-next-line no-undef,camelcase
+__webpack_public_path__ = WC_BLOCKS_BUILD_URL;
 
 // @todo When forcing all blocks at once, they will append based on the order they are registered. Introduce formal sorting param.
 registerCheckoutBlock( {
-	metadata: checkoutFieldsMetadata,
+	metadata: metadata.CHECKOUT_FIELDS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/fields" */ './checkout-fields-block/frontend'
@@ -36,7 +26,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutExpressPaymentMetadata,
+	metadata: metadata.CHECKOUT_EXPRESS_PAYMENT,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/express-payment" */ './checkout-express-payment-block/block'
@@ -45,7 +35,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutContactInformationMetadata,
+	metadata: metadata.CHECKOUT_CONTACT_INFORMATION,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/contact-information" */ './checkout-contact-information-block/frontend'
@@ -54,7 +44,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutShippingAddressMetadata,
+	metadata: metadata.CHECKOUT_SHIPPING_ADDRESS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/shipping-address" */ './checkout-shipping-address-block/frontend'
@@ -63,7 +53,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutBillingAddressMetadata,
+	metadata: metadata.CHECKOUT_BILLING_ADDRESS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/billing-address" */ './checkout-billing-address-block/frontend'
@@ -72,7 +62,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutShippingMethodsMetadata,
+	metadata: metadata.CHECKOUT_SHIPPING_METHODS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/shipping-methods" */ './checkout-shipping-methods-block/frontend'
@@ -81,7 +71,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutPaymentMetadata,
+	metadata: metadata.CHECKOUT_PAYMENT,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/payment" */ './checkout-payment-block/frontend'
@@ -90,7 +80,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutOrderNoteMetadata,
+	metadata: metadata.CHECKOUT_ORDER_NOTE,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/order-note" */ './checkout-order-note-block/block'
@@ -99,7 +89,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutTermsMetadata,
+	metadata: metadata.CHECKOUT_TERMS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/terms" */ './checkout-terms-block/frontend'
@@ -108,7 +98,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutActionsMetadata,
+	metadata: metadata.CHECKOUT_ACTIONS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/actions" */ './checkout-actions-block/frontend'
@@ -117,7 +107,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutTotalsMetadata,
+	metadata: metadata.CHECKOUT_TOTALS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/totals" */ './checkout-totals-block/frontend'
@@ -126,10 +116,10 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutOrderSummaryMetadata,
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY,
 	component: lazy( () =>
 		import(
-			/* webpackChunkName: "checkout-blocks/order-summary" */ './checkout-order-summary-block/block'
+			/* webpackChunkName: "checkout-blocks/order-summary" */ './checkout-order-summary-block/frontend'
 		)
 	),
 } );
diff --git a/assets/js/blocks/checkout/styles/editor.scss b/assets/js/blocks/checkout/styles/editor.scss
index fceab401626..c1ab9b80934 100644
--- a/assets/js/blocks/checkout/styles/editor.scss
+++ b/assets/js/blocks/checkout/styles/editor.scss
@@ -72,3 +72,15 @@ body.wc-lock-selected-block--remove {
 	max-height: 1000px;
 	overflow: hidden;
 }
+
+.wp-block-woocommerce-checkout-order-summary-block {
+	.block-editor-block-list__layout > div {
+		margin: 0 !important;
+	}
+	.wc-block-components-totals-item,
+	.wc-block-components-totals-coupon,
+	.wc-block-components-order-summary,
+	.wc-block-components-totals-shipping {
+		box-sizing: border-box;
+	}
+}
diff --git a/assets/js/index.js b/assets/js/index.js
index fba44fb3fd6..75fa8d38404 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -13,6 +13,7 @@ import '../css/editor.scss';
 import '../css/style.scss';
 import './filters/block-list-block';
 import './filters/get-block-attributes';
+import './blocks/cart-checkout/inner-blocks'; // Shared by cart/checkout, so imported once.
 
 setCategories( [
 	...getCategories().filter(
diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js
index 2d44412230f..6cd67227231 100644
--- a/bin/webpack-entries.js
+++ b/bin/webpack-entries.js
@@ -40,9 +40,7 @@ const blocks = {
 	'attribute-filter': {},
 	'stock-filter': {},
 	'active-filters': {},
-	cart: {
-		customDir: 'cart-checkout/cart',
-	},
+	cart: {},
 	checkout: {},
 	'mini-cart': {
 		customDir: 'cart-checkout/mini-cart',
diff --git a/package.json b/package.json
index 0cd76bff243..d5870c5ad9c 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,10 @@
 		"./assets/js/middleware/**",
 		"./assets/js/blocks/checkout/inner-blocks/**/index.tsx",
 		"./assets/js/blocks/checkout/inner-blocks/register-components.ts",
-		"./assets/js/blocks/cart-checkout/cart/inner-blocks/**/index.tsx",
-		"./assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts",
+		"./assets/js/blocks/cart/inner-blocks/**/index.tsx",
+		"./assets/js/blocks/cart/inner-blocks/register-components.ts",
+		"./assets/js/blocks/cart-checkout/inner-blocks/**/index.tsx",
+		"./assets/js/blocks/cart-checkout/inner-blocks/register-components.ts",
 		"./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/**/index.tsx",
 		"./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts"
 	],
diff --git a/packages/checkout/blocks-registry/types.ts b/packages/checkout/blocks-registry/types.ts
index 70a70cc16e0..7bbcbbdb7ee 100644
--- a/packages/checkout/blocks-registry/types.ts
+++ b/packages/checkout/blocks-registry/types.ts
@@ -24,6 +24,7 @@ export enum innerBlockAreas {
 	FILLED_MINI_CART = 'woocommerce/filled-mini-cart-contents-block',
 	MINI_CART_ITEMS = 'woocommerce/mini-cart-items-block',
 	CART_ORDER_SUMMARY = 'woocommerce/cart-order-summary-block',
+	CHECKOUT_ORDER_SUMMARY = 'woocommerce/checkout-order-summary-block',
 }
 
 interface CheckoutBlockOptionsMetadata extends Partial< BlockConfiguration > {
diff --git a/packages/checkout/components/panel/style.scss b/packages/checkout/components/panel/style.scss
index 989e5f08e68..7af200c5ce7 100644
--- a/packages/checkout/components/panel/style.scss
+++ b/packages/checkout/components/panel/style.scss
@@ -50,8 +50,6 @@
 }
 
 .wc-block-components-panel__content {
-	padding-bottom: em($gap);
-
 	// Ensures the panel contents are not visible for any theme that tweaked the
 	// `display` property of div elements.
 	&[hidden] {
diff --git a/packages/checkout/components/totals/item/style.scss b/packages/checkout/components/totals/item/style.scss
index 02838e8687a..d1b488648f0 100644
--- a/packages/checkout/components/totals/item/style.scss
+++ b/packages/checkout/components/totals/item/style.scss
@@ -5,6 +5,8 @@
 
 .wp-block > .wc-block-components-totals-item,
 .wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-item,
+.wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-totals-item,
+.wc-block-components-order-summary,
 .wc-block-components-totals-coupon,
 .wc-block-components-totals-shipping {
 	@include with-translucent-border(1px 0 0);

From e1d89627c6b9570e0bbe2ace14c1a5813137ce64 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 18 Mar 2022 16:37:57 +0000
Subject: [PATCH 10/29] Add todos

---
 .../base/components/cart-checkout/order-summary/index.tsx  | 1 +
 .../blocks/cart-checkout/inner-blocks/shipping/block.tsx   | 6 ++++--
 .../js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx | 7 ++++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/assets/js/base/components/cart-checkout/order-summary/index.tsx b/assets/js/base/components/cart-checkout/order-summary/index.tsx
index ca8cf0a51a6..98e7710a9e2 100644
--- a/assets/js/base/components/cart-checkout/order-summary/index.tsx
+++ b/assets/js/base/components/cart-checkout/order-summary/index.tsx
@@ -25,6 +25,7 @@ const OrderSummary = ( {
 	const { isLarge, hasContainerWidth } = useContainerWidthContext();
 
 	if ( ! hasContainerWidth ) {
+		// @todo broken in editor due to the context
 		//return null;
 	}
 
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.tsx
index 7a39ce7a478..4485ed31b0d 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useCheckoutContext } from '@woocommerce/base-context';
 
 const Block = ( {
 	className,
@@ -13,6 +14,7 @@ const Block = ( {
 	isShippingCalculatorEnabled: boolean;
 } ): JSX.Element | null => {
 	const { cartTotals, cartNeedsShipping } = useStoreCart();
+	const { isCart } = useCheckoutContext();
 
 	if ( ! cartNeedsShipping ) {
 		return null;
@@ -23,8 +25,8 @@ const Block = ( {
 	return (
 		<TotalsShipping
 			className={ className }
-			showCalculator={ isShippingCalculatorEnabled }
-			showRateSelector={ true }
+			showCalculator={ isShippingCalculatorEnabled && isCart }
+			showRateSelector={ isCart }
 			values={ cartTotals }
 			currency={ totalsCurrency }
 		/>
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx
index cde7d378002..92b86457926 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx
@@ -6,6 +6,7 @@ import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
+import { useCheckoutContext } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
@@ -27,12 +28,16 @@ export const Edit = ( {
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
 	const { isShippingCalculatorEnabled, className } = attributes;
+	const { isCart, ...rest } = useCheckoutContext();
 	const shippingEnabled = getSetting( 'shippingEnabled', true );
 	const blockProps = useBlockProps();
+
+	// @todo isCart broken in editor due to the context
+
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
-				{ shippingEnabled && (
+				{ shippingEnabled && isCart && (
 					<PanelBody
 						title={ __(
 							'Shipping rates',

From f4fdfc0b66ca0e1d597202c51d2762263bc4cdc5 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 18 Mar 2022 16:53:34 +0000
Subject: [PATCH 11/29] Todo for Consider deprecating OrderMetaSlotFill and
 DiscountSlotFill in favour of inner block areas.

---
 .../inner-blocks/checkout-order-summary-block/slotfills.tsx      | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
index 64c6fe7d1a5..7efdbdd1a2d 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
@@ -4,6 +4,7 @@
 import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
+// @todo Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas.
 export const OrderMetaSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
 	// eslint-disable-next-line no-unused-vars

From 807ac42ebca28d6516774d9f9d62a7bcc0d66d21 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 21 Mar 2022 12:26:18 +0000
Subject: [PATCH 12/29] Improve frontend registration of components using new
 entrypoint

---
 .../cart-checkout/inner-blocks/frontend.tsx   | 10 +++
 .../cart-checkout/inner-blocks/index.tsx      | 16 ++--
 .../block.json                                |  0
 .../block.tsx                                 |  0
 .../edit.tsx                                  |  0
 .../frontend.tsx                              |  0
 .../index.tsx                                 |  0
 .../block.json                                |  0
 .../block.tsx                                 |  0
 .../edit.tsx                                  |  0
 .../frontend.tsx                              |  0
 .../index.tsx                                 |  0
 .../block.json                                |  0
 .../block.tsx                                 |  0
 .../edit.tsx                                  |  0
 .../frontend.tsx                              |  0
 .../index.tsx                                 |  0
 .../{fee => order-summary-fee}/block.json     |  0
 .../{fee => order-summary-fee}/block.tsx      |  0
 .../{fee => order-summary-fee}/edit.tsx       |  0
 .../{fee => order-summary-fee}/frontend.tsx   |  0
 .../{fee => order-summary-fee}/index.tsx      |  0
 .../attributes.ts                             |  0
 .../block.json                                |  0
 .../block.tsx                                 |  0
 .../edit.tsx                                  |  0
 .../editor.scss                               |  0
 .../frontend.tsx                              |  0
 .../index.tsx                                 |  0
 .../attributes.tsx                            |  0
 .../block.json                                |  0
 .../block.tsx                                 |  0
 .../edit.tsx                                  |  0
 .../frontend.tsx                              |  0
 .../index.tsx                                 |  0
 .../block.json                                |  0
 .../block.tsx                                 |  0
 .../edit.tsx                                  |  0
 .../frontend.tsx                              |  0
 .../index.tsx                                 |  0
 .../attributes.tsx                            |  0
 .../{taxes => order-summary-taxes}/block.json |  0
 .../{taxes => order-summary-taxes}/block.tsx  |  0
 .../{taxes => order-summary-taxes}/edit.tsx   |  0
 .../frontend.tsx                              |  0
 .../{taxes => order-summary-taxes}/index.tsx  |  0
 .../inner-blocks/register-components.ts       | 85 +++++++++++++++++++
 .../cart-checkout/inner-blocks/register.ts    | 85 -------------------
 assets/js/blocks/cart/frontend.js             |  1 -
 .../cart/inner-blocks/register-components.ts  |  1 -
 assets/js/blocks/checkout/frontend.tsx        |  1 -
 assets/js/blocks/checkout/index.tsx           |  1 +
 .../inner-blocks/register-components.ts       |  1 -
 assets/js/index.js                            |  1 -
 bin/webpack-entries.js                        |  3 +
 src/AssetsController.php                      |  1 +
 src/BlockTypes/Cart.php                       |  2 +-
 src/BlockTypes/Checkout.php                   |  2 +-
 58 files changed, 110 insertions(+), 100 deletions(-)
 create mode 100644 assets/js/blocks/cart-checkout/inner-blocks/frontend.tsx
 rename assets/js/blocks/cart-checkout/inner-blocks/{cart-items => order-summary-cart-items}/block.json (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{cart-items => order-summary-cart-items}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{cart-items => order-summary-cart-items}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{cart-items => order-summary-cart-items}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{cart-items => order-summary-cart-items}/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{coupon-form => order-summary-coupon-form}/block.json (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{coupon-form => order-summary-coupon-form}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{coupon-form => order-summary-coupon-form}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{coupon-form => order-summary-coupon-form}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{coupon-form => order-summary-coupon-form}/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{discount => order-summary-discount}/block.json (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{discount => order-summary-discount}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{discount => order-summary-discount}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{discount => order-summary-discount}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{discount => order-summary-discount}/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{fee => order-summary-fee}/block.json (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{fee => order-summary-fee}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{fee => order-summary-fee}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{fee => order-summary-fee}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{fee => order-summary-fee}/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{heading => order-summary-heading}/attributes.ts (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{heading => order-summary-heading}/block.json (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{heading => order-summary-heading}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{heading => order-summary-heading}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{heading => order-summary-heading}/editor.scss (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{heading => order-summary-heading}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{heading => order-summary-heading}/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{shipping => order-summary-shipping}/attributes.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{shipping => order-summary-shipping}/block.json (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{shipping => order-summary-shipping}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{shipping => order-summary-shipping}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{shipping => order-summary-shipping}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{shipping => order-summary-shipping}/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{subtotal => order-summary-subtotal}/block.json (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{subtotal => order-summary-subtotal}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{subtotal => order-summary-subtotal}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{subtotal => order-summary-subtotal}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{subtotal => order-summary-subtotal}/index.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{taxes => order-summary-taxes}/attributes.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{taxes => order-summary-taxes}/block.json (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{taxes => order-summary-taxes}/block.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{taxes => order-summary-taxes}/edit.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{taxes => order-summary-taxes}/frontend.tsx (100%)
 rename assets/js/blocks/cart-checkout/inner-blocks/{taxes => order-summary-taxes}/index.tsx (100%)
 create mode 100644 assets/js/blocks/cart-checkout/inner-blocks/register-components.ts
 delete mode 100644 assets/js/blocks/cart-checkout/inner-blocks/register.ts

diff --git a/assets/js/blocks/cart-checkout/inner-blocks/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/frontend.tsx
new file mode 100644
index 00000000000..36d557df577
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/inner-blocks/frontend.tsx
@@ -0,0 +1,10 @@
+/**
+ * Frontend entry point for all cart/checkout inner blocks. Dependency of cart/checkout frontend assets.
+ */
+
+/**
+ * Internal dependencies
+ */
+import './register-components';
+import '../../cart/inner-blocks/register-components';
+import '../../checkout/inner-blocks/register-components';
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/index.tsx
index 18871787d73..7f39e31f55a 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/index.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/index.tsx
@@ -1,11 +1,11 @@
 /**
  * Internal dependencies
  */
-import './subtotal';
-import './fee';
-import './discount';
-import './shipping';
-import './coupon-form';
-import './taxes';
-import './heading';
-import './cart-items';
+import './order-summary-subtotal';
+import './order-summary-fee';
+import './order-summary-discount';
+import './order-summary-shipping';
+import './order-summary-coupon-form';
+import './order-summary-taxes';
+import './order-summary-heading';
+import './order-summary-cart-items';
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.json b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.json
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/cart-items/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/cart-items/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/cart-items/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/cart-items/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/cart-items/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/cart-items/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/cart-items/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.json b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.json
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/coupon-form/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/coupon-form/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/coupon-form/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/coupon-form/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/coupon-form/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/discount/block.json b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/discount/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.json
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/discount/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/discount/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/discount/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/discount/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/discount/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/discount/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/discount/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/discount/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/fee/block.json b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/fee/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.json
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/fee/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/fee/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/fee/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/fee/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/fee/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/fee/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/fee/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/fee/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/heading/attributes.ts b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/attributes.ts
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/heading/attributes.ts
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/attributes.ts
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/heading/block.json b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/heading/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.json
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/heading/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/heading/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/heading/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/heading/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/heading/editor.scss b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/editor.scss
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/heading/editor.scss
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/editor.scss
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/heading/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/heading/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/heading/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/heading/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/shipping/attributes.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/attributes.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/shipping/attributes.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/attributes.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.json b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/shipping/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.json
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/shipping/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/shipping/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/shipping/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/shipping/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/shipping/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/shipping/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/shipping/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.json b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.json
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/subtotal/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/subtotal/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/subtotal/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/subtotal/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/subtotal/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/subtotal/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/subtotal/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/taxes/attributes.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/attributes.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/taxes/attributes.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/attributes.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/taxes/block.json b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.json
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/taxes/block.json
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.json
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/taxes/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/taxes/block.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/taxes/edit.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/taxes/edit.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/taxes/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/taxes/frontend.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/taxes/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/taxes/index.tsx
rename to assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/register-components.ts b/assets/js/blocks/cart-checkout/inner-blocks/register-components.ts
new file mode 100644
index 00000000000..5215c02c87e
--- /dev/null
+++ b/assets/js/blocks/cart-checkout/inner-blocks/register-components.ts
@@ -0,0 +1,85 @@
+/**
+ * External dependencies
+ */
+import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
+import { lazy } from '@wordpress/element';
+
+registerCheckoutBlock( {
+	metadata: require( './order-summary-subtotal/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-subtotal" */
+			'./order-summary-subtotal/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './order-summary-fee/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-fee" */
+			'./order-summary-fee/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './order-summary-discount/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-discount" */
+			'./order-summary-discount/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './order-summary-shipping/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-shipping" */
+			'./order-summary-shipping/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './order-summary-coupon-form/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-coupon-form" */
+			'./order-summary-coupon-form/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './order-summary-taxes/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-taxes" */
+			'./order-summary-taxes/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './order-summary-heading/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-heading" */
+			'./order-summary-heading/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: require( './order-summary-cart-items/block.json' ),
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-cart-items" */
+			'./order-summary-cart-items/frontend'
+		)
+	),
+} );
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/register.ts b/assets/js/blocks/cart-checkout/inner-blocks/register.ts
deleted file mode 100644
index 3c9e57bfaa1..00000000000
--- a/assets/js/blocks/cart-checkout/inner-blocks/register.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
-import { lazy } from '@wordpress/element';
-
-registerCheckoutBlock( {
-	metadata: require( './subtotal/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-subtotal" */
-			'./subtotal/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './fee/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-fee" */
-			'./fee/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './discount/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-discount" */
-			'./discount/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './shipping/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-shipping" */
-			'./shipping/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './coupon-form/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
-			'./coupon-form/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './taxes/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-taxes" */
-			'./taxes/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './heading/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-heading" */
-			'./heading/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './cart-items/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary-cart-items" */
-			'./cart-items/frontend'
-		)
-	),
-} );
diff --git a/assets/js/blocks/cart/frontend.js b/assets/js/blocks/cart/frontend.js
index d81248b99ef..79a900b435d 100644
--- a/assets/js/blocks/cart/frontend.js
+++ b/assets/js/blocks/cart/frontend.js
@@ -11,7 +11,6 @@ import { renderParentBlock } from '@woocommerce/atomic-utils';
 /**
  * Internal dependencies
  */
-import './inner-blocks/register-components';
 import Block from './block';
 import { blockName, blockAttributes } from './attributes';
 
diff --git a/assets/js/blocks/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
index 4a6e96942e9..0df2d4e6a6c 100644
--- a/assets/js/blocks/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -9,7 +9,6 @@ import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
  * Internal dependencies
  */
 import metadata from './component-metadata';
-import '../../cart-checkout/inner-blocks/register';
 
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
diff --git a/assets/js/blocks/checkout/frontend.tsx b/assets/js/blocks/checkout/frontend.tsx
index 84c302a1116..722b08cdf9a 100644
--- a/assets/js/blocks/checkout/frontend.tsx
+++ b/assets/js/blocks/checkout/frontend.tsx
@@ -14,7 +14,6 @@ import { renderParentBlock } from '@woocommerce/atomic-utils';
 /**
  * Internal dependencies
  */
-import './inner-blocks/register-components';
 import Block from './block';
 import { blockName, blockAttributes } from './attributes';
 import metadata from './block.json';
diff --git a/assets/js/blocks/checkout/index.tsx b/assets/js/blocks/checkout/index.tsx
index 5d4a917951e..3969e7b42ca 100644
--- a/assets/js/blocks/checkout/index.tsx
+++ b/assets/js/blocks/checkout/index.tsx
@@ -13,6 +13,7 @@ import { BlockInstance, createBlock } from '@wordpress/blocks';
 import { Edit, Save } from './edit';
 import { blockAttributes, deprecatedAttributes } from './attributes';
 import './inner-blocks';
+import '../cart-checkout/inner-blocks';
 import metadata from './block.json';
 
 const settings = {
diff --git a/assets/js/blocks/checkout/inner-blocks/register-components.ts b/assets/js/blocks/checkout/inner-blocks/register-components.ts
index f08c6bb3a68..ca232371418 100644
--- a/assets/js/blocks/checkout/inner-blocks/register-components.ts
+++ b/assets/js/blocks/checkout/inner-blocks/register-components.ts
@@ -9,7 +9,6 @@ import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
  * Internal dependencies
  */
 import metadata from './component-metadata';
-import '../../cart-checkout/inner-blocks/register';
 
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
diff --git a/assets/js/index.js b/assets/js/index.js
index 75fa8d38404..fba44fb3fd6 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -13,7 +13,6 @@ import '../css/editor.scss';
 import '../css/style.scss';
 import './filters/block-list-block';
 import './filters/get-block-attributes';
-import './blocks/cart-checkout/inner-blocks'; // Shared by cart/checkout, so imported once.
 
 setCategories( [
 	...getCategories().filter(
diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js
index 6cd67227231..23c54c24ed7 100644
--- a/bin/webpack-entries.js
+++ b/bin/webpack-entries.js
@@ -42,6 +42,9 @@ const blocks = {
 	'active-filters': {},
 	cart: {},
 	checkout: {},
+	'checkout-inner-blocks': {
+		customDir: 'cart-checkout/inner-blocks',
+	},
 	'mini-cart': {
 		customDir: 'cart-checkout/mini-cart',
 		isExperimental: true,
diff --git a/src/AssetsController.php b/src/AssetsController.php
index fa06631abd2..35fedcaa79d 100644
--- a/src/AssetsController.php
+++ b/src/AssetsController.php
@@ -63,6 +63,7 @@ public function register_assets() {
 		$this->api->register_script( 'wc-price-format', 'build/price-format.js', [], false );
 
 		if ( Package::feature()->is_feature_plugin_build() ) {
+			$this->api->register_script( 'wc-blocks-checkout-inner-blocks-frontend', 'build/checkout-inner-blocks-frontend.js', [] );
 			$this->api->register_script( 'wc-blocks-checkout', 'build/blocks-checkout.js', [] );
 		}
 
diff --git a/src/BlockTypes/Cart.php b/src/BlockTypes/Cart.php
index 58892c7741a..b4d2742fd7b 100644
--- a/src/BlockTypes/Cart.php
+++ b/src/BlockTypes/Cart.php
@@ -44,7 +44,7 @@ protected function get_block_type_script( $key = null ) {
 		$script = [
 			'handle'       => 'wc-' . $this->block_name . '-block-frontend',
 			'path'         => $this->asset_api->get_block_asset_build_path( $this->block_name . '-frontend' ),
-			'dependencies' => [],
+			'dependencies' => [ 'wc-blocks-checkout-inner-blocks-frontend' ],
 		];
 		return $key ? $script[ $key ] : $script;
 	}
diff --git a/src/BlockTypes/Checkout.php b/src/BlockTypes/Checkout.php
index b5cc56d8f18..f403accd120 100644
--- a/src/BlockTypes/Checkout.php
+++ b/src/BlockTypes/Checkout.php
@@ -40,7 +40,7 @@ protected function get_block_type_script( $key = null ) {
 		$script = [
 			'handle'       => 'wc-' . $this->block_name . '-block-frontend',
 			'path'         => $this->asset_api->get_block_asset_build_path( $this->block_name . '-frontend' ),
-			'dependencies' => [],
+			'dependencies' => [ 'wc-blocks-checkout-inner-blocks-frontend' ],
 		];
 		return $key ? $script[ $key ] : $script;
 	}

From 0bfe5cfc2f019c2924a45bf3b30b37ef6613e05d Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 21 Mar 2022 15:33:25 +0000
Subject: [PATCH 13/29] Experiment- external block context

---
 .../add-to-cart/shared/add-to-cart-button.js  |  4 ++--
 .../blocks/product-elements/button/block.js   |  5 +---
 .../blocks/product-elements/image/block.js    |  2 +-
 .../blocks/product-elements/title/block.tsx   |  2 +-
 .../cart-checkout/address-form/test/index.js  |  6 +++--
 .../order-summary/order-summary-item.tsx      |  2 +-
 .../place-order-button/index.tsx              |  2 +-
 .../shipping-calculator/index.tsx             |  2 +-
 .../shipping-rates-control-package/index.tsx  |  2 +-
 .../totals/footer-item/index.tsx              |  2 +-
 .../cart-checkout/totals/shipping/index.tsx   |  2 +-
 .../components/product-list/product-list.tsx  |  2 +-
 .../context/hooks/test/use-store-notices.js   |  2 +-
 .../hooks/test/use-store-snackbar-notices.js  |  2 +-
 .../hooks/use-store-snackbar-notices.js       |  6 ++++-
 .../store-snackbar-notices/context.js         |  2 +-
 .../providers/store-snackbar-notices/index.ts |  1 +
 .../active-attribute-filters.js               |  5 +---
 assets/js/blocks/active-filters/block.js      |  2 +-
 assets/js/blocks/attribute-filter/block.js    |  2 +-
 .../order-summary-cart-items/block.tsx        |  2 +-
 .../order-summary-coupon-form/block.tsx       |  2 +-
 .../order-summary-discount/block.tsx          |  4 ++--
 .../inner-blocks/order-summary-fee/block.tsx  |  2 +-
 .../order-summary-shipping/block.tsx          |  3 +--
 .../order-summary-subtotal/block.tsx          |  2 +-
 .../order-summary-taxes/block.tsx             |  2 +-
 .../frontend.tsx                              |  2 +-
 .../frontend.tsx                              |  2 +-
 .../mini-cart-footer-block/block.tsx          |  4 ++--
 .../mini-cart-products-table-block/block.tsx  |  2 +-
 .../mini-cart-title-block/block.tsx           |  2 +-
 .../blocks/cart-checkout/mini-cart/block.tsx  |  2 +-
 .../express-payment-methods.js                |  2 +-
 .../express-payment/cart-express-payment.js   |  2 --
 .../checkout-express-payment.js               |  2 --
 .../payment-methods/payment-method-options.js |  4 +---
 .../payment-methods/payment-methods.js        |  6 +++--
 .../saved-payment-method-options.js           |  4 ++--
 assets/js/blocks/cart/block.js                | 14 +++++------
 .../cart-line-item-row.tsx                    |  2 +-
 .../block.tsx                                 |  2 +-
 .../cart-express-payment-block/block.tsx      |  2 +-
 .../cart-express-payment-block/edit.tsx       |  2 +-
 .../cart-line-items-block/block.tsx           |  2 +-
 .../inner-blocks/cart-order-summary/edit.tsx  |  2 +-
 .../cart-order-summary/frontend.tsx           |  2 +-
 .../cart-order-summary/slotfills.tsx          |  2 +-
 .../empty-cart-block/frontend.tsx             |  2 +-
 .../filled-cart-block/frontend.tsx            |  2 +-
 assets/js/blocks/checkout/block.tsx           |  5 ++--
 assets/js/blocks/checkout/frontend.tsx        |  4 ++--
 .../checkout-billing-address-block/edit.tsx   |  2 +-
 .../frontend.tsx                              |  6 +++--
 .../checkout-express-payment-block/block.tsx  |  2 +-
 .../checkout-express-payment-block/edit.tsx   |  2 +-
 .../checkout-order-note-block/block.tsx       |  3 +--
 .../checkout-order-summary-block/edit.tsx     |  2 +-
 .../checkout-order-summary-block/frontend.tsx |  2 +-
 .../slotfills.tsx                             |  2 +-
 .../test/block.js                             |  6 ++---
 .../checkout-payment-block/frontend.tsx       |  7 +++---
 .../frontend.tsx                              |  6 +++--
 .../checkout-shipping-methods-block/block.tsx |  3 +--
 .../frontend.tsx                              |  6 +++--
 .../checkout-terms-block/frontend.tsx         |  2 +-
 assets/js/blocks/price-filter/block.js        |  2 +-
 assets/js/blocks/single-product/block.js      |  6 +++--
 assets/js/blocks/stock-filter/block.js        |  2 +-
 assets/js/blocks/stock-filter/test/block.js   |  4 ++--
 bin/webpack-entries.js                        |  1 +
 bin/webpack-helpers.js                        |  6 ++---
 docs/contributors/js-build-system.md          | 24 ++++++-------------
 .../extensibility/checkout-flow-and-events.md |  8 +++----
 src/AssetsController.php                      |  5 ++--
 tests/js/jest.config.json                     |  2 +-
 tsconfig.base.json                            |  6 -----
 77 files changed, 127 insertions(+), 139 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/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
index c7ab4f065c6..f23e28003f1 100644
--- a/assets/js/atomic/blocks/product-elements/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
@@ -5,11 +5,11 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import Button from '@woocommerce/base-components/button';
 import { Icon, check } from '@wordpress/icons';
 import { useState, useEffect } from '@wordpress/element';
-import { useAddToCartFormContext } from '@woocommerce/base-context';
 import {
 	useStoreEvents,
 	useStoreAddToCart,
-} from '@woocommerce/base-context/hooks';
+	useAddToCartFormContext,
+} from '@woocommerce/base-context';
 import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
 
 /**
diff --git a/assets/js/atomic/blocks/product-elements/button/block.js b/assets/js/atomic/blocks/product-elements/button/block.js
index 9b04b616f04..c8945e2b1db 100644
--- a/assets/js/atomic/blocks/product-elements/button/block.js
+++ b/assets/js/atomic/blocks/product-elements/button/block.js
@@ -4,10 +4,7 @@
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import {
-	useStoreEvents,
-	useStoreAddToCart,
-} from '@woocommerce/base-context/hooks';
+import { useStoreEvents, useStoreAddToCart } from '@woocommerce/base-context';
 import { decodeEntities } from '@wordpress/html-entities';
 import { CART_URL } from '@woocommerce/block-settings';
 import { getSetting } from '@woocommerce/settings';
diff --git a/assets/js/atomic/blocks/product-elements/image/block.js b/assets/js/atomic/blocks/product-elements/image/block.js
index 9855ab3d2e9..0adc3f8998b 100644
--- a/assets/js/atomic/blocks/product-elements/image/block.js
+++ b/assets/js/atomic/blocks/product-elements/image/block.js
@@ -11,7 +11,7 @@ import {
 	useProductDataContext,
 } from '@woocommerce/shared-context';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
-import { useStoreEvents } from '@woocommerce/base-context/hooks';
+import { useStoreEvents } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/atomic/blocks/product-elements/title/block.tsx b/assets/js/atomic/blocks/product-elements/title/block.tsx
index c92d5f5cd4f..e40cd92cfe0 100644
--- a/assets/js/atomic/blocks/product-elements/title/block.tsx
+++ b/assets/js/atomic/blocks/product-elements/title/block.tsx
@@ -10,7 +10,7 @@ import {
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import ProductName from '@woocommerce/base-components/product-name';
-import { useStoreEvents } from '@woocommerce/base-context/hooks';
+import { useStoreEvents } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/cart-checkout/address-form/test/index.js b/assets/js/base/components/cart-checkout/address-form/test/index.js
index 200f190db75..a83e67d7af7 100644
--- a/assets/js/base/components/cart-checkout/address-form/test/index.js
+++ b/assets/js/base/components/cart-checkout/address-form/test/index.js
@@ -3,8 +3,10 @@
  */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { CheckoutProvider } from '@woocommerce/base-context';
-import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
+import {
+	CheckoutProvider,
+	useCheckoutAddress,
+} from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx b/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
index c11a16eb2a4..78fe52dbc80 100644
--- a/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
+++ b/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
@@ -17,7 +17,7 @@ import {
 import Dinero from 'dinero.js';
 import { getSetting } from '@woocommerce/settings';
 import { useMemo } from '@wordpress/element';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import { CartItem, isString } from '@woocommerce/types';
 
 /**
diff --git a/assets/js/base/components/cart-checkout/place-order-button/index.tsx b/assets/js/base/components/cart-checkout/place-order-button/index.tsx
index d4f3cc7fecd..409d2923614 100644
--- a/assets/js/base/components/cart-checkout/place-order-button/index.tsx
+++ b/assets/js/base/components/cart-checkout/place-order-button/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
+import { useCheckoutSubmit } from '@woocommerce/base-context';
 import { Icon, check } from '@wordpress/icons';
 import Button from '@woocommerce/base-components/button';
 
diff --git a/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx b/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx
index e159a9eec6b..17556a31143 100644
--- a/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx
+++ b/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { EnteredAddress } from '@woocommerce/settings';
-import { useCustomerData } from '@woocommerce/base-context/hooks';
+import { useCustomerData } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx b/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
index 5693c58f61d..d08c0743cd8 100644
--- a/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
+++ b/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
@@ -8,7 +8,7 @@ import type { ReactElement } from 'react';
 import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
 import { Panel } from '@woocommerce/blocks-checkout';
 import Label from '@woocommerce/base-components/label';
-import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
+import { useSelectShippingRate } from '@woocommerce/base-context';
 import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
 /**
diff --git a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
index ffbd1a9c54f..cedbb2c9e9b 100644
--- a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
@@ -9,7 +9,7 @@ import {
 	__experimentalApplyCheckoutFilter,
 	TotalsItem,
 } from '@woocommerce/blocks-checkout';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
 import { CartResponseTotals, Currency } from '@woocommerce/types';
 import { LooselyMustHave } from '@woocommerce/type-defs/utils';
diff --git a/assets/js/base/components/cart-checkout/totals/shipping/index.tsx b/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
index fc98902e64d..11cc629ad43 100644
--- a/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
@@ -4,7 +4,7 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import { TotalsItem } from '@woocommerce/blocks-checkout';
 import type { Currency } from '@woocommerce/price-format';
 import type { ReactElement } from 'react';
diff --git a/assets/js/base/components/product-list/product-list.tsx b/assets/js/base/components/product-list/product-list.tsx
index e8b47a7a0c9..29fce74dbbf 100644
--- a/assets/js/base/components/product-list/product-list.tsx
+++ b/assets/js/base/components/product-list/product-list.tsx
@@ -12,7 +12,7 @@ import {
 	useStoreProducts,
 	useSynchronizedQueryState,
 	useQueryStateByKey,
-} from '@woocommerce/base-context/hooks';
+} from '@woocommerce/base-context';
 import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
 import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
 import { speak } from '@wordpress/a11y';
diff --git a/assets/js/base/context/hooks/test/use-store-notices.js b/assets/js/base/context/hooks/test/use-store-notices.js
index d9353612da3..7ad7d82c504 100644
--- a/assets/js/base/context/hooks/test/use-store-notices.js
+++ b/assets/js/base/context/hooks/test/use-store-notices.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { render, act } from '@testing-library/react';
-import { StoreNoticesProvider } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
  */
 import { useStoreNotices } from '../use-store-notices';
+import { StoreNoticesProvider } from '../../providers/store-notices';
 
 describe( 'useStoreNotices', () => {
 	function setup() {
diff --git a/assets/js/base/context/hooks/test/use-store-snackbar-notices.js b/assets/js/base/context/hooks/test/use-store-snackbar-notices.js
index 493bde10f9e..ad28d501338 100644
--- a/assets/js/base/context/hooks/test/use-store-snackbar-notices.js
+++ b/assets/js/base/context/hooks/test/use-store-snackbar-notices.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { render, act } from '@testing-library/react';
-import { StoreSnackbarNoticesProvider } from '@woocommerce/base-context/providers';
 
 /**
  * Internal dependencies
  */
 import { useStoreSnackbarNotices } from '../use-store-snackbar-notices';
+import { StoreSnackbarNoticesProvider } from '../../providers/store-snackbar-notices';
 
 describe( 'useStoreNoticesWithSnackbar', () => {
 	function setup() {
diff --git a/assets/js/base/context/hooks/use-store-snackbar-notices.js b/assets/js/base/context/hooks/use-store-snackbar-notices.js
index ff07554b774..8fda8adb77d 100644
--- a/assets/js/base/context/hooks/use-store-snackbar-notices.js
+++ b/assets/js/base/context/hooks/use-store-snackbar-notices.js
@@ -2,7 +2,11 @@
  * External dependencies
  */
 import { useMemo, useRef, useEffect } from '@wordpress/element';
-import { useStoreSnackbarNoticesContext } from '@woocommerce/base-context/providers';
+
+/**
+ * Internal dependencies
+ */
+import { useStoreSnackbarNoticesContext } from '../providers/store-snackbar-notices';
 
 export const useStoreSnackbarNotices = () => {
 	const {
diff --git a/assets/js/base/context/providers/store-snackbar-notices/context.js b/assets/js/base/context/providers/store-snackbar-notices/context.js
index 3f628f21b56..4e6c8fc292a 100644
--- a/assets/js/base/context/providers/store-snackbar-notices/context.js
+++ b/assets/js/base/context/providers/store-snackbar-notices/context.js
@@ -9,13 +9,13 @@ import {
 	useState,
 } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
-import SnackbarNoticesContainer from '@woocommerce/base-context/providers/store-snackbar-notices/components/snackbar-notices-container';
 
 /**
  * Internal dependencies
  */
 import { useStoreEvents } from '../../hooks/use-store-events';
 import { useEditorContext } from '../editor-context';
+import SnackbarNoticesContainer from './components/snackbar-notices-container';
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').NoticeContext} NoticeContext
diff --git a/assets/js/base/context/providers/store-snackbar-notices/index.ts b/assets/js/base/context/providers/store-snackbar-notices/index.ts
index c38e8e82152..0a1ee45830e 100644
--- a/assets/js/base/context/providers/store-snackbar-notices/index.ts
+++ b/assets/js/base/context/providers/store-snackbar-notices/index.ts
@@ -1 +1,2 @@
+export * from './components/snackbar-notices-container';
 export * from './context';
diff --git a/assets/js/blocks/active-filters/active-attribute-filters.js b/assets/js/blocks/active-filters/active-attribute-filters.js
index 3a6ddad3cec..2fe9e5f9c0e 100644
--- a/assets/js/blocks/active-filters/active-attribute-filters.js
+++ b/assets/js/blocks/active-filters/active-attribute-filters.js
@@ -1,10 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	useCollection,
-	useQueryStateByKey,
-} from '@woocommerce/base-context/hooks';
+import { useCollection, useQueryStateByKey } from '@woocommerce/base-context';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 
diff --git a/assets/js/blocks/active-filters/block.js b/assets/js/blocks/active-filters/block.js
index 62161897562..d3760f9b649 100644
--- a/assets/js/blocks/active-filters/block.js
+++ b/assets/js/blocks/active-filters/block.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useQueryStateByKey } from '@woocommerce/base-context/hooks';
+import { useQueryStateByKey } from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
 import { useMemo } from '@wordpress/element';
 import classnames from 'classnames';
diff --git a/assets/js/blocks/attribute-filter/block.js b/assets/js/blocks/attribute-filter/block.js
index 4d087d2335c..22e939104fb 100644
--- a/assets/js/blocks/attribute-filter/block.js
+++ b/assets/js/blocks/attribute-filter/block.js
@@ -9,7 +9,7 @@ import {
 	useQueryStateByKey,
 	useQueryStateByContext,
 	useCollectionData,
-} from '@woocommerce/base-context/hooks';
+} from '@woocommerce/base-context';
 import { useCallback, useEffect, useState, useMemo } from '@wordpress/element';
 import CheckboxList from '@woocommerce/base-components/checkbox-list';
 import DropdownSelector from '@woocommerce/base-components/dropdown-selector';
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
index f7d4dc15b5d..68b906f5b50 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { OrderSummary } from '@woocommerce/base-components/cart-checkout';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems } = useStoreCart();
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
index 1579bf61de1..14d07d2fdcc 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
-import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
+import { useStoreCartCoupons } from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
index 245288458a6..99db906c177 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
@@ -6,9 +6,9 @@ import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	useStoreCartCoupons,
 	useStoreCart,
-} from '@woocommerce/base-context/hooks';
+	useCheckoutContext,
+} from '@woocommerce/base-context';
 import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
-import { useCheckoutContext } from '@woocommerce/base-context';
 
 const DiscountSlotFill = (): JSX.Element => {
 	const { isCart } = useCheckoutContext();
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
index 0b8b68197a1..eb757f7fc11 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
@@ -3,7 +3,7 @@
  */
 import { TotalsFees } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartFees, cartTotals } = useStoreCart();
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
index 4485ed31b0d..ac899434a4c 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
@@ -3,8 +3,7 @@
  */
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { useCheckoutContext } from '@woocommerce/base-context';
+import { useStoreCart, useCheckoutContext } from '@woocommerce/base-context';
 
 const Block = ( {
 	className,
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
index bc4d50449f5..99ff79909ee 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
@@ -3,7 +3,7 @@
  */
 import { Subtotal } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
index ef3917d9b82..ab8c4b71da7 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
@@ -3,7 +3,7 @@
  */
 import { TotalsTaxes } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
 
 const Block = ( {
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx
index 46e82f36c4e..810c758eed2 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import { useEffect, useRef } from 'react';
 
 /**
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
index 1b89e66a37b..2113791f273 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 type FilledMiniCartContentsBlockProps = {
 	children: JSX.Element;
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index a32b6e645d7..1809b9fa1a4 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -7,13 +7,13 @@ import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	usePaymentMethods,
 	useStoreCart,
-} from '@woocommerce/base-context/hooks';
+	PaymentMethodDataProvider,
+} from '@woocommerce/base-context';
 import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
 import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 import { getSetting } from '@woocommerce/settings';
 import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
-import { PaymentMethodDataProvider } from '@woocommerce/base-context';
 import classNames from 'classnames';
 
 const PaymentMethodIconsElement = (): JSX.Element => {
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
index 7edd6fef903..1f05c1e36a5 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import classNames from 'classnames';
 
 /**
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
index 9c337e29b57..02ca1781b0d 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { sprintf, _n, __ } from '@wordpress/i18n';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import classNames from 'classnames';
 
 /**
diff --git a/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
index 364e377640d..b963547b152 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
@@ -3,7 +3,7 @@
  */
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 import Drawer from '@woocommerce/base-components/drawer';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import { translateJQueryEventToNative } from '@woocommerce/base-utils';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
 import {
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index c173cc399bd..a34c0dd02d8 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	useExpressPaymentMethods,
 	usePaymentMethodInterface,
-} from '@woocommerce/base-context/hooks';
+} from '@woocommerce/base-context';
 import {
 	cloneElement,
 	isValidElement,
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
index e7fb6648542..b5f5b644b81 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
@@ -5,8 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	useEmitResponse,
 	useExpressPaymentMethods,
-} from '@woocommerce/base-context/hooks';
-import {
 	StoreNoticesProvider,
 	useCheckoutContext,
 	usePaymentMethodDataContext,
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
index 3a2748f1055..2776ee4ceef 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
@@ -5,8 +5,6 @@ import { __ } from '@wordpress/i18n';
 import {
 	useEmitResponse,
 	useExpressPaymentMethods,
-} from '@woocommerce/base-context/hooks';
-import {
 	StoreNoticesProvider,
 	useCheckoutContext,
 	usePaymentMethodDataContext,
diff --git a/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js b/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
index f63808fdfc4..2f1539b0956 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
@@ -7,12 +7,10 @@ import {
 	useEmitResponse,
 	useStoreNotices,
 	useStoreEvents,
-} from '@woocommerce/base-context/hooks';
-import { cloneElement, useCallback } from '@wordpress/element';
-import {
 	useEditorContext,
 	usePaymentMethodDataContext,
 } from '@woocommerce/base-context';
+import { cloneElement, useCallback } from '@wordpress/element';
 import classNames from 'classnames';
 import RadioControlAccordion from '@woocommerce/base-components/radio-control-accordion';
 
diff --git a/assets/js/blocks/cart-checkout/payment-methods/payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/payment-methods.js
index 24b275040e3..f9fc7449cf4 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/payment-methods.js
@@ -1,10 +1,12 @@
 /**
  * External dependencies
  */
-import { usePaymentMethods } from '@woocommerce/base-context/hooks';
+import {
+	usePaymentMethods,
+	usePaymentMethodDataContext,
+} from '@woocommerce/base-context';
 import { __ } from '@wordpress/i18n';
 import Label from '@woocommerce/base-components/label';
-import { usePaymentMethodDataContext } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-options.js b/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-options.js
index 8ebff3e3cca..91bb20f71ed 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-options.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-options.js
@@ -3,7 +3,6 @@
  */
 import { useMemo, cloneElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { usePaymentMethodDataContext } from '@woocommerce/base-context';
 import RadioControl from '@woocommerce/base-components/radio-control';
 import {
 	usePaymentMethodInterface,
@@ -11,7 +10,8 @@ import {
 	useStoreNotices,
 	useStoreEvents,
 	useEmitResponse,
-} from '@woocommerce/base-context/hooks';
+	usePaymentMethodDataContext,
+} from '@woocommerce/base-context';
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').CustomerPaymentMethod} CustomerPaymentMethod
diff --git a/assets/js/blocks/cart/block.js b/assets/js/blocks/cart/block.js
index cc6be272851..0696ebe1f30 100644
--- a/assets/js/blocks/cart/block.js
+++ b/assets/js/blocks/cart/block.js
@@ -2,19 +2,19 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import {
+	useStoreCart,
+	ValidationContextProvider,
+	StoreNoticesProvider,
+	StoreSnackbarNoticesProvider,
+	CartProvider,
+} from '@woocommerce/base-context';
 import { useEffect } from '@wordpress/element';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
-import { ValidationContextProvider } from '@woocommerce/base-context';
 import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import { translateJQueryEventToNative } from '@woocommerce/base-utils';
 import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
-import {
-	StoreNoticesProvider,
-	StoreSnackbarNoticesProvider,
-	CartProvider,
-} from '@woocommerce/base-context/providers';
 import { SlotFillProvider } from '@woocommerce/blocks-checkout';
 
 /**
diff --git a/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx b/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
index 999d299d9f0..758128c76f4 100644
--- a/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
+++ b/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
@@ -11,7 +11,7 @@ import {
 	useStoreCartItemQuantity,
 	useStoreEvents,
 	useStoreCart,
-} from '@woocommerce/base-context/hooks';
+} from '@woocommerce/base-context';
 import {
 	ProductBackorderBadge,
 	ProductImage,
diff --git a/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
index 9efe4577a8f..22bb1f8fcd5 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { PaymentMethodIcons } from '@woocommerce/base-components/cart-checkout';
-import { usePaymentMethods } from '@woocommerce/base-context/hooks';
+import { usePaymentMethods } from '@woocommerce/base-context';
 import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
diff --git a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
index ccb0659b1a9..f3a3b4287b4 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import classnames from 'classnames';
 
 /**
diff --git a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
index 1bfbfff15f4..c455ba9a4f7 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Placeholder, Button } from 'wordpress-components';
-import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
+import { useExpressPaymentMethods } from '@woocommerce/base-context';
 import { Icon, payment } from '@wordpress/icons';
 import { ADMIN_URL } from '@woocommerce/settings';
 import classnames from 'classnames';
diff --git a/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx
index 8b4f38e1287..f482c7f2f39 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 /**
  * Internal dependencies
  */
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
index dbbd1296c75..46973923cae 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
@@ -7,7 +7,7 @@ import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { __ } from '@wordpress/i18n';
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
index 30ae7b8b5db..36ff3e89a6d 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
@@ -3,7 +3,7 @@
  */
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
index 7d571acc750..239b257f96a 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 export const OrderMetaSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
diff --git a/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx
index e92c59769a5..31a75737c5c 100644
--- a/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 import { useEffect } from '@wordpress/element';
 import { dispatchEvent } from '@woocommerce/base-utils';
 
diff --git a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
index 97a166a7b32..dfc3c6bf7c1 100644
--- a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
-import { useStoreCart, useStoreNotices } from '@woocommerce/base-context/hooks';
+import { useStoreCart, useStoreNotices } from '@woocommerce/base-context';
 import { useEffect } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 
diff --git a/assets/js/blocks/checkout/block.tsx b/assets/js/blocks/checkout/block.tsx
index f86ed2c11f4..7ad1d4df63a 100644
--- a/assets/js/blocks/checkout/block.tsx
+++ b/assets/js/blocks/checkout/block.tsx
@@ -4,15 +4,16 @@
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { createInterpolateElement, useEffect } from '@wordpress/element';
-import { useStoreCart, useStoreNotices } from '@woocommerce/base-context/hooks';
 import {
+	useStoreCart,
+	useStoreNotices,
 	useCheckoutContext,
 	useValidationContext,
 	ValidationContextProvider,
 	StoreNoticesProvider,
 	CheckoutProvider,
+	StoreSnackbarNoticesProvider,
 } from '@woocommerce/base-context';
-import { StoreSnackbarNoticesProvider } from '@woocommerce/base-context/providers';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
 import { CURRENT_USER_IS_ADMIN, getSetting } from '@woocommerce/settings';
diff --git a/assets/js/blocks/checkout/frontend.tsx b/assets/js/blocks/checkout/frontend.tsx
index 722b08cdf9a..5db3b62ac88 100644
--- a/assets/js/blocks/checkout/frontend.tsx
+++ b/assets/js/blocks/checkout/frontend.tsx
@@ -3,11 +3,11 @@
  */
 import { Children, cloneElement, isValidElement } from '@wordpress/element';
 import { getValidBlockAttributes } from '@woocommerce/base-utils';
-import { useStoreCart } from '@woocommerce/base-context';
 import {
+	useStoreCart,
 	useCheckoutExtensionData,
 	useValidation,
-} from '@woocommerce/base-context/hooks';
+} from '@woocommerce/base-context';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
index 0a19dac5d6a..93d4b4922b0 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { useBlockProps } from '@wordpress/block-editor';
-import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
+import { useCheckoutAddress } from '@woocommerce/base-context';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 
 /**
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
index cdb8f702e99..9fc4022b4f8 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
@@ -4,8 +4,10 @@
 import classnames from 'classnames';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { useCheckoutContext } from '@woocommerce/base-context';
-import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
+import {
+	useCheckoutContext,
+	useCheckoutAddress,
+} from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx
index fd3c14ee4b4..68ccae2becb 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
index 94c65db9dcb..0c7c0af7ed5 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Placeholder, Button } from 'wordpress-components';
-import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
+import { useExpressPaymentMethods } from '@woocommerce/base-context';
 import { Icon, payment } from '@wordpress/icons';
 import { ADMIN_URL } from '@woocommerce/settings';
 import classnames from 'classnames';
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
index 9b31a5ac91f..5c424fff987 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
@@ -4,8 +4,7 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { useCheckoutContext } from '@woocommerce/base-context';
-import { useShippingData } from '@woocommerce/base-context/hooks';
+import { useCheckoutContext, useShippingData } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
index 285b898234d..293e4aebb3b 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
@@ -6,7 +6,7 @@ import type { TemplateArray } from '@wordpress/blocks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
index 30ae7b8b5db..36ff3e89a6d 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
@@ -3,7 +3,7 @@
  */
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
index 7efdbdd1a2d..292315e804f 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
-import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useStoreCart } from '@woocommerce/base-context';
 
 // @todo Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas.
 export const OrderMetaSlotFill = (): JSX.Element => {
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
index 988fd56422d..fe7d9d0542e 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
@@ -17,7 +17,7 @@ import {
 	textContentMatcher,
 	textContentMatcherAcrossSiblings,
 } from '../../../../../../../tests/utils/find-by-text';
-const baseContextHooks = jest.requireMock( '@woocommerce/base-context/hooks' );
+const baseContextHooks = jest.requireMock( '@woocommerce/base-context' );
 const woocommerceSettings = jest.requireMock( '@woocommerce/settings' );
 
 const defaultUseStoreCartValue = {
@@ -32,8 +32,8 @@ const defaultUseStoreCartValue = {
 	cartHasCalculatedShipping: mockPreviewCart.has_calculated_shipping,
 };
 
-jest.mock( '@woocommerce/base-context/hooks', () => ( {
-	...jest.requireActual( '@woocommerce/base-context/hooks' ),
+jest.mock( '@woocommerce/base-context', () => ( {
+	...jest.requireActual( '@woocommerce/base-context' ),
 
 	/*
 	We need to redefine this here despite the defaultUseStoreCartValue above
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
index abca086c41c..3d11434854f 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
@@ -2,13 +2,14 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { useStoreCart, useEmitResponse } from '@woocommerce/base-context/hooks';
-import { withFilteredAttributes } from '@woocommerce/shared-hocs';
-import { FormStep } from '@woocommerce/base-components/cart-checkout';
 import {
+	useStoreCart,
+	useEmitResponse,
 	useCheckoutContext,
 	StoreNoticesProvider,
 } from '@woocommerce/base-context';
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+import { FormStep } from '@woocommerce/base-components/cart-checkout';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
index 9756834dd9a..0afb743df80 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
@@ -4,8 +4,10 @@
 import classnames from 'classnames';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { useCheckoutContext } from '@woocommerce/base-context';
-import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
+import {
+	useCheckoutContext,
+	useCheckoutAddress,
+} from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
index 266f83aecb8..4593784340e 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
@@ -2,12 +2,11 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useShippingData } from '@woocommerce/base-context/hooks';
+import { useShippingData, useEditorContext } from '@woocommerce/base-context';
 import { ShippingRatesControl } from '@woocommerce/base-components/cart-checkout';
 import { getShippingRatesPackageCount } from '@woocommerce/base-utils';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
-import { useEditorContext } from '@woocommerce/base-context';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Notice } from 'wordpress-components';
 import classnames from 'classnames';
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
index a9c8d90f7ac..9ecfbd9a806 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
@@ -4,8 +4,10 @@
 import classnames from 'classnames';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { useCheckoutContext } from '@woocommerce/base-context';
-import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
+import {
+	useCheckoutContext,
+	useCheckoutAddress,
+} from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
index 098f68dc5ee..6920115e0d9 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { useState, useEffect } from '@wordpress/element';
 import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
+import { useCheckoutSubmit } from '@woocommerce/base-context';
 import { withInstanceId } from '@wordpress/compose';
 import type { ValidationData } from '@woocommerce/type-defs/contexts';
 /**
diff --git a/assets/js/blocks/price-filter/block.js b/assets/js/blocks/price-filter/block.js
index ade15338918..d246858dc05 100644
--- a/assets/js/blocks/price-filter/block.js
+++ b/assets/js/blocks/price-filter/block.js
@@ -6,7 +6,7 @@ import {
 	useQueryStateByKey,
 	useQueryStateByContext,
 	useCollectionData,
-} from '@woocommerce/base-context/hooks';
+} from '@woocommerce/base-context';
 import { useCallback, useState, useEffect } from '@wordpress/element';
 import PriceSlider from '@woocommerce/base-components/price-slider';
 import { useDebouncedCallback } from 'use-debounce';
diff --git a/assets/js/blocks/single-product/block.js b/assets/js/blocks/single-product/block.js
index f3dd756e7dc..a011a3f19c2 100644
--- a/assets/js/blocks/single-product/block.js
+++ b/assets/js/blocks/single-product/block.js
@@ -7,8 +7,10 @@ import {
 	InnerBlockLayoutContextProvider,
 	ProductDataContextProvider,
 } from '@woocommerce/shared-context';
-import { StoreNoticesProvider } from '@woocommerce/base-context';
-import { useStoreEvents } from '@woocommerce/base-context/hooks';
+import {
+	StoreNoticesProvider,
+	useStoreEvents,
+} from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/stock-filter/block.js b/assets/js/blocks/stock-filter/block.js
index a624d17d871..37f57ed06f0 100644
--- a/assets/js/blocks/stock-filter/block.js
+++ b/assets/js/blocks/stock-filter/block.js
@@ -8,7 +8,7 @@ import {
 	useQueryStateByKey,
 	useQueryStateByContext,
 	useCollectionData,
-} from '@woocommerce/base-context/hooks';
+} from '@woocommerce/base-context';
 import { getSetting } from '@woocommerce/settings';
 import { useCallback, useEffect, useState, useMemo } from '@wordpress/element';
 import CheckboxList from '@woocommerce/base-components/checkbox-list';
diff --git a/assets/js/blocks/stock-filter/test/block.js b/assets/js/blocks/stock-filter/test/block.js
index 8be12fa8a56..c1d6a22a097 100644
--- a/assets/js/blocks/stock-filter/test/block.js
+++ b/assets/js/blocks/stock-filter/test/block.js
@@ -22,9 +22,9 @@ const mockResults = {
 	],
 };
 
-jest.mock( '@woocommerce/base-context/hooks', () => {
+jest.mock( '@woocommerce/base-context', () => {
 	return {
-		...jest.requireActual( '@woocommerce/base-context/hooks' ),
+		...jest.requireActual( '@woocommerce/base-context' ),
 		useCollectionData: () => ( { isLoading: false, results: mockResults } ),
 	};
 } );
diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js
index 23c54c24ed7..e63170699d1 100644
--- a/bin/webpack-entries.js
+++ b/bin/webpack-entries.js
@@ -121,6 +121,7 @@ const entries = {
 		wcBlocksSharedHocs: './assets/js/shared/hocs/index.js',
 		priceFormat: './packages/prices/index.js',
 		blocksCheckout: './packages/checkout/index.js',
+		wcBaseContext: './assets/js/base/context/index.ts',
 	},
 	main: {
 		// Shared blocks code
diff --git a/bin/webpack-helpers.js b/bin/webpack-helpers.js
index 98695120fcb..8bb95a4ef50 100644
--- a/bin/webpack-helpers.js
+++ b/bin/webpack-helpers.js
@@ -20,6 +20,7 @@ const wcDepMap = {
 	'@woocommerce/shared-hocs': [ 'wc', 'wcBlocksSharedHocs' ],
 	'@woocommerce/price-format': [ 'wc', 'priceFormat' ],
 	'@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ],
+	'@woocommerce/base-context': [ 'wc', 'wcBaseContext' ],
 };
 
 const wcHandleMap = {
@@ -31,6 +32,7 @@ const wcHandleMap = {
 	'@woocommerce/shared-hocs': 'wc-blocks-shared-hocs',
 	'@woocommerce/price-format': 'wc-price-format',
 	'@woocommerce/blocks-checkout': 'wc-blocks-checkout',
+	'@woocommerce/base-context': 'wc-blocks-base-context',
 };
 
 const getAlias = ( options = {} ) => {
@@ -49,10 +51,6 @@ const getAlias = ( options = {} ) => {
 			__dirname,
 			`../assets/js/${ pathPart }base/components/`
 		),
-		'@woocommerce/base-context': path.resolve(
-			__dirname,
-			`../assets/js/${ pathPart }base/context/`
-		),
 		'@woocommerce/base-hocs': path.resolve(
 			__dirname,
 			`../assets/js/${ pathPart }base/hocs/`
diff --git a/docs/contributors/js-build-system.md b/docs/contributors/js-build-system.md
index 131bcf415bb..04dccfd06f1 100644
--- a/docs/contributors/js-build-system.md
+++ b/docs/contributors/js-build-system.md
@@ -26,16 +26,7 @@ Several scripts are loaded as externals. That means that they are imported in WC
 
 ## Aliases
 
-There are several aliases for internal imports which make importing files across the file tree easier. Instead of having to write a long relative path, they allow writing an alias:
-
-```diff
--import { useStoreCartCoupons } from '../../../../base/hooks';
-+import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
-```
-
-Aliases also ease refactors because imports no longer depend on the exact location of the file.
-
-All available aliases can be found in [`webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/6da64165025e7a2afc1782e4b278d72536e7b754/bin/webpack-helpers.js#L36-L91).
+There are several aliases for internal imports which make importing files across the file tree easier. Instead of having to write a long relative path. All available aliases can be found in [`webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/6da64165025e7a2afc1782e4b278d72536e7b754/bin/webpack-helpers.js#L36-L91).
 
 ## Styling
 
@@ -51,16 +42,15 @@ There were legacy builds of the `MainConfig`, `FrontendConfig` and `StylingConfi
 
 Webpack config is split between several files:
 
-- [`webpack.config.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/webpack.config.js): Top level webpack config. Includes support for legacy and main build.
-- [`bin/webpack-configs.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-configs.js): Code for generating each build config. This most closely resembles a classic webpack config - if you're looking for something, start here.
-- [`bin/webpack-entries.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-entries.js): Code for generating [webpack `entry` definitions](https://webpack.js.org/concepts/entry-points/) and mapping source files to entry points. If you're adding a new block or module to the build, start here.
-- [`bin/webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-helpers.js): Includes utils to load external code at run time, e.g. some dependencies from Woo and WordPress core.
+-   [`webpack.config.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/webpack.config.js): Top level webpack config. Includes support for legacy and main build.
+-   [`bin/webpack-configs.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-configs.js): Code for generating each build config. This most closely resembles a classic webpack config - if you're looking for something, start here.
+-   [`bin/webpack-entries.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-entries.js): Code for generating [webpack `entry` definitions](https://webpack.js.org/concepts/entry-points/) and mapping source files to entry points. If you're adding a new block or module to the build, start here.
+-   [`bin/webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-helpers.js): Includes utils to load external code at run time, e.g. some dependencies from Woo and WordPress core.
 
-<!-- FEEDBACK -->
----
+## <!-- FEEDBACK -->
 
 [We're hiring!](https://woocommerce.com/careers/) Come work with us!
 
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/js-build-system.md)
-<!-- /FEEDBACK -->
 
+<!-- /FEEDBACK -->
diff --git a/docs/extensibility/checkout-flow-and-events.md b/docs/extensibility/checkout-flow-and-events.md
index 9197501365d..ec967779658 100644
--- a/docs/extensibility/checkout-flow-and-events.md
+++ b/docs/extensibility/checkout-flow-and-events.md
@@ -19,6 +19,7 @@ This document gives an overview of the flow for the checkout in the WooCommerce
     - [`onShippingRateFail`](#onshippingratefail)
     - [`onShippingRateSelectSuccess`](#onshippingrateselectsuccess)
     - [`onShippingRateSelectFail`](#onshippingrateselectfail)
+- [](#)
 
 The architecture of the Checkout Block is derived from the following principles:
 
@@ -165,7 +166,7 @@ const MyComponent = ( { onCheckoutValidationBeforeProcessing } ) => {
 This internal hook contains a collection of API interfaces for event emitter related usage. It can be used by simply adding this to a component:
 
 ```jsx
-import { useEmitResponse } from '@woocommerce/base-context/hooks';
+import { useEmitResponse } from '@woocommerce/base-context';
 
 const Component = () => {
 	const {
@@ -473,11 +474,10 @@ This event emitter is fired when a shipping rate selection is not being persiste
 
 This event emitter doesn't care about any registered observer response and will simply execute all registered observers passing them the current error status in the context.
 
-<!-- FEEDBACK -->
----
+## <!-- FEEDBACK -->
 
 [We're hiring!](https://woocommerce.com/careers/) Come work with us!
 
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/checkout-flow-and-events.md)
-<!-- /FEEDBACK -->
 
+<!-- /FEEDBACK -->
diff --git a/src/AssetsController.php b/src/AssetsController.php
index 35fedcaa79d..596603e2fe3 100644
--- a/src/AssetsController.php
+++ b/src/AssetsController.php
@@ -58,14 +58,15 @@ public function register_assets() {
 		$this->api->register_script( 'wc-blocks', $this->api->get_block_asset_build_path( 'wc-blocks' ), [ 'wc-blocks-vendors' ], false );
 		$this->api->register_script( 'wc-blocks-shared-context', 'build/wc-blocks-shared-context.js', [] );
 		$this->api->register_script( 'wc-blocks-shared-hocs', 'build/wc-blocks-shared-hocs.js', [], false );
+		$this->api->register_script( 'wc-blocks-base-context', 'build/wc-base-context.js', [] );
 
 		// The price package is shared externally so has no blocks prefix.
 		$this->api->register_script( 'wc-price-format', 'build/price-format.js', [], false );
 
-		if ( Package::feature()->is_feature_plugin_build() ) {
+		// if ( Package::feature()->is_feature_plugin_build() ) {
 			$this->api->register_script( 'wc-blocks-checkout-inner-blocks-frontend', 'build/checkout-inner-blocks-frontend.js', [] );
 			$this->api->register_script( 'wc-blocks-checkout', 'build/blocks-checkout.js', [] );
-		}
+		// }
 
 		wp_add_inline_script(
 			'wc-blocks-middleware',
diff --git a/tests/js/jest.config.json b/tests/js/jest.config.json
index 409b159f2a2..2b4a05adfcb 100644
--- a/tests/js/jest.config.json
+++ b/tests/js/jest.config.json
@@ -19,7 +19,7 @@
 		"@woocommerce/price-format": "packages/prices",
 		"@woocommerce/block-hocs(.*)$": "assets/js/hocs/$1",
 		"@woocommerce/base-components(.*)$": "assets/js/base/components/$1",
-		"@woocommerce/base-context(.*)$": "assets/js/base/context/$1",
+		"@woocommerce/base-context": "assets/js/base/context",
 		"@woocommerce/base-hocs(.*)$": "assets/js/base/hocs/$1",
 		"@woocommerce/base-hooks(.*)$": "assets/js/base/hooks/$1",
 		"@woocommerce/base-utils(.*)$": "assets/js/base/utils",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index a79f60e5154..3b076a3d0a9 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -30,12 +30,6 @@
 			"@woocommerce/atomic-utils": [ "assets/js/atomic/utils" ],
 			"@woocommerce/base-components/*": [ "assets/js/base/components/*" ],
 			"@woocommerce/base-context": [ "assets/js/base/context" ],
-			"@woocommerce/base-context/hooks": [
-				"assets/js/base/context/hooks"
-			],
-			"@woocommerce/base-context/components": [
-				"assets/js/base/context/components"
-			],
 			"@woocommerce/base-hocs/*": [ "assets/js/base/hocs/*" ],
 			"@woocommerce/base-hooks": [ "assets/js/base/hooks" ],
 			"@woocommerce/base-utils": [ "assets/js/base/utils" ],

From f88c6804372675bcdc71ff0b6a58c91d8c309f53 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 21 Mar 2022 15:51:46 +0000
Subject: [PATCH 14/29] Revert "Experiment- external block context"

This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f.
---
 .../add-to-cart/shared/add-to-cart-button.js  |  4 ++--
 .../blocks/product-elements/button/block.js   |  5 +++-
 .../blocks/product-elements/image/block.js    |  2 +-
 .../blocks/product-elements/title/block.tsx   |  2 +-
 .../cart-checkout/address-form/test/index.js  |  6 ++---
 .../order-summary/order-summary-item.tsx      |  2 +-
 .../place-order-button/index.tsx              |  2 +-
 .../shipping-calculator/index.tsx             |  2 +-
 .../shipping-rates-control-package/index.tsx  |  2 +-
 .../totals/footer-item/index.tsx              |  2 +-
 .../cart-checkout/totals/shipping/index.tsx   |  2 +-
 .../components/product-list/product-list.tsx  |  2 +-
 .../context/hooks/test/use-store-notices.js   |  2 +-
 .../hooks/test/use-store-snackbar-notices.js  |  2 +-
 .../hooks/use-store-snackbar-notices.js       |  6 +----
 .../store-snackbar-notices/context.js         |  2 +-
 .../providers/store-snackbar-notices/index.ts |  1 -
 .../active-attribute-filters.js               |  5 +++-
 assets/js/blocks/active-filters/block.js      |  2 +-
 assets/js/blocks/attribute-filter/block.js    |  2 +-
 .../order-summary-cart-items/block.tsx        |  2 +-
 .../order-summary-coupon-form/block.tsx       |  2 +-
 .../order-summary-discount/block.tsx          |  4 ++--
 .../inner-blocks/order-summary-fee/block.tsx  |  2 +-
 .../order-summary-shipping/block.tsx          |  3 ++-
 .../order-summary-subtotal/block.tsx          |  2 +-
 .../order-summary-taxes/block.tsx             |  2 +-
 .../frontend.tsx                              |  2 +-
 .../frontend.tsx                              |  2 +-
 .../mini-cart-footer-block/block.tsx          |  4 ++--
 .../mini-cart-products-table-block/block.tsx  |  2 +-
 .../mini-cart-title-block/block.tsx           |  2 +-
 .../blocks/cart-checkout/mini-cart/block.tsx  |  2 +-
 .../express-payment-methods.js                |  2 +-
 .../express-payment/cart-express-payment.js   |  2 ++
 .../checkout-express-payment.js               |  2 ++
 .../payment-methods/payment-method-options.js |  4 +++-
 .../payment-methods/payment-methods.js        |  6 ++---
 .../saved-payment-method-options.js           |  4 ++--
 assets/js/blocks/cart/block.js                | 14 +++++------
 .../cart-line-item-row.tsx                    |  2 +-
 .../block.tsx                                 |  2 +-
 .../cart-express-payment-block/block.tsx      |  2 +-
 .../cart-express-payment-block/edit.tsx       |  2 +-
 .../cart-line-items-block/block.tsx           |  2 +-
 .../inner-blocks/cart-order-summary/edit.tsx  |  2 +-
 .../cart-order-summary/frontend.tsx           |  2 +-
 .../cart-order-summary/slotfills.tsx          |  2 +-
 .../empty-cart-block/frontend.tsx             |  2 +-
 .../filled-cart-block/frontend.tsx            |  2 +-
 assets/js/blocks/checkout/block.tsx           |  5 ++--
 assets/js/blocks/checkout/frontend.tsx        |  4 ++--
 .../checkout-billing-address-block/edit.tsx   |  2 +-
 .../frontend.tsx                              |  6 ++---
 .../checkout-express-payment-block/block.tsx  |  2 +-
 .../checkout-express-payment-block/edit.tsx   |  2 +-
 .../checkout-order-note-block/block.tsx       |  3 ++-
 .../checkout-order-summary-block/edit.tsx     |  2 +-
 .../checkout-order-summary-block/frontend.tsx |  2 +-
 .../slotfills.tsx                             |  2 +-
 .../test/block.js                             |  6 ++---
 .../checkout-payment-block/frontend.tsx       |  7 +++---
 .../frontend.tsx                              |  6 ++---
 .../checkout-shipping-methods-block/block.tsx |  3 ++-
 .../frontend.tsx                              |  6 ++---
 .../checkout-terms-block/frontend.tsx         |  2 +-
 assets/js/blocks/price-filter/block.js        |  2 +-
 assets/js/blocks/single-product/block.js      |  6 ++---
 assets/js/blocks/stock-filter/block.js        |  2 +-
 assets/js/blocks/stock-filter/test/block.js   |  4 ++--
 bin/webpack-entries.js                        |  1 -
 bin/webpack-helpers.js                        |  6 +++--
 docs/contributors/js-build-system.md          | 24 +++++++++++++------
 .../extensibility/checkout-flow-and-events.md |  8 +++----
 src/AssetsController.php                      |  5 ++--
 tests/js/jest.config.json                     |  2 +-
 tsconfig.base.json                            |  6 +++++
 77 files changed, 139 insertions(+), 127 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/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
index f23e28003f1..c7ab4f065c6 100644
--- a/assets/js/atomic/blocks/product-elements/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
@@ -5,11 +5,11 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import Button from '@woocommerce/base-components/button';
 import { Icon, check } from '@wordpress/icons';
 import { useState, useEffect } from '@wordpress/element';
+import { useAddToCartFormContext } from '@woocommerce/base-context';
 import {
 	useStoreEvents,
 	useStoreAddToCart,
-	useAddToCartFormContext,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
 
 /**
diff --git a/assets/js/atomic/blocks/product-elements/button/block.js b/assets/js/atomic/blocks/product-elements/button/block.js
index c8945e2b1db..9b04b616f04 100644
--- a/assets/js/atomic/blocks/product-elements/button/block.js
+++ b/assets/js/atomic/blocks/product-elements/button/block.js
@@ -4,7 +4,10 @@
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { useStoreEvents, useStoreAddToCart } from '@woocommerce/base-context';
+import {
+	useStoreEvents,
+	useStoreAddToCart,
+} from '@woocommerce/base-context/hooks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { CART_URL } from '@woocommerce/block-settings';
 import { getSetting } from '@woocommerce/settings';
diff --git a/assets/js/atomic/blocks/product-elements/image/block.js b/assets/js/atomic/blocks/product-elements/image/block.js
index 0adc3f8998b..9855ab3d2e9 100644
--- a/assets/js/atomic/blocks/product-elements/image/block.js
+++ b/assets/js/atomic/blocks/product-elements/image/block.js
@@ -11,7 +11,7 @@ import {
 	useProductDataContext,
 } from '@woocommerce/shared-context';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
-import { useStoreEvents } from '@woocommerce/base-context';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/atomic/blocks/product-elements/title/block.tsx b/assets/js/atomic/blocks/product-elements/title/block.tsx
index e40cd92cfe0..c92d5f5cd4f 100644
--- a/assets/js/atomic/blocks/product-elements/title/block.tsx
+++ b/assets/js/atomic/blocks/product-elements/title/block.tsx
@@ -10,7 +10,7 @@ import {
 import { isFeaturePluginBuild } from '@woocommerce/block-settings';
 import { withProductDataContext } from '@woocommerce/shared-hocs';
 import ProductName from '@woocommerce/base-components/product-name';
-import { useStoreEvents } from '@woocommerce/base-context';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/cart-checkout/address-form/test/index.js b/assets/js/base/components/cart-checkout/address-form/test/index.js
index a83e67d7af7..200f190db75 100644
--- a/assets/js/base/components/cart-checkout/address-form/test/index.js
+++ b/assets/js/base/components/cart-checkout/address-form/test/index.js
@@ -3,10 +3,8 @@
  */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {
-	CheckoutProvider,
-	useCheckoutAddress,
-} from '@woocommerce/base-context';
+import { CheckoutProvider } from '@woocommerce/base-context';
+import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx b/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
index 78fe52dbc80..c11a16eb2a4 100644
--- a/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
+++ b/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
@@ -17,7 +17,7 @@ import {
 import Dinero from 'dinero.js';
 import { getSetting } from '@woocommerce/settings';
 import { useMemo } from '@wordpress/element';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { CartItem, isString } from '@woocommerce/types';
 
 /**
diff --git a/assets/js/base/components/cart-checkout/place-order-button/index.tsx b/assets/js/base/components/cart-checkout/place-order-button/index.tsx
index 409d2923614..d4f3cc7fecd 100644
--- a/assets/js/base/components/cart-checkout/place-order-button/index.tsx
+++ b/assets/js/base/components/cart-checkout/place-order-button/index.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useCheckoutSubmit } from '@woocommerce/base-context';
+import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { Icon, check } from '@wordpress/icons';
 import Button from '@woocommerce/base-components/button';
 
diff --git a/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx b/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx
index 17556a31143..e159a9eec6b 100644
--- a/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx
+++ b/assets/js/base/components/cart-checkout/shipping-calculator/index.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import type { EnteredAddress } from '@woocommerce/settings';
-import { useCustomerData } from '@woocommerce/base-context';
+import { useCustomerData } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx b/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
index d08c0743cd8..5693c58f61d 100644
--- a/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
+++ b/assets/js/base/components/cart-checkout/shipping-rates-control-package/index.tsx
@@ -8,7 +8,7 @@ import type { ReactElement } from 'react';
 import type { PackageRateOption } from '@woocommerce/type-defs/shipping';
 import { Panel } from '@woocommerce/blocks-checkout';
 import Label from '@woocommerce/base-components/label';
-import { useSelectShippingRate } from '@woocommerce/base-context';
+import { useSelectShippingRate } from '@woocommerce/base-context/hooks';
 import type { CartShippingPackageShippingRate } from '@woocommerce/type-defs/cart';
 
 /**
diff --git a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
index cedbb2c9e9b..ffbd1a9c54f 100644
--- a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
@@ -9,7 +9,7 @@ import {
 	__experimentalApplyCheckoutFilter,
 	TotalsItem,
 } from '@woocommerce/blocks-checkout';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import { CartResponseTotals, Currency } from '@woocommerce/types';
 import { LooselyMustHave } from '@woocommerce/type-defs/utils';
diff --git a/assets/js/base/components/cart-checkout/totals/shipping/index.tsx b/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
index 11cc629ad43..fc98902e64d 100644
--- a/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/shipping/index.tsx
@@ -4,7 +4,7 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { TotalsItem } from '@woocommerce/blocks-checkout';
 import type { Currency } from '@woocommerce/price-format';
 import type { ReactElement } from 'react';
diff --git a/assets/js/base/components/product-list/product-list.tsx b/assets/js/base/components/product-list/product-list.tsx
index 29fce74dbbf..e8b47a7a0c9 100644
--- a/assets/js/base/components/product-list/product-list.tsx
+++ b/assets/js/base/components/product-list/product-list.tsx
@@ -12,7 +12,7 @@ import {
 	useStoreProducts,
 	useSynchronizedQueryState,
 	useQueryStateByKey,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
 import { useInnerBlockLayoutContext } from '@woocommerce/shared-context';
 import { speak } from '@wordpress/a11y';
diff --git a/assets/js/base/context/hooks/test/use-store-notices.js b/assets/js/base/context/hooks/test/use-store-notices.js
index 7ad7d82c504..d9353612da3 100644
--- a/assets/js/base/context/hooks/test/use-store-notices.js
+++ b/assets/js/base/context/hooks/test/use-store-notices.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { render, act } from '@testing-library/react';
+import { StoreNoticesProvider } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
  */
 import { useStoreNotices } from '../use-store-notices';
-import { StoreNoticesProvider } from '../../providers/store-notices';
 
 describe( 'useStoreNotices', () => {
 	function setup() {
diff --git a/assets/js/base/context/hooks/test/use-store-snackbar-notices.js b/assets/js/base/context/hooks/test/use-store-snackbar-notices.js
index ad28d501338..493bde10f9e 100644
--- a/assets/js/base/context/hooks/test/use-store-snackbar-notices.js
+++ b/assets/js/base/context/hooks/test/use-store-snackbar-notices.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { render, act } from '@testing-library/react';
+import { StoreSnackbarNoticesProvider } from '@woocommerce/base-context/providers';
 
 /**
  * Internal dependencies
  */
 import { useStoreSnackbarNotices } from '../use-store-snackbar-notices';
-import { StoreSnackbarNoticesProvider } from '../../providers/store-snackbar-notices';
 
 describe( 'useStoreNoticesWithSnackbar', () => {
 	function setup() {
diff --git a/assets/js/base/context/hooks/use-store-snackbar-notices.js b/assets/js/base/context/hooks/use-store-snackbar-notices.js
index 8fda8adb77d..ff07554b774 100644
--- a/assets/js/base/context/hooks/use-store-snackbar-notices.js
+++ b/assets/js/base/context/hooks/use-store-snackbar-notices.js
@@ -2,11 +2,7 @@
  * External dependencies
  */
 import { useMemo, useRef, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { useStoreSnackbarNoticesContext } from '../providers/store-snackbar-notices';
+import { useStoreSnackbarNoticesContext } from '@woocommerce/base-context/providers';
 
 export const useStoreSnackbarNotices = () => {
 	const {
diff --git a/assets/js/base/context/providers/store-snackbar-notices/context.js b/assets/js/base/context/providers/store-snackbar-notices/context.js
index 4e6c8fc292a..3f628f21b56 100644
--- a/assets/js/base/context/providers/store-snackbar-notices/context.js
+++ b/assets/js/base/context/providers/store-snackbar-notices/context.js
@@ -9,13 +9,13 @@ import {
 	useState,
 } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
+import SnackbarNoticesContainer from '@woocommerce/base-context/providers/store-snackbar-notices/components/snackbar-notices-container';
 
 /**
  * Internal dependencies
  */
 import { useStoreEvents } from '../../hooks/use-store-events';
 import { useEditorContext } from '../editor-context';
-import SnackbarNoticesContainer from './components/snackbar-notices-container';
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').NoticeContext} NoticeContext
diff --git a/assets/js/base/context/providers/store-snackbar-notices/index.ts b/assets/js/base/context/providers/store-snackbar-notices/index.ts
index 0a1ee45830e..c38e8e82152 100644
--- a/assets/js/base/context/providers/store-snackbar-notices/index.ts
+++ b/assets/js/base/context/providers/store-snackbar-notices/index.ts
@@ -1,2 +1 @@
-export * from './components/snackbar-notices-container';
 export * from './context';
diff --git a/assets/js/blocks/active-filters/active-attribute-filters.js b/assets/js/blocks/active-filters/active-attribute-filters.js
index 2fe9e5f9c0e..3a6ddad3cec 100644
--- a/assets/js/blocks/active-filters/active-attribute-filters.js
+++ b/assets/js/blocks/active-filters/active-attribute-filters.js
@@ -1,7 +1,10 @@
 /**
  * External dependencies
  */
-import { useCollection, useQueryStateByKey } from '@woocommerce/base-context';
+import {
+	useCollection,
+	useQueryStateByKey,
+} from '@woocommerce/base-context/hooks';
 import { decodeEntities } from '@wordpress/html-entities';
 import { __ } from '@wordpress/i18n';
 
diff --git a/assets/js/blocks/active-filters/block.js b/assets/js/blocks/active-filters/block.js
index d3760f9b649..62161897562 100644
--- a/assets/js/blocks/active-filters/block.js
+++ b/assets/js/blocks/active-filters/block.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useQueryStateByKey } from '@woocommerce/base-context';
+import { useQueryStateByKey } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import { useMemo } from '@wordpress/element';
 import classnames from 'classnames';
diff --git a/assets/js/blocks/attribute-filter/block.js b/assets/js/blocks/attribute-filter/block.js
index 22e939104fb..4d087d2335c 100644
--- a/assets/js/blocks/attribute-filter/block.js
+++ b/assets/js/blocks/attribute-filter/block.js
@@ -9,7 +9,7 @@ import {
 	useQueryStateByKey,
 	useQueryStateByContext,
 	useCollectionData,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import { useCallback, useEffect, useState, useMemo } from '@wordpress/element';
 import CheckboxList from '@woocommerce/base-components/checkbox-list';
 import DropdownSelector from '@woocommerce/base-components/dropdown-selector';
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
index 68b906f5b50..f7d4dc15b5d 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { OrderSummary } from '@woocommerce/base-components/cart-checkout';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems } = useStoreCart();
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
index 14d07d2fdcc..1579bf61de1 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
-import { useStoreCartCoupons } from '@woocommerce/base-context';
+import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
index 99db906c177..245288458a6 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
@@ -6,9 +6,9 @@ import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	useStoreCartCoupons,
 	useStoreCart,
-	useCheckoutContext,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+import { useCheckoutContext } from '@woocommerce/base-context';
 
 const DiscountSlotFill = (): JSX.Element => {
 	const { isCart } = useCheckoutContext();
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
index eb757f7fc11..0b8b68197a1 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
@@ -3,7 +3,7 @@
  */
 import { TotalsFees } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartFees, cartTotals } = useStoreCart();
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
index ac899434a4c..4485ed31b0d 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
@@ -3,7 +3,8 @@
  */
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart, useCheckoutContext } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { useCheckoutContext } from '@woocommerce/base-context';
 
 const Block = ( {
 	className,
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
index 99ff79909ee..bc4d50449f5 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
@@ -3,7 +3,7 @@
  */
 import { Subtotal } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
index ab8c4b71da7..ef3917d9b82 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
+++ b/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
@@ -3,7 +3,7 @@
  */
 import { TotalsTaxes } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 
 const Block = ( {
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx
index 810c758eed2..46e82f36c4e 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { useEffect, useRef } from 'react';
 
 /**
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
index 2113791f273..1b89e66a37b 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/filled-mini-cart-contents-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 type FilledMiniCartContentsBlockProps = {
 	children: JSX.Element;
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
index 1809b9fa1a4..a32b6e645d7 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-footer-block/block.tsx
@@ -7,13 +7,13 @@ import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import {
 	usePaymentMethods,
 	useStoreCart,
-	PaymentMethodDataProvider,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import PaymentMethodIcons from '@woocommerce/base-components/cart-checkout/payment-method-icons';
 import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 import { getSetting } from '@woocommerce/settings';
 import { CART_URL, CHECKOUT_URL } from '@woocommerce/block-settings';
 import Button from '@woocommerce/base-components/button';
+import { PaymentMethodDataProvider } from '@woocommerce/base-context';
 import classNames from 'classnames';
 
 const PaymentMethodIconsElement = (): JSX.Element => {
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
index 1f05c1e36a5..7edd6fef903 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-products-table-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import classNames from 'classnames';
 
 /**
diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
index 02ca1781b0d..9c337e29b57 100644
--- a/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/mini-cart-title-block/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { sprintf, _n, __ } from '@wordpress/i18n';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import classNames from 'classnames';
 
 /**
diff --git a/assets/js/blocks/cart-checkout/mini-cart/block.tsx b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
index b963547b152..364e377640d 100644
--- a/assets/js/blocks/cart-checkout/mini-cart/block.tsx
+++ b/assets/js/blocks/cart-checkout/mini-cart/block.tsx
@@ -3,7 +3,7 @@
  */
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 import Drawer from '@woocommerce/base-components/drawer';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { translateJQueryEventToNative } from '@woocommerce/base-utils';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
 import {
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
index a34c0dd02d8..c173cc399bd 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment-methods.js
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	useExpressPaymentMethods,
 	usePaymentMethodInterface,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import {
 	cloneElement,
 	isValidElement,
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
index b5f5b644b81..e7fb6648542 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/cart-express-payment.js
@@ -5,6 +5,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	useEmitResponse,
 	useExpressPaymentMethods,
+} from '@woocommerce/base-context/hooks';
+import {
 	StoreNoticesProvider,
 	useCheckoutContext,
 	usePaymentMethodDataContext,
diff --git a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
index 2776ee4ceef..3a2748f1055 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/express-payment/checkout-express-payment.js
@@ -5,6 +5,8 @@ import { __ } from '@wordpress/i18n';
 import {
 	useEmitResponse,
 	useExpressPaymentMethods,
+} from '@woocommerce/base-context/hooks';
+import {
 	StoreNoticesProvider,
 	useCheckoutContext,
 	usePaymentMethodDataContext,
diff --git a/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js b/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
index 2f1539b0956..f63808fdfc4 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/payment-method-options.js
@@ -7,10 +7,12 @@ import {
 	useEmitResponse,
 	useStoreNotices,
 	useStoreEvents,
+} from '@woocommerce/base-context/hooks';
+import { cloneElement, useCallback } from '@wordpress/element';
+import {
 	useEditorContext,
 	usePaymentMethodDataContext,
 } from '@woocommerce/base-context';
-import { cloneElement, useCallback } from '@wordpress/element';
 import classNames from 'classnames';
 import RadioControlAccordion from '@woocommerce/base-components/radio-control-accordion';
 
diff --git a/assets/js/blocks/cart-checkout/payment-methods/payment-methods.js b/assets/js/blocks/cart-checkout/payment-methods/payment-methods.js
index f9fc7449cf4..24b275040e3 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/payment-methods.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/payment-methods.js
@@ -1,12 +1,10 @@
 /**
  * External dependencies
  */
-import {
-	usePaymentMethods,
-	usePaymentMethodDataContext,
-} from '@woocommerce/base-context';
+import { usePaymentMethods } from '@woocommerce/base-context/hooks';
 import { __ } from '@wordpress/i18n';
 import Label from '@woocommerce/base-components/label';
+import { usePaymentMethodDataContext } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-options.js b/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-options.js
index 91bb20f71ed..8ebff3e3cca 100644
--- a/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-options.js
+++ b/assets/js/blocks/cart-checkout/payment-methods/saved-payment-method-options.js
@@ -3,6 +3,7 @@
  */
 import { useMemo, cloneElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
+import { usePaymentMethodDataContext } from '@woocommerce/base-context';
 import RadioControl from '@woocommerce/base-components/radio-control';
 import {
 	usePaymentMethodInterface,
@@ -10,8 +11,7 @@ import {
 	useStoreNotices,
 	useStoreEvents,
 	useEmitResponse,
-	usePaymentMethodDataContext,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 
 /**
  * @typedef {import('@woocommerce/type-defs/contexts').CustomerPaymentMethod} CustomerPaymentMethod
diff --git a/assets/js/blocks/cart/block.js b/assets/js/blocks/cart/block.js
index 0696ebe1f30..cc6be272851 100644
--- a/assets/js/blocks/cart/block.js
+++ b/assets/js/blocks/cart/block.js
@@ -2,19 +2,19 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	useStoreCart,
-	ValidationContextProvider,
-	StoreNoticesProvider,
-	StoreSnackbarNoticesProvider,
-	CartProvider,
-} from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { useEffect } from '@wordpress/element';
 import LoadingMask from '@woocommerce/base-components/loading-mask';
+import { ValidationContextProvider } from '@woocommerce/base-context';
 import { CURRENT_USER_IS_ADMIN } from '@woocommerce/settings';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import { translateJQueryEventToNative } from '@woocommerce/base-utils';
 import withScrollToTop from '@woocommerce/base-hocs/with-scroll-to-top';
+import {
+	StoreNoticesProvider,
+	StoreSnackbarNoticesProvider,
+	CartProvider,
+} from '@woocommerce/base-context/providers';
 import { SlotFillProvider } from '@woocommerce/blocks-checkout';
 
 /**
diff --git a/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx b/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
index 758128c76f4..999d299d9f0 100644
--- a/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
+++ b/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
@@ -11,7 +11,7 @@ import {
 	useStoreCartItemQuantity,
 	useStoreEvents,
 	useStoreCart,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import {
 	ProductBackorderBadge,
 	ProductImage,
diff --git a/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
index 22bb1f8fcd5..9efe4577a8f 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-accepted-payment-methods-block/block.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { PaymentMethodIcons } from '@woocommerce/base-components/cart-checkout';
-import { usePaymentMethods } from '@woocommerce/base-context';
+import { usePaymentMethods } from '@woocommerce/base-context/hooks';
 import { getIconsFromPaymentMethods } from '@woocommerce/base-utils';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
diff --git a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
index f3a3b4287b4..ccb0659b1a9 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import classnames from 'classnames';
 
 /**
diff --git a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
index c455ba9a4f7..1bfbfff15f4 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/edit.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Placeholder, Button } from 'wordpress-components';
-import { useExpressPaymentMethods } from '@woocommerce/base-context';
+import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
 import { Icon, payment } from '@wordpress/icons';
 import { ADMIN_URL } from '@woocommerce/settings';
 import classnames from 'classnames';
diff --git a/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx
index f482c7f2f39..8b4f38e1287 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-line-items-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 /**
  * Internal dependencies
  */
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
index 46973923cae..dbbd1296c75 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
@@ -7,7 +7,7 @@ import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { __ } from '@wordpress/i18n';
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
index 36ff3e89a6d..30ae7b8b5db 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
@@ -3,7 +3,7 @@
  */
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
index 239b257f96a..7d571acc750 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 export const OrderMetaSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
diff --git a/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx
index 31a75737c5c..e92c59769a5 100644
--- a/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/empty-cart-block/frontend.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { useEffect } from '@wordpress/element';
 import { dispatchEvent } from '@woocommerce/base-utils';
 
diff --git a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
index dfc3c6bf7c1..97a166a7b32 100644
--- a/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/filled-cart-block/frontend.tsx
@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
-import { useStoreCart, useStoreNotices } from '@woocommerce/base-context';
+import { useStoreCart, useStoreNotices } from '@woocommerce/base-context/hooks';
 import { useEffect } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 
diff --git a/assets/js/blocks/checkout/block.tsx b/assets/js/blocks/checkout/block.tsx
index 7ad1d4df63a..f86ed2c11f4 100644
--- a/assets/js/blocks/checkout/block.tsx
+++ b/assets/js/blocks/checkout/block.tsx
@@ -4,16 +4,15 @@
 import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { createInterpolateElement, useEffect } from '@wordpress/element';
+import { useStoreCart, useStoreNotices } from '@woocommerce/base-context/hooks';
 import {
-	useStoreCart,
-	useStoreNotices,
 	useCheckoutContext,
 	useValidationContext,
 	ValidationContextProvider,
 	StoreNoticesProvider,
 	CheckoutProvider,
-	StoreSnackbarNoticesProvider,
 } from '@woocommerce/base-context';
+import { StoreSnackbarNoticesProvider } from '@woocommerce/base-context/providers';
 import BlockErrorBoundary from '@woocommerce/base-components/block-error-boundary';
 import { SidebarLayout } from '@woocommerce/base-components/sidebar-layout';
 import { CURRENT_USER_IS_ADMIN, getSetting } from '@woocommerce/settings';
diff --git a/assets/js/blocks/checkout/frontend.tsx b/assets/js/blocks/checkout/frontend.tsx
index 5db3b62ac88..722b08cdf9a 100644
--- a/assets/js/blocks/checkout/frontend.tsx
+++ b/assets/js/blocks/checkout/frontend.tsx
@@ -3,11 +3,11 @@
  */
 import { Children, cloneElement, isValidElement } from '@wordpress/element';
 import { getValidBlockAttributes } from '@woocommerce/base-utils';
+import { useStoreCart } from '@woocommerce/base-context';
 import {
-	useStoreCart,
 	useCheckoutExtensionData,
 	useValidation,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import { getRegisteredBlockComponents } from '@woocommerce/blocks-registry';
 import { renderParentBlock } from '@woocommerce/atomic-utils';
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
index 93d4b4922b0..0a19dac5d6a 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/edit.tsx
@@ -3,7 +3,7 @@
  */
 import classnames from 'classnames';
 import { useBlockProps } from '@wordpress/block-editor';
-import { useCheckoutAddress } from '@woocommerce/base-context';
+import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 
 /**
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
index 9fc4022b4f8..cdb8f702e99 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-billing-address-block/frontend.tsx
@@ -4,10 +4,8 @@
 import classnames from 'classnames';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import {
-	useCheckoutContext,
-	useCheckoutAddress,
-} from '@woocommerce/base-context';
+import { useCheckoutContext } from '@woocommerce/base-context';
+import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx
index 68ccae2becb..fd3c14ee4b4 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
index 0c7c0af7ed5..94c65db9dcb 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/edit.tsx
@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Placeholder, Button } from 'wordpress-components';
-import { useExpressPaymentMethods } from '@woocommerce/base-context';
+import { useExpressPaymentMethods } from '@woocommerce/base-context/hooks';
 import { Icon, payment } from '@wordpress/icons';
 import { ADMIN_URL } from '@woocommerce/settings';
 import classnames from 'classnames';
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
index 5c424fff987..9b31a5ac91f 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-note-block/block.tsx
@@ -4,7 +4,8 @@
 import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import { useCheckoutContext, useShippingData } from '@woocommerce/base-context';
+import { useCheckoutContext } from '@woocommerce/base-context';
+import { useShippingData } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
index 293e4aebb3b..285b898234d 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
@@ -6,7 +6,7 @@ import type { TemplateArray } from '@wordpress/blocks';
 import { innerBlockAreas } from '@woocommerce/blocks-checkout';
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
index 36ff3e89a6d..30ae7b8b5db 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
@@ -3,7 +3,7 @@
  */
 import { TotalsFooterItem } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
index 292315e804f..7efdbdd1a2d 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { ExperimentalOrderMeta } from '@woocommerce/blocks-checkout';
-import { useStoreCart } from '@woocommerce/base-context';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
 
 // @todo Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas.
 export const OrderMetaSlotFill = (): JSX.Element => {
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
index fe7d9d0542e..988fd56422d 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
@@ -17,7 +17,7 @@ import {
 	textContentMatcher,
 	textContentMatcherAcrossSiblings,
 } from '../../../../../../../tests/utils/find-by-text';
-const baseContextHooks = jest.requireMock( '@woocommerce/base-context' );
+const baseContextHooks = jest.requireMock( '@woocommerce/base-context/hooks' );
 const woocommerceSettings = jest.requireMock( '@woocommerce/settings' );
 
 const defaultUseStoreCartValue = {
@@ -32,8 +32,8 @@ const defaultUseStoreCartValue = {
 	cartHasCalculatedShipping: mockPreviewCart.has_calculated_shipping,
 };
 
-jest.mock( '@woocommerce/base-context', () => ( {
-	...jest.requireActual( '@woocommerce/base-context' ),
+jest.mock( '@woocommerce/base-context/hooks', () => ( {
+	...jest.requireActual( '@woocommerce/base-context/hooks' ),
 
 	/*
 	We need to redefine this here despite the defaultUseStoreCartValue above
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
index 3d11434854f..abca086c41c 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-payment-block/frontend.tsx
@@ -2,14 +2,13 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { useStoreCart, useEmitResponse } from '@woocommerce/base-context/hooks';
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+import { FormStep } from '@woocommerce/base-components/cart-checkout';
 import {
-	useStoreCart,
-	useEmitResponse,
 	useCheckoutContext,
 	StoreNoticesProvider,
 } from '@woocommerce/base-context';
-import { withFilteredAttributes } from '@woocommerce/shared-hocs';
-import { FormStep } from '@woocommerce/base-components/cart-checkout';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
index 0afb743df80..9756834dd9a 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-address-block/frontend.tsx
@@ -4,10 +4,8 @@
 import classnames from 'classnames';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import {
-	useCheckoutContext,
-	useCheckoutAddress,
-} from '@woocommerce/base-context';
+import { useCheckoutContext } from '@woocommerce/base-context';
+import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
index 4593784340e..266f83aecb8 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/block.tsx
@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useShippingData, useEditorContext } from '@woocommerce/base-context';
+import { useShippingData } from '@woocommerce/base-context/hooks';
 import { ShippingRatesControl } from '@woocommerce/base-components/cart-checkout';
 import { getShippingRatesPackageCount } from '@woocommerce/base-utils';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
+import { useEditorContext } from '@woocommerce/base-context';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Notice } from 'wordpress-components';
 import classnames from 'classnames';
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
index 9ecfbd9a806..a9c8d90f7ac 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-shipping-methods-block/frontend.tsx
@@ -4,10 +4,8 @@
 import classnames from 'classnames';
 import { withFilteredAttributes } from '@woocommerce/shared-hocs';
 import { FormStep } from '@woocommerce/base-components/cart-checkout';
-import {
-	useCheckoutContext,
-	useCheckoutAddress,
-} from '@woocommerce/base-context';
+import { useCheckoutContext } from '@woocommerce/base-context';
+import { useCheckoutAddress } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
index 6920115e0d9..098f68dc5ee 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-terms-block/frontend.tsx
@@ -5,7 +5,7 @@ import { __ } from '@wordpress/i18n';
 import classnames from 'classnames';
 import { useState, useEffect } from '@wordpress/element';
 import { CheckboxControl } from '@woocommerce/blocks-checkout';
-import { useCheckoutSubmit } from '@woocommerce/base-context';
+import { useCheckoutSubmit } from '@woocommerce/base-context/hooks';
 import { withInstanceId } from '@wordpress/compose';
 import type { ValidationData } from '@woocommerce/type-defs/contexts';
 /**
diff --git a/assets/js/blocks/price-filter/block.js b/assets/js/blocks/price-filter/block.js
index d246858dc05..ade15338918 100644
--- a/assets/js/blocks/price-filter/block.js
+++ b/assets/js/blocks/price-filter/block.js
@@ -6,7 +6,7 @@ import {
 	useQueryStateByKey,
 	useQueryStateByContext,
 	useCollectionData,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import { useCallback, useState, useEffect } from '@wordpress/element';
 import PriceSlider from '@woocommerce/base-components/price-slider';
 import { useDebouncedCallback } from 'use-debounce';
diff --git a/assets/js/blocks/single-product/block.js b/assets/js/blocks/single-product/block.js
index a011a3f19c2..f3dd756e7dc 100644
--- a/assets/js/blocks/single-product/block.js
+++ b/assets/js/blocks/single-product/block.js
@@ -7,10 +7,8 @@ import {
 	InnerBlockLayoutContextProvider,
 	ProductDataContextProvider,
 } from '@woocommerce/shared-context';
-import {
-	StoreNoticesProvider,
-	useStoreEvents,
-} from '@woocommerce/base-context';
+import { StoreNoticesProvider } from '@woocommerce/base-context';
+import { useStoreEvents } from '@woocommerce/base-context/hooks';
 
 /**
  * Internal dependencies
diff --git a/assets/js/blocks/stock-filter/block.js b/assets/js/blocks/stock-filter/block.js
index 37f57ed06f0..a624d17d871 100644
--- a/assets/js/blocks/stock-filter/block.js
+++ b/assets/js/blocks/stock-filter/block.js
@@ -8,7 +8,7 @@ import {
 	useQueryStateByKey,
 	useQueryStateByContext,
 	useCollectionData,
-} from '@woocommerce/base-context';
+} from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 import { useCallback, useEffect, useState, useMemo } from '@wordpress/element';
 import CheckboxList from '@woocommerce/base-components/checkbox-list';
diff --git a/assets/js/blocks/stock-filter/test/block.js b/assets/js/blocks/stock-filter/test/block.js
index c1d6a22a097..8be12fa8a56 100644
--- a/assets/js/blocks/stock-filter/test/block.js
+++ b/assets/js/blocks/stock-filter/test/block.js
@@ -22,9 +22,9 @@ const mockResults = {
 	],
 };
 
-jest.mock( '@woocommerce/base-context', () => {
+jest.mock( '@woocommerce/base-context/hooks', () => {
 	return {
-		...jest.requireActual( '@woocommerce/base-context' ),
+		...jest.requireActual( '@woocommerce/base-context/hooks' ),
 		useCollectionData: () => ( { isLoading: false, results: mockResults } ),
 	};
 } );
diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js
index e63170699d1..23c54c24ed7 100644
--- a/bin/webpack-entries.js
+++ b/bin/webpack-entries.js
@@ -121,7 +121,6 @@ const entries = {
 		wcBlocksSharedHocs: './assets/js/shared/hocs/index.js',
 		priceFormat: './packages/prices/index.js',
 		blocksCheckout: './packages/checkout/index.js',
-		wcBaseContext: './assets/js/base/context/index.ts',
 	},
 	main: {
 		// Shared blocks code
diff --git a/bin/webpack-helpers.js b/bin/webpack-helpers.js
index 8bb95a4ef50..98695120fcb 100644
--- a/bin/webpack-helpers.js
+++ b/bin/webpack-helpers.js
@@ -20,7 +20,6 @@ const wcDepMap = {
 	'@woocommerce/shared-hocs': [ 'wc', 'wcBlocksSharedHocs' ],
 	'@woocommerce/price-format': [ 'wc', 'priceFormat' ],
 	'@woocommerce/blocks-checkout': [ 'wc', 'blocksCheckout' ],
-	'@woocommerce/base-context': [ 'wc', 'wcBaseContext' ],
 };
 
 const wcHandleMap = {
@@ -32,7 +31,6 @@ const wcHandleMap = {
 	'@woocommerce/shared-hocs': 'wc-blocks-shared-hocs',
 	'@woocommerce/price-format': 'wc-price-format',
 	'@woocommerce/blocks-checkout': 'wc-blocks-checkout',
-	'@woocommerce/base-context': 'wc-blocks-base-context',
 };
 
 const getAlias = ( options = {} ) => {
@@ -51,6 +49,10 @@ const getAlias = ( options = {} ) => {
 			__dirname,
 			`../assets/js/${ pathPart }base/components/`
 		),
+		'@woocommerce/base-context': path.resolve(
+			__dirname,
+			`../assets/js/${ pathPart }base/context/`
+		),
 		'@woocommerce/base-hocs': path.resolve(
 			__dirname,
 			`../assets/js/${ pathPart }base/hocs/`
diff --git a/docs/contributors/js-build-system.md b/docs/contributors/js-build-system.md
index 04dccfd06f1..131bcf415bb 100644
--- a/docs/contributors/js-build-system.md
+++ b/docs/contributors/js-build-system.md
@@ -26,7 +26,16 @@ Several scripts are loaded as externals. That means that they are imported in WC
 
 ## Aliases
 
-There are several aliases for internal imports which make importing files across the file tree easier. Instead of having to write a long relative path. All available aliases can be found in [`webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/6da64165025e7a2afc1782e4b278d72536e7b754/bin/webpack-helpers.js#L36-L91).
+There are several aliases for internal imports which make importing files across the file tree easier. Instead of having to write a long relative path, they allow writing an alias:
+
+```diff
+-import { useStoreCartCoupons } from '../../../../base/hooks';
++import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
+```
+
+Aliases also ease refactors because imports no longer depend on the exact location of the file.
+
+All available aliases can be found in [`webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/6da64165025e7a2afc1782e4b278d72536e7b754/bin/webpack-helpers.js#L36-L91).
 
 ## Styling
 
@@ -42,15 +51,16 @@ There were legacy builds of the `MainConfig`, `FrontendConfig` and `StylingConfi
 
 Webpack config is split between several files:
 
--   [`webpack.config.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/webpack.config.js): Top level webpack config. Includes support for legacy and main build.
--   [`bin/webpack-configs.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-configs.js): Code for generating each build config. This most closely resembles a classic webpack config - if you're looking for something, start here.
--   [`bin/webpack-entries.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-entries.js): Code for generating [webpack `entry` definitions](https://webpack.js.org/concepts/entry-points/) and mapping source files to entry points. If you're adding a new block or module to the build, start here.
--   [`bin/webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-helpers.js): Includes utils to load external code at run time, e.g. some dependencies from Woo and WordPress core.
+- [`webpack.config.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/webpack.config.js): Top level webpack config. Includes support for legacy and main build.
+- [`bin/webpack-configs.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-configs.js): Code for generating each build config. This most closely resembles a classic webpack config - if you're looking for something, start here.
+- [`bin/webpack-entries.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-entries.js): Code for generating [webpack `entry` definitions](https://webpack.js.org/concepts/entry-points/) and mapping source files to entry points. If you're adding a new block or module to the build, start here.
+- [`bin/webpack-helpers.js`](https://github.com/woocommerce/woocommerce-gutenberg-products-block/blob/trunk/bin/webpack-helpers.js): Includes utils to load external code at run time, e.g. some dependencies from Woo and WordPress core.
 
-## <!-- FEEDBACK -->
+<!-- FEEDBACK -->
+---
 
 [We're hiring!](https://woocommerce.com/careers/) Come work with us!
 
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/contributors/js-build-system.md)
-
 <!-- /FEEDBACK -->
+
diff --git a/docs/extensibility/checkout-flow-and-events.md b/docs/extensibility/checkout-flow-and-events.md
index ec967779658..9197501365d 100644
--- a/docs/extensibility/checkout-flow-and-events.md
+++ b/docs/extensibility/checkout-flow-and-events.md
@@ -19,7 +19,6 @@ This document gives an overview of the flow for the checkout in the WooCommerce
     - [`onShippingRateFail`](#onshippingratefail)
     - [`onShippingRateSelectSuccess`](#onshippingrateselectsuccess)
     - [`onShippingRateSelectFail`](#onshippingrateselectfail)
-- [](#)
 
 The architecture of the Checkout Block is derived from the following principles:
 
@@ -166,7 +165,7 @@ const MyComponent = ( { onCheckoutValidationBeforeProcessing } ) => {
 This internal hook contains a collection of API interfaces for event emitter related usage. It can be used by simply adding this to a component:
 
 ```jsx
-import { useEmitResponse } from '@woocommerce/base-context';
+import { useEmitResponse } from '@woocommerce/base-context/hooks';
 
 const Component = () => {
 	const {
@@ -474,10 +473,11 @@ This event emitter is fired when a shipping rate selection is not being persiste
 
 This event emitter doesn't care about any registered observer response and will simply execute all registered observers passing them the current error status in the context.
 
-## <!-- FEEDBACK -->
+<!-- FEEDBACK -->
+---
 
 [We're hiring!](https://woocommerce.com/careers/) Come work with us!
 
 🐞 Found a mistake, or have a suggestion? [Leave feedback about this document here.](https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues/new?assignees=&labels=type%3A+documentation&template=--doc-feedback.md&title=Feedback%20on%20./docs/extensibility/checkout-flow-and-events.md)
-
 <!-- /FEEDBACK -->
+
diff --git a/src/AssetsController.php b/src/AssetsController.php
index 596603e2fe3..35fedcaa79d 100644
--- a/src/AssetsController.php
+++ b/src/AssetsController.php
@@ -58,15 +58,14 @@ public function register_assets() {
 		$this->api->register_script( 'wc-blocks', $this->api->get_block_asset_build_path( 'wc-blocks' ), [ 'wc-blocks-vendors' ], false );
 		$this->api->register_script( 'wc-blocks-shared-context', 'build/wc-blocks-shared-context.js', [] );
 		$this->api->register_script( 'wc-blocks-shared-hocs', 'build/wc-blocks-shared-hocs.js', [], false );
-		$this->api->register_script( 'wc-blocks-base-context', 'build/wc-base-context.js', [] );
 
 		// The price package is shared externally so has no blocks prefix.
 		$this->api->register_script( 'wc-price-format', 'build/price-format.js', [], false );
 
-		// if ( Package::feature()->is_feature_plugin_build() ) {
+		if ( Package::feature()->is_feature_plugin_build() ) {
 			$this->api->register_script( 'wc-blocks-checkout-inner-blocks-frontend', 'build/checkout-inner-blocks-frontend.js', [] );
 			$this->api->register_script( 'wc-blocks-checkout', 'build/blocks-checkout.js', [] );
-		// }
+		}
 
 		wp_add_inline_script(
 			'wc-blocks-middleware',
diff --git a/tests/js/jest.config.json b/tests/js/jest.config.json
index 2b4a05adfcb..409b159f2a2 100644
--- a/tests/js/jest.config.json
+++ b/tests/js/jest.config.json
@@ -19,7 +19,7 @@
 		"@woocommerce/price-format": "packages/prices",
 		"@woocommerce/block-hocs(.*)$": "assets/js/hocs/$1",
 		"@woocommerce/base-components(.*)$": "assets/js/base/components/$1",
-		"@woocommerce/base-context": "assets/js/base/context",
+		"@woocommerce/base-context(.*)$": "assets/js/base/context/$1",
 		"@woocommerce/base-hocs(.*)$": "assets/js/base/hocs/$1",
 		"@woocommerce/base-hooks(.*)$": "assets/js/base/hooks/$1",
 		"@woocommerce/base-utils(.*)$": "assets/js/base/utils",
diff --git a/tsconfig.base.json b/tsconfig.base.json
index 3b076a3d0a9..a79f60e5154 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -30,6 +30,12 @@
 			"@woocommerce/atomic-utils": [ "assets/js/atomic/utils" ],
 			"@woocommerce/base-components/*": [ "assets/js/base/components/*" ],
 			"@woocommerce/base-context": [ "assets/js/base/context" ],
+			"@woocommerce/base-context/hooks": [
+				"assets/js/base/context/hooks"
+			],
+			"@woocommerce/base-context/components": [
+				"assets/js/base/context/components"
+			],
 			"@woocommerce/base-hocs/*": [ "assets/js/base/hocs/*" ],
 			"@woocommerce/base-hooks": [ "assets/js/base/hooks" ],
 			"@woocommerce/base-utils": [ "assets/js/base/utils" ],

From c28ad41a0d57dfe01d1302d170c7a88cdf62f6d0 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 21 Mar 2022 16:14:53 +0000
Subject: [PATCH 15/29] Duplicate inner blocks to avoid conflicts with context

---
 .../cart-checkout/inner-blocks/frontend.tsx   | 10 ---
 .../cart-checkout/inner-blocks/index.tsx      | 11 ---
 .../inner-blocks/register-components.ts       | 85 -------------------
 assets/js/blocks/cart/edit.js                 |  1 +
 assets/js/blocks/cart/frontend.js             |  1 +
 .../block.json                                |  7 +-
 .../cart-order-summary-coupon-form}/block.tsx |  0
 .../cart-order-summary-coupon-form}/edit.tsx  |  0
 .../frontend.tsx                              |  0
 .../cart-order-summary-coupon-form}/index.tsx |  0
 .../cart-order-summary-discount}/block.json   |  7 +-
 .../cart-order-summary-discount}/block.tsx    |  5 +-
 .../cart-order-summary-discount}/edit.tsx     |  0
 .../cart-order-summary-discount}/frontend.tsx |  0
 .../cart-order-summary-discount}/index.tsx    |  0
 .../cart-order-summary-fee}/block.json        |  7 +-
 .../cart-order-summary-fee}/block.tsx         |  0
 .../cart-order-summary-fee}/edit.tsx          |  0
 .../cart-order-summary-fee}/frontend.tsx      |  0
 .../cart-order-summary-fee}/index.tsx         |  0
 .../cart-order-summary-heading}/attributes.ts |  0
 .../cart-order-summary-heading}/block.json    |  2 +-
 .../cart-order-summary-heading}/block.tsx     |  0
 .../cart-order-summary-heading}/edit.tsx      |  0
 .../cart-order-summary-heading}/editor.scss   |  2 +-
 .../cart-order-summary-heading}/frontend.tsx  |  0
 .../cart-order-summary-heading}/index.tsx     |  0
 .../attributes.tsx                            |  0
 .../cart-order-summary-shipping}/block.json   |  7 +-
 .../cart-order-summary-shipping}/block.tsx    |  6 +-
 .../cart-order-summary-shipping}/edit.tsx     |  6 +-
 .../cart-order-summary-shipping}/frontend.tsx |  0
 .../cart-order-summary-shipping}/index.tsx    |  0
 .../cart-order-summary-subtotal}/block.json   |  7 +-
 .../cart-order-summary-subtotal}/block.tsx    |  0
 .../cart-order-summary-subtotal}/edit.tsx     |  0
 .../cart-order-summary-subtotal}/frontend.tsx |  0
 .../cart-order-summary-subtotal}/index.tsx    |  0
 .../cart-order-summary-taxes}/attributes.tsx  |  0
 .../cart-order-summary-taxes}/block.json      |  7 +-
 .../cart-order-summary-taxes}/block.tsx       |  0
 .../cart-order-summary-taxes}/edit.tsx        |  0
 .../cart-order-summary-taxes}/frontend.tsx    |  0
 .../cart-order-summary-taxes}/index.tsx       |  0
 .../inner-blocks/cart-order-summary/edit.tsx  | 14 +--
 .../cart/inner-blocks/component-metadata.ts   | 14 +++
 assets/js/blocks/cart/inner-blocks/index.tsx  |  7 ++
 .../cart/inner-blocks/register-components.ts  | 70 +++++++++++++++
 assets/js/blocks/checkout/edit.tsx            |  1 +
 assets/js/blocks/checkout/frontend.tsx        |  1 +
 assets/js/blocks/checkout/index.tsx           |  1 -
 .../checkout-order-summary-block/edit.tsx     | 14 +--
 .../block.json                                |  2 +-
 .../block.tsx                                 |  0
 .../edit.tsx                                  |  0
 .../frontend.tsx                              |  0
 .../index.tsx                                 |  0
 .../block.json                                | 29 +++++++
 .../block.tsx                                 | 26 ++++++
 .../edit.tsx                                  | 33 +++++++
 .../frontend.tsx                              |  6 ++
 .../index.tsx                                 | 24 ++++++
 .../block.json                                | 29 +++++++
 .../checkout-order-summary-discount/block.tsx | 50 +++++++++++
 .../checkout-order-summary-discount/edit.tsx  | 30 +++++++
 .../frontend.tsx                              |  6 ++
 .../checkout-order-summary-discount/index.tsx | 25 ++++++
 .../checkout-order-summary-fee/block.json     | 29 +++++++
 .../checkout-order-summary-fee/block.tsx      | 21 +++++
 .../checkout-order-summary-fee/edit.tsx       | 30 +++++++
 .../checkout-order-summary-fee/frontend.tsx   |  6 ++
 .../checkout-order-summary-fee/index.tsx      | 25 ++++++
 .../attributes.tsx                            | 14 +++
 .../block.json                                | 25 ++++++
 .../checkout-order-summary-shipping/block.tsx | 28 ++++++
 .../checkout-order-summary-shipping/edit.tsx  | 38 +++++++++
 .../frontend.tsx                              | 12 +++
 .../checkout-order-summary-shipping/index.tsx | 27 ++++++
 .../block.json                                | 29 +++++++
 .../checkout-order-summary-subtotal/block.tsx | 21 +++++
 .../checkout-order-summary-subtotal/edit.tsx  | 30 +++++++
 .../frontend.tsx                              |  6 ++
 .../checkout-order-summary-subtotal/index.tsx | 25 ++++++
 .../attributes.tsx                            | 18 ++++
 .../checkout-order-summary-taxes/block.json   | 29 +++++++
 .../checkout-order-summary-taxes/block.tsx    | 40 +++++++++
 .../checkout-order-summary-taxes/edit.tsx     | 76 +++++++++++++++++
 .../checkout-order-summary-taxes/frontend.tsx | 12 +++
 .../checkout-order-summary-taxes/index.tsx    | 27 ++++++
 .../inner-blocks/component-metadata.ts        | 14 +++
 .../js/blocks/checkout/inner-blocks/index.tsx |  7 ++
 .../inner-blocks/register-components.ts       | 70 +++++++++++++++
 bin/webpack-entries.js                        |  3 -
 package.json                                  |  2 -
 src/AssetsController.php                      |  1 -
 src/BlockTypes/Cart.php                       |  2 +-
 src/BlockTypes/Checkout.php                   |  2 +-
 97 files changed, 1047 insertions(+), 175 deletions(-)
 delete mode 100644 assets/js/blocks/cart-checkout/inner-blocks/frontend.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/inner-blocks/index.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/inner-blocks/register-components.ts
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-coupon-form => cart/inner-blocks/cart-order-summary-coupon-form}/block.json (74%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-coupon-form => cart/inner-blocks/cart-order-summary-coupon-form}/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-coupon-form => cart/inner-blocks/cart-order-summary-coupon-form}/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-cart-items => cart/inner-blocks/cart-order-summary-coupon-form}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-coupon-form => cart/inner-blocks/cart-order-summary-coupon-form}/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-discount => cart/inner-blocks/cart-order-summary-discount}/block.json (74%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-discount => cart/inner-blocks/cart-order-summary-discount}/block.tsx (88%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-cart-items => cart/inner-blocks/cart-order-summary-discount}/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-coupon-form => cart/inner-blocks/cart-order-summary-discount}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-discount => cart/inner-blocks/cart-order-summary-discount}/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-fee => cart/inner-blocks/cart-order-summary-fee}/block.json (74%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-fee => cart/inner-blocks/cart-order-summary-fee}/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-discount => cart/inner-blocks/cart-order-summary-fee}/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-discount => cart/inner-blocks/cart-order-summary-fee}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-fee => cart/inner-blocks/cart-order-summary-fee}/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-heading => cart/inner-blocks/cart-order-summary-heading}/attributes.ts (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-heading => cart/inner-blocks/cart-order-summary-heading}/block.json (90%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-heading => cart/inner-blocks/cart-order-summary-heading}/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-heading => cart/inner-blocks/cart-order-summary-heading}/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-heading => cart/inner-blocks/cart-order-summary-heading}/editor.scss (63%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-heading => cart/inner-blocks/cart-order-summary-heading}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-heading => cart/inner-blocks/cart-order-summary-heading}/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-shipping => cart/inner-blocks/cart-order-summary-shipping}/attributes.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-shipping => cart/inner-blocks/cart-order-summary-shipping}/block.json (71%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-shipping => cart/inner-blocks/cart-order-summary-shipping}/block.tsx (78%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-shipping => cart/inner-blocks/cart-order-summary-shipping}/edit.tsx (89%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-shipping => cart/inner-blocks/cart-order-summary-shipping}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-shipping => cart/inner-blocks/cart-order-summary-shipping}/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-subtotal => cart/inner-blocks/cart-order-summary-subtotal}/block.json (74%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-subtotal => cart/inner-blocks/cart-order-summary-subtotal}/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-fee => cart/inner-blocks/cart-order-summary-subtotal}/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-fee => cart/inner-blocks/cart-order-summary-subtotal}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-subtotal => cart/inner-blocks/cart-order-summary-subtotal}/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-taxes => cart/inner-blocks/cart-order-summary-taxes}/attributes.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-taxes => cart/inner-blocks/cart-order-summary-taxes}/block.json (74%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-taxes => cart/inner-blocks/cart-order-summary-taxes}/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-taxes => cart/inner-blocks/cart-order-summary-taxes}/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-taxes => cart/inner-blocks/cart-order-summary-taxes}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-taxes => cart/inner-blocks/cart-order-summary-taxes}/index.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-cart-items => checkout/inner-blocks/checkout-order-summary-cart-items}/block.json (88%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-cart-items => checkout/inner-blocks/checkout-order-summary-cart-items}/block.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-subtotal => checkout/inner-blocks/checkout-order-summary-cart-items}/edit.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-subtotal => checkout/inner-blocks/checkout-order-summary-cart-items}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/inner-blocks/order-summary-cart-items => checkout/inner-blocks/checkout-order-summary-cart-items}/index.tsx (100%)
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.json
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/edit.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/frontend.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/index.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.json
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/edit.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/frontend.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/index.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.json
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/edit.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/frontend.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/index.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/attributes.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.json
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/edit.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/frontend.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.json
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/edit.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/frontend.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/index.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/attributes.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.json
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/frontend.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/index.tsx

diff --git a/assets/js/blocks/cart-checkout/inner-blocks/frontend.tsx b/assets/js/blocks/cart-checkout/inner-blocks/frontend.tsx
deleted file mode 100644
index 36d557df577..00000000000
--- a/assets/js/blocks/cart-checkout/inner-blocks/frontend.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Frontend entry point for all cart/checkout inner blocks. Dependency of cart/checkout frontend assets.
- */
-
-/**
- * Internal dependencies
- */
-import './register-components';
-import '../../cart/inner-blocks/register-components';
-import '../../checkout/inner-blocks/register-components';
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/index.tsx b/assets/js/blocks/cart-checkout/inner-blocks/index.tsx
deleted file mode 100644
index 7f39e31f55a..00000000000
--- a/assets/js/blocks/cart-checkout/inner-blocks/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Internal dependencies
- */
-import './order-summary-subtotal';
-import './order-summary-fee';
-import './order-summary-discount';
-import './order-summary-shipping';
-import './order-summary-coupon-form';
-import './order-summary-taxes';
-import './order-summary-heading';
-import './order-summary-cart-items';
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/register-components.ts b/assets/js/blocks/cart-checkout/inner-blocks/register-components.ts
deleted file mode 100644
index 5215c02c87e..00000000000
--- a/assets/js/blocks/cart-checkout/inner-blocks/register-components.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * External dependencies
- */
-import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
-import { lazy } from '@wordpress/element';
-
-registerCheckoutBlock( {
-	metadata: require( './order-summary-subtotal/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "checkout-blocks/order-summary-subtotal" */
-			'./order-summary-subtotal/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './order-summary-fee/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "checkout-blocks/order-summary-fee" */
-			'./order-summary-fee/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './order-summary-discount/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "checkout-blocks/order-summary-discount" */
-			'./order-summary-discount/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './order-summary-shipping/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "checkout-blocks/order-summary-shipping" */
-			'./order-summary-shipping/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './order-summary-coupon-form/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "checkout-blocks/order-summary-coupon-form" */
-			'./order-summary-coupon-form/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './order-summary-taxes/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "checkout-blocks/order-summary-taxes" */
-			'./order-summary-taxes/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './order-summary-heading/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "checkout-blocks/order-summary-heading" */
-			'./order-summary-heading/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: require( './order-summary-cart-items/block.json' ),
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "checkout-blocks/order-summary-cart-items" */
-			'./order-summary-cart-items/frontend'
-		)
-	),
-} );
diff --git a/assets/js/blocks/cart/edit.js b/assets/js/blocks/cart/edit.js
index 105da9fe998..0e74e7ef108 100644
--- a/assets/js/blocks/cart/edit.js
+++ b/assets/js/blocks/cart/edit.js
@@ -29,6 +29,7 @@ import { Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import './inner-blocks';
 import './editor.scss';
 import {
 	addClassToBody,
diff --git a/assets/js/blocks/cart/frontend.js b/assets/js/blocks/cart/frontend.js
index 79a900b435d..d81248b99ef 100644
--- a/assets/js/blocks/cart/frontend.js
+++ b/assets/js/blocks/cart/frontend.js
@@ -11,6 +11,7 @@ import { renderParentBlock } from '@woocommerce/atomic-utils';
 /**
  * Internal dependencies
  */
+import './inner-blocks/register-components';
 import Block from './block';
 import { blockName, blockAttributes } from './attributes';
 
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.json
similarity index 74%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.json
index c35980de02b..96a928367cd 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.json
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "woocommerce/order-summary-coupon-form-block",
+	"name": "woocommerce/cart-order-summary-coupon-form-block",
 	"version": "1.0.0",
 	"title": "Coupon Form",
 	"description": "Shows the apply coupon form.",
@@ -23,10 +23,7 @@
 			}
 		}
 	},
-	"parent": [
-		"woocommerce/cart-order-summary-block",
-		"woocommerce/checkout-order-summary-block"
-	],
+	"parent": [ "woocommerce/cart-order-summary-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.json
similarity index 74%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.json
index aa9bf78b430..6e627a59a05 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.json
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "woocommerce/order-summary-discount-block",
+	"name": "woocommerce/cart-order-summary-discount-block",
 	"version": "1.0.0",
 	"title": "Discount",
 	"description": "Shows the cart discount row.",
@@ -23,10 +23,7 @@
 			}
 		}
 	},
-	"parent": [
-		"woocommerce/cart-order-summary-block",
-		"woocommerce/checkout-order-summary-block"
-	],
+	"parent": [ "woocommerce/cart-order-summary-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
similarity index 88%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
index 245288458a6..10beb031914 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
@@ -8,18 +8,15 @@ import {
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
 import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
-import { useCheckoutContext } from '@woocommerce/base-context';
 
 const DiscountSlotFill = (): JSX.Element => {
-	const { isCart } = useCheckoutContext();
-
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
 	// eslint-disable-next-line no-unused-vars
 	const { extensions, receiveCart, ...cart } = useStoreCart();
 	const discountsSlotFillProps = {
 		extensions,
 		cart,
-		context: isCart ? 'woocommerce/cart' : 'woocommerce/checkout',
+		context: 'woocommerce/cart',
 	};
 
 	return <ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />;
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-coupon-form/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.json
similarity index 74%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.json
index b6c4dbf33d0..fc39dce4981 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.json
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "woocommerce/order-summary-fee-block",
+	"name": "woocommerce/cart-order-summary-fee-block",
 	"version": "1.0.0",
 	"title": "Fees",
 	"description": "Shows the cart fee row.",
@@ -23,10 +23,7 @@
 			}
 		}
 	},
-	"parent": [
-		"woocommerce/cart-order-summary-block",
-		"woocommerce/checkout-order-summary-block"
-	],
+	"parent": [ "woocommerce/cart-order-summary-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-discount/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/attributes.ts b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/attributes.ts
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/attributes.ts
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/attributes.ts
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.json
similarity index 90%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.json
index 1b71ae94392..6026baba422 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.json
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "woocommerce/order-summary-heading-block",
+	"name": "woocommerce/cart-order-summary-heading-block",
 	"version": "1.0.0",
 	"title": "Heading",
 	"description": "Shows the heading row.",
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/editor.scss b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/editor.scss
similarity index 63%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/editor.scss
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/editor.scss
index 187ede2c7ca..85a61a1027c 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/editor.scss
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/editor.scss
@@ -1,4 +1,4 @@
-.wp-block-woocommerce-order-summary-heading-block {
+.wp-block-woocommerce-cart-order-summary-heading-block {
 	textarea {
 		text-align: right;
 		text-transform: uppercase;
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-heading/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/attributes.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/attributes.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.json
similarity index 71%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.json
index e65f078e372..39e512f84d1 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.json
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "woocommerce/order-summary-shipping-block",
+	"name": "woocommerce/cart-order-summary-shipping-block",
 	"version": "1.0.0",
 	"title": "Shipping",
 	"description": "Shows the cart shipping row.",
@@ -19,10 +19,7 @@
 			}
 		}
 	},
-	"parent": [
-		"woocommerce/cart-order-summary-block",
-		"woocommerce/checkout-order-summary-block"
-	],
+	"parent": [ "woocommerce/cart-order-summary-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
similarity index 78%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
index 4485ed31b0d..7a39ce7a478 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
@@ -4,7 +4,6 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
-import { useCheckoutContext } from '@woocommerce/base-context';
 
 const Block = ( {
 	className,
@@ -14,7 +13,6 @@ const Block = ( {
 	isShippingCalculatorEnabled: boolean;
 } ): JSX.Element | null => {
 	const { cartTotals, cartNeedsShipping } = useStoreCart();
-	const { isCart } = useCheckoutContext();
 
 	if ( ! cartNeedsShipping ) {
 		return null;
@@ -25,8 +23,8 @@ const Block = ( {
 	return (
 		<TotalsShipping
 			className={ className }
-			showCalculator={ isShippingCalculatorEnabled && isCart }
-			showRateSelector={ isCart }
+			showCalculator={ isShippingCalculatorEnabled }
+			showRateSelector={ true }
 			values={ cartTotals }
 			currency={ totalsCurrency }
 		/>
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx
similarity index 89%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx
index 92b86457926..c541b07611b 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx
@@ -6,7 +6,6 @@ import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
 import { PanelBody, ToggleControl } from '@wordpress/components';
 import { getSetting } from '@woocommerce/settings';
 import Noninteractive from '@woocommerce/base-components/noninteractive';
-import { useCheckoutContext } from '@woocommerce/base-context';
 
 /**
  * Internal dependencies
@@ -28,16 +27,13 @@ export const Edit = ( {
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
 	const { isShippingCalculatorEnabled, className } = attributes;
-	const { isCart, ...rest } = useCheckoutContext();
 	const shippingEnabled = getSetting( 'shippingEnabled', true );
 	const blockProps = useBlockProps();
 
-	// @todo isCart broken in editor due to the context
-
 	return (
 		<div { ...blockProps }>
 			<InspectorControls>
-				{ shippingEnabled && isCart && (
+				{ !! shippingEnabled && (
 					<PanelBody
 						title={ __(
 							'Shipping rates',
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-shipping/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.json
similarity index 74%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.json
index 095fb118196..75e0fb44461 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.json
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "woocommerce/order-summary-subtotal-block",
+	"name": "woocommerce/cart-order-summary-subtotal-block",
 	"version": "1.0.0",
 	"title": "Subtotal",
 	"description": "Shows the cart subtotal row.",
@@ -23,10 +23,7 @@
 			}
 		}
 	},
-	"parent": [
-		"woocommerce/cart-order-summary-block",
-		"woocommerce/checkout-order-summary-block"
-	],
+	"parent": [ "woocommerce/cart-order-summary-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-fee/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/index.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/attributes.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/attributes.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/attributes.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/attributes.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.json
similarity index 74%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.json
index ad30a5ecf97..8a485d9f22d 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.json
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "woocommerce/order-summary-taxes-block",
+	"name": "woocommerce/cart-order-summary-taxes-block",
 	"version": "1.0.0",
 	"title": "Taxes",
 	"description": "Shows the cart taxes row.",
@@ -23,10 +23,7 @@
 			}
 		}
 	},
-	"parent": [
-		"woocommerce/cart-order-summary-block",
-		"woocommerce/checkout-order-summary-block"
-	],
+	"parent": [ "woocommerce/cart-order-summary-block" ],
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2
 }
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/block.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-taxes/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/index.tsx
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
index dbbd1296c75..8fcc5605e94 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
@@ -27,18 +27,18 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 	);
 	const defaultTemplate = [
 		[
-			'woocommerce/order-summary-heading-block',
+			'woocommerce/cart-order-summary-heading-block',
 			{
 				content: __( 'Cart totals', 'woo-gutenberg-products-block' ),
 			},
 			[],
 		],
-		[ 'woocommerce/order-summary-subtotal-block', {}, [] ],
-		[ 'woocommerce/order-summary-fee-block', {}, [] ],
-		[ 'woocommerce/order-summary-discount-block', {}, [] ],
-		[ 'woocommerce/order-summary-coupon-form-block', {}, [] ],
-		[ 'woocommerce/order-summary-shipping-block', {}, [] ],
-		[ 'woocommerce/order-summary-taxes-block', {}, [] ],
+		[ 'woocommerce/cart-order-summary-subtotal-block', {}, [] ],
+		[ 'woocommerce/cart-order-summary-fee-block', {}, [] ],
+		[ 'woocommerce/cart-order-summary-discount-block', {}, [] ],
+		[ 'woocommerce/cart-order-summary-coupon-form-block', {}, [] ],
+		[ 'woocommerce/cart-order-summary-shipping-block', {}, [] ],
+		[ 'woocommerce/cart-order-summary-taxes-block', {}, [] ],
 	] as TemplateArray;
 
 	useForcedLayout( {
diff --git a/assets/js/blocks/cart/inner-blocks/component-metadata.ts b/assets/js/blocks/cart/inner-blocks/component-metadata.ts
index e3373a713d4..eba5ca1ccd4 100644
--- a/assets/js/blocks/cart/inner-blocks/component-metadata.ts
+++ b/assets/js/blocks/cart/inner-blocks/component-metadata.ts
@@ -10,6 +10,13 @@ import CART_TOTALS from './cart-totals-block/block.json';
 import PROCEED_TO_CHECKOUT from './proceed-to-checkout-block/block.json';
 import CART_ACCEPTED_PAYMENT_METHODS from './cart-accepted-payment-methods-block/block.json';
 import CART_ORDER_SUMMARY from './cart-order-summary/block.json';
+import CART_ORDER_SUMMARY_SUBTOTAL from './cart-order-summary-subtotal/block.json';
+import CART_ORDER_SUMMARY_FEE from './cart-order-summary-fee/block.json';
+import CART_ORDER_SUMMARY_DISCOUNT from './cart-order-summary-discount/block.json';
+import CART_ORDER_SUMMARY_SHIPPING from './cart-order-summary-shipping/block.json';
+import CART_ORDER_SUMMARY_COUPON_FORM from './cart-order-summary-coupon-form/block.json';
+import CART_ORDER_SUMMARY_TAXES from './cart-order-summary-taxes/block.json';
+import CART_ORDER_SUMMARY_HEADING from './cart-order-summary-heading/block.json';
 
 export default {
 	FILLED_CART,
@@ -21,4 +28,11 @@ export default {
 	PROCEED_TO_CHECKOUT,
 	CART_ACCEPTED_PAYMENT_METHODS,
 	CART_ORDER_SUMMARY,
+	CART_ORDER_SUMMARY_SUBTOTAL,
+	CART_ORDER_SUMMARY_FEE,
+	CART_ORDER_SUMMARY_DISCOUNT,
+	CART_ORDER_SUMMARY_SHIPPING,
+	CART_ORDER_SUMMARY_COUPON_FORM,
+	CART_ORDER_SUMMARY_TAXES,
+	CART_ORDER_SUMMARY_HEADING,
 };
diff --git a/assets/js/blocks/cart/inner-blocks/index.tsx b/assets/js/blocks/cart/inner-blocks/index.tsx
index 66b14c6b2d8..a318d5525f0 100644
--- a/assets/js/blocks/cart/inner-blocks/index.tsx
+++ b/assets/js/blocks/cart/inner-blocks/index.tsx
@@ -10,3 +10,10 @@ import './proceed-to-checkout-block';
 import './empty-cart-block';
 import './cart-accepted-payment-methods-block';
 import './cart-order-summary';
+import './cart-order-summary-subtotal';
+import './cart-order-summary-fee';
+import './cart-order-summary-discount';
+import './cart-order-summary-shipping';
+import './cart-order-summary-coupon-form';
+import './cart-order-summary-taxes';
+import './cart-order-summary-heading';
diff --git a/assets/js/blocks/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
index 0df2d4e6a6c..8870925a820 100644
--- a/assets/js/blocks/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -113,3 +113,73 @@ registerCheckoutBlock( {
 		)
 	),
 } );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY_SUBTOTAL,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary-subtotal" */
+			'./cart-order-summary-subtotal/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY_FEE,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary-fee" */
+			'./cart-order-summary-fee/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY_DISCOUNT,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary-discount" */
+			'./cart-order-summary-discount/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY_SHIPPING,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary-shipping" */
+			'./cart-order-summary-shipping/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
+			'./cart-order-summary-coupon-form/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY_TAXES,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary-taxes" */
+			'./cart-order-summary-taxes/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY_HEADING,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/order-summary-heading" */
+			'./cart-order-summary-heading/frontend'
+		)
+	),
+} );
diff --git a/assets/js/blocks/checkout/edit.tsx b/assets/js/blocks/checkout/edit.tsx
index f4b1cd1ca0a..0a6bd2dc7db 100644
--- a/assets/js/blocks/checkout/edit.tsx
+++ b/assets/js/blocks/checkout/edit.tsx
@@ -34,6 +34,7 @@ import type { TemplateArray } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
+import './inner-blocks';
 import './styles/editor.scss';
 import {
 	addClassToBody,
diff --git a/assets/js/blocks/checkout/frontend.tsx b/assets/js/blocks/checkout/frontend.tsx
index 722b08cdf9a..84c302a1116 100644
--- a/assets/js/blocks/checkout/frontend.tsx
+++ b/assets/js/blocks/checkout/frontend.tsx
@@ -14,6 +14,7 @@ import { renderParentBlock } from '@woocommerce/atomic-utils';
 /**
  * Internal dependencies
  */
+import './inner-blocks/register-components';
 import Block from './block';
 import { blockName, blockAttributes } from './attributes';
 import metadata from './block.json';
diff --git a/assets/js/blocks/checkout/index.tsx b/assets/js/blocks/checkout/index.tsx
index 3969e7b42ca..5d4a917951e 100644
--- a/assets/js/blocks/checkout/index.tsx
+++ b/assets/js/blocks/checkout/index.tsx
@@ -13,7 +13,6 @@ import { BlockInstance, createBlock } from '@wordpress/blocks';
 import { Edit, Save } from './edit';
 import { blockAttributes, deprecatedAttributes } from './attributes';
 import './inner-blocks';
-import '../cart-checkout/inner-blocks';
 import metadata from './block.json';
 
 const settings = {
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
index 285b898234d..b78b6d6ab77 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
@@ -25,13 +25,13 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 		innerBlockAreas.CHECKOUT_ORDER_SUMMARY
 	);
 	const defaultTemplate = [
-		[ 'woocommerce/order-summary-cart-items-block', {}, [] ],
-		[ 'woocommerce/order-summary-subtotal-block', {}, [] ],
-		[ 'woocommerce/order-summary-fee-block', {}, [] ],
-		[ 'woocommerce/order-summary-discount-block', {}, [] ],
-		[ 'woocommerce/order-summary-coupon-form-block', {}, [] ],
-		[ 'woocommerce/order-summary-shipping-block', {}, [] ],
-		[ 'woocommerce/order-summary-taxes-block', {}, [] ],
+		[ 'woocommerce/checkout-order-summary-cart-items-block', {}, [] ],
+		[ 'woocommerce/checkout-order-summary-subtotal-block', {}, [] ],
+		[ 'woocommerce/checkout-order-summary-fee-block', {}, [] ],
+		[ 'woocommerce/checkout-order-summary-discount-block', {}, [] ],
+		[ 'woocommerce/checkout-order-summary-coupon-form-block', {}, [] ],
+		[ 'woocommerce/checkout-order-summary-shipping-block', {}, [] ],
+		[ 'woocommerce/checkout-order-summary-taxes-block', {}, [] ],
 	] as TemplateArray;
 
 	useForcedLayout( {
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.json b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.json
similarity index 88%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.json
rename to assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.json
index 6323f92485b..9a96222cf32 100644
--- a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.json
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.json
@@ -1,5 +1,5 @@
 {
-	"name": "woocommerce/order-summary-cart-items-block",
+	"name": "woocommerce/checkout-order-summary-cart-items-block",
 	"version": "1.0.0",
 	"title": "Cart Items",
 	"description": "Shows cart items.",
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/block.tsx
rename to assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/edit.tsx
rename to assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-subtotal/frontend.tsx
rename to assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/frontend.tsx
diff --git a/assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/index.tsx
similarity index 100%
rename from assets/js/blocks/cart-checkout/inner-blocks/order-summary-cart-items/index.tsx
rename to assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/index.tsx
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.json b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.json
new file mode 100644
index 00000000000..e02fd415ed3
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/checkout-order-summary-coupon-form-block",
+	"version": "1.0.0",
+	"title": "Coupon Form",
+	"description": "Shows the apply coupon form.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": false,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/checkout-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
new file mode 100644
index 00000000000..1579bf61de1
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
@@ -0,0 +1,26 @@
+/**
+ * External dependencies
+ */
+import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
+import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
+import { getSetting } from '@woocommerce/settings';
+
+const Block = ( { className }: { className: string } ): JSX.Element | null => {
+	const couponsEnabled = getSetting( 'couponsEnabled', true );
+
+	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons();
+
+	if ( ! couponsEnabled ) {
+		return null;
+	}
+
+	return (
+		<TotalsCoupon
+			className={ className }
+			onSubmit={ applyCoupon }
+			isLoading={ isApplyingCoupon }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/edit.tsx
@@ -0,0 +1,33 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/index.tsx
new file mode 100644
index 00000000000..5badfa89545
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/index.tsx
@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { Icon, tag } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ tag }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.json b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.json
new file mode 100644
index 00000000000..6fb04a993d8
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/checkout-order-summary-discount-block",
+	"version": "1.0.0",
+	"title": "Discount",
+	"description": "Shows the cart discount row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/checkout-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
new file mode 100644
index 00000000000..cbc2ee54b9e
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import { TotalsDiscount } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import {
+	useStoreCartCoupons,
+	useStoreCart,
+} from '@woocommerce/base-context/hooks';
+import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+
+const DiscountSlotFill = (): JSX.Element => {
+	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
+	// eslint-disable-next-line no-unused-vars
+	const { extensions, receiveCart, ...cart } = useStoreCart();
+	const discountsSlotFillProps = {
+		extensions,
+		cart,
+		context: 'woocommerce/checkout',
+	};
+
+	return <ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />;
+};
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartTotals } = useStoreCart();
+
+	const {
+		removeCoupon,
+		isRemovingCoupon,
+		appliedCoupons,
+	} = useStoreCartCoupons();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<>
+			<TotalsDiscount
+				className={ className }
+				cartCoupons={ appliedCoupons }
+				currency={ totalsCurrency }
+				isRemovingCoupon={ isRemovingCoupon }
+				removeCoupon={ removeCoupon }
+				values={ cartTotals }
+			/>
+			<DiscountSlotFill />
+		</>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/edit.tsx
new file mode 100644
index 00000000000..5b589f4f095
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/edit.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block className={ className } />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.json b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.json
new file mode 100644
index 00000000000..7fb188d0687
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/checkout-order-summary-fee-block",
+	"version": "1.0.0",
+	"title": "Fees",
+	"description": "Shows the cart fee row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/checkout-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
new file mode 100644
index 00000000000..0b8b68197a1
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { TotalsFees } from '@woocommerce/blocks-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartFees, cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsFees
+			className={ className }
+			currency={ totalsCurrency }
+			cartFees={ cartFees }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/edit.tsx
new file mode 100644
index 00000000000..5b589f4f095
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/edit.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block className={ className } />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/attributes.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/attributes.tsx
new file mode 100644
index 00000000000..23bd5fc30b7
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/attributes.tsx
@@ -0,0 +1,14 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+export default {
+	lock: {
+		type: 'object',
+		default: {
+			move: true,
+			remove: true,
+		},
+	},
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.json b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.json
new file mode 100644
index 00000000000..a75a133856c
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.json
@@ -0,0 +1,25 @@
+{
+	"name": "woocommerce/checkout-order-summary-shipping-block",
+	"version": "1.0.0",
+	"title": "Shipping",
+	"description": "Shows the cart shipping row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/checkout-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
new file mode 100644
index 00000000000..7841f8ec069
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+const Block = ( { className }: { className: string } ): JSX.Element | null => {
+	const { cartTotals, cartNeedsShipping } = useStoreCart();
+
+	if ( ! cartNeedsShipping ) {
+		return null;
+	}
+
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsShipping
+			className={ className }
+			showCalculator={ false }
+			showRateSelector={ false }
+			values={ cartTotals }
+			currency={ totalsCurrency }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/edit.tsx
new file mode 100644
index 00000000000..b66cf876cba
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/edit.tsx
@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+import Noninteractive from '@woocommerce/base-components/noninteractive';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+		lock: {
+			move: boolean;
+			remove: boolean;
+		};
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<Noninteractive>
+				<Block className={ className } />
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/frontend.tsx
new file mode 100644
index 00000000000..b6c773996b2
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/frontend.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx
new file mode 100644
index 00000000000..72010b2cccc
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import attributes from './attributes';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes,
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.json b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.json
new file mode 100644
index 00000000000..ae6fe56eed1
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/checkout-order-summary-subtotal-block",
+	"version": "1.0.0",
+	"title": "Subtotal",
+	"description": "Shows the cart subtotal row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/checkout-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
new file mode 100644
index 00000000000..bc4d50449f5
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { Subtotal } from '@woocommerce/blocks-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<Subtotal
+			className={ className }
+			currency={ totalsCurrency }
+			values={ cartTotals }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/edit.tsx
new file mode 100644
index 00000000000..5b589f4f095
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/edit.tsx
@@ -0,0 +1,30 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+}: {
+	attributes: {
+		className: string;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className } = attributes;
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<Block className={ className } />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/index.tsx
@@ -0,0 +1,25 @@
+/**
+ * External dependencies
+ */
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/attributes.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/attributes.tsx
new file mode 100644
index 00000000000..36d83faee28
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/attributes.tsx
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+import { getSetting } from '@woocommerce/settings';
+
+export default {
+	showRateAfterTaxName: {
+		type: 'boolean',
+		default: getSetting( 'displayCartPricesIncludingTax', false ),
+	},
+	lock: {
+		type: 'object',
+		default: {
+			remove: true,
+			move: false,
+		},
+	},
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.json b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.json
new file mode 100644
index 00000000000..f012b109b2a
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/checkout-order-summary-taxes-block",
+	"version": "1.0.0",
+	"title": "Taxes",
+	"description": "Shows the cart taxes row.",
+	"category": "woocommerce",
+	"supports": {
+		"align": false,
+		"html": false,
+		"multiple": false,
+		"reusable": false
+	},
+	"attributes": {
+		"className": {
+			"type": "string",
+			"default": ""
+		},
+		"lock": {
+			"type": "object",
+			"default": {
+				"remove": true,
+				"move": false
+			}
+		}
+	},
+	"parent": [ "woocommerce/checkout-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
new file mode 100644
index 00000000000..ef3917d9b82
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
@@ -0,0 +1,40 @@
+/**
+ * External dependencies
+ */
+import { TotalsTaxes } from '@woocommerce/blocks-checkout';
+import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
+import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { getSetting } from '@woocommerce/settings';
+
+const Block = ( {
+	className,
+	showRateAfterTaxName,
+}: {
+	className: string;
+	showRateAfterTaxName: boolean;
+} ): JSX.Element | null => {
+	const { cartTotals } = useStoreCart();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+	const displayCartPricesIncludingTax = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	);
+
+	if (
+		displayCartPricesIncludingTax ||
+		parseInt( cartTotals.total_tax, 10 ) <= 0
+	) {
+		return null;
+	}
+
+	return (
+		<TotalsTaxes
+			className={ className }
+			showRateAfterTaxName={ showRateAfterTaxName }
+			currency={ totalsCurrency }
+			values={ cartTotals }
+		/>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx
new file mode 100644
index 00000000000..d7b925202c9
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/edit.tsx
@@ -0,0 +1,76 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useBlockProps, InspectorControls } from '@wordpress/block-editor';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { getSetting } from '@woocommerce/settings';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export const Edit = ( {
+	attributes,
+	setAttributes,
+}: {
+	attributes: {
+		className: string;
+		showRateAfterTaxName: boolean;
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	const { className, showRateAfterTaxName } = attributes;
+	const blockProps = useBlockProps();
+	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
+	const displayItemizedTaxes = getSetting(
+		'displayItemizedTaxes',
+		false
+	) as boolean;
+	const displayCartPricesIncludingTax = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	) as boolean;
+	return (
+		<div { ...blockProps }>
+			<InspectorControls>
+				{ taxesEnabled &&
+					displayItemizedTaxes &&
+					! displayCartPricesIncludingTax && (
+						<PanelBody
+							title={ __(
+								'Taxes',
+								'woo-gutenberg-products-block'
+							) }
+						>
+							<ToggleControl
+								label={ __(
+									'Show rate after tax name',
+									'woo-gutenberg-products-block'
+								) }
+								help={ __(
+									'Show the percentage rate alongside each tax line in the summary.',
+									'woo-gutenberg-products-block'
+								) }
+								checked={ showRateAfterTaxName }
+								onChange={ () =>
+									setAttributes( {
+										showRateAfterTaxName: ! showRateAfterTaxName,
+									} )
+								}
+							/>
+						</PanelBody>
+					) }
+			</InspectorControls>
+			<Block
+				className={ className }
+				showRateAfterTaxName={ showRateAfterTaxName }
+			/>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/frontend.tsx
new file mode 100644
index 00000000000..b6c773996b2
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/frontend.tsx
@@ -0,0 +1,12 @@
+/**
+ * External dependencies
+ */
+import { withFilteredAttributes } from '@woocommerce/shared-hocs';
+
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+import attributes from './attributes';
+
+export default withFilteredAttributes( attributes )( Block );
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/index.tsx
new file mode 100644
index 00000000000..72010b2cccc
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/index.tsx
@@ -0,0 +1,27 @@
+/**
+ * External dependencies
+ */
+import { totals } from '@woocommerce/icons';
+import { Icon } from '@wordpress/icons';
+import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
+
+/**
+ * Internal dependencies
+ */
+import { Edit, Save } from './edit';
+import attributes from './attributes';
+import metadata from './block.json';
+
+registerFeaturePluginBlockType( metadata, {
+	icon: {
+		src: (
+			<Icon
+				icon={ totals }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+	attributes,
+	edit: Edit,
+	save: Save,
+} );
diff --git a/assets/js/blocks/checkout/inner-blocks/component-metadata.ts b/assets/js/blocks/checkout/inner-blocks/component-metadata.ts
index 0b2edcd9c42..c757b0d3b63 100644
--- a/assets/js/blocks/checkout/inner-blocks/component-metadata.ts
+++ b/assets/js/blocks/checkout/inner-blocks/component-metadata.ts
@@ -13,6 +13,13 @@ import CHECKOUT_SHIPPING_METHODS from './checkout-shipping-methods-block/block.j
 import CHECKOUT_TERMS from './checkout-terms-block/block.json';
 import CHECKOUT_TOTALS from './checkout-totals-block/block.json';
 import CHECKOUT_ORDER_SUMMARY from './checkout-order-summary-block/block.json';
+import CHECKOUT_ORDER_SUMMARY_SUBTOTAL from './checkout-order-summary-subtotal/block.json';
+import CHECKOUT_ORDER_SUMMARY_FEE from './checkout-order-summary-fee/block.json';
+import CHECKOUT_ORDER_SUMMARY_DISCOUNT from './checkout-order-summary-discount/block.json';
+import CHECKOUT_ORDER_SUMMARY_SHIPPING from './checkout-order-summary-shipping/block.json';
+import CHECKOUT_ORDER_SUMMARY_COUPON_FORM from './checkout-order-summary-coupon-form/block.json';
+import CHECKOUT_ORDER_SUMMARY_TAXES from './checkout-order-summary-taxes/block.json';
+import CHECKOUT_ORDER_SUMMARY_CART_ITEMS from './checkout-order-summary-cart-items/block.json';
 
 export default {
 	CHECKOUT_ACTIONS,
@@ -27,4 +34,11 @@ export default {
 	CHECKOUT_TERMS,
 	CHECKOUT_TOTALS,
 	CHECKOUT_ORDER_SUMMARY,
+	CHECKOUT_ORDER_SUMMARY_SUBTOTAL,
+	CHECKOUT_ORDER_SUMMARY_FEE,
+	CHECKOUT_ORDER_SUMMARY_DISCOUNT,
+	CHECKOUT_ORDER_SUMMARY_SHIPPING,
+	CHECKOUT_ORDER_SUMMARY_COUPON_FORM,
+	CHECKOUT_ORDER_SUMMARY_TAXES,
+	CHECKOUT_ORDER_SUMMARY_CART_ITEMS,
 };
diff --git a/assets/js/blocks/checkout/inner-blocks/index.tsx b/assets/js/blocks/checkout/inner-blocks/index.tsx
index 704dbb74e15..168d404a18b 100644
--- a/assets/js/blocks/checkout/inner-blocks/index.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/index.tsx
@@ -13,3 +13,10 @@ import './checkout-order-summary-block';
 import './checkout-payment-block';
 import './checkout-express-payment-block';
 import './checkout-shipping-methods-block';
+import './checkout-order-summary-subtotal';
+import './checkout-order-summary-fee';
+import './checkout-order-summary-discount';
+import './checkout-order-summary-shipping';
+import './checkout-order-summary-coupon-form';
+import './checkout-order-summary-taxes';
+import './checkout-order-summary-cart-items';
diff --git a/assets/js/blocks/checkout/inner-blocks/register-components.ts b/assets/js/blocks/checkout/inner-blocks/register-components.ts
index ca232371418..c605b2e2b55 100644
--- a/assets/js/blocks/checkout/inner-blocks/register-components.ts
+++ b/assets/js/blocks/checkout/inner-blocks/register-components.ts
@@ -122,3 +122,73 @@ registerCheckoutBlock( {
 		)
 	),
 } );
+
+registerCheckoutBlock( {
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY_SUBTOTAL,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-subtotal" */
+			'./checkout-order-summary-subtotal/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY_FEE,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-fee" */
+			'./checkout-order-summary-fee/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY_DISCOUNT,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-discount" */
+			'./checkout-order-summary-discount/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY_SHIPPING,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-shipping" */
+			'./checkout-order-summary-shipping/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY_COUPON_FORM,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-coupon-form" */
+			'./checkout-order-summary-coupon-form/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY_TAXES,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-taxes" */
+			'./checkout-order-summary-taxes/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY_CART_ITEMS,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary-cart-items" */
+			'./checkout-order-summary-cart-items/frontend'
+		)
+	),
+} );
diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js
index 23c54c24ed7..6cd67227231 100644
--- a/bin/webpack-entries.js
+++ b/bin/webpack-entries.js
@@ -42,9 +42,6 @@ const blocks = {
 	'active-filters': {},
 	cart: {},
 	checkout: {},
-	'checkout-inner-blocks': {
-		customDir: 'cart-checkout/inner-blocks',
-	},
 	'mini-cart': {
 		customDir: 'cart-checkout/mini-cart',
 		isExperimental: true,
diff --git a/package.json b/package.json
index d5870c5ad9c..72632ca5d93 100644
--- a/package.json
+++ b/package.json
@@ -20,8 +20,6 @@
 		"./assets/js/blocks/checkout/inner-blocks/register-components.ts",
 		"./assets/js/blocks/cart/inner-blocks/**/index.tsx",
 		"./assets/js/blocks/cart/inner-blocks/register-components.ts",
-		"./assets/js/blocks/cart-checkout/inner-blocks/**/index.tsx",
-		"./assets/js/blocks/cart-checkout/inner-blocks/register-components.ts",
 		"./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/**/index.tsx",
 		"./assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/register-components.ts"
 	],
diff --git a/src/AssetsController.php b/src/AssetsController.php
index 35fedcaa79d..fa06631abd2 100644
--- a/src/AssetsController.php
+++ b/src/AssetsController.php
@@ -63,7 +63,6 @@ public function register_assets() {
 		$this->api->register_script( 'wc-price-format', 'build/price-format.js', [], false );
 
 		if ( Package::feature()->is_feature_plugin_build() ) {
-			$this->api->register_script( 'wc-blocks-checkout-inner-blocks-frontend', 'build/checkout-inner-blocks-frontend.js', [] );
 			$this->api->register_script( 'wc-blocks-checkout', 'build/blocks-checkout.js', [] );
 		}
 
diff --git a/src/BlockTypes/Cart.php b/src/BlockTypes/Cart.php
index b4d2742fd7b..58892c7741a 100644
--- a/src/BlockTypes/Cart.php
+++ b/src/BlockTypes/Cart.php
@@ -44,7 +44,7 @@ protected function get_block_type_script( $key = null ) {
 		$script = [
 			'handle'       => 'wc-' . $this->block_name . '-block-frontend',
 			'path'         => $this->asset_api->get_block_asset_build_path( $this->block_name . '-frontend' ),
-			'dependencies' => [ 'wc-blocks-checkout-inner-blocks-frontend' ],
+			'dependencies' => [],
 		];
 		return $key ? $script[ $key ] : $script;
 	}
diff --git a/src/BlockTypes/Checkout.php b/src/BlockTypes/Checkout.php
index f403accd120..b5cc56d8f18 100644
--- a/src/BlockTypes/Checkout.php
+++ b/src/BlockTypes/Checkout.php
@@ -40,7 +40,7 @@ protected function get_block_type_script( $key = null ) {
 		$script = [
 			'handle'       => 'wc-' . $this->block_name . '-block-frontend',
 			'path'         => $this->asset_api->get_block_asset_build_path( $this->block_name . '-frontend' ),
-			'dependencies' => [ 'wc-blocks-checkout-inner-blocks-frontend' ],
+			'dependencies' => [],
 		];
 		return $key ? $script[ $key ] : $script;
 	}

From 6e012e37bf5263ad7ff72d255d519de80c1651b2 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 21 Mar 2022 16:16:41 +0000
Subject: [PATCH 16/29] Remove todo

---
 .../js/base/components/cart-checkout/order-summary/index.tsx   | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/assets/js/base/components/cart-checkout/order-summary/index.tsx b/assets/js/base/components/cart-checkout/order-summary/index.tsx
index 98e7710a9e2..d4c22c684cc 100644
--- a/assets/js/base/components/cart-checkout/order-summary/index.tsx
+++ b/assets/js/base/components/cart-checkout/order-summary/index.tsx
@@ -25,8 +25,7 @@ const OrderSummary = ( {
 	const { isLarge, hasContainerWidth } = useContainerWidthContext();
 
 	if ( ! hasContainerWidth ) {
-		// @todo broken in editor due to the context
-		//return null;
+		return null;
 	}
 
 	return (

From 23fe5e19606dbc180ab7890149cfd87224613510 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 21 Mar 2022 16:20:17 +0000
Subject: [PATCH 17/29] Rename block dir

---
 .../{cart-order-summary => cart-order-summary-block}/block.json   | 0
 .../{cart-order-summary => cart-order-summary-block}/edit.tsx     | 0
 .../{cart-order-summary => cart-order-summary-block}/frontend.tsx | 0
 .../{cart-order-summary => cart-order-summary-block}/index.tsx    | 0
 .../slotfills.tsx                                                 | 0
 5 files changed, 0 insertions(+), 0 deletions(-)
 rename assets/js/blocks/cart/inner-blocks/{cart-order-summary => cart-order-summary-block}/block.json (100%)
 rename assets/js/blocks/cart/inner-blocks/{cart-order-summary => cart-order-summary-block}/edit.tsx (100%)
 rename assets/js/blocks/cart/inner-blocks/{cart-order-summary => cart-order-summary-block}/frontend.tsx (100%)
 rename assets/js/blocks/cart/inner-blocks/{cart-order-summary => cart-order-summary-block}/index.tsx (100%)
 rename assets/js/blocks/cart/inner-blocks/{cart-order-summary => cart-order-summary-block}/slotfills.tsx (100%)

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/block.json
similarity index 100%
rename from assets/js/blocks/cart/inner-blocks/cart-order-summary/block.json
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-block/block.json
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/edit.tsx
similarity index 100%
rename from assets/js/blocks/cart/inner-blocks/cart-order-summary/edit.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-block/edit.tsx
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
similarity index 100%
rename from assets/js/blocks/cart/inner-blocks/cart-order-summary/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/index.tsx
similarity index 100%
rename from assets/js/blocks/cart/inner-blocks/cart-order-summary/index.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-block/index.tsx
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
similarity index 100%
rename from assets/js/blocks/cart/inner-blocks/cart-order-summary/slotfills.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-block/slotfills.tsx

From 6f291f5b3d5bff80d7fe1814f97e48c635e304ac Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Mon, 21 Mar 2022 17:11:01 +0000
Subject: [PATCH 18/29] Some test fixes

---
 .../cart-order-summary-block/frontend.tsx     |  4 ++--
 .../cart-order-summary-subtotal/block.tsx     |  2 +-
 .../cart-totals-block/frontend.tsx            |  4 ++--
 .../cart/inner-blocks/component-metadata.ts   |  2 +-
 assets/js/blocks/cart/test/block.js           | 22 +++++++++++++------
 .../checkout-order-summary-block/frontend.tsx |  4 ++--
 .../test/block.js                             | 19 +++++++++++++++-
 .../block.tsx                                 |  6 ++++-
 .../checkout-order-summary-discount/block.tsx |  2 +-
 .../checkout-order-summary-fee/block.tsx      |  2 +-
 .../checkout-order-summary-subtotal/block.tsx |  2 +-
 .../checkout-order-summary-taxes/block.tsx    |  3 ++-
 12 files changed, 51 insertions(+), 21 deletions(-)

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
index 30ae7b8b5db..a9663eb362b 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
@@ -12,10 +12,10 @@ import { OrderMetaSlotFill } from './slotfills';
 
 const FrontendBlock = ( {
 	children,
-	className,
+	className = '',
 }: {
 	children: JSX.Element | JSX.Element[];
-	className: string;
+	className?: string;
 } ): JSX.Element | null => {
 	const { cartTotals } = useStoreCart();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
index bc4d50449f5..9ef25d2e652 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
@@ -5,7 +5,7 @@ import { Subtotal } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
-const Block = ( { className }: { className: string } ): JSX.Element => {
+const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx
index 8986a60a4fd..583fc60244d 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-totals-block/frontend.tsx
@@ -11,10 +11,10 @@ import './style.scss';
 
 const FrontendBlock = ( {
 	children,
-	className,
+	className = '',
 }: {
 	children: JSX.Element | JSX.Element[];
-	className: string;
+	className?: string;
 } ): JSX.Element => {
 	return (
 		<Sidebar
diff --git a/assets/js/blocks/cart/inner-blocks/component-metadata.ts b/assets/js/blocks/cart/inner-blocks/component-metadata.ts
index eba5ca1ccd4..cf979e31355 100644
--- a/assets/js/blocks/cart/inner-blocks/component-metadata.ts
+++ b/assets/js/blocks/cart/inner-blocks/component-metadata.ts
@@ -9,7 +9,7 @@ import CART_LINE_ITEMS from './cart-line-items-block/block.json';
 import CART_TOTALS from './cart-totals-block/block.json';
 import PROCEED_TO_CHECKOUT from './proceed-to-checkout-block/block.json';
 import CART_ACCEPTED_PAYMENT_METHODS from './cart-accepted-payment-methods-block/block.json';
-import CART_ORDER_SUMMARY from './cart-order-summary/block.json';
+import CART_ORDER_SUMMARY from './cart-order-summary-block/block.json';
 import CART_ORDER_SUMMARY_SUBTOTAL from './cart-order-summary-subtotal/block.json';
 import CART_ORDER_SUMMARY_FEE from './cart-order-summary-fee/block.json';
 import CART_ORDER_SUMMARY_DISCOUNT from './cart-order-summary-discount/block.json';
diff --git a/assets/js/blocks/cart/test/block.js b/assets/js/blocks/cart/test/block.js
index d26cbd9951d..f8a081d2253 100644
--- a/assets/js/blocks/cart/test/block.js
+++ b/assets/js/blocks/cart/test/block.js
@@ -21,10 +21,13 @@ import ItemsBlock from '../inner-blocks/cart-items-block/frontend';
 import TotalsBlock from '../inner-blocks/cart-totals-block/frontend';
 
 import LineItemsBlock from '../inner-blocks/cart-line-items-block/block';
-import OrderSummaryBlock from '../inner-blocks/cart-order-summary-block/block';
+import OrderSummaryBlock from '../inner-blocks/cart-order-summary-block/frontend';
 import ExpressPaymentBlock from '../inner-blocks/cart-express-payment-block/block';
 import ProceedToCheckoutBlock from '../inner-blocks/proceed-to-checkout-block/block';
 import AcceptedPaymentMethodsIcons from '../inner-blocks/cart-accepted-payment-methods-block/block';
+import OrderSummarySubtotalBlock from '../inner-blocks/cart-order-summary-subtotal/frontend';
+import OrderSummaryShippingBlock from '../inner-blocks/cart-order-summary-shipping/frontend';
+import OrderSummaryTaxesBlock from '../inner-blocks/cart-order-summary-taxes/frontend';
 
 const CartBlock = ( {
 	attributes = {
@@ -45,12 +48,17 @@ const CartBlock = ( {
 					<LineItemsBlock />
 				</ItemsBlock>
 				<TotalsBlock>
-					<OrderSummaryBlock
-						showRateAfterTaxName={ showRateAfterTaxName }
-						isShippingCalculatorEnabled={
-							isShippingCalculatorEnabled
-						}
-					/>
+					<OrderSummaryBlock>
+						<OrderSummarySubtotalBlock />
+						<OrderSummaryShippingBlock
+							isShippingCalculatorEnabled={
+								isShippingCalculatorEnabled
+							}
+						/>
+						<OrderSummaryTaxesBlock
+							showRateAfterTaxName={ showRateAfterTaxName }
+						/>
+					</OrderSummaryBlock>
 					<ExpressPaymentBlock />
 					<ProceedToCheckoutBlock checkoutPageId={ checkoutPageId } />
 					<AcceptedPaymentMethodsIcons />
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
index 30ae7b8b5db..a9663eb362b 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
@@ -12,10 +12,10 @@ import { OrderMetaSlotFill } from './slotfills';
 
 const FrontendBlock = ( {
 	children,
-	className,
+	className = '',
 }: {
 	children: JSX.Element | JSX.Element[];
-	className: string;
+	className?: string;
 } ): JSX.Element | null => {
 	const { cartTotals } = useStoreCart();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
index 988fd56422d..4e28ca8ce02 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
@@ -12,13 +12,30 @@ import {
  * Internal dependencies
  */
 import { previewCart as mockPreviewCart } from '../../../../../previews/cart';
-import Block from '../block';
 import {
 	textContentMatcher,
 	textContentMatcherAcrossSiblings,
 } from '../../../../../../../tests/utils/find-by-text';
 const baseContextHooks = jest.requireMock( '@woocommerce/base-context/hooks' );
 const woocommerceSettings = jest.requireMock( '@woocommerce/settings' );
+import SummaryBlock from '../frontend';
+import SubtotalBlock from '../../checkout-order-summary-subtotal/frontend';
+import FeeBlock from '../../checkout-order-summary-fee/frontend';
+import TaxesBlock from '../../checkout-order-summary-taxes/frontend';
+import DiscountBlock from '../../checkout-order-summary-discount/frontend';
+import CouponsBlock from '../../checkout-order-summary-coupon-form/frontend';
+import ShippingBlock from '../../checkout-order-summary-shipping/frontend';
+
+const Block = ( { showRateAfterTaxName = false } ) => (
+	<SummaryBlock>
+		<SubtotalBlock />
+		<FeeBlock />
+		<DiscountBlock />
+		<CouponsBlock />
+		<ShippingBlock />
+		<TaxesBlock showRateAfterTaxName={ showRateAfterTaxName } />
+	</SummaryBlock>
+);
 
 const defaultUseStoreCartValue = {
 	cartItems: mockPreviewCart.items,
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
index 1579bf61de1..bddfc560c12 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
@@ -5,7 +5,11 @@ import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
 
-const Block = ( { className }: { className: string } ): JSX.Element | null => {
+const Block = ( {
+	className = '',
+}: {
+	className?: string;
+} ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
 
 	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons();
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
index cbc2ee54b9e..84c2cf3c3dd 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
@@ -22,7 +22,7 @@ const DiscountSlotFill = (): JSX.Element => {
 	return <ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />;
 };
 
-const Block = ( { className }: { className: string } ): JSX.Element => {
+const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
 
 	const {
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
index 0b8b68197a1..16dc21591fd 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
@@ -5,7 +5,7 @@ import { TotalsFees } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
-const Block = ( { className }: { className: string } ): JSX.Element => {
+const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const { cartFees, cartTotals } = useStoreCart();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
index bc4d50449f5..9ef25d2e652 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
@@ -5,7 +5,7 @@ import { Subtotal } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
-const Block = ( { className }: { className: string } ): JSX.Element => {
+const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const { cartTotals } = useStoreCart();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
index ef3917d9b82..fce06583f10 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
@@ -14,7 +14,6 @@ const Block = ( {
 	showRateAfterTaxName: boolean;
 } ): JSX.Element | null => {
 	const { cartTotals } = useStoreCart();
-	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 	const displayCartPricesIncludingTax = getSetting(
 		'displayCartPricesIncludingTax',
 		false
@@ -27,6 +26,8 @@ const Block = ( {
 		return null;
 	}
 
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
 	return (
 		<TotalsTaxes
 			className={ className }

From 614ec928150965d6df038a60fdbd3a59e0d87819 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 22 Mar 2022 09:59:59 +0000
Subject: [PATCH 19/29] Fix import

---
 assets/js/blocks/cart/inner-blocks/register-components.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/blocks/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
index 8870925a820..a1f869c67bc 100644
--- a/assets/js/blocks/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -109,7 +109,7 @@ registerCheckoutBlock( {
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "cart-blocks/cart-order-summary" */
-			'./cart-order-summary/frontend'
+			'./cart-order-summary-block/frontend'
 		)
 	),
 } );

From 3a4ba59b1bd096eb43191e351f1e910a2e8c77fe Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 22 Mar 2022 10:05:26 +0000
Subject: [PATCH 20/29] fix import

---
 assets/js/blocks/cart/inner-blocks/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/blocks/cart/inner-blocks/index.tsx b/assets/js/blocks/cart/inner-blocks/index.tsx
index a318d5525f0..003f6f54634 100644
--- a/assets/js/blocks/cart/inner-blocks/index.tsx
+++ b/assets/js/blocks/cart/inner-blocks/index.tsx
@@ -9,7 +9,7 @@ import './cart-express-payment-block';
 import './proceed-to-checkout-block';
 import './empty-cart-block';
 import './cart-accepted-payment-methods-block';
-import './cart-order-summary';
+import './cart-order-summary-block';
 import './cart-order-summary-subtotal';
 import './cart-order-summary-fee';
 import './cart-order-summary-discount';

From 36415b68f486ca7dac4b59e700c5e96075f674dd Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 22 Mar 2022 10:14:39 +0000
Subject: [PATCH 21/29] linting

---
 .../cart/inner-blocks/cart-order-summary-taxes/block.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
index ef3917d9b82..8b64763bc72 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
@@ -14,7 +14,7 @@ const Block = ( {
 	showRateAfterTaxName: boolean;
 } ): JSX.Element | null => {
 	const { cartTotals } = useStoreCart();
-	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
 	const displayCartPricesIncludingTax = getSetting(
 		'displayCartPricesIncludingTax',
 		false
@@ -27,6 +27,8 @@ const Block = ( {
 		return null;
 	}
 
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
 	return (
 		<TotalsTaxes
 			className={ className }

From 217def8a42a1a120a76c78115fa8c20fa0891f4c Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 22 Mar 2022 10:25:34 +0000
Subject: [PATCH 22/29] Remove unused attributes

---
 .../checkout-order-summary-shipping/attributes.tsx | 14 --------------
 .../checkout-order-summary-shipping/edit.tsx       |  5 -----
 .../checkout-order-summary-shipping/frontend.tsx   |  8 +-------
 .../checkout-order-summary-shipping/index.tsx      |  2 --
 4 files changed, 1 insertion(+), 28 deletions(-)
 delete mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/attributes.tsx

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/attributes.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/attributes.tsx
deleted file mode 100644
index 23bd5fc30b7..00000000000
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/attributes.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * External dependencies
- */
-import { getSetting } from '@woocommerce/settings';
-
-export default {
-	lock: {
-		type: 'object',
-		default: {
-			move: true,
-			remove: true,
-		},
-	},
-};
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/edit.tsx
index b66cf876cba..d5b72b439a5 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/edit.tsx
@@ -14,12 +14,7 @@ export const Edit = ( {
 }: {
 	attributes: {
 		className: string;
-		lock: {
-			move: boolean;
-			remove: boolean;
-		};
 	};
-	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
 	const { className } = attributes;
 	const blockProps = useBlockProps();
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/frontend.tsx
index b6c773996b2..4fc9ad2897a 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/frontend.tsx
@@ -1,12 +1,6 @@
-/**
- * External dependencies
- */
-import { withFilteredAttributes } from '@woocommerce/shared-hocs';
-
 /**
  * Internal dependencies
  */
 import Block from './block';
-import attributes from './attributes';
 
-export default withFilteredAttributes( attributes )( Block );
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx
index 72010b2cccc..ce580c46483 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx
@@ -9,7 +9,6 @@ import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
  * Internal dependencies
  */
 import { Edit, Save } from './edit';
-import attributes from './attributes';
 import metadata from './block.json';
 
 registerFeaturePluginBlockType( metadata, {
@@ -21,7 +20,6 @@ registerFeaturePluginBlockType( metadata, {
 			/>
 		),
 	},
-	attributes,
 	edit: Edit,
 	save: Save,
 } );

From 7c9af1bacc4a0096898fa4a0c2de17d00ce30066 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 22 Mar 2022 10:44:26 +0000
Subject: [PATCH 23/29] Optional classname

---
 .../inner-blocks/checkout-order-summary-shipping/block.tsx  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
index 7841f8ec069..3001b56bf16 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
@@ -5,7 +5,11 @@ import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
-const Block = ( { className }: { className: string } ): JSX.Element | null => {
+const Block = ( {
+	className = '',
+}: {
+	className?: string;
+} ): JSX.Element | null => {
 	const { cartTotals, cartNeedsShipping } = useStoreCart();
 
 	if ( ! cartNeedsShipping ) {

From 03e804c1d844122fb8e501f9d6cfb4407ed16aae Mon Sep 17 00:00:00 2001
From: Nadir Seghir <nadir.seghir@gmail.com>
Date: Tue, 22 Mar 2022 12:15:35 +0100
Subject: [PATCH 24/29] fix coupons import

---
 .../inner-blocks/cart-order-summary-discount/block.tsx | 10 +++-------
 .../checkout-order-summary-discount/block.tsx          | 10 +++-------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
index 10beb031914..33dd2866c23 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
@@ -23,20 +23,16 @@ const DiscountSlotFill = (): JSX.Element => {
 };
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
-	const { cartTotals } = useStoreCart();
+	const { cartTotals, cartCoupons } = useStoreCart();
 
-	const {
-		removeCoupon,
-		isRemovingCoupon,
-		appliedCoupons,
-	} = useStoreCartCoupons();
+	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
 		<>
 			<TotalsDiscount
 				className={ className }
-				cartCoupons={ appliedCoupons }
+				cartCoupons={ cartCoupons }
 				currency={ totalsCurrency }
 				isRemovingCoupon={ isRemovingCoupon }
 				removeCoupon={ removeCoupon }
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
index 84c2cf3c3dd..d7fee5d89ef 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
@@ -23,20 +23,16 @@ const DiscountSlotFill = (): JSX.Element => {
 };
 
 const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
-	const { cartTotals } = useStoreCart();
+	const { cartTotals, cartCoupons } = useStoreCart();
 
-	const {
-		removeCoupon,
-		isRemovingCoupon,
-		appliedCoupons,
-	} = useStoreCartCoupons();
+	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
 		<>
 			<TotalsDiscount
 				className={ className }
-				cartCoupons={ appliedCoupons }
+				cartCoupons={ cartCoupons }
 				currency={ totalsCurrency }
 				isRemovingCoupon={ isRemovingCoupon }
 				removeCoupon={ removeCoupon }

From ff09db0cd2797ef45bd899388344028152da8e9d Mon Sep 17 00:00:00 2001
From: Nadir Seghir <nadir.seghir@gmail.com>
Date: Tue, 22 Mar 2022 12:57:52 +0100
Subject: [PATCH 25/29] fix shipping mocks

---
 .../test/block.js                             | 30 ++++++++-----------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
index 4e28ca8ce02..aced808a6d9 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	render,
-	findByText,
-	screen,
-	queryByText,
-} from '@testing-library/react';
+import { render, findByText, queryByText } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -25,9 +20,11 @@ import TaxesBlock from '../../checkout-order-summary-taxes/frontend';
 import DiscountBlock from '../../checkout-order-summary-discount/frontend';
 import CouponsBlock from '../../checkout-order-summary-coupon-form/frontend';
 import ShippingBlock from '../../checkout-order-summary-shipping/frontend';
+import CartItemsBlock from '../../checkout-order-summary-cart-items/frontend';
 
 const Block = ( { showRateAfterTaxName = false } ) => (
 	<SummaryBlock>
+		<CartItemsBlock />
 		<SubtotalBlock />
 		<FeeBlock />
 		<DiscountBlock />
@@ -42,7 +39,7 @@ const defaultUseStoreCartValue = {
 	cartTotals: mockPreviewCart.totals,
 	cartCoupons: mockPreviewCart.coupons,
 	cartFees: mockPreviewCart.fees,
-	needsShipping: mockPreviewCart.needs_shipping,
+	cartNeedsShipping: mockPreviewCart.needs_shipping,
 	shippingRates: mockPreviewCart.shipping_rates,
 	shippingAddress: mockPreviewCart.shipping_address,
 	billingAddress: mockPreviewCart.billing_address,
@@ -61,7 +58,7 @@ jest.mock( '@woocommerce/base-context/hooks', () => ( {
 		cartTotals: mockPreviewCart.totals,
 		cartCoupons: mockPreviewCart.coupons,
 		cartFees: mockPreviewCart.fees,
-		needsShipping: mockPreviewCart.needs_shipping,
+		cartNeedsShipping: mockPreviewCart.needs_shipping,
 		shippingRates: mockPreviewCart.shipping_rates,
 		shippingAddress: mockPreviewCart.shipping_address,
 		billingAddress: mockPreviewCart.billing_address,
@@ -225,10 +222,10 @@ describe( 'Checkout Order Summary', () => {
 
 		// Checking if variable product is rendered.
 		expect(
-			await screen.findByText( textContentMatcher( 'Color: Yellow' ) )
+			await findByText( container, textContentMatcher( 'Color: Yellow' ) )
 		).toBeInTheDocument();
 		expect(
-			await screen.findByText( textContentMatcher( 'Size: Small' ) )
+			await findByText( container, textContentMatcher( 'Size: Small' ) )
 		).toBeInTheDocument();
 	} );
 
@@ -351,9 +348,9 @@ describe( 'Checkout Order Summary', () => {
 	it( 'Does not show the shipping section if needsShipping is false on the cart', () => {
 		setUseStoreCartReturnValue( {
 			...defaultUseStoreCartValue,
-			needsShipping: false,
+			cartNeedsShipping: false,
 		} );
-		setUseShippingDataReturnValue( { needsShipping: false } );
+
 		const { container } = render( <Block showRateAfterTaxName={ true } /> );
 		expect( queryByText( container, 'Shipping' ) ).not.toBeInTheDocument();
 	} );
@@ -423,13 +420,13 @@ describe( 'Checkout Order Summary', () => {
 			cartTotals: {
 				...mockPreviewCart.totals,
 			},
+			cartNeedsShipping: false,
 		} );
-		setUseShippingDataReturnValue( { needsShipping: false } );
 		const { container } = render( <Block showRateAfterTaxName={ true } /> );
 		expect(
 			await findByText(
 				container,
-				textContentMatcherAcrossSiblings( 'Total $48.00' )
+				textContentMatcherAcrossSiblings( 'Total $49.20' )
 			)
 		).toBeInTheDocument();
 	} );
@@ -441,9 +438,7 @@ describe( 'Checkout Order Summary', () => {
 				...defaultUseStoreCartValue.cartTotals,
 				total_shipping: '4000',
 			},
-		} );
-		setUseShippingDataReturnValue( {
-			needsShipping: true,
+			cartNeedsShipping: true,
 			shippingRates: [
 				{
 					package_id: 0,
@@ -498,6 +493,7 @@ describe( 'Checkout Order Summary', () => {
 				},
 			],
 		} );
+
 		const { container } = render( <Block showRateAfterTaxName={ true } /> );
 		expect(
 			await findByText(

From f07710f04d83b87c07792d4ab3b65614835d279a Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 22 Mar 2022 13:16:11 +0000
Subject: [PATCH 26/29] Styling

---
 .../inner-blocks/cart-order-summary-shipping/attributes.tsx   | 2 +-
 packages/checkout/components/totals/item/style.scss           | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx
index e27242576ee..e5378cb59e8 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx
@@ -11,7 +11,7 @@ export default {
 	lock: {
 		type: 'object',
 		default: {
-			move: true,
+			move: false,
 			remove: true,
 		},
 	},
diff --git a/packages/checkout/components/totals/item/style.scss b/packages/checkout/components/totals/item/style.scss
index d1b488648f0..c0b521f99a5 100644
--- a/packages/checkout/components/totals/item/style.scss
+++ b/packages/checkout/components/totals/item/style.scss
@@ -28,4 +28,8 @@
 .wc-block-components-totals-item__description {
 	@include font-size(small);
 	width: 100%;
+
+	> div:last-child {
+		margin-bottom: 0;
+	}
 }

From 2ce772005865c191696ba591f0896c4a15404063 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Tue, 22 Mar 2022 15:39:30 +0000
Subject: [PATCH 27/29] Fix selectors in e2e tests

---
 .../best-selling-products.fixture.json        |  5 +----
 .../featured-category.fixture.json            |  5 +----
 .../hand-picked-products.fixture.json         |  5 +----
 .../__fixtures__/newest-products.fixture.json |  5 +----
 .../product-categories-list.fixture.json      |  5 +----
 .../top-rated-products.fixture.json           |  5 +----
 tests/e2e/specs/backend/cart.test.js          |  4 ++--
 tests/utils/taxes.ts                          | 22 +++++++++----------
 8 files changed, 18 insertions(+), 38 deletions(-)

diff --git a/tests/e2e/config/custom-matchers/__fixtures__/best-selling-products.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/best-selling-products.fixture.json
index 592c5ded3ea..83be6820f4d 100644
--- a/tests/e2e/config/custom-matchers/__fixtures__/best-selling-products.fixture.json
+++ b/tests/e2e/config/custom-matchers/__fixtures__/best-selling-products.fixture.json
@@ -1,4 +1 @@
-{
-	"title": "Best Selling Products Block",
-	"pageContent": "<!-- wp:woocommerce/product-best-sellers /-->"
-}
+{"title":"Best Selling Products Block","pageContent":"<!-- wp:woocommerce/product-best-sellers /-->"}
\ No newline at end of file
diff --git a/tests/e2e/config/custom-matchers/__fixtures__/featured-category.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/featured-category.fixture.json
index b6c77eb3381..60f0ae7b0d9 100644
--- a/tests/e2e/config/custom-matchers/__fixtures__/featured-category.fixture.json
+++ b/tests/e2e/config/custom-matchers/__fixtures__/featured-category.fixture.json
@@ -1,4 +1 @@
-{
-	"title": "Featured Category Block",
-	"pageContent": "<!-- wp:woocommerce/featured-category /-->"
-}
+{"title":"Featured Category Block","pageContent":"<!-- wp:woocommerce/featured-category /-->"}
\ No newline at end of file
diff --git a/tests/e2e/config/custom-matchers/__fixtures__/hand-picked-products.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/hand-picked-products.fixture.json
index 4b2f1de3f43..907b84ea5ec 100644
--- a/tests/e2e/config/custom-matchers/__fixtures__/hand-picked-products.fixture.json
+++ b/tests/e2e/config/custom-matchers/__fixtures__/hand-picked-products.fixture.json
@@ -1,4 +1 @@
-{
-	"title": "Hand-picked Products Block",
-	"pageContent": "<!-- wp:woocommerce/handpicked-products /-->"
-}
+{"title":"Hand-picked Products Block","pageContent":"<!-- wp:woocommerce/handpicked-products /-->"}
\ No newline at end of file
diff --git a/tests/e2e/config/custom-matchers/__fixtures__/newest-products.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/newest-products.fixture.json
index d3aa952f8b7..5ffe302fc75 100644
--- a/tests/e2e/config/custom-matchers/__fixtures__/newest-products.fixture.json
+++ b/tests/e2e/config/custom-matchers/__fixtures__/newest-products.fixture.json
@@ -1,4 +1 @@
-{
-	"title": "Newest Products Block",
-	"pageContent": "<!-- wp:woocommerce/product-new /-->"
-}
+{"title":"Newest Products Block","pageContent":"<!-- wp:woocommerce/product-new /-->"}
\ No newline at end of file
diff --git a/tests/e2e/config/custom-matchers/__fixtures__/product-categories-list.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/product-categories-list.fixture.json
index 6f6baf27aef..7e6a4d9e3bb 100644
--- a/tests/e2e/config/custom-matchers/__fixtures__/product-categories-list.fixture.json
+++ b/tests/e2e/config/custom-matchers/__fixtures__/product-categories-list.fixture.json
@@ -1,4 +1 @@
-{
-	"title": "Product Categories List Block",
-	"pageContent": "<!-- wp:woocommerce/product-categories /-->"
-}
+{"title":"Product Categories List Block","pageContent":"<!-- wp:woocommerce/product-categories /-->"}
\ No newline at end of file
diff --git a/tests/e2e/config/custom-matchers/__fixtures__/top-rated-products.fixture.json b/tests/e2e/config/custom-matchers/__fixtures__/top-rated-products.fixture.json
index a3190e493b4..4adb6788563 100644
--- a/tests/e2e/config/custom-matchers/__fixtures__/top-rated-products.fixture.json
+++ b/tests/e2e/config/custom-matchers/__fixtures__/top-rated-products.fixture.json
@@ -1,4 +1 @@
-{
-	"title": "Top Rated Products Block",
-	"pageContent": "<!-- wp:woocommerce/product-top-rated /-->"
-}
+{"title":"Top Rated Products Block","pageContent":"<!-- wp:woocommerce/product-top-rated /-->"}
\ No newline at end of file
diff --git a/tests/e2e/specs/backend/cart.test.js b/tests/e2e/specs/backend/cart.test.js
index 492eb624d71..b2ede0e06d7 100644
--- a/tests/e2e/specs/backend/cart.test.js
+++ b/tests/e2e/specs/backend/cart.test.js
@@ -139,12 +139,12 @@ describe( `${ block.name } Block`, () => {
 				beforeEach( async () => {
 					await openDocumentSettingsSidebar();
 					await selectBlockByName(
-						'woocommerce/cart-order-summary-block'
+						'woocommerce/cart-order-summary-shipping-block'
 					);
 				} );
 
 				it( 'can toggle Shipping calculator', async () => {
-					const selector = `${ block.class } .wc-block-components-totals-shipping__change-address-button`;
+					const selector = ` .wc-block-components-totals-shipping__change-address-button`;
 					const toggleLabel = await findLabelWithText(
 						'Shipping calculator'
 					);
diff --git a/tests/utils/taxes.ts b/tests/utils/taxes.ts
index 2aadbaa7b3e..c3bf4a5e08f 100644
--- a/tests/utils/taxes.ts
+++ b/tests/utils/taxes.ts
@@ -44,18 +44,16 @@ export async function getTaxesFromCurrentPage(): Promise<
 		value: string;
 	} >
 > {
-	return await page.$$eval(
-		'.wc-block-components-totals-taxes .wc-block-components-totals-item',
-		( nodes ) =>
-			nodes.map( ( node ) => {
-				const label = node.querySelector(
-					'.wc-block-components-totals-item__label'
-				)?.innerHTML;
-				const value = node.querySelector(
-					'.wc-block-components-totals-item__value'
-				)?.innerHTML;
-				return { label, value };
-			} )
+	return await page.$$eval( '.wc-block-components-totals-taxes', ( nodes ) =>
+		nodes.map( ( node ) => {
+			const label = node.querySelector(
+				'.wc-block-components-totals-item__label'
+			)?.innerHTML;
+			const value = node.querySelector(
+				'.wc-block-components-totals-item__value'
+			)?.innerHTML;
+			return { label, value };
+		} )
 	);
 }
 

From 10670393a00ebd18d12b86755b5278cdfa49ace6 Mon Sep 17 00:00:00 2001
From: Raluca Stan <ralucastn@gmail.com>
Date: Thu, 31 Mar 2022 16:26:36 +0200
Subject: [PATCH 28/29] Add back the wc-block-components-totals-wrapper class
 that was used for each segment in the totals Order summary

Because, removing them was:
-  a breaking change for the old structure
- was making it harder to target the inner blocks. Before the class was used to target each segment
- it was making the wc-block-components-totals-item behave as a child or parent depending on the inner block, inconsitency
---
 .../cart-checkout/totals/coupon/index.tsx        | 11 ++++++++++-
 .../cart-checkout/totals/discount/index.tsx      |  8 +++++++-
 .../cart-checkout/totals/footer-item/index.tsx   |  1 -
 .../js/base/components/sidebar-layout/style.scss |  3 +--
 assets/js/blocks/cart/editor.scss                |  6 ++----
 .../cart-order-summary-block/edit.tsx            | 11 +++++++----
 .../cart-order-summary-block/frontend.tsx        | 10 ++++++----
 .../cart-order-summary-coupon-form/block.tsx     |  2 +-
 .../cart-order-summary-discount/block.tsx        |  2 +-
 .../cart-order-summary-fee/block.tsx             |  2 +-
 .../cart-order-summary-shipping/block.tsx        |  2 +-
 .../cart-order-summary-subtotal/block.tsx        |  2 +-
 .../cart-order-summary-taxes/block.tsx           |  2 +-
 .../cart/inner-blocks/register-components.ts     | 10 ----------
 .../checkout-order-summary-block/edit.tsx        | 10 ++++++----
 .../checkout-order-summary-block/frontend.tsx    | 10 ++++++----
 .../checkout-order-summary-cart-items/block.tsx  |  7 ++++++-
 .../checkout-order-summary-coupon-form/block.tsx |  2 +-
 .../checkout-order-summary-discount/block.tsx    |  2 +-
 .../checkout-order-summary-fee/block.tsx         |  2 +-
 .../checkout-order-summary-shipping/block.tsx    |  2 +-
 .../checkout-order-summary-subtotal/block.tsx    |  2 +-
 .../checkout-order-summary-taxes/block.tsx       |  2 +-
 .../checkout-totals-block/style.scss             |  1 -
 assets/js/blocks/checkout/styles/editor.scss     |  5 +----
 .../components/totals-wrapper/style.scss         |  4 ----
 .../checkout/components/totals/item/style.scss   | 16 ----------------
 27 files changed, 64 insertions(+), 73 deletions(-)

diff --git a/assets/js/base/components/cart-checkout/totals/coupon/index.tsx b/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
index 87b6d29ed41..8bd0d78dd6e 100644
--- a/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
@@ -13,6 +13,7 @@ import {
 	useValidationContext,
 } from '@woocommerce/base-context';
 import { Panel } from '@woocommerce/blocks-checkout';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -36,6 +37,10 @@ export interface TotalsCouponProps {
 	 * Submit handler
 	 */
 	onSubmit?: ( couponValue: string ) => void;
+	/**
+	 * User defined classname in the block settings
+	 */
+	className?: string;
 }
 
 export const TotalsCoupon = ( {
@@ -43,6 +48,7 @@ export const TotalsCoupon = ( {
 	isLoading = false,
 	initialOpen = false,
 	onSubmit = () => void 0,
+	className = '',
 }: TotalsCouponProps ): JSX.Element => {
 	const [ couponValue, setCouponValue ] = useState( '' );
 	const currentIsLoading = useRef( false );
@@ -62,7 +68,10 @@ export const TotalsCoupon = ( {
 
 	return (
 		<Panel
-			className="wc-block-components-totals-coupon"
+			className={ classnames(
+				className,
+				'wc-block-components-totals-coupon'
+			) }
 			hasBorder={ false }
 			initialOpen={ initialOpen }
 			title={
diff --git a/assets/js/base/components/cart-checkout/totals/discount/index.tsx b/assets/js/base/components/cart-checkout/totals/discount/index.tsx
index 3e87e766462..cae398784a4 100644
--- a/assets/js/base/components/cart-checkout/totals/discount/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/discount/index.tsx
@@ -15,6 +15,7 @@ import {
 	Currency,
 } from '@woocommerce/types';
 import { LooselyMustHave } from '@woocommerce/type-defs/utils';
+import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -33,6 +34,7 @@ export interface TotalsDiscountProps {
 		CartTotalsItem,
 		'total_discount' | 'total_discount_tax'
 	>;
+	className?: string;
 }
 
 const filteredCartCouponsFilterArg = {
@@ -45,6 +47,7 @@ const TotalsDiscount = ( {
 	isRemovingCoupon,
 	removeCoupon,
 	values,
+	className,
 }: TotalsDiscountProps ): JSX.Element | null => {
 	const {
 		total_discount: totalDiscount,
@@ -72,7 +75,10 @@ const TotalsDiscount = ( {
 
 	return (
 		<TotalsItem
-			className="wc-block-components-totals-discount"
+			className={ classNames(
+				className,
+				'wc-block-components-totals-discount'
+			) }
 			currency={ currency }
 			description={
 				filteredCartCoupons.length !== 0 && (
diff --git a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
index ffbd1a9c54f..e9bee75ec0b 100644
--- a/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
@@ -31,7 +31,6 @@ export interface TotalsFooterItemProps {
 	 * convenience, but will use only these two properties.
 	 */
 	values: LooselyMustHave< CartResponseTotals, 'total_price' | 'total_tax' >;
-	// CSS classname.
 	className?: string;
 }
 
diff --git a/assets/js/base/components/sidebar-layout/style.scss b/assets/js/base/components/sidebar-layout/style.scss
index 35b092cb778..107915bd2bd 100644
--- a/assets/js/base/components/sidebar-layout/style.scss
+++ b/assets/js/base/components/sidebar-layout/style.scss
@@ -52,8 +52,7 @@
 
 		.wc-block-components-panel {
 			.wc-block-components-totals-item {
-				padding-left: 0;
-				padding-right: 0;
+				padding: 0;
 			}
 		}
 	}
diff --git a/assets/js/blocks/cart/editor.scss b/assets/js/blocks/cart/editor.scss
index 055c2a137af..a88f6759d31 100644
--- a/assets/js/blocks/cart/editor.scss
+++ b/assets/js/blocks/cart/editor.scss
@@ -34,10 +34,8 @@ body.wc-lock-selected-block--remove {
 	.block-editor-block-list__layout > div {
 		margin: 0 !important;
 	}
-	.wc-block-components-totals-item,
-	.wc-block-components-totals-coupon,
-	.wc-block-components-order-summary,
-	.wc-block-components-totals-shipping {
+
+	.wc-block-components-totals-wrapper {
 		box-sizing: border-box;
 	}
 }
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/edit.tsx
index 8fcc5605e94..f9e9e41269c 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/edit.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -53,10 +53,13 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 				allowedBlocks={ allowedBlocks }
 				template={ defaultTemplate }
 			/>
-			<TotalsFooterItem
-				currency={ totalsCurrency }
-				values={ cartTotals }
-			/>
+			<div className="wc-block-components-totals-wrapper">
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
+				/>
+			</div>
+			{ /* do I put an totals wrapper here? */ }
 			<OrderMetaSlotFill />
 		</div>
 	);
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
index a9663eb362b..b5d8d2a96bd 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
@@ -23,10 +23,12 @@ const FrontendBlock = ( {
 	return (
 		<div className={ className }>
 			{ children }
-			<TotalsFooterItem
-				currency={ totalsCurrency }
-				values={ cartTotals }
-			/>
+			<div className="wc-block-components-totals-wrapper">
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
+				/>
+			</div>
 			<OrderMetaSlotFill />
 		</div>
 	);
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
index 1579bf61de1..6b0b51852ef 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
@@ -16,7 +16,7 @@ const Block = ( { className }: { className: string } ): JSX.Element | null => {
 
 	return (
 		<TotalsCoupon
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			onSubmit={ applyCoupon }
 			isLoading={ isApplyingCoupon }
 		/>
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
index 33dd2866c23..edc3eeba563 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
@@ -31,7 +31,7 @@ const Block = ( { className }: { className: string } ): JSX.Element => {
 	return (
 		<>
 			<TotalsDiscount
-				className={ className }
+				className={ `${ className } wc-block-components-totals-wrapper` }
 				cartCoupons={ cartCoupons }
 				currency={ totalsCurrency }
 				isRemovingCoupon={ isRemovingCoupon }
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
index 0b8b68197a1..629934ebbb6 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
@@ -11,7 +11,7 @@ const Block = ( { className }: { className: string } ): JSX.Element => {
 
 	return (
 		<TotalsFees
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			currency={ totalsCurrency }
 			cartFees={ cartFees }
 		/>
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
index 7a39ce7a478..53ea456436c 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
@@ -22,7 +22,7 @@ const Block = ( {
 
 	return (
 		<TotalsShipping
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			showCalculator={ isShippingCalculatorEnabled }
 			showRateSelector={ true }
 			values={ cartTotals }
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
index 9ef25d2e652..6afd6e09904 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
@@ -11,7 +11,7 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 
 	return (
 		<Subtotal
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			currency={ totalsCurrency }
 			values={ cartTotals }
 		/>
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
index 8b64763bc72..a77aadb960e 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
@@ -31,7 +31,7 @@ const Block = ( {
 
 	return (
 		<TotalsTaxes
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			showRateAfterTaxName={ showRateAfterTaxName }
 			currency={ totalsCurrency }
 			values={ cartTotals }
diff --git a/assets/js/blocks/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
index a1f869c67bc..fb645f51d60 100644
--- a/assets/js/blocks/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -34,16 +34,6 @@ registerCheckoutBlock( {
 	),
 } );
 
-registerCheckoutBlock( {
-	metadata: metadata.FILLED_CART,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/filled-cart" */
-			'./filled-cart-block/frontend'
-		)
-	),
-} );
-
 registerCheckoutBlock( {
 	metadata: metadata.CART_ITEMS,
 	component: lazy( () =>
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
index b78b6d6ab77..c62979de8e7 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/edit.tsx
@@ -46,10 +46,12 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 				allowedBlocks={ allowedBlocks }
 				template={ defaultTemplate }
 			/>
-			<TotalsFooterItem
-				currency={ totalsCurrency }
-				values={ cartTotals }
-			/>
+			<div className="wc-block-components-totals-wrapper">
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
+				/>
+			</div>
 			<OrderMetaSlotFill />
 		</div>
 	);
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
index a9663eb362b..b5d8d2a96bd 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
@@ -23,10 +23,12 @@ const FrontendBlock = ( {
 	return (
 		<div className={ className }>
 			{ children }
-			<TotalsFooterItem
-				currency={ totalsCurrency }
-				values={ cartTotals }
-			/>
+			<div className="wc-block-components-totals-wrapper">
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
+				/>
+			</div>
 			<OrderMetaSlotFill />
 		</div>
 	);
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
index f7d4dc15b5d..5028fecc09a 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
@@ -7,7 +7,12 @@ import { useStoreCart } from '@woocommerce/base-context/hooks';
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems } = useStoreCart();
 
-	return <OrderSummary className={ className } cartItems={ cartItems } />;
+	return (
+		<OrderSummary
+			className={ `${ className } wc-block-components-totals-wrapper` }
+			cartItems={ cartItems }
+		/>
+	);
 };
 
 export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
index bddfc560c12..f9bc8d0da49 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
@@ -20,7 +20,7 @@ const Block = ( {
 
 	return (
 		<TotalsCoupon
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			onSubmit={ applyCoupon }
 			isLoading={ isApplyingCoupon }
 		/>
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
index d7fee5d89ef..6c18a9f22a6 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
@@ -31,7 +31,7 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	return (
 		<>
 			<TotalsDiscount
-				className={ className }
+				className={ `${ className } wc-block-components-totals-wrapper` }
 				cartCoupons={ cartCoupons }
 				currency={ totalsCurrency }
 				isRemovingCoupon={ isRemovingCoupon }
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
index 16dc21591fd..5391b531df4 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
@@ -11,7 +11,7 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 
 	return (
 		<TotalsFees
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			currency={ totalsCurrency }
 			cartFees={ cartFees }
 		/>
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
index 3001b56bf16..2e2fa8d4361 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
@@ -20,7 +20,7 @@ const Block = ( {
 
 	return (
 		<TotalsShipping
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			showCalculator={ false }
 			showRateSelector={ false }
 			values={ cartTotals }
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
index 9ef25d2e652..6afd6e09904 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
@@ -11,7 +11,7 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 
 	return (
 		<Subtotal
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			currency={ totalsCurrency }
 			values={ cartTotals }
 		/>
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
index fce06583f10..0982de3c111 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
@@ -30,7 +30,7 @@ const Block = ( {
 
 	return (
 		<TotalsTaxes
-			className={ className }
+			className={ `${ className } wc-block-components-totals-wrapper` }
 			showRateAfterTaxName={ showRateAfterTaxName }
 			currency={ totalsCurrency }
 			values={ cartTotals }
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/style.scss b/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/style.scss
index 555f1d8b6f2..8e89fab0ee6 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/style.scss
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-totals-block/style.scss
@@ -6,7 +6,6 @@
 		// Required by IE11.
 		flex-basis: 0;
 	}
-	.wc-block-components-totals-taxes,
 	.wc-block-components-totals-footer-item {
 		margin: 0;
 		padding: 0;
diff --git a/assets/js/blocks/checkout/styles/editor.scss b/assets/js/blocks/checkout/styles/editor.scss
index c1ab9b80934..a557a29bfab 100644
--- a/assets/js/blocks/checkout/styles/editor.scss
+++ b/assets/js/blocks/checkout/styles/editor.scss
@@ -77,10 +77,7 @@ body.wc-lock-selected-block--remove {
 	.block-editor-block-list__layout > div {
 		margin: 0 !important;
 	}
-	.wc-block-components-totals-item,
-	.wc-block-components-totals-coupon,
-	.wc-block-components-order-summary,
-	.wc-block-components-totals-shipping {
+	.wc-block-components-totals-wrapper {
 		box-sizing: border-box;
 	}
 }
diff --git a/packages/checkout/components/totals-wrapper/style.scss b/packages/checkout/components/totals-wrapper/style.scss
index a1c6a41e251..32bbf8f9f17 100644
--- a/packages/checkout/components/totals-wrapper/style.scss
+++ b/packages/checkout/components/totals-wrapper/style.scss
@@ -2,10 +2,6 @@
 	@include with-translucent-border(1px 0 0);
 	padding: $gap 0;
 
-	&:last-child {
-		padding-bottom: 0;
-	}
-
 	&.has-bottom-border {
 		&::after {
 			border-bottom-width: 1px;
diff --git a/packages/checkout/components/totals/item/style.scss b/packages/checkout/components/totals/item/style.scss
index c0b521f99a5..1d623feb996 100644
--- a/packages/checkout/components/totals/item/style.scss
+++ b/packages/checkout/components/totals/item/style.scss
@@ -1,19 +1,7 @@
 .wc-block-components-totals-item {
 	display: flex;
 	flex-wrap: wrap;
-}
-
-.wp-block > .wc-block-components-totals-item,
-.wp-block-woocommerce-cart-order-summary-block > .wc-block-components-totals-item,
-.wp-block-woocommerce-checkout-order-summary-block > .wc-block-components-totals-item,
-.wc-block-components-order-summary,
-.wc-block-components-totals-coupon,
-.wc-block-components-totals-shipping {
-	@include with-translucent-border(1px 0 0);
-	margin: 0;
 	width: 100%;
-	padding-top: $gap;
-	padding-bottom: $gap;
 }
 
 .wc-block-components-totals-item__label {
@@ -28,8 +16,4 @@
 .wc-block-components-totals-item__description {
 	@include font-size(small);
 	width: 100%;
-
-	> div:last-child {
-		margin-bottom: 0;
-	}
 }

From d654f5b074932b68a218ae5fc319d1b4444133a4 Mon Sep 17 00:00:00 2001
From: Raluca Stan <ralucastn@gmail.com>
Date: Fri, 1 Apr 2022 14:49:16 +0200
Subject: [PATCH 29/29] Reuse the TotalsWrapper component for C& C blocks inner
 blocks

This component was removed in this PR, but  we wrap components in the Cart and Checkout sidebar in a TotalsWrapper. This will ensure consistent spacing and borders are applied to items in the sidebar.
---
 .../cart-checkout/order-summary/index.tsx     |  8 +------
 .../cart-checkout/totals/coupon/index.tsx     | 11 +--------
 .../cart-checkout/totals/discount/index.tsx   |  8 +------
 .../cart-order-summary-coupon-form/block.tsx  | 12 ++++++----
 .../cart-order-summary-discount/block.tsx     | 23 +++++++++++--------
 .../cart-order-summary-fee/block.tsx          | 10 ++++----
 .../cart-order-summary-shipping/block.tsx     | 16 +++++++------
 .../cart-order-summary-subtotal/block.tsx     | 10 ++++----
 .../cart-order-summary-taxes/block.tsx        | 15 ++++++------
 .../block.tsx                                 |  8 +++----
 .../block.tsx                                 | 12 ++++++----
 .../checkout-order-summary-discount/block.tsx | 23 +++++++++++--------
 .../checkout-order-summary-fee/block.tsx      | 10 ++++----
 .../checkout-order-summary-shipping/block.tsx | 16 +++++++------
 .../checkout-order-summary-subtotal/block.tsx | 10 ++++----
 .../checkout-order-summary-taxes/block.tsx    | 15 ++++++------
 .../components/totals-wrapper/index.tsx       | 13 ++++++++---
 .../components/totals-wrapper/style.scss      | 10 ++++++++
 18 files changed, 117 insertions(+), 113 deletions(-)

diff --git a/assets/js/base/components/cart-checkout/order-summary/index.tsx b/assets/js/base/components/cart-checkout/order-summary/index.tsx
index d4c22c684cc..435bf0adc14 100644
--- a/assets/js/base/components/cart-checkout/order-summary/index.tsx
+++ b/assets/js/base/components/cart-checkout/order-summary/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import classnames from 'classnames';
 import { useContainerWidthContext } from '@woocommerce/base-context';
 import { Panel } from '@woocommerce/blocks-checkout';
 import type { CartItem } from '@woocommerce/types';
@@ -14,12 +13,10 @@ import OrderSummaryItem from './order-summary-item';
 import './style.scss';
 
 interface OrderSummaryProps {
-	className: string;
 	cartItems: CartItem[];
 }
 
 const OrderSummary = ( {
-	className = '',
 	cartItems = [],
 }: OrderSummaryProps ): null | JSX.Element => {
 	const { isLarge, hasContainerWidth } = useContainerWidthContext();
@@ -30,10 +27,7 @@ const OrderSummary = ( {
 
 	return (
 		<Panel
-			className={ classnames(
-				'wc-block-components-order-summary',
-				className
-			) }
+			className="wc-block-components-order-summary"
 			initialOpen={ isLarge }
 			hasBorder={ false }
 			title={
diff --git a/assets/js/base/components/cart-checkout/totals/coupon/index.tsx b/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
index 8bd0d78dd6e..87b6d29ed41 100644
--- a/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/coupon/index.tsx
@@ -13,7 +13,6 @@ import {
 	useValidationContext,
 } from '@woocommerce/base-context';
 import { Panel } from '@woocommerce/blocks-checkout';
-import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -37,10 +36,6 @@ export interface TotalsCouponProps {
 	 * Submit handler
 	 */
 	onSubmit?: ( couponValue: string ) => void;
-	/**
-	 * User defined classname in the block settings
-	 */
-	className?: string;
 }
 
 export const TotalsCoupon = ( {
@@ -48,7 +43,6 @@ export const TotalsCoupon = ( {
 	isLoading = false,
 	initialOpen = false,
 	onSubmit = () => void 0,
-	className = '',
 }: TotalsCouponProps ): JSX.Element => {
 	const [ couponValue, setCouponValue ] = useState( '' );
 	const currentIsLoading = useRef( false );
@@ -68,10 +62,7 @@ export const TotalsCoupon = ( {
 
 	return (
 		<Panel
-			className={ classnames(
-				className,
-				'wc-block-components-totals-coupon'
-			) }
+			className="wc-block-components-totals-coupon"
 			hasBorder={ false }
 			initialOpen={ initialOpen }
 			title={
diff --git a/assets/js/base/components/cart-checkout/totals/discount/index.tsx b/assets/js/base/components/cart-checkout/totals/discount/index.tsx
index cae398784a4..3e87e766462 100644
--- a/assets/js/base/components/cart-checkout/totals/discount/index.tsx
+++ b/assets/js/base/components/cart-checkout/totals/discount/index.tsx
@@ -15,7 +15,6 @@ import {
 	Currency,
 } from '@woocommerce/types';
 import { LooselyMustHave } from '@woocommerce/type-defs/utils';
-import classNames from 'classnames';
 
 /**
  * Internal dependencies
@@ -34,7 +33,6 @@ export interface TotalsDiscountProps {
 		CartTotalsItem,
 		'total_discount' | 'total_discount_tax'
 	>;
-	className?: string;
 }
 
 const filteredCartCouponsFilterArg = {
@@ -47,7 +45,6 @@ const TotalsDiscount = ( {
 	isRemovingCoupon,
 	removeCoupon,
 	values,
-	className,
 }: TotalsDiscountProps ): JSX.Element | null => {
 	const {
 		total_discount: totalDiscount,
@@ -75,10 +72,7 @@ const TotalsDiscount = ( {
 
 	return (
 		<TotalsItem
-			className={ classNames(
-				className,
-				'wc-block-components-totals-discount'
-			) }
+			className="wc-block-components-totals-discount"
 			currency={ currency }
 			description={
 				filteredCartCoupons.length !== 0 && (
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
index 6b0b51852ef..a10f3555699 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	const couponsEnabled = getSetting( 'couponsEnabled', true );
@@ -15,11 +16,12 @@ const Block = ( { className }: { className: string } ): JSX.Element | null => {
 	}
 
 	return (
-		<TotalsCoupon
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			onSubmit={ applyCoupon }
-			isLoading={ isApplyingCoupon }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
index edc3eeba563..3ae0a3f11ad 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
@@ -7,7 +7,10 @@ import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+import {
+	ExperimentalDiscountsMeta,
+	TotalsWrapper,
+} from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
@@ -24,20 +27,20 @@ const DiscountSlotFill = (): JSX.Element => {
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartTotals, cartCoupons } = useStoreCart();
-
 	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
 		<>
-			<TotalsDiscount
-				className={ `${ className } wc-block-components-totals-wrapper` }
-				cartCoupons={ cartCoupons }
-				currency={ totalsCurrency }
-				isRemovingCoupon={ isRemovingCoupon }
-				removeCoupon={ removeCoupon }
-				values={ cartTotals }
-			/>
+			<TotalsWrapper className={ className }>
+				<TotalsDiscount
+					cartCoupons={ cartCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
 			<DiscountSlotFill />
 		</>
 	);
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
index 629934ebbb6..1a118225ff3 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className }: { className: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsFees
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			cartFees={ cartFees }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
index 53ea456436c..dacbbc32938 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( {
 	className,
@@ -21,13 +22,14 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsShipping
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showCalculator={ isShippingCalculatorEnabled }
-			showRateSelector={ true }
-			values={ cartTotals }
-			currency={ totalsCurrency }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsShipping
+				showCalculator={ isShippingCalculatorEnabled }
+				showRateSelector={ true }
+				values={ cartTotals }
+				currency={ totalsCurrency }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
index 6afd6e09904..1fbed502bf0 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<Subtotal
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<Subtotal currency={ totalsCurrency } values={ cartTotals } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
index a77aadb960e..6c8c124641e 100644
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
@@ -30,12 +30,13 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsTaxes
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showRateAfterTaxName={ showRateAfterTaxName }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsTaxes
+				showRateAfterTaxName={ showRateAfterTaxName }
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
index 5028fecc09a..e84596ecad5 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
@@ -3,15 +3,15 @@
  */
 import { OrderSummary } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( { className }: { className: string } ): JSX.Element => {
 	const { cartItems } = useStoreCart();
 
 	return (
-		<OrderSummary
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			cartItems={ cartItems }
-		/>
+		<TotalsWrapper className={ className }>
+			<OrderSummary cartItems={ cartItems } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
index f9bc8d0da49..a54e57047dc 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
 import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( {
 	className = '',
@@ -19,11 +20,12 @@ const Block = ( {
 	}
 
 	return (
-		<TotalsCoupon
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			onSubmit={ applyCoupon }
-			isLoading={ isApplyingCoupon }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
index 6c18a9f22a6..db257982cf4 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
@@ -7,7 +7,10 @@ import {
 	useStoreCartCoupons,
 	useStoreCart,
 } from '@woocommerce/base-context/hooks';
-import { ExperimentalDiscountsMeta } from '@woocommerce/blocks-checkout';
+import {
+	ExperimentalDiscountsMeta,
+	TotalsWrapper,
+} from '@woocommerce/blocks-checkout';
 
 const DiscountSlotFill = (): JSX.Element => {
 	// Prepare props to pass to the ExperimentalOrderMeta slot fill. We need to pluck out receiveCart.
@@ -24,20 +27,20 @@ const DiscountSlotFill = (): JSX.Element => {
 
 const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const { cartTotals, cartCoupons } = useStoreCart();
-
 	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
 		<>
-			<TotalsDiscount
-				className={ `${ className } wc-block-components-totals-wrapper` }
-				cartCoupons={ cartCoupons }
-				currency={ totalsCurrency }
-				isRemovingCoupon={ isRemovingCoupon }
-				removeCoupon={ removeCoupon }
-				values={ cartTotals }
-			/>
+			<TotalsWrapper className={ className }>
+				<TotalsDiscount
+					cartCoupons={ cartCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
 			<DiscountSlotFill />
 		</>
 	);
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
index 5391b531df4..6520d697bfa 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsFees } from '@woocommerce/blocks-checkout';
+import { TotalsFees, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsFees
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			cartFees={ cartFees }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
index 2e2fa8d4361..84fd6e36b67 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
@@ -4,6 +4,7 @@
 import { TotalsShipping } from '@woocommerce/base-components/cart-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
 
 const Block = ( {
 	className = '',
@@ -19,13 +20,14 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsShipping
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showCalculator={ false }
-			showRateSelector={ false }
-			values={ cartTotals }
-			currency={ totalsCurrency }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsShipping
+				showCalculator={ false }
+				showRateSelector={ false }
+				values={ cartTotals }
+				currency={ totalsCurrency }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
index 6afd6e09904..1fbed502bf0 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Subtotal } from '@woocommerce/blocks-checkout';
+import { Subtotal, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 
@@ -10,11 +10,9 @@ const Block = ( { className = '' }: { className?: string } ): JSX.Element => {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<Subtotal
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<Subtotal currency={ totalsCurrency } values={ cartTotals } />
+		</TotalsWrapper>
 	);
 };
 
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
index 0982de3c111..2df7bd68a4e 100644
--- a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TotalsTaxes } from '@woocommerce/blocks-checkout';
+import { TotalsTaxes, TotalsWrapper } from '@woocommerce/blocks-checkout';
 import { getCurrencyFromPriceResponse } from '@woocommerce/price-format';
 import { useStoreCart } from '@woocommerce/base-context/hooks';
 import { getSetting } from '@woocommerce/settings';
@@ -29,12 +29,13 @@ const Block = ( {
 	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
 
 	return (
-		<TotalsTaxes
-			className={ `${ className } wc-block-components-totals-wrapper` }
-			showRateAfterTaxName={ showRateAfterTaxName }
-			currency={ totalsCurrency }
-			values={ cartTotals }
-		/>
+		<TotalsWrapper className={ className }>
+			<TotalsTaxes
+				showRateAfterTaxName={ showRateAfterTaxName }
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+		</TotalsWrapper>
 	);
 };
 
diff --git a/packages/checkout/components/totals-wrapper/index.tsx b/packages/checkout/components/totals-wrapper/index.tsx
index a2e01ba17e4..c196c3aa353 100644
--- a/packages/checkout/components/totals-wrapper/index.tsx
+++ b/packages/checkout/components/totals-wrapper/index.tsx
@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import classnames from 'classnames';
 import { Children, ReactNode } from 'react';
 
 /**
@@ -12,17 +13,23 @@ interface TotalsWrapperProps {
 	children: ReactNode;
 	/* If this TotalsWrapper is being used to wrap a Slot */
 	slotWrapper?: boolean;
+	className?: string;
 }
 
 const TotalsWrapper = ( {
 	children,
 	slotWrapper = false,
+	className,
 }: TotalsWrapperProps ): JSX.Element | null => {
 	return Children.count( children ) ? (
 		<div
-			className={ `wc-block-components-totals-wrapper${
-				slotWrapper ? ' slot-wrapper' : ''
-			}` }
+			className={ classnames(
+				className,
+				'wc-block-components-totals-wrapper',
+				{
+					'slot-wrapper': slotWrapper,
+				}
+			) }
 		>
 			{ children }
 		</div>
diff --git a/packages/checkout/components/totals-wrapper/style.scss b/packages/checkout/components/totals-wrapper/style.scss
index 32bbf8f9f17..6b2efde86da 100644
--- a/packages/checkout/components/totals-wrapper/style.scss
+++ b/packages/checkout/components/totals-wrapper/style.scss
@@ -7,6 +7,14 @@
 			border-bottom-width: 1px;
 		}
 	}
+	// TotalWrappers like Discount and Fee are sometimes empty
+	// this prevents displaying the empty areas in Order Summary
+	&:empty {
+		padding: 0;
+		&::after {
+			content: none;
+		}
+	}
 
 	&.slot-wrapper {
 		padding: 0;
@@ -15,6 +23,8 @@
 			@include with-translucent-border(0 0 1px);
 			padding: $gap 0;
 
+
+			// removes the border bottom for the last slot inserted
 			&:last-child::after {
 				border-bottom-width: 0;
 			}