Switch to parent block when changing views

assets/js/blocks/cart-checkout/cart-i2/edit.tsx

@@ -141,24 +141,29 @@ export const Edit = ( {
 	className,
 	attributes,
 	setAttributes,
+	clientId,
 }: {
 	className: string;
 	attributes: Attributes;
 	setAttributes: ( attributes: Record< string, unknown > ) => undefined;
+	clientId: string;
 } ): JSX.Element => {
-	const { currentView, component: ViewSwitcherComponent } = useViewSwitcher( [
-		{
-			view: 'emptyCart',
-			label: __( 'Empty Cart', 'woo-gutenberg-products-block' ),
-			icon: <Icon srcElement={ removeCart } />,
-		},
-		{
-			view: 'filledCart',
-			label: __( 'Filled Cart', 'woo-gutenberg-products-block' ),
-			icon: <Icon srcElement={ filledCart } />,
-			default: true,
-		},
-	] );
+	const { currentView, component: ViewSwitcherComponent } = useViewSwitcher(
+		clientId,
+		[
+			{
+				view: 'emptyCart',
+				label: __( 'Empty Cart', 'woo-gutenberg-products-block' ),
+				icon: <Icon srcElement={ removeCart } />,
+			},
+			{
+				view: 'filledCart',
+				label: __( 'Filled Cart', 'woo-gutenberg-products-block' ),
+				icon: <Icon srcElement={ filledCart } />,
+				default: true,
+			},
+		]
+	);
 	const cartClassName = classnames( {
 		'has-dark-controls': attributes.hasDarkControls,
 	} );

assets/js/blocks/cart-checkout/cart-i2/use-view-switcher.tsx

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import { Toolbar, ToolbarDropdownMenu } from '@wordpress/components';
 import { Icon, eye } from '@woocommerce/icons';
 
@@ -14,6 +15,7 @@ interface View {
 }
 
 export const useViewSwitcher = (
+	clientId: string,
 	views: View[]
 ): {
 	currentView: string;
@@ -22,6 +24,7 @@ export const useViewSwitcher = (
 	const initialView =
 		views?.find( ( view ) => view.default === true ) || views[ 0 ];
 	const [ currentView, setCurrentView ] = useState( initialView );
+	const { selectBlock } = useDispatch( 'core/block-editor' );
 
 	const ViewSwitcherComponent = () => (
 		<Toolbar>
@@ -34,7 +37,10 @@ export const useViewSwitcher = (
 				controls={ views.map( ( view ) => ( {
 					...view,
 					title: view.label,
-					onClick: () => setCurrentView( view ),
+					onClick: () => {
+						setCurrentView( view );
+						selectBlock( clientId );
+					},
 				} ) ) }
 			/>
 		</Toolbar>