Clear block selection when changing menus

WordPress · Apr 3, 2020 · 4aa01fb · 4aa01fb
1 parent d674147
commit 4aa01fb
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 43 deletions.
diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+
+import {
+	BlockList,
+	BlockToolbar,
+	NavigableToolbar,
+	ObserveTyping,
+	WritingFlow,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Button, Panel, PanelBody } from '@wordpress/components';
+
+export default function BlockEditorPanel( { menuId, saveBlocks } ) {
+	const { clearSelectedBlock } = useDispatch( 'core/block-editor' );
+
+	// Clear the selected block when the menu is changed.
+	// Block selection isn't cleared implicity by the block-editor store.
+	// Dispatching this action fixes an issue where the toolbar
+	// for a block continues to be displayed after it no longer exists.
+	useEffect( () => {
+		clearSelectedBlock();
+	}, [ menuId ] );
+
+	return (
+		<Panel
+			header={
+				<Button isPrimary onClick={ saveBlocks }>
+					{ __( 'Save navigation' ) }
+				</Button>
+			}
+		>
+			<PanelBody title={ __( 'Navigation menu' ) }>
+				<NavigableToolbar
+					className="edit-navigation-menu-editor__block-editor-toolbar"
+					aria-label={ __( 'Block tools' ) }
+				>
+					<BlockToolbar hideDragHandle />
+				</NavigableToolbar>
+				<WritingFlow>
+					<ObserveTyping>
+						<BlockList />
+					</ObserveTyping>
+				</WritingFlow>
+			</PanelBody>
+		</Panel>
+	);
+}
diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js
@@ -4,20 +4,14 @@
 import {
 	BlockEditorKeyboardShortcuts,
 	BlockEditorProvider,
-	BlockList,
-	BlockToolbar,
-	NavigableToolbar,
-	ObserveTyping,
-	WritingFlow,
-	__experimentalBlockNavigationList,
 } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-import { Button, Panel, PanelBody } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import useNavigationBlocks from './use-navigation-blocks';
+import BlockEditorPanel from './block-editor-panel';
+import NavigationStructurePanel from './navigation-structure-panel';
 
 export default function MenuEditor( { menuId, blockEditorSettings } ) {
 	const [ blocks, setBlocks, saveBlocks ] = useNavigationBlocks( menuId );
@@ -37,40 +31,8 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 				} }
 			>
 				<BlockEditorKeyboardShortcuts />
-				<Panel>
-					<PanelBody title={ __( 'Navigation structure' ) }>
-						{ !! blocks.length && (
-							<__experimentalBlockNavigationList
-								blocks={ blocks }
-								selectedBlockClientId={ blocks[ 0 ].clientId }
-								selectBlock={ () => {} }
-								showNestedBlocks
-								showAppender
-							/>
-						) }
-					</PanelBody>
-				</Panel>
-				<Panel
-					header={
-						<Button isPrimary onClick={ saveBlocks }>
-							{ __( 'Save navigation' ) }
-						</Button>
-					}
-				>
-					<PanelBody title={ __( 'Navigation menu' ) }>
-						<NavigableToolbar
-							className="edit-navigation-menu-editor__toolbar"
-							aria-label={ __( 'Block tools' ) }
-						>
-							<BlockToolbar hideDragHandle />
-						</NavigableToolbar>
-						<WritingFlow>
-							<ObserveTyping>
-								<BlockList />
-							</ObserveTyping>
-						</WritingFlow>
-					</PanelBody>
-				</Panel>
+				<NavigationStructurePanel blocks={ blocks } />
+				<BlockEditorPanel menuId={ menuId } saveBlocks={ saveBlocks } />
 			</BlockEditorProvider>
 		</div>
 	);

diff --git a/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js b/packages/edit-navigation/src/components/menu-editor/navigation-structure-panel.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalBlockNavigationList } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { Panel, PanelBody } from '@wordpress/components';
+
+export default function NavigationStructurePanel( { blocks } ) {
+	return (
+		<Panel>
+			<PanelBody title={ __( 'Navigation structure' ) }>
+				{ !! blocks.length && (
+					<__experimentalBlockNavigationList
+						blocks={ blocks }
+						selectedBlockClientId={ blocks[ 0 ].clientId }
+						selectBlock={ () => {} }
+						showNestedBlocks
+						showAppender
+					/>
+				) }
+			</PanelBody>
+		</Panel>
+	);
+}
diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -9,7 +9,7 @@
 	}
 }
 
-.edit-navigation-menu-editor__toolbar {
+.edit-navigation-menu-editor__block-editor-toolbar {
 	height: 46px;
 	margin-bottom: 16px;
 	border: 1px solid #e2e4e7;