Mini Cart Contents block improvements (https://github.com/woocommerce/woocommerce-blocks/pull/5446)

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/mini-cart-contents/inner-blocks/empty-mini-cart-contents-block/edit.tsx

@@ -1,40 +1,50 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
-import { innerBlockAreas } from '@woocommerce/blocks-checkout';
-import type { TemplateArray } from '@wordpress/blocks';
 import { useEditorContext } from '@woocommerce/base-context';
+import { getBlockTypes } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
-import { useForcedLayout, getAllowedBlocks } from '../../../shared';
 
-export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
+const EXCLUDED_BLOCKS: readonly string[] = [
+	'woocommerce/mini-cart',
+	'woocommerce/single-product',
+	'core/post-template',
+	'core/comment-template',
+	'core/query-pagination',
+	'core/comments-query-loop',
+	'core/post-comments-form',
+	'core/post-comments-link',
+	'core/post-comments-count',
+	'core/comments-pagination',
+	'core/post-navigation-link',
+];
+
+export const Edit = (): JSX.Element => {
 	const blockProps = useBlockProps();
-	const allowedBlocks = getAllowedBlocks( innerBlockAreas.EMPTY_MINI_CART );
 	const { currentView } = useEditorContext();
+	const allowedBlocks = getBlockTypes()
+		.filter( ( block ) => {
+			if ( EXCLUDED_BLOCKS.includes( block.name ) ) {
+				return false;
+			}
 
-	const defaultTemplate = ( [
-		[
-			'core/heading',
-			{
-				content: __(
-					'Empty mini cart content',
-					'woo-gutenberg-products-block'
-				),
-				level: 2,
-			},
-		],
-	].filter( Boolean ) as unknown ) as TemplateArray;
+			// Exclude child blocks of EXCLUDED_BLOCKS.
+			if (
+				block.parent &&
+				block.parent.filter( ( value ) =>
+					EXCLUDED_BLOCKS.includes( value )
+				).length > 0
+			) {
+				return false;
+			}
 
-	useForcedLayout( {
-		clientId,
-		registeredBlocks: allowedBlocks,
-		defaultTemplate,
-	} );
+			return true;
+		} )
+		.map( ( { name } ) => name );
 
 	return (
 		<div
@@ -44,8 +54,7 @@ export const Edit = ( { clientId }: { clientId: string } ): JSX.Element => {
 			}
 		>
 			<InnerBlocks
-				template={ defaultTemplate }
-				templateLock={ false }
+				allowedBlocks={ allowedBlocks }
 				renderAppender={ InnerBlocks.ButtonBlockAppender }
 			/>
 		</div>

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/shared/use-view-switcher.tsx

@@ -14,6 +14,10 @@ interface View {
 	icon: string | JSX.Element;
 }
 
+function getView( viewName: string, views: View[] ) {
+	return views.find( ( view ) => view.view === viewName );
+}
+
 export const useViewSwitcher = (
 	clientId: string,
 	views: View[]
@@ -32,7 +36,25 @@ export const useViewSwitcher = (
 	const selectedBlockClientId = getSelectedBlockClientId();
 
 	useEffect( () => {
+		const selectedBlock = getBlock( selectedBlockClientId );
+
+		if ( ! selectedBlock ) {
+			return;
+		}
+
+		if ( currentView.view === selectedBlock.name ) {
+			return;
+		}
+
 		const viewNames = views.map( ( { view } ) => view );
+
+		if ( viewNames.includes( selectedBlock.name ) ) {
+			const newView = getView( selectedBlock.name, views );
+			if ( newView ) {
+				return setCurrentView( newView );
+			}
+		}
+
 		const parentBlockIds = getBlockParentsByBlockName(
 			selectedBlockClientId,
 			viewNames
@@ -47,15 +69,11 @@ export const useViewSwitcher = (
 			return;
 		}
 
-		const filteredViews = views.filter(
-			( { view } ) => view === parentBlock.name
-		);
+		const newView = getView( parentBlock.name, views );
 
-		if ( filteredViews.length !== 1 ) {
-			return;
+		if ( newView ) {
+			setCurrentView( newView );
 		}
-
-		setCurrentView( filteredViews[ 0 ] );
 	}, [
 		getBlockParentsByBlockName,
 		selectedBlockClientId,