Disable slots/fills in global editor block navigator

WordPress · Apr 29, 2020 · b54cf0f · b54cf0f
1 parent 8f4efb4
commit b54cf0f
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 26 deletions.
diff --git a/packages/block-editor/src/components/block-navigation/dropdown.js b/packages/block-editor/src/components/block-navigation/dropdown.js
@@ -71,7 +71,7 @@ function BlockNavigationDropdown( { isDisabled } ) {
 				/>
 			) }
 			renderContent={ ( { onClose } ) => (
-				<BlockNavigation onSelect={ onClose } />
+				<BlockNavigation onSelect={ onClose } withSlots={ false } />
 			) }
 		/>
 	);

diff --git a/packages/block-editor/src/components/block-navigation/index.js b/packages/block-editor/src/components/block-navigation/index.js
@@ -21,6 +21,7 @@ function BlockNavigation( {
 	rootBlocks,
 	selectedBlockClientId,
 	selectBlock,
+	withSlots,
 } ) {
 	if ( ! rootBlocks || rootBlocks.length === 0 ) {
 		return null;
@@ -44,6 +45,7 @@ function BlockNavigation( {
 					blocks={ [ rootBlock ] }
 					selectedBlockClientId={ selectedBlockClientId }
 					selectBlock={ selectBlock }
+					withSlots={ withSlots }
 					showNestedBlocks
 				/>
 			) }
@@ -52,12 +54,17 @@ function BlockNavigation( {
 					blocks={ rootBlocks }
 					selectedBlockClientId={ selectedBlockClientId }
 					selectBlock={ selectBlock }
+					withSlots={ withSlots }
 				/>
 			) }
 		</NavigableMenu>
 	);
 }
 
+BlockNavigation.defaultProps = {
+	withSlots: true,
+};
+
 export default compose(
 	withSelect( ( select ) => {
 		const {

diff --git a/packages/block-editor/src/components/block-navigation/list-item.js b/packages/block-editor/src/components/block-navigation/list-item.js
@@ -39,7 +39,9 @@ export default function BlockNavigationListItem( {
 				onClick={ onClick }
 			>
 				<BlockIcon icon={ blockType.icon } showColors />
-				{ children ? children : getBlockLabel( blockType, block.attributes ) }
+				{ children
+					? children
+					: getBlockLabel( blockType, block.attributes ) }
 				{ isSelected && (
 					<VisuallyHidden as="span">
 						{ __( '(selected block)' ) }

diff --git a/packages/block-editor/src/components/block-navigation/list.js b/packages/block-editor/src/components/block-navigation/list.js
@@ -6,8 +6,8 @@ import { isNil, map, omitBy } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Slot, Fill } from "@wordpress/components";
-import { Children, cloneElement } from "@wordpress/element";
+import { Slot, Fill } from '@wordpress/components';
+import { Children, cloneElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -17,14 +17,19 @@ import ButtonBlockAppender from '../button-block-appender';
 
 const listItemSlotName = ( blockId ) => `BlockNavigationList-item-${ blockId }`;
 
-export const ListItemSlot = ( { blockId, ...props } ) => <Slot { ...props } name={ listItemSlotName( blockId ) }/>;
-export const ListItemFill = ( { blockId, ...props } ) => <Fill { ...props } name={ listItemSlotName( blockId ) }/>;
+export const ListItemSlot = ( { blockId, ...props } ) => (
+	<Slot { ...props } name={ listItemSlotName( blockId ) } />
+);
+export const ListItemFill = ( { blockId, ...props } ) => (
+	<Fill { ...props } name={ listItemSlotName( blockId ) } />
+);
 
 export default function BlockNavigationList( {
 	blocks,
 	selectedBlockClientId,
-	onItemClick,
+	selectBlock,
 	showAppender,
+	withSlots,
 
 	// Internal use only.
 	showNestedBlocks,
@@ -44,15 +49,27 @@ export default function BlockNavigationList( {
 				const itemProps = {
 					block,
 					isSelected,
-					onClick: () => onItemClick( block.clientId )
+					onClick: () => selectBlock( block.clientId ),
 				};
+				const defaultListItem = <ListItem { ...itemProps } />;
 				return (
 					<li key={ block.clientId }>
-						<ListItemSlot blockId={ block.clientId }>
-							{ ( fills ) => fills.length
-								? Children.map( fills, fill => cloneElement( fill, itemProps ) )
-								: ( <ListItem { ...itemProps } key="item1" /> ) }
-						</ListItemSlot>
+						{ withSlots ? (
+							<ListItemSlot blockId={ block.clientId }>
+								{ ( fills ) =>
+									fills.length
+										? Children.map( fills, ( fill ) =>
+												cloneElement( fill, {
+													...itemProps,
+													...fill.props,
+												} )
+										  )
+										: defaultListItem
+								}
+							</ListItemSlot>
+						) : (
+							defaultListItem
+						) }
 
 						{ showNestedBlocks &&
 							!! block.innerBlocks &&
@@ -62,7 +79,8 @@ export default function BlockNavigationList( {
 									selectedBlockClientId={
 										selectedBlockClientId
 									}
-									onItemClick={ onItemClick }
+									withSlots={ withSlots }
+									selectBlock={ selectBlock }
 									parentBlockClientId={ block.clientId }
 									showAppender={ showAppender }
 									showNestedBlocks
@@ -87,5 +105,6 @@ export default function BlockNavigationList( {
 }
 
 BlockNavigationList.defaultProps = {
-	onItemClick: () => {}
+	selectBlock: () => {},
+	withSlots: true,
 };
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -17,7 +17,7 @@ export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export {
 	default as __experimentalBlockNavigationList,
-	ListItemFill as __experimentalBlockNavigationListItemFill
+	ListItemFill as __experimentalBlockNavigationListItemFill,
 } from './block-navigation/list';
 export { default as __experimentalBlockNavigationListItem } from './block-navigation/list-item';
 export { default as __experimentalBlockVariationPicker } from './block-variation-picker';

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -33,7 +33,13 @@ import {
 	__experimentalBlockNavigationListItem as BlockNavigationListItem,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP } from '@wordpress/url';
-import { Fragment, useState, useEffect, useRef, cloneElement } from '@wordpress/element';
+import {
+	Fragment,
+	useState,
+	useEffect,
+	useRef,
+	cloneElement,
+} from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
 import { link as linkIcon } from '@wordpress/icons';
 
@@ -42,6 +48,8 @@ import { link as linkIcon } from '@wordpress/icons';
  */
 import { ToolbarSubmenuIcon, ItemSubmenuIcon } from './icons';
 
+const noop = () => {};
+
 function NavigationLinkEdit( {
 	attributes,
 	clientId,
@@ -216,8 +224,11 @@ function NavigationLinkEdit( {
 				</PanelBody>
 			</InspectorControls>
 			<BlockNavigationListItemFill blockId={ clientId }>
-				<BlockNavigationListItem wrapperComponent="div">
-					{editField}
+				<BlockNavigationListItem
+					wrapperComponent="div"
+					onClick={ noop }
+				>
+					{ editField }
 				</BlockNavigationListItem>
 			</BlockNavigationListItemFill>
 			<Block.li

diff --git a/packages/block-library/src/navigation/block-navigation-list.js b/packages/block-library/src/navigation/block-navigation-list.js
@@ -4,7 +4,7 @@
 import { __experimentalBlockNavigationList } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 
-export default function BlockNavigationList( { clientId } ) {
+export default function BlockNavigationList( { clientId, withSlots } ) {
 	const { block, selectedBlockClientId } = useSelect(
 		( select ) => {
 			const { getSelectedBlockClientId, getBlock } = select(
@@ -25,7 +25,8 @@ export default function BlockNavigationList( { clientId } ) {
 		<__experimentalBlockNavigationList
 			blocks={ [ block ] }
 			selectedBlockClientId={ selectedBlockClientId }
-			onItemClick={ selectBlock }
+			selectBlock={ selectBlock }
+			withSlots={ withSlots }
 			showNestedBlocks
 			showAppender
 		/>

diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js
@@ -46,4 +46,3 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 		</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
@@ -5,10 +5,7 @@ import { __experimentalBlockNavigationList } from '@wordpress/block-editor';
 import { Panel, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function NavigationStructurePanel( {
-	blocks,
-	initialOpen,
-} ) {
+export default function NavigationStructurePanel( { blocks, initialOpen } ) {
 	return (
 		<Panel className="edit-navigation-menu-editor__navigation-structure-panel">
 			<PanelBody
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,7 +71,7 @@ function BlockNavigationDropdown( { isDisabled } ) { @@
     				/>
     			) }
     			renderContent={ ( { onClose } ) => (
-    				<BlockNavigation onSelect={ onClose } />
+    				<BlockNavigation onSelect={ onClose } withSlots={ false } />
     			) }
     		/>
     	);
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
Expand Up		@@ -46,4 +46,3 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
		</div>
		);
		}