Switch to correct view if inner block is selected (woocommerce#5358)

jonny-bull · Dec 14, 2021 · dca70e9 · dca70e9
1 parent 0a40a02
commit dca70e9
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 26 deletions.
diff --git a/assets/js/blocks/cart-checkout/cart/edit.js b/assets/js/blocks/cart-checkout/cart/edit.js
@@ -46,6 +46,19 @@ const ALLOWED_BLOCKS = [
 	'woocommerce/empty-cart-block',
 ];
 
+const views = [
+	{
+		view: 'woocommerce/filled-cart-block',
+		label: __( 'Filled Cart', 'woo-gutenberg-products-block' ),
+		icon: <Icon srcElement={ filledCart } />,
+	},
+	{
+		view: 'woocommerce/empty-cart-block',
+		label: __( 'Empty Cart', 'woo-gutenberg-products-block' ),
+		icon: <Icon srcElement={ removeCart } />,
+	},
+];
+
 const BlockSettings = ( { attributes, setAttributes } ) => {
 	const { hasDarkControls } = attributes;
 	const { currentPostId } = useEditorContext();
@@ -104,18 +117,7 @@ export const Edit = ( { className, attributes, setAttributes, clientId } ) => {
 	const { hasDarkControls } = attributes;
 	const { currentView, component: ViewSwitcherComponent } = useViewSwitcher(
 		clientId,
-		[
-			{
-				view: 'woocommerce/filled-cart-block',
-				label: __( 'Filled Cart', 'woo-gutenberg-products-block' ),
-				icon: <Icon srcElement={ filledCart } />,
-			},
-			{
-				view: 'woocommerce/empty-cart-block',
-				label: __( 'Empty Cart', 'woo-gutenberg-products-block' ),
-				icon: <Icon srcElement={ removeCart } />,
-			},
-		]
+		views
 	);
 	const defaultTemplate = [
 		[ 'woocommerce/filled-cart-block', {}, [] ],

diff --git a/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx b/assets/js/blocks/cart-checkout/mini-cart-contents/edit.tsx
@@ -22,6 +22,20 @@ const ALLOWED_BLOCKS = [
 	'woocommerce/filled-mini-cart-contents-block',
 	'woocommerce/empty-mini-cart-contents-block',
 ];
+
+const views = [
+	{
+		view: 'woocommerce/filled-mini-cart-contents-block',
+		label: __( 'Filled Mini Cart', 'woo-gutenberg-products-block' ),
+		icon: <Icon srcElement={ filledCart } />,
+	},
+	{
+		view: 'woocommerce/empty-mini-cart-contents-block',
+		label: __( 'Empty Mini Cart', 'woo-gutenberg-products-block' ),
+		icon: <Icon srcElement={ removeCart } />,
+	},
+];
+
 interface Props {
 	clientId: string;
 }
@@ -36,18 +50,7 @@ const Edit = ( { clientId }: Props ): ReactElement => {
 
 	const { currentView, component: ViewSwitcherComponent } = useViewSwitcher(
 		clientId,
-		[
-			{
-				view: 'woocommerce/filled-mini-cart-contents-block',
-				label: __( 'Filled Mini Cart', 'woo-gutenberg-products-block' ),
-				icon: <Icon srcElement={ filledCart } />,
-			},
-			{
-				view: 'woocommerce/empty-mini-cart-contents-block',
-				label: __( 'Empty Mini Cart', 'woo-gutenberg-products-block' ),
-				icon: <Icon srcElement={ removeCart } />,
-			},
-		]
+		views
 	);
 
 	useForcedLayout( {

diff --git a/assets/js/blocks/cart-checkout/shared/use-view-switcher.tsx b/assets/js/blocks/cart-checkout/shared/use-view-switcher.tsx
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import { useDispatch, select } from '@wordpress/data';
 import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 import { Icon, eye } from '@woocommerce/icons';
@@ -24,7 +24,45 @@ export const useViewSwitcher = (
 	const initialView = views[ 0 ];
 	const [ currentView, setCurrentView ] = useState( initialView );
 	const { selectBlock } = useDispatch( 'core/block-editor' );
-	const { getBlock } = select( blockEditorStore );
+	const {
+		getBlock,
+		getSelectedBlockClientId,
+		getBlockParentsByBlockName,
+	} = select( blockEditorStore );
+	const selectedBlockClientId = getSelectedBlockClientId();
+
+	useEffect( () => {
+		const viewNames = views.map( ( { view } ) => view );
+		const parentBlockIds = getBlockParentsByBlockName(
+			selectedBlockClientId,
+			viewNames
+		);
+
+		if ( parentBlockIds.length !== 1 ) {
+			return;
+		}
+		const parentBlock = getBlock( parentBlockIds[ 0 ] );
+
+		if ( currentView.view === parentBlock.name ) {
+			return;
+		}
+
+		const filteredViews = views.filter(
+			( { view } ) => view === parentBlock.name
+		);
+
+		if ( filteredViews.length !== 1 ) {
+			return;
+		}
+
+		setCurrentView( filteredViews[ 0 ] );
+	}, [
+		getBlockParentsByBlockName,
+		selectedBlockClientId,
+		getBlock,
+		currentView.view,
+		views,
+	] );
 
 	const ViewSwitcherComponent = (
 		<ToolbarGroup>