Adds a list view to the navigation block (#45546)

* add list view to navigation block * adds a selectBlockInCanvas to allow control on block selection from list view * Update packages/block-library/src/navigation/edit/index.js * Update packages/block-library/src/navigation/edit/index.js * Update packages/block-library/src/navigation/edit/index.js * remove duplicated comment * remove duplicated comment * remove duplicated comment Co-authored-by: Ben Dwyer <[email protected]>
WordPress · Nov 8, 2022 · 68ee5cc · 68ee5cc
1 parent a2e7f8d
commit 68ee5cc
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 47 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
@@ -54,6 +54,7 @@ function ListViewBlock( {
 	isExpanded,
 	selectedClientIds,
 	preventAnnouncement,
+	selectBlockInCanvas,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -245,7 +246,13 @@ function ListViewBlock( {
 					<div className="block-editor-list-view-block__contents-container">
 						<ListViewBlockContents
 							block={ block }
-							onClick={ selectEditorBlock }
+							onClick={
+								selectBlockInCanvas
+									? selectEditorBlock
+									: ( event ) => {
+											event.preventDefault();
+									  }
+							}
 							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }

diff --git a/packages/block-editor/src/components/off-canvas-editor/branch.js b/packages/block-editor/src/components/off-canvas-editor/branch.js
@@ -4,9 +4,6 @@
 import { memo } from '@wordpress/element';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
 /**
  * Internal dependencies
  */
@@ -92,6 +89,7 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
+		selectBlockInCanvas,
 	} = props;
 
 	const isContentLocked = useSelect(
@@ -174,6 +172,7 @@ function ListViewBranch( props ) {
 								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
+								selectBlockInCanvas={ selectBlockInCanvas }
 							/>
 						) }
 						{ ! showBlock && (
@@ -194,6 +193,7 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
+								selectBlockInCanvas={ selectBlockInCanvas }
 							/>
 						) }
 					</AsyncModeProvider>

diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js
@@ -50,15 +50,22 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                 Components props.
- * @param {string}  props.id              An HTML element id for the root element of ListView.
- * @param {Array}   props.blocks          Custom subset of block client IDs to be used instead of the default hierarchy.
- * @param {boolean} props.showBlockMovers Flag to enable block movers
- * @param {boolean} props.isExpanded      Flag to determine whether nested levels are expanded by default.
- * @param {Object}  ref                   Forwarded ref
+ * @param {Object}  props                     Components props.
+ * @param {string}  props.id                  An HTML element id for the root element of ListView.
+ * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {boolean} props.showBlockMovers     Flag to enable block movers
+ * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.
+ * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
+ * @param {Object}  ref                       Forwarded ref
  */
 function __ExperimentalOffCanvasEditor(
-	{ id, blocks, showBlockMovers = false, isExpanded = false },
+	{
+		id,
+		blocks,
+		showBlockMovers = false,
+		isExpanded = false,
+		selectBlockInCanvas = true,
+	},
 	ref
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
@@ -199,6 +206,7 @@ function __ExperimentalOffCanvasEditor(
 						selectedClientIds={ selectedClientIds }
 						isExpanded={ isExpanded }
 						shouldShowInnerBlocks={ shouldShowInnerBlocks }
+						selectBlockInCanvas={ selectBlockInCanvas }
 					/>
 				</ListViewContext.Provider>
 			</TreeGrid>

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { useState, useEffect, useRef, Platform } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
 import {
+	__experimentalOffCanvasEditor as OffCanvasEditor,
 	InspectorControls,
 	useBlockProps,
 	__experimentalRecursionProvider as RecursionProvider,
@@ -82,6 +83,9 @@ function Navigation( {
 	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
 } ) {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
 	const {
 		openSubmenusOnClick,
 		overlayMenu,
@@ -676,18 +680,27 @@ function Navigation( {
 							/* translators: %s: The name of a menu. */
 							actionLabel={ __( "Switch to '%s'" ) }
 						/>
-						<Button
-							variant="link"
-							disabled={
-								! hasManagePermissions ||
-								! hasResolvedNavigationMenus
-							}
-							href={ addQueryArgs( 'edit.php', {
-								post_type: 'wp_navigation',
-							} ) }
-						>
-							{ __( 'Manage menus' ) }
-						</Button>
+						{ isOffCanvasNavigationEditorEnabled && (
+							<OffCanvasEditor
+								blocks={ innerBlocks }
+								isExpanded={ true }
+								selectBlockInCanvas={ false }
+							/>
+						) }
+						{ ! isOffCanvasNavigationEditorEnabled && (
+							<Button
+								variant="link"
+								disabled={
+									! hasManagePermissions ||
+									! hasResolvedNavigationMenus
+								}
+								href={ addQueryArgs( 'edit.php', {
+									post_type: 'wp_navigation',
+								} ) }
+							>
+								{ __( 'Manage menus' ) }
+							</Button>
+						) }
 					</PanelBody>
 				</InspectorControls>
 				{ stylingInspectorControls }
@@ -759,18 +772,20 @@ function Navigation( {
 							/* translators: %s: The name of a menu. */
 							actionLabel={ __( "Switch to '%s'" ) }
 						/>
-						<Button
-							variant="link"
-							disabled={
-								! hasManagePermissions ||
-								! hasResolvedNavigationMenus
-							}
-							href={ addQueryArgs( 'edit.php', {
-								post_type: 'wp_navigation',
-							} ) }
-						>
-							{ __( 'Manage menus' ) }
-						</Button>
+						{ ! isOffCanvasNavigationEditorEnabled && (
+							<Button
+								variant="link"
+								disabled={
+									! hasManagePermissions ||
+									! hasResolvedNavigationMenus
+								}
+								href={ addQueryArgs( 'edit.php', {
+									post_type: 'wp_navigation',
+								} ) }
+							>
+								{ __( 'Manage menus' ) }
+							</Button>
+						) }
 					</PanelBody>
 				</InspectorControls>
 				<Warning>
@@ -877,18 +892,27 @@ function Navigation( {
 							/* translators: %s: The name of a menu. */
 							actionLabel={ __( "Switch to '%s'" ) }
 						/>
-						<Button
-							variant="link"
-							disabled={
-								! hasManagePermissions ||
-								! hasResolvedNavigationMenus
-							}
-							href={ addQueryArgs( 'edit.php', {
-								post_type: 'wp_navigation',
-							} ) }
-						>
-							{ __( 'Manage menus' ) }
-						</Button>
+						{ isOffCanvasNavigationEditorEnabled && (
+							<OffCanvasEditor
+								blocks={ innerBlocks }
+								isExpanded={ true }
+								selectBlockInCanvas={ false }
+							/>
+						) }
+						{ ! isOffCanvasNavigationEditorEnabled && (
+							<Button
+								variant="link"
+								disabled={
+									! hasManagePermissions ||
+									! hasResolvedNavigationMenus
+								}
+								href={ addQueryArgs( 'edit.php', {
+									post_type: 'wp_navigation',
+								} ) }
+							>
+								{ __( 'Manage menus' ) }
+							</Button>
+						) }
 					</PanelBody>
 				</InspectorControls>
 				{ stylingInspectorControls }
@@ -915,6 +939,21 @@ function Navigation( {
 									} }
 								/>
 							) }
+						{ isOffCanvasNavigationEditorEnabled && (
+							<Button
+								variant="link"
+								className="wp-block-navigation-manage-menus-button"
+								disabled={
+									! hasManagePermissions ||
+									! hasResolvedNavigationMenus
+								}
+								href={ addQueryArgs( 'edit.php', {
+									post_type: 'wp_navigation',
+								} ) }
+							>
+								{ __( 'Manage menus' ) }
+							</Button>
+						) }
 					</InspectorControls>
 				) }
 

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -582,6 +582,13 @@ body.editor-styles-wrapper
 	margin-bottom: $grid-unit-20;
 }
 
+// increased specificity to override button variant
+// for the manage menus button in the advanced area
+// of the navigation block
+.components-button.is-link.wp-block-navigation-manage-menus-button {
+	margin-bottom: $grid-unit-20;
+}
+
 .wp-block-navigation__overlay-menu-preview {
 	display: flex;
 	align-items: center;