Update: Use offsite navigation editor component on the navigation ins…

…pector.
WordPress · Dec 9, 2022 · a1900ac · a1900ac
1 parent 2c57000
commit a1900ac
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js
@@ -160,6 +160,7 @@ function ListViewBlock( {
 
 	const listViewBlockEditClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
+		'block-editor-list-view-block__edit-cell',
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 

diff --git a/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
@@ -17,6 +17,10 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import NavigationMenu from './navigation-menu';
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 
 const NAVIGATION_MENUS_QUERY = [ { per_page: -1, status: 'publish' } ];
 
@@ -168,7 +172,13 @@ export default function NavigationInspector() {
 	}, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] );
 
 	return (
-		<div className="edit-site-navigation-inspector">
+		<div
+			className={ classnames( 'edit-site-navigation-inspector', {
+				'is-offcanvas-editor-disabled':
+					window?.__experimentalEnableOffCanvasNavigationEditor !==
+					true,
+			} ) }
+		>
 			{ hasResolvedNavigationMenus && ! hasNavigationMenus && (
 				<p className="edit-site-navigation-inspector__empty-msg">
 					{ __( 'There are no Navigation Menus.' ) }

diff --git a/...ges/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js b/...ges/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalListView as ListView,
+	__experimentalOffCanvasEditor as OffCanvasEditor,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
@@ -31,7 +31,7 @@ const ALLOWED_BLOCKS = {
 	],
 };
 
-export default function NavigationMenu( { innerBlocks, id } ) {
+export default function NavigationMenu( { innerBlocks } ) {
 	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 
 	//TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList
@@ -48,5 +48,7 @@ export default function NavigationMenu( { innerBlocks, id } ) {
 			}
 		} );
 	}, [ updateBlockListSettings, innerBlocks ] );
-	return <ListView id={ id } />;
+	return (
+		<OffCanvasEditor blocks={ innerBlocks } selectBlockInCanvas={ false } />
+	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
@@ -24,6 +24,13 @@
 	}
 }
 
+.edit-site-navigation-inspector.is-offcanvas-editor-disabled {
+	.offcanvas-editor__appender,
+	.block-editor-list-view-block__edit-cell {
+		display: none;
+	}
+}
+
 .edit-site-navigation-inspector__placeholder {
 	padding: $grid-unit-10;
 	margin: $grid-unit-10;