From 1b0965ad631360116c13d5c40c37fcc88098ec59 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Fri, 1 Apr 2022 14:45:18 +0100
Subject: [PATCH] WIP: Add Inner blocks to order summary (#6065)

* Sub/Total/Fee inner blocks

* Row blocks within the inner block

* Update icons

* Resolve stying issues

* Remove old block

* Pin totals row

* Locking logic update

* Heading inner block

* Refactor where inner blocks are defined

* Add todos

* Todo for Consider deprecating OrderMetaSlotFill and DiscountSlotFill in favour of inner block areas.

* Improve frontend registration of components using new entrypoint

* Experiment- external block context

* Revert "Experiment- external block context"

This reverts commit 4b75668ec7eb62f065c6a488cd942a666e26204f.

* Duplicate inner blocks to avoid conflicts with context

* Remove todo

* Rename block dir

* Some test fixes

* Fix import

* fix import

* linting

* Remove unused attributes

* Optional classname

* fix coupons import

* fix shipping mocks

* Styling

* Fix selectors in e2e tests

* 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

* 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.

Co-authored-by: Nadir Seghir <nadir.seghir@gmail.com>
Co-authored-by: Raluca Stan <ralucastn@gmail.com>
---
 .../shipping-rates-control-package/style.scss |  10 -
 .../totals/footer-item/index.tsx              |   8 +-
 .../cart-order-summary-block/block.tsx        | 125 -------------
 .../cart/inner-blocks/register-components.ts  | 122 ------------
 .../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   |   3 +-
 .../{cart-checkout => }/cart/editor.scss      |  10 +
 .../{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   |   6 +
 .../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/block.json       |   0
 .../cart-order-summary-block/edit.tsx         |  74 ++++++++
 .../cart-order-summary-block/frontend.tsx     |  37 ++++
 .../cart-order-summary-block/index.tsx        |  25 +++
 .../cart-order-summary-block/slotfills.tsx    |  18 ++
 .../cart-order-summary-coupon-form/block.json |  29 +++
 .../cart-order-summary-coupon-form/block.tsx  |  28 +++
 .../cart-order-summary-coupon-form/edit.tsx   |  33 ++++
 .../frontend.tsx                              |   6 +
 .../cart-order-summary-coupon-form/index.tsx  |  24 +++
 .../cart-order-summary-discount/block.json    |  29 +++
 .../cart-order-summary-discount/block.tsx     |  49 +++++
 .../cart-order-summary-discount/edit.tsx      |  30 +++
 .../cart-order-summary-discount/frontend.tsx  |   6 +
 .../cart-order-summary-discount/index.tsx     |  25 +++
 .../cart-order-summary-fee/block.json         |  29 +++
 .../cart-order-summary-fee/block.tsx          |  19 ++
 .../cart-order-summary-fee/edit.tsx           |  30 +++
 .../cart-order-summary-fee/frontend.tsx       |   6 +
 .../cart-order-summary-fee/index.tsx          |  25 +++
 .../cart-order-summary-heading/attributes.ts  |  18 ++
 .../cart-order-summary-heading/block.json     |  33 ++++
 .../cart-order-summary-heading/block.tsx      |  24 +++
 .../cart-order-summary-heading/edit.tsx       |  48 +++++
 .../cart-order-summary-heading/editor.scss    |   8 +
 .../cart-order-summary-heading}/frontend.tsx  |   0
 .../cart-order-summary-heading/index.tsx      |  25 +++
 .../attributes.tsx                            |   6 +-
 .../cart-order-summary-shipping/block.json    |  25 +++
 .../cart-order-summary-shipping/block.tsx     |  36 ++++
 .../cart-order-summary-shipping/edit.tsx      |  74 ++++++++
 .../cart-order-summary-shipping}/frontend.tsx |   0
 .../cart-order-summary-shipping}/index.tsx    |   0
 .../cart-order-summary-subtotal/block.json    |  29 +++
 .../cart-order-summary-subtotal/block.tsx     |  19 ++
 .../cart-order-summary-subtotal/edit.tsx      |  30 +++
 .../cart-order-summary-subtotal/frontend.tsx  |   6 +
 .../cart-order-summary-subtotal/index.tsx     |  25 +++
 .../cart-order-summary-taxes/attributes.tsx   |  18 ++
 .../cart-order-summary-taxes/block.json       |  29 +++
 .../cart-order-summary-taxes/block.tsx        |  43 +++++
 .../cart-order-summary-taxes}/edit.tsx        |  50 +----
 .../cart-order-summary-taxes/frontend.tsx     |  12 ++
 .../cart-order-summary-taxes/index.tsx        |  27 +++
 .../inner-blocks/cart-totals-block/block.json |   0
 .../inner-blocks/cart-totals-block/edit.tsx   |   5 +-
 .../cart-totals-block/frontend.tsx            |   4 +-
 .../inner-blocks/cart-totals-block/index.tsx  |   0
 .../inner-blocks/cart-totals-block/style.scss |   0
 .../cart/inner-blocks/component-metadata.ts   |  38 ++++
 .../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               |   9 +-
 .../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    |  12 ++
 .../proceed-to-checkout-block/index.tsx       |   0
 .../proceed-to-checkout-block/style.scss      |   0
 .../cart/inner-blocks/register-components.ts  | 175 ++++++++++++++++++
 .../{cart-checkout => }/cart/style.scss       |   4 +
 .../{cart-checkout => }/cart/test/block.js    |  26 ++-
 .../blocks/{cart-checkout => }/cart/types.ts  |   0
 assets/js/blocks/checkout/edit.tsx            |   1 +
 .../attributes.tsx                            |   9 -
 .../checkout-order-summary-block/block.tsx    | 114 ------------
 .../checkout-order-summary-block/edit.tsx     | 110 +++++------
 .../checkout-order-summary-block/frontend.tsx |  37 ++++
 .../slotfills.tsx                             |  19 ++
 .../test/block.js                             |  49 +++--
 .../block.json                                |  29 +++
 .../block.tsx                                 |  18 ++
 .../edit.tsx                                  |  30 +++
 .../frontend.tsx                              |   6 +
 .../index.tsx                                 |  25 +++
 .../block.json                                |  29 +++
 .../block.tsx                                 |  32 ++++
 .../edit.tsx                                  |  33 ++++
 .../frontend.tsx                              |   6 +
 .../index.tsx                                 |  24 +++
 .../block.json                                |  29 +++
 .../checkout-order-summary-discount/block.tsx |  49 +++++
 .../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      |  19 ++
 .../checkout-order-summary-fee/edit.tsx       |  30 +++
 .../checkout-order-summary-fee/frontend.tsx   |   6 +
 .../checkout-order-summary-fee/index.tsx      |  25 +++
 .../block.json                                |  25 +++
 .../checkout-order-summary-shipping/block.tsx |  34 ++++
 .../checkout-order-summary-shipping/edit.tsx  |  33 ++++
 .../frontend.tsx                              |   6 +
 .../checkout-order-summary-shipping/index.tsx |  25 +++
 .../block.json                                |  29 +++
 .../checkout-order-summary-subtotal/block.tsx |  19 ++
 .../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    |  42 +++++
 .../checkout-order-summary-taxes/edit.tsx     |  76 ++++++++
 .../checkout-order-summary-taxes/frontend.tsx |  12 ++
 .../checkout-order-summary-taxes/index.tsx    |  27 +++
 .../checkout-totals-block/edit.tsx            |  10 +-
 .../checkout-totals-block/style.scss          |   1 -
 .../inner-blocks/component-metadata.ts        |  44 +++++
 .../js/blocks/checkout/inner-blocks/index.tsx |   7 +
 .../inner-blocks/register-components.ts       | 117 +++++++++---
 assets/js/blocks/checkout/styles/editor.scss  |   9 +
 assets/js/previews/cart.ts                    |  35 +++-
 bin/webpack-entries.js                        |   4 +-
 package.json                                  |   4 +-
 packages/checkout/blocks-registry/types.ts    |   2 +
 packages/checkout/components/panel/style.scss |   2 -
 .../components/totals-wrapper/index.tsx       |  13 +-
 .../components/totals-wrapper/style.scss      |  14 +-
 .../components/totals/item/style.scss         |   5 -
 .../components/totals/taxes/index.tsx         |  15 +-
 .../components/totals/taxes/style.scss        |  10 -
 .../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 +--
 tsconfig.json                                 |   2 +-
 175 files changed, 2645 insertions(+), 661 deletions(-)
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.tsx
 delete mode 100644 assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
 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 (98%)
 rename assets/js/blocks/{cart-checkout => }/cart/editor.scss (80%)
 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-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%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-express-payment-block/frontend.tsx
 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/block.json (100%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-block/edit.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-block/index.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.json
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.json
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/edit.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/frontend.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/index.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.json
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/edit.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/frontend.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/index.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/attributes.ts
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.json
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/editor.scss
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block => cart/inner-blocks/cart-order-summary-heading}/frontend.tsx (100%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/index.tsx
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block => cart/inner-blocks/cart-order-summary-shipping}/attributes.tsx (69%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.json
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/proceed-to-checkout-block => cart/inner-blocks/cart-order-summary-shipping}/frontend.tsx (100%)
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block => cart/inner-blocks/cart-order-summary-shipping}/index.tsx (100%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.json
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/edit.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/frontend.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/index.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/attributes.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.json
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
 rename assets/js/blocks/{cart-checkout/cart/inner-blocks/cart-order-summary-block => cart/inner-blocks/cart-order-summary-taxes}/edit.tsx (60%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/frontend.tsx
 create mode 100644 assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/index.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 (92%)
 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%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/component-metadata.ts
 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 (55%)
 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%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/frontend.tsx
 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%)
 create mode 100644 assets/js/blocks/cart/inner-blocks/register-components.ts
 rename assets/js/blocks/{cart-checkout => }/cart/style.scss (99%)
 rename assets/js/blocks/{cart-checkout => }/cart/test/block.js (89%)
 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/checkout-order-summary-cart-items/block.json
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/frontend.tsx
 create mode 100644 assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/index.tsx
 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/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
 create mode 100644 assets/js/blocks/checkout/inner-blocks/component-metadata.ts
 delete mode 100644 packages/checkout/components/totals/taxes/style.scss

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/base/components/cart-checkout/totals/footer-item/index.tsx b/assets/js/base/components/cart-checkout/totals/footer-item/index.tsx
index 26da5945def..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
@@ -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,7 @@ export interface TotalsFooterItemProps {
 	 * convenience, but will use only these two properties.
 	 */
 	values: LooselyMustHave< CartResponseTotals, 'total_price' | 'total_tax' >;
+	className?: string;
 }
 
 /**
@@ -42,6 +44,7 @@ export interface TotalsFooterItemProps {
 const TotalsFooterItem = ( {
 	currency,
 	values,
+	className,
 }: TotalsFooterItemProps ): JSX.Element => {
 	const SHOW_TAXES =
 		getSetting< boolean >( 'taxesEnabled', true ) &&
@@ -64,7 +67,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-order-summary-block/block.tsx b/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/block.tsx
deleted file mode 100644
index fa7bdfc6f77..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/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/register-components.ts b/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
deleted file mode 100644
index 09de5c2e619..00000000000
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/register-components.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * External dependencies
- */
-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 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: filledCartMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: emptyCartMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: filledCartMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/filled-cart" */ './filled-cart-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: emptyCartMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/empty-cart" */ './empty-cart-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: cartItemsMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/items" */ './cart-items-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: cartLineItemsMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/line-items" */ './cart-line-items-block/block'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: cartTotalsMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/totals" */ './cart-totals-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: cartOrderSummaryMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/order-summary" */ './cart-order-summary-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: cartExpressPaymentMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/express-payment" */ './cart-express-payment-block/block'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: cartProceedToCheckoutMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/checkout-button" */ './proceed-to-checkout-block/frontend'
-		)
-	),
-} );
-
-registerCheckoutBlock( {
-	metadata: cartAcceptedPaymentMethodsMetadata,
-	component: lazy( () =>
-		import(
-			/* webpackChunkName: "cart-blocks/accepted-payment-methods" */ './cart-accepted-payment-methods-block/frontend'
-		)
-	),
-} );
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 98%
rename from assets/js/blocks/cart-checkout/cart/edit.js
rename to assets/js/blocks/cart/edit.js
index aefbbe1d671..0e74e7ef108 100644
--- a/assets/js/blocks/cart-checkout/cart/edit.js
+++ b/assets/js/blocks/cart/edit.js
@@ -29,13 +29,14 @@ import { Icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import './inner-blocks';
 import './editor.scss';
 import {
 	addClassToBody,
 	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 80%
rename from assets/js/blocks/cart-checkout/cart/editor.scss
rename to assets/js/blocks/cart/editor.scss
index d3d93d5b5b2..a88f6759d31 100644
--- a/assets/js/blocks/cart-checkout/cart/editor.scss
+++ b/assets/js/blocks/cart/editor.scss
@@ -29,3 +29,13 @@ 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-wrapper {
+		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-accepted-payment-methods-block/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-accepted-payment-methods-block/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/inner-blocks/cart-express-payment-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/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-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/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/block.json
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
new file mode 100644
index 00000000000..f9e9e41269c
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/edit.tsx
@@ -0,0 +1,74 @@
+/**
+ * External dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import type { TemplateArray } from '@wordpress/blocks';
+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';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useForcedLayout,
+	getAllowedBlocks,
+} from '../../../cart-checkout/shared';
+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
+	);
+	const defaultTemplate = [
+		[
+			'woocommerce/cart-order-summary-heading-block',
+			{
+				content: __( 'Cart totals', 'woo-gutenberg-products-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( {
+		clientId,
+		registeredBlocks: allowedBlocks,
+		defaultTemplate,
+	} );
+
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks
+				allowedBlocks={ allowedBlocks }
+				template={ defaultTemplate }
+			/>
+			<div className="wc-block-components-totals-wrapper">
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
+				/>
+			</div>
+			{ /* do I put an totals wrapper here? */ }
+			<OrderMetaSlotFill />
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return (
+		<div { ...useBlockProps.save() }>
+			<InnerBlocks.Content />
+		</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
new file mode 100644
index 00000000000..b5d8d2a96bd
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/frontend.tsx
@@ -0,0 +1,37 @@
+/**
+ * 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 }
+			<div className="wc-block-components-totals-wrapper">
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
+				/>
+			</div>
+			<OrderMetaSlotFill />
+		</div>
+	);
+};
+
+export default FrontendBlock;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/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/inner-blocks/cart-order-summary-block/slotfills.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-block/slotfills.tsx
new file mode 100644
index 00000000000..7d571acc750
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart',
+	};
+
+	return <ExperimentalOrderMeta.Slot { ...slotFillProps } />;
+};
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.json
new file mode 100644
index 00000000000..96a928367cd
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/cart-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/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
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
new file mode 100644
index 00000000000..a10f3555699
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+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 );
+
+	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons();
+
+	if ( ! couponsEnabled ) {
+		return null;
+	}
+
+	return (
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/edit.tsx
new file mode 100644
index 00000000000..9a85bfb013b
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
new file mode 100644
index 00000000000..5badfa89545
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-discount/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.json
new file mode 100644
index 00000000000..6e627a59a05
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/cart-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/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
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
new file mode 100644
index 00000000000..3ae0a3f11ad
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/block.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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,
+	TotalsWrapper,
+} 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/cart',
+	};
+
+	return <ExperimentalDiscountsMeta.Slot { ...discountsSlotFillProps } />;
+};
+
+const Block = ( { className }: { className: string } ): JSX.Element => {
+	const { cartTotals, cartCoupons } = useStoreCart();
+	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<>
+			<TotalsWrapper className={ className }>
+				<TotalsDiscount
+					cartCoupons={ cartCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
+			<DiscountSlotFill />
+		</>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/edit.tsx
new file mode 100644
index 00000000000..5b589f4f095
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-discount/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-discount/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-fee/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.json
new file mode 100644
index 00000000000..fc39dce4981
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/cart-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/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
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
new file mode 100644
index 00000000000..1a118225ff3
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/block.tsx
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { TotalsFees, TotalsWrapper } 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 (
+		<TotalsWrapper className={ className }>
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+		</TotalsWrapper>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/edit.tsx
new file mode 100644
index 00000000000..5b589f4f095
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-fee/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-fee/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-heading/attributes.ts b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/attributes.ts
new file mode 100644
index 00000000000..fedd2b0abac
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-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/inner-blocks/cart-order-summary-heading/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.json
new file mode 100644
index 00000000000..6026baba422
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.json
@@ -0,0 +1,33 @@
+{
+	"name": "woocommerce/cart-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/inner-blocks/cart-order-summary-heading/block.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/block.tsx
new file mode 100644
index 00000000000..015c29f8f97
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-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/inner-blocks/cart-order-summary-heading/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/edit.tsx
new file mode 100644
index 00000000000..2b9c7e08b6a
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-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/inner-blocks/cart-order-summary-heading/editor.scss b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/editor.scss
new file mode 100644
index 00000000000..85a61a1027c
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/editor.scss
@@ -0,0 +1,8 @@
+.wp-block-woocommerce-cart-order-summary-heading-block {
+	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/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/cart/inner-blocks/cart-order-summary-block/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/frontend.tsx
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-heading/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-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/attributes.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx
similarity index 69%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/attributes.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx
index 5a449d32bfa..e5378cb59e8 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/cart-order-summary-block/attributes.tsx
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/attributes.tsx
@@ -8,14 +8,10 @@ export default {
 		type: 'boolean',
 		default: getSetting( 'isShippingCalculatorEnabled', true ),
 	},
-	showRateAfterTaxName: {
-		type: 'boolean',
-		default: getSetting( 'displayCartPricesIncludingTax', false ),
-	},
 	lock: {
 		type: 'object',
 		default: {
-			move: true,
+			move: false,
 			remove: true,
 		},
 	},
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.json
new file mode 100644
index 00000000000..39e512f84d1
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.json
@@ -0,0 +1,25 @@
+{
+	"name": "woocommerce/cart-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/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
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
new file mode 100644
index 00000000000..dacbbc32938
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/block.tsx
@@ -0,0 +1,36 @@
+/**
+ * External dependencies
+ */
+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,
+	isShippingCalculatorEnabled,
+}: {
+	className: string;
+	isShippingCalculatorEnabled: boolean;
+} ): JSX.Element | null => {
+	const { cartTotals, cartNeedsShipping } = useStoreCart();
+
+	if ( ! cartNeedsShipping ) {
+		return null;
+	}
+
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsWrapper className={ className }>
+			<TotalsShipping
+				showCalculator={ isShippingCalculatorEnabled }
+				showRateSelector={ true }
+				values={ cartTotals }
+				currency={ totalsCurrency }
+			/>
+		</TotalsWrapper>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx
new file mode 100644
index 00000000000..c541b07611b
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/edit.tsx
@@ -0,0 +1,74 @@
+/**
+ * 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: {
+		isShippingCalculatorEnabled: boolean;
+		className: string;
+		lock: {
+			move: boolean;
+			remove: boolean;
+		};
+	};
+	setAttributes: ( attributes: Record< string, unknown > ) => void;
+} ): JSX.Element => {
+	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 }
+					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
+				/>
+			</Noninteractive>
+		</div>
+	);
+};
+
+export const Save = (): JSX.Element => {
+	return <div { ...useBlockProps.save() } />;
+};
diff --git a/assets/js/blocks/cart-checkout/cart/inner-blocks/proceed-to-checkout-block/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/cart/inner-blocks/proceed-to-checkout-block/frontend.tsx
rename to assets/js/blocks/cart/inner-blocks/cart-order-summary-shipping/frontend.tsx
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-shipping/index.tsx
similarity index 100%
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-shipping/index.tsx
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.json
new file mode 100644
index 00000000000..75e0fb44461
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/cart-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/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
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
new file mode 100644
index 00000000000..1fbed502bf0
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/block.tsx
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { Subtotal, TotalsWrapper } 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 (
+		<TotalsWrapper className={ className }>
+			<Subtotal currency={ totalsCurrency } values={ cartTotals } />
+		</TotalsWrapper>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/edit.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/edit.tsx
new file mode 100644
index 00000000000..5b589f4f095
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-subtotal/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/frontend.tsx
@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import Block from './block';
+
+export default Block;
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-subtotal/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-taxes/attributes.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/attributes.tsx
new file mode 100644
index 00000000000..36d83faee28
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-taxes/block.json b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.json
new file mode 100644
index 00000000000..8a485d9f22d
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/cart-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/cart-order-summary-block" ],
+	"textdomain": "woo-gutenberg-products-block",
+	"apiVersion": 2
+}
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
new file mode 100644
index 00000000000..6c8c124641e
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/block.tsx
@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+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';
+
+const Block = ( {
+	className,
+	showRateAfterTaxName,
+}: {
+	className: string;
+	showRateAfterTaxName: boolean;
+} ): JSX.Element | null => {
+	const { cartTotals } = useStoreCart();
+
+	const displayCartPricesIncludingTax = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	);
+
+	if (
+		displayCartPricesIncludingTax ||
+		parseInt( cartTotals.total_tax, 10 ) <= 0
+	) {
+		return null;
+	}
+
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsWrapper className={ className }>
+			<TotalsTaxes
+				showRateAfterTaxName={ showRateAfterTaxName }
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+		</TotalsWrapper>
+	);
+};
+
+export default Block;
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-taxes/edit.tsx
similarity index 60%
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-taxes/edit.tsx
index 1f4b764d7cc..d7b925202c9 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-taxes/edit.tsx
@@ -5,7 +5,6 @@ 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
@@ -17,21 +16,12 @@ export const Edit = ( {
 	setAttributes,
 }: {
 	attributes: {
-		showRateAfterTaxName: boolean;
-		isShippingCalculatorEnabled: boolean;
 		className: string;
-		lock: {
-			move: boolean;
-			remove: boolean;
-		};
+		showRateAfterTaxName: boolean;
 	};
 	setAttributes: ( attributes: Record< string, unknown > ) => void;
 } ): JSX.Element => {
-	const {
-		showRateAfterTaxName,
-		isShippingCalculatorEnabled,
-		className,
-	} = attributes;
+	const { className, showRateAfterTaxName } = attributes;
 	const blockProps = useBlockProps();
 	const taxesEnabled = getSetting( 'taxesEnabled' ) as boolean;
 	const displayItemizedTaxes = getSetting(
@@ -45,31 +35,6 @@ export const Edit = ( {
 	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 && (
@@ -98,13 +63,10 @@ export const Edit = ( {
 						</PanelBody>
 					) }
 			</InspectorControls>
-			<Noninteractive>
-				<Block
-					className={ className }
-					showRateAfterTaxName={ showRateAfterTaxName }
-					isShippingCalculatorEnabled={ isShippingCalculatorEnabled }
-				/>
-			</Noninteractive>
+			<Block
+				className={ className }
+				showRateAfterTaxName={ showRateAfterTaxName }
+			/>
 		</div>
 	);
 };
diff --git a/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/frontend.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/frontend.tsx
new file mode 100644
index 00000000000..b6c773996b2
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/cart/inner-blocks/cart-order-summary-taxes/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-taxes/index.tsx
new file mode 100644
index 00000000000..72010b2cccc
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/cart-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/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 92%
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
index 8986a60a4fd..583fc60244d 100644
--- 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
@@ -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-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/inner-blocks/component-metadata.ts b/assets/js/blocks/cart/inner-blocks/component-metadata.ts
new file mode 100644
index 00000000000..cf979e31355
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/component-metadata.ts
@@ -0,0 +1,38 @@
+/**
+ * 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_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/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,
+	EMPTY_CART,
+	CART_ITEMS,
+	CART_EXPRESS_PAYMENT,
+	CART_LINE_ITEMS,
+	CART_TOTALS,
+	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-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 55%
rename from assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
rename to assets/js/blocks/cart/inner-blocks/index.tsx
index 651ab6fec45..003f6f54634 100644
--- a/assets/js/blocks/cart-checkout/cart/inner-blocks/index.tsx
+++ b/assets/js/blocks/cart/inner-blocks/index.tsx
@@ -5,8 +5,15 @@ 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-block';
+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-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/inner-blocks/proceed-to-checkout-block/frontend.tsx b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/frontend.tsx
new file mode 100644
index 00000000000..b6c773996b2
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/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/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/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
new file mode 100644
index 00000000000..fb645f51d60
--- /dev/null
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -0,0 +1,175 @@
+/**
+ * External dependencies
+ */
+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;
+
+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: metadata.CART_ITEMS,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-items" */
+			'./cart-items-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_LINE_ITEMS,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-line-items" */
+			'./cart-line-items-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_TOTALS,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-totals" */
+			'./cart-totals-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_EXPRESS_PAYMENT,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-express-payment" */
+			'./cart-express-payment-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.PROCEED_TO_CHECKOUT,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/proceed-to-checkout" */
+			'./proceed-to-checkout-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ACCEPTED_PAYMENT_METHODS,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-accepted-payment-methods" */
+			'./cart-accepted-payment-methods-block/frontend'
+		)
+	),
+} );
+
+registerCheckoutBlock( {
+	metadata: metadata.CART_ORDER_SUMMARY,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "cart-blocks/cart-order-summary" */
+			'./cart-order-summary-block/frontend'
+		)
+	),
+} );
+
+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/cart-checkout/cart/style.scss b/assets/js/blocks/cart/style.scss
similarity index 99%
rename from assets/js/blocks/cart-checkout/cart/style.scss
rename to assets/js/blocks/cart/style.scss
index 987a14b4c60..d3539cf4097 100644
--- a/assets/js/blocks/cart-checkout/cart/style.scss
+++ b/assets/js/blocks/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/assets/js/blocks/cart-checkout/cart/test/block.js b/assets/js/blocks/cart/test/block.js
similarity index 89%
rename from assets/js/blocks/cart-checkout/cart/test/block.js
rename to assets/js/blocks/cart/test/block.js
index a23529e5c05..f8a081d2253 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';
 
@@ -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/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/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/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..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
@@ -1,80 +1,66 @@
 /**
  * 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/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( {
+		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 }
+			<InnerBlocks
+				allowedBlocks={ allowedBlocks }
+				template={ defaultTemplate }
+			/>
+			<div className="wc-block-components-totals-wrapper">
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
 				/>
-			</Noninteractive>
+			</div>
+			<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..b5d8d2a96bd
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/frontend.tsx
@@ -0,0 +1,37 @@
+/**
+ * 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 }
+			<div className="wc-block-components-totals-wrapper">
+				<TotalsFooterItem
+					currency={ totalsCurrency }
+					values={ cartTotals }
+				/>
+			</div>
+			<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..7efdbdd1a2d
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/slotfills.tsx
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+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
+	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-order-summary-block/test/block.js b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/test/block.js
index 988fd56422d..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,31 +1,45 @@
 /**
  * External dependencies
  */
-import {
-	render,
-	findByText,
-	screen,
-	queryByText,
-} from '@testing-library/react';
+import { render, findByText, queryByText } from '@testing-library/react';
 
 /**
  * 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';
+import CartItemsBlock from '../../checkout-order-summary-cart-items/frontend';
+
+const Block = ( { showRateAfterTaxName = false } ) => (
+	<SummaryBlock>
+		<CartItemsBlock />
+		<SubtotalBlock />
+		<FeeBlock />
+		<DiscountBlock />
+		<CouponsBlock />
+		<ShippingBlock />
+		<TaxesBlock showRateAfterTaxName={ showRateAfterTaxName } />
+	</SummaryBlock>
+);
 
 const defaultUseStoreCartValue = {
 	cartItems: mockPreviewCart.items,
 	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,
@@ -44,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,
@@ -208,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();
 	} );
 
@@ -334,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();
 	} );
@@ -406,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();
 	} );
@@ -424,9 +438,7 @@ describe( 'Checkout Order Summary', () => {
 				...defaultUseStoreCartValue.cartTotals,
 				total_shipping: '4000',
 			},
-		} );
-		setUseShippingDataReturnValue( {
-			needsShipping: true,
+			cartNeedsShipping: true,
 			shippingRates: [
 				{
 					package_id: 0,
@@ -481,6 +493,7 @@ describe( 'Checkout Order Summary', () => {
 				},
 			],
 		} );
+
 		const { container } = render( <Block showRateAfterTaxName={ true } /> );
 		expect(
 			await findByText(
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.json b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.json
new file mode 100644
index 00000000000..9a96222cf32
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.json
@@ -0,0 +1,29 @@
+{
+	"name": "woocommerce/checkout-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/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
new file mode 100644
index 00000000000..e84596ecad5
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/block.tsx
@@ -0,0 +1,18 @@
+/**
+ * External dependencies
+ */
+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 (
+		<TotalsWrapper className={ className }>
+			<OrderSummary cartItems={ cartItems } />
+		</TotalsWrapper>
+	);
+};
+
+export default Block;
diff --git a/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/edit.tsx
new file mode 100644
index 00000000000..5b589f4f095
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/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-cart-items/frontend.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/frontend.tsx
new file mode 100644
index 00000000000..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/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-cart-items/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-cart-items/index.tsx
new file mode 100644
index 00000000000..3601a61418a
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-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/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..a54e57047dc
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-coupon-form/block.tsx
@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+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 );
+
+	const { applyCoupon, isApplyingCoupon } = useStoreCartCoupons();
+
+	if ( ! couponsEnabled ) {
+		return null;
+	}
+
+	return (
+		<TotalsWrapper className={ className }>
+			<TotalsCoupon
+				onSubmit={ applyCoupon }
+				isLoading={ isApplyingCoupon }
+			/>
+		</TotalsWrapper>
+	);
+};
+
+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..db257982cf4
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-discount/block.tsx
@@ -0,0 +1,49 @@
+/**
+ * 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,
+	TotalsWrapper,
+} 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, cartCoupons } = useStoreCart();
+	const { removeCoupon, isRemovingCoupon } = useStoreCartCoupons();
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<>
+			<TotalsWrapper className={ className }>
+				<TotalsDiscount
+					cartCoupons={ cartCoupons }
+					currency={ totalsCurrency }
+					isRemovingCoupon={ isRemovingCoupon }
+					removeCoupon={ removeCoupon }
+					values={ cartTotals }
+				/>
+			</TotalsWrapper>
+			<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..6520d697bfa
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-fee/block.tsx
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { TotalsFees, TotalsWrapper } 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 (
+		<TotalsWrapper className={ className }>
+			<TotalsFees currency={ totalsCurrency } cartFees={ cartFees } />
+		</TotalsWrapper>
+	);
+};
+
+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/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..84fd6e36b67
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/block.tsx
@@ -0,0 +1,34 @@
+/**
+ * External dependencies
+ */
+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 = '',
+}: {
+	className?: string;
+} ): JSX.Element | null => {
+	const { cartTotals, cartNeedsShipping } = useStoreCart();
+
+	if ( ! cartNeedsShipping ) {
+		return null;
+	}
+
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsWrapper className={ className }>
+			<TotalsShipping
+				showCalculator={ false }
+				showRateSelector={ false }
+				values={ cartTotals }
+				currency={ totalsCurrency }
+			/>
+		</TotalsWrapper>
+	);
+};
+
+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..d5b72b439a5
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-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;
+	};
+} ): 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..4fc9ad2897a
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/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-shipping/index.tsx b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/index.tsx
new file mode 100644
index 00000000000..ce580c46483
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-shipping/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-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..1fbed502bf0
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-subtotal/block.tsx
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import { Subtotal, TotalsWrapper } 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 (
+		<TotalsWrapper className={ className }>
+			<Subtotal currency={ totalsCurrency } values={ cartTotals } />
+		</TotalsWrapper>
+	);
+};
+
+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..2df7bd68a4e
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-taxes/block.tsx
@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+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';
+
+const Block = ( {
+	className,
+	showRateAfterTaxName,
+}: {
+	className: string;
+	showRateAfterTaxName: boolean;
+} ): JSX.Element | null => {
+	const { cartTotals } = useStoreCart();
+	const displayCartPricesIncludingTax = getSetting(
+		'displayCartPricesIncludingTax',
+		false
+	);
+
+	if (
+		displayCartPricesIncludingTax ||
+		parseInt( cartTotals.total_tax, 10 ) <= 0
+	) {
+		return null;
+	}
+
+	const totalsCurrency = getCurrencyFromPriceResponse( cartTotals );
+
+	return (
+		<TotalsWrapper className={ className }>
+			<TotalsTaxes
+				showRateAfterTaxName={ showRateAfterTaxName }
+				currency={ totalsCurrency }
+				values={ cartTotals }
+			/>
+		</TotalsWrapper>
+	);
+};
+
+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/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/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/inner-blocks/component-metadata.ts b/assets/js/blocks/checkout/inner-blocks/component-metadata.ts
new file mode 100644
index 00000000000..c757b0d3b63
--- /dev/null
+++ b/assets/js/blocks/checkout/inner-blocks/component-metadata.ts
@@ -0,0 +1,44 @@
+/**
+ * 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';
+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,
+	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,
+	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 83b50c31603..c605b2e2b55 100644
--- a/assets/js/blocks/checkout/inner-blocks/register-components.ts
+++ b/assets/js/blocks/checkout/inner-blocks/register-components.ts
@@ -5,29 +5,18 @@ 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';
+
+// 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 +25,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 +34,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 +43,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 +52,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 +61,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 +70,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutPaymentMetadata,
+	metadata: metadata.CHECKOUT_PAYMENT,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/payment" */ './checkout-payment-block/frontend'
@@ -90,7 +79,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 +88,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutTermsMetadata,
+	metadata: metadata.CHECKOUT_TERMS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/terms" */ './checkout-terms-block/frontend'
@@ -108,7 +97,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutActionsMetadata,
+	metadata: metadata.CHECKOUT_ACTIONS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/actions" */ './checkout-actions-block/frontend'
@@ -117,7 +106,7 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutTotalsMetadata,
+	metadata: metadata.CHECKOUT_TOTALS,
 	component: lazy( () =>
 		import(
 			/* webpackChunkName: "checkout-blocks/totals" */ './checkout-totals-block/frontend'
@@ -126,10 +115,80 @@ registerCheckoutBlock( {
 } );
 
 registerCheckoutBlock( {
-	metadata: checkoutOrderSummaryMetadata,
+	metadata: metadata.CHECKOUT_ORDER_SUMMARY,
+	component: lazy( () =>
+		import(
+			/* webpackChunkName: "checkout-blocks/order-summary" */ './checkout-order-summary-block/frontend'
+		)
+	),
+} );
+
+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" */ './checkout-order-summary-block/block'
+			/* webpackChunkName: "checkout-blocks/order-summary-cart-items" */
+			'./checkout-order-summary-cart-items/frontend'
 		)
 	),
 } );
diff --git a/assets/js/blocks/checkout/styles/editor.scss b/assets/js/blocks/checkout/styles/editor.scss
index fceab401626..a557a29bfab 100644
--- a/assets/js/blocks/checkout/styles/editor.scss
+++ b/assets/js/blocks/checkout/styles/editor.scss
@@ -72,3 +72,12 @@ 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-wrapper {
+		box-sizing: border-box;
+	}
+}
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',
 			},
 		],
 	},
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..72632ca5d93 100644
--- a/package.json
+++ b/package.json
@@ -18,8 +18,8 @@
 		"./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/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 54ad70a2a5f..7bbcbbdb7ee 100644
--- a/packages/checkout/blocks-registry/types.ts
+++ b/packages/checkout/blocks-registry/types.ts
@@ -23,6 +23,8 @@ 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',
+	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-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 a1c6a41e251..6b2efde86da 100644
--- a/packages/checkout/components/totals-wrapper/style.scss
+++ b/packages/checkout/components/totals-wrapper/style.scss
@@ -2,15 +2,19 @@
 	@include with-translucent-border(1px 0 0);
 	padding: $gap 0;
 
-	&:last-child {
-		padding-bottom: 0;
-	}
-
 	&.has-bottom-border {
 		&::after {
 			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;
@@ -19,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;
 			}
diff --git a/packages/checkout/components/totals/item/style.scss b/packages/checkout/components/totals/item/style.scss
index a355b41135c..1d623feb996 100644
--- a/packages/checkout/components/totals/item/style.scss
+++ b/packages/checkout/components/totals/item/style.scss
@@ -1,12 +1,7 @@
 .wc-block-components-totals-item {
 	display: flex;
 	flex-wrap: wrap;
-	margin: em($gap-small) 0 0;
 	width: 100%;
-
-	&:first-child {
-		margin-top: 0;
-	}
 }
 
 .wc-block-components-totals-item__label {
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;
-	}
-}
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 };
+		} )
 	);
 }
 
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/**/*"
 	],