diff --git a/assets/js/atomic/utils/render-parent-block.tsx b/assets/js/atomic/utils/render-parent-block.tsx
index bb6b2ecdf..155bbba7d 100644
--- a/assets/js/atomic/utils/render-parent-block.tsx
+++ b/assets/js/atomic/utils/render-parent-block.tsx
@@ -142,6 +142,20 @@ const renderInnerBlocks = ( {
 		return null;
 	}
 	return Array.from( children ).map( ( node: Node, index: number ) => {
+		/**
+		 * Do not process the node if its a `<wp-block>` element.
+		 */
+		const WpBlock = window.customElements.get( 'wp-block' );
+		if (
+			WpBlock &&
+			node instanceof HTMLElement &&
+			node instanceof WpBlock
+		) {
+			const reactElement = parse( node.outerHTML );
+
+			if ( isValidElement( reactElement ) )
+				return cloneElement( reactElement );
+		}
 		/**
 		 * This will grab the blockName from the data- attributes stored in block markup. Without a blockName, we cannot
 		 * convert the HTMLElement to a React component.
@@ -151,7 +165,6 @@ const renderInnerBlocks = ( {
 			...( node instanceof HTMLElement ? node.dataset : {} ),
 			className: node instanceof Element ? node?.className : '',
 		};
-
 		const InnerBlockComponent = getBlockComponentFromMap(
 			blockName,
 			blockMap
@@ -169,7 +182,6 @@ const renderInnerBlocks = ( {
 					node?.textContent ||
 					''
 			);
-
 			// Returns text nodes without manipulation.
 			if ( typeof parsedElement === 'string' && !! parsedElement ) {
 				return parsedElement;
diff --git a/assets/js/base/utils/bhe-blocks.tsx b/assets/js/base/utils/bhe-blocks.tsx
new file mode 100644
index 000000000..bfe6feaba
--- /dev/null
+++ b/assets/js/base/utils/bhe-blocks.tsx
@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { ReactElement } from 'react';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { registerBlockType as gutenbergRegisterBlockType } from '@wordpress/blocks';
+
+const Wrapper =
+	( Comp: ReactElement ) =>
+	( { attributes } ) =>
+		(
+			<>
+				{ /* Block Context is not available during save
+				https://wordpress.slack.com/archives/C02QB2JS7/p1649347999484329 */ }
+				<Comp
+					blockProps={ useBlockProps.save() }
+					attributes={ attributes }
+					context={ {} }
+				>
+					<wp-inner-blocks { ...useInnerBlocksProps.save() } />
+				</Comp>
+			</>
+		);
+
+export const registerBlockType = ( name, { edit, view, ...rest } ) => {
+	gutenbergRegisterBlockType( name, {
+		edit,
+		save: Wrapper( view ),
+		...rest,
+	} );
+};
diff --git a/assets/js/base/utils/bhe-element.tsx b/assets/js/base/utils/bhe-element.tsx
index fa1397bbb..4554d52da 100644
--- a/assets/js/base/utils/bhe-element.tsx
+++ b/assets/js/base/utils/bhe-element.tsx
@@ -1,23 +1,59 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
 /**
  * External dependencies
  */
+import {
+	createContext,
+	useContext as useReactContext,
+	useEffect as useReactEffect,
+	useState as useReactState,
+} from '@wordpress/element';
 import { hydrate as ReactHydrate } from 'react-dom';
-import { ReactElement } from 'react';
 
-type HydrateOptions = {
-	technique?: 'media' | 'view' | 'idle';
-	media?: string;
+export const EnvContext = createContext( null );
+
+/**
+ * A React hook that returns the name of the environment.
+ *
+ * This is still a bit hacky. Ideally, Save components should support React
+ * hooks and all the environments (Edit, Save and Frontend) should populate a
+ * normal context. Also, more environments could be added in the future.
+ *
+ * @return A string with the environment the component is loaded, can be {"edit" | "save" | "frontend"}
+ */
+export const useBlockEnvironment = () => {
+	try {
+		const env = useReactContext( EnvContext );
+		if ( env === 'frontend' ) {
+			return 'frontend';
+		}
+		return 'edit';
+	} catch ( e ) {
+		return 'save';
+	}
 };
 
-export const hydrate = (
-	element: ReactElement,
-	container: Element,
-	hydrationOptions: HydrateOptions = {}
-) => {
-	const { technique, media } = hydrationOptions;
+const noop = () => null;
+
+export const useState = ( init ) =>
+	useBlockEnvironment() !== 'save' ? useReactState( init ) : [ init, noop ];
+
+export const useEffect = ( ...args ) =>
+	useBlockEnvironment() !== 'save' ? useReactEffect( ...args ) : noop;
+
+export const useContext = ( Context ) =>
+	useBlockEnvironment() !== 'save'
+		? useReactContext( Context )
+		: Context._currentValue;
+
+export const hydrate = ( element, container, hydrationOptions ) => {
+	const { technique, media } = hydrationOptions || {};
+
 	const cb = () => {
 		ReactHydrate( element, container );
 	};
+
 	switch ( technique ) {
 		case 'media':
 			if ( media ) {
@@ -29,8 +65,10 @@ export const hydrate = (
 				}
 			}
 			break;
+
 		// Hydrate the element when is visible in the viewport.
 		// https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
+
 		case 'view':
 			try {
 				const io = new IntersectionObserver( ( entries ) => {
@@ -41,7 +79,7 @@ export const hydrate = (
 						// As soon as we hydrate, disconnect this IntersectionObserver.
 						io.disconnect();
 						cb();
-						break; // break loop on first match
+						break; // Break loop on first match.
 					}
 				} );
 				io.observe( container.children[ 0 ] );
@@ -49,15 +87,19 @@ export const hydrate = (
 				cb();
 			}
 			break;
+
 		case 'idle':
-			// Safari does not support requestIdleCalback, we use a timeout instead. https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
+			// Safari does not support requestIdleCalback, we use a timeout instead.
+			// https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback
 			if ( 'requestIdleCallback' in window ) {
 				window.requestIdleCallback( cb );
 			} else {
 				setTimeout( cb, 200 );
 			}
 			break;
+
 		// Hydrate this component immediately.
+
 		default:
 			cb();
 	}
diff --git a/assets/js/base/utils/bhe-frontend.tsx b/assets/js/base/utils/bhe-frontend.tsx
index 649d55a78..57161d228 100644
--- a/assets/js/base/utils/bhe-frontend.tsx
+++ b/assets/js/base/utils/bhe-frontend.tsx
@@ -7,8 +7,9 @@ import { unmountComponentAtNode } from 'react-dom';
 /**
  * Internal dependencies
  */
-import { matcherFromSource, pickKeys } from './utils';
-import { hydrate } from './bhe-element';
+import { Consumer, createProvider } from './bhe-react-context';
+import { createGlobal, matcherFromSource } from './utils';
+import { EnvContext, hydrate } from './bhe-element';
 
 declare global {
 	interface Window {
@@ -29,126 +30,188 @@ declare global {
 	}
 }
 
-// We assign `blockTypes` to window to make sure it's a global singleton.
-//
-// Have to do this because of the way we are currently bundling the code
-// in this repo, each block gets its own copy of this file.
-//
-// We COULD fix this by doing some webpack magic to spit out the code in
-// `gutenberg-packages` to a shared chunk but assigning `blockTypes` to window
-// is a cheap hack for now that will be fixed once we can merge this code into Gutenberg.
-if ( typeof window.blockTypes === 'undefined' ) {
-	window.blockTypes = new Map();
-}
+const blockTypes = createGlobal( 'wpBlockTypes', new Map() );
 
-export const registerBlockType = ( name: string, Comp: ReactElement ) => {
-	window.blockTypes.set( name, Comp );
+export const registerBlockType = (
+	name: string,
+	Component: ReactElement,
+	options
+) => {
+	blockTypes.set( name, { Component, options } );
 };
 
-const Children = ( { value, providedContext } ) => {
-	if ( ! value ) {
-		return null;
-	}
-	return (
-		<wp-inner-blocks
-			ref={ ( el ) => {
-				if ( el !== null ) {
-					// listen for the ping from the child
-					el.addEventListener( 'wp-block-context', ( event ) => {
-						// We have to also destructure `event.detail.context` because there can
-						// already exist a property in the context with the same name.
-						event.detail.context = {
-							...providedContext,
-							...event?.detail?.context,
-						};
-					} );
-				}
-			} }
-			suppressHydrationWarning={ true }
-			dangerouslySetInnerHTML={ { __html: value } }
-		/>
-	);
-};
+const Children = ( { value } ) => (
+	<wp-inner-blocks
+		suppressHydrationWarning={ true }
+		dangerouslySetInnerHTML={ { __html: value } }
+	/>
+);
 Children.shouldComponentUpdate = () => false;
 
+const Wrappers = ( { wrappers, children } ) => {
+	let result = children;
+	wrappers.forEach( ( wrapper ) => {
+		result = wrapper( { children: result } );
+	} );
+	return result;
+};
+
 class WpBlock extends HTMLElement {
 	connectedCallback() {
 		setTimeout( () => {
-			// ping the parent for the context
-			const event = new CustomEvent( 'wp-block-context', {
-				detail: {},
-				bubbles: true,
-				cancelable: true,
-			} );
-			this.dispatchEvent( event );
-
-			const usesContext = JSON.parse(
-				this.getAttribute(
-					'data-wp-block-uses-block-context'
-				) as string
-			);
-			const providesContext = JSON.parse(
-				this.getAttribute(
-					'data-wp-block-provides-block-context'
-				) as string
-			);
+			// Get the block attributes.
 			const attributes = JSON.parse(
-				this.getAttribute( 'data-wp-block-attributes' ) as string
+				this.getAttribute( 'data-wp-block-attributes' )
 			);
+
+			// Add the sourced attributes to the attributes object.
 			const sourcedAttributes = JSON.parse(
-				this.getAttribute(
-					'data-wp-block-sourced-attributes'
-				) as string
+				this.getAttribute( 'data-wp-block-sourced-attributes' )
 			);
-
 			for ( const attr in sourcedAttributes ) {
 				attributes[ attr ] = matcherFromSource(
 					sourcedAttributes[ attr ]
 				)( this );
 			}
 
-			// pass the context to children if needed
-			const providedContext =
-				providesContext &&
-				pickKeys( attributes, Object.keys( providesContext ) );
-
-			// select only the parts of the context that the block declared in
-			// the `usesContext` of its block.json
-			const context = pickKeys( event.detail.context, usesContext );
-
-			const blockType = this.getAttribute( 'data-wp-block-type' );
-			const blockProps = {
-				className: this.children[ 0 ].className,
-				style: this.children[ 0 ].style,
-			};
-
-			const innerBlocks = this.querySelector( 'wp-inner-blocks' );
-			const Comp = window.blockTypes.get( blockType );
-			const technique = this.getAttribute( 'data-wp-block-hydrate' );
-			const media = this.getAttribute( 'data-wp-block-media' );
-			const hydrationOptions = { technique, media };
-			hydrate(
-				<>
-					<Comp
-						attributes={ attributes }
-						blockProps={ blockProps }
-						suppressHydrationWarning={ true }
-						context={ context }
-					>
-						<Children
-							value={ innerBlocks && innerBlocks.innerHTML }
+			// Get the Block Context from their parents.
+			const blockContext = {};
+			const usesBlockContext = JSON.parse(
+				this.getAttribute( 'data-wp-block-uses-block-context' )
+			);
+			if ( usesBlockContext ) {
+				const event = new CustomEvent( 'wp-block-context', {
+					detail: { context: {} },
+					bubbles: true,
+					cancelable: true,
+				} );
+				this.dispatchEvent( event );
+
+				// Select only the parts of the context that the block declared in the
+				// `usesContext` of its block.json.
+				usesBlockContext.forEach(
+					( key ) =>
+						( blockContext[ key ] = event.detail.context[ key ] )
+				);
+			}
+
+			// Share the Block Context with their children.
+			const providesBlockContext = JSON.parse(
+				this.getAttribute( 'data-wp-block-provides-block-context' )
+			);
+			if ( providesBlockContext ) {
+				this.addEventListener( 'wp-block-context', ( event ) => {
+					// Select only the parts of the context that the block declared in
+					// the `providesContext` of its block.json.
+					Object.entries( providesBlockContext ).forEach(
+						( [ key, attribute ] ) => {
+							if ( ! event.detail.context[ key ] ) {
+								event.detail.context[ key ] =
+									attributes[ attribute ];
+							}
+						}
+					);
+				} );
+			}
+
+			// Hydrate the interactive blocks.
+			const hydration = this.getAttribute( 'data-wp-block-hydration' );
+
+			if ( hydration ) {
+				const Providers = [];
+
+				// Get the block type, block props (class and style), inner blocks,
+				// frontend component and options.
+				const blockType = this.getAttribute( 'data-wp-block-type' );
+				const innerBlocks = this.querySelector( 'wp-inner-blocks' );
+				const { Component, options } = blockTypes.get( blockType );
+				const { class: className, style } = JSON.parse(
+					this.getAttribute( 'data-wp-block-props' )
+				);
+				// Temporary element to translate style strings to style objects.
+				const el = document.createElement( 'div' );
+				el.style.cssText = style;
+				const blockProps = { className, style: el.style };
+				el.remove();
+
+				// Get the React Context from their parents.
+				options?.usesContext?.forEach( ( context ) => {
+					const event = new CustomEvent( 'wp-react-context', {
+						detail: { context },
+						bubbles: true,
+						cancelable: true,
+					} );
+					this.dispatchEvent( event );
+					if ( typeof event.detail.Provider === 'function' ) {
+						Providers.push( event.detail.Provider );
+					}
+				} );
+
+				// Share the React Context with their children.
+				if ( options?.providesContext?.length > 0 ) {
+					this.addEventListener( 'wp-react-context', ( event ) => {
+						for ( const context of options.providesContext ) {
+							// We compare the provided context with the received context.
+							if ( event.detail.context === context ) {
+								// If there's a match, we stop propagation.
+								event.stopPropagation();
+
+								// We return a Provider that is subscribed to the parent Provider.
+								event.detail.Provider = createProvider( {
+									element: this,
+									context,
+								} );
+
+								// We can stop the iteration.
+								break;
+							}
+						}
+					} );
+				}
+
+				const media = this.getAttribute(
+					'data-wp-block-hydration-media'
+				);
+
+				hydrate(
+					<EnvContext.Provider value="frontend">
+						{ /* Wrap the component with all the React Providers */ }
+						<Wrappers wrappers={ Providers }>
+							<Component
+								attributes={ attributes }
+								blockProps={ blockProps }
+								context={ blockContext }
+							>
+								{ /* Update the value each time one of the React Contexts changes */ }
+								{ options?.providesContext?.map(
+									( context, index ) => (
+										<Consumer
+											key={ index }
+											element={ this }
+											context={ context }
+										/>
+									)
+								) }
+
+								{ /* Render the inner blocks */ }
+								{ innerBlocks && (
+									<Children
+										value={ innerBlocks.innerHTML }
+										suppressHydrationWarning={ true }
+									/>
+								) }
+							</Component>
+						</Wrappers>
+
+						<template
+							className="wp-inner-blocks"
 							suppressHydrationWarning={ true }
-							providedContext={ providedContext }
 						/>
-					</Comp>
-					<template
-						className="wp-inner-blocks"
-						suppressHydrationWarning={ true }
-					/>
-				</>,
-				this,
-				hydrationOptions
-			);
+					</EnvContext.Provider>,
+					this,
+					{ technique: hydration, media }
+				);
+			}
 		} );
 	}
 
diff --git a/assets/js/base/utils/bhe-react-context.tsx b/assets/js/base/utils/bhe-react-context.tsx
new file mode 100644
index 000000000..cc19e0917
--- /dev/null
+++ b/assets/js/base/utils/bhe-react-context.tsx
@@ -0,0 +1,78 @@
+/**
+ * Internal dependencies
+ */
+import { createGlobal } from './utils';
+import { useEffect, useState } from './bhe-element';
+
+const subscribers = createGlobal( 'reactContextSubscribers', new WeakMap() );
+const values = createGlobal( 'reactContextValues', new WeakMap() );
+
+const updateValue = ( { element, context, value } ) => {
+	if ( ! values.has( element ) ) {
+		values.set( element, new WeakMap() );
+	}
+	values.get( element ).set( context, value );
+};
+
+const getValue = ( { element, context } ) => {
+	if ( values.has( element ) ) {
+		return values.get( element ).get( context );
+	}
+};
+
+const subscribe = ( { element, context, callback } ) => {
+	if ( ! subscribers.has( element ) ) {
+		subscribers.set( element, new WeakMap() );
+	}
+	if ( ! subscribers.get( element ).has( context ) ) {
+		subscribers.get( element ).set( context, new Set() );
+	}
+	subscribers.get( element ).get( context ).add( callback );
+};
+
+const unsubscribe = ( { element, context, callback } ) => {
+	subscribers.get( element ).get( context ).delete( callback );
+};
+
+const updateProvider = ( { element, context, value } ) => {
+	updateValue( { element, context, value } );
+
+	if (
+		subscribers.has( element ) &&
+		subscribers.get( element ).has( context )
+	) {
+		// This setTimeout prevents a React warning about calling setState inside a
+		// render() function, which is misleading because the render() function
+		// belongs to a different React application. It may not happen in React 18.
+		setTimeout( () => {
+			subscribers
+				.get( element )
+				.get( context )
+				.forEach( ( callback ) => callback( value ) );
+		} );
+	}
+};
+
+export const createProvider =
+	( { element, context } ) =>
+	( { children } ) => {
+		const [ value, setValue ] = useState(
+			getValue( { element, context } )
+		);
+
+		useEffect( () => {
+			subscribe( { element, context, callback: setValue } );
+			return () =>
+				unsubscribe( { element, context, callback: setValue } );
+		}, [] );
+
+		return (
+			<context.Provider value={ value }>{ children }</context.Provider>
+		);
+	};
+
+export const Consumer = ( { element, context } ) => (
+	<context.Consumer>
+		{ ( value ) => updateProvider( { element, context, value } ) }
+	</context.Consumer>
+);
diff --git a/assets/js/base/utils/utils.ts b/assets/js/base/utils/utils.ts
index c89a81b41..36c8e601f 100644
--- a/assets/js/base/utils/utils.ts
+++ b/assets/js/base/utils/utils.ts
@@ -31,3 +31,13 @@ export const matcherFromSource = ( sourceConfig ) => {
 			return text( sourceConfig.selector );
 	}
 };
+
+// We have to do this because of the way we are currently bundling the code in
+// this repo, each block gets its own copy of this file, but this won't happen
+// if/when we do this in Gutenberg.
+export const createGlobal = ( name, initialValue ) => {
+	if ( typeof window[ name ] === 'undefined' ) {
+		window[ name ] = initialValue;
+	}
+	return window[ name ];
+};
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
deleted file mode 100644
index 7983eae49..000000000
--- a/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/block.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * 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( 'wc/cart' );
-
-	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
index 9a85bfb01..62f7032a7 100644
--- 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
@@ -7,7 +7,7 @@ import Noninteractive from '@woocommerce/base-components/noninteractive';
 /**
  * Internal dependencies
  */
-import Block from './block';
+import Block from './frontend';
 
 export const Edit = ( {
 	attributes,
@@ -27,7 +27,3 @@ export const Edit = ( {
 		</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
index 4fc9ad289..17b02edc5 100644
--- 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
@@ -1,6 +1,39 @@
+/**
+ * External dependencies
+ */
+import { TotalsCoupon } from '@woocommerce/base-components/cart-checkout';
+import { getSetting } from '@woocommerce/settings';
+import { TotalsWrapper } from '@woocommerce/blocks-checkout';
+import { useStoreCartCoupons } from '@woocommerce/base-context/hooks';
+
 /**
  * Internal dependencies
  */
-import Block from './block';
+import { useBlockEnvironment } from '../../../../base/utils/bhe-element';
+
+const Block = ( { className }: { className: string } ): JSX.Element | null => {
+	const couponsEnabled = getSetting( 'couponsEnabled', true );
+	const environment = useBlockEnvironment();
+	const { applyCoupon, isApplyingCoupon } =
+		environment === 'frontend'
+			? // eslint-disable-next-line
+			  useStoreCartCoupons( 'wc/cart' )
+			: {
+					applyCoupon: () => null,
+					isApplyingCoupon: false,
+			  };
+	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/index.tsx b/assets/js/blocks/cart/inner-blocks/cart-order-summary-coupon-form/index.tsx
index 1f926b2ac..00028c292 100644
--- 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
@@ -2,25 +2,23 @@
  * External dependencies
  */
 import { Icon, tag } from '@wordpress/icons';
-import { registerFeaturePluginBlockType } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
  */
-import { Edit, Save } from './edit';
+import { Edit } from './edit';
+import Frontend from './frontend';
+import { registerBlockType } from '../../../../base/utils/bhe-blocks';
 
-registerFeaturePluginBlockType(
-	'woocommerce/cart-order-summary-coupon-form-block',
-	{
-		icon: {
-			src: (
-				<Icon
-					icon={ tag }
-					className="wc-block-editor-components-block-icon"
-				/>
-			),
-		},
-		edit: Edit,
-		save: Save,
-	}
-);
+registerBlockType( 'woocommerce/cart-order-summary-coupon-form-block', {
+	frontend: Frontend,
+	edit: Edit,
+	icon: {
+		src: (
+			<Icon
+				icon={ tag }
+				className="wc-block-editor-components-block-icon"
+			/>
+		),
+	},
+} );
diff --git a/assets/js/blocks/cart/inner-blocks/register-components.ts b/assets/js/blocks/cart/inner-blocks/register-components.ts
index bf4ac082f..ebc54cc10 100644
--- a/assets/js/blocks/cart/inner-blocks/register-components.ts
+++ b/assets/js/blocks/cart/inner-blocks/register-components.ts
@@ -9,6 +9,8 @@ import { registerCheckoutBlock } from '@woocommerce/blocks-checkout';
  * Internal dependencies
  */
 import metadata from './component-metadata';
+import { registerBlockType } from '../../../base/utils/bhe-frontend';
+import CouponBlock from '../../cart/inner-blocks/cart-order-summary-coupon-form/frontend';
 
 // Modify webpack publicPath at runtime based on location of WordPress Plugin.
 // eslint-disable-next-line no-undef,camelcase
@@ -157,16 +159,22 @@ registerCheckoutBlock( {
 	),
 } );
 
-registerCheckoutBlock( {
-	metadata: metadata.CART_ORDER_SUMMARY_COUPON_FORM,
-	component: lazy(
-		() =>
-			import(
-				/* webpackChunkName: "cart-blocks/order-summary-coupon-form" */
-				'./cart-order-summary-coupon-form/frontend'
-			)
-	),
-} );
+// Hide registering the block the default way, using instead bhe-frontend.
+registerBlockType(
+	'woocommerce/cart-order-summary-coupon-form-block',
+	CouponBlock
+);
+
+// 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_SHIPPING,
diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
index 79c0fe272..b7dbead04 100644
--- a/src/BlockTypesController.php
+++ b/src/BlockTypesController.php
@@ -100,7 +100,14 @@ public function add_data_attributes( $content, $block ) {
 			return $content;
 		}
 
-		if ( 'woocommerce/all-products' === $block_name ) {
+		if ( in_array(
+			$block_name,
+			array(
+				'woocommerce/all-products',
+				'woocommerce/cart-order-summary-coupon-form-block',
+			),
+			true
+		) ) {
 			return $content;
 		}
 
@@ -143,6 +150,7 @@ public function block_hydration_wrapper( $block_content, $block, $instance ) {
 			$block['blockName'],
 			array(
 				'woocommerce/all-products',
+				'woocommerce/cart-order-summary-coupon-form-block',
 			),
 			true
 		) ) {